Musketeers.me

Responsive Development

Kevin Bruce of Musketeers.me

2Musketeers.me

Who Am I?

DesignerDeveloper

3Musketeers.me

Where I Work

Musketeers.me

THE Question:Is a responsive site the best

way to go for my site?

5Musketeers.me

Options

Full Responsive Site Dedicated Mobile Site

Native Application

Musketeers.me

6Musketeers.me

Full Responsive Site

Benefits

• One Codebase

• Same html file serves all devices

Drawbacks

• Not completely tailored to any device

• Unless you have a process in place, it can take as much time to write as a separate mobile site

Musketeers.me

7Musketeers.me

Dedicated Mobile Site

Benefits

• Cater to mobile content needs like Location and contact info

• Can concentrate on touch-based UI

Drawbacks

• Completely separate codebase and content to maintain

• Studies have shown that a separate “paired-down” site pisses people off.

Musketeers.me

8Musketeers.me

Native Mobile App

Benefits

• Native access to device hardware

• Interface is more responsive

Drawbacks

• Development cost is high to write and maintain

• At least two mobile Operating Systems to write for

9Musketeers.me

My Own Personal Decision-Makers

Responsive Site

• Information Website

• Light Interactive Website

Dedicated Mobile Site

• Shopping Cart

• Login-Based Website

Native Application

• Full Web Application

• Giant Shopping Cart

Musketeers.me

Responsive Design

11Musketeers.me

In a Nutshell

flexible grid layouts that respond to the size of your browser window (viewport).

12Musketeers.me

Flexible Grid is the Key to Responsive Design

A flexible grid is made up of fluid columns and rows that use ems and percentages for setting

width, height, font-size, image and media sizes.

13Musketeers.me

Media Queries

Media Queries are a CSS3 feature that was introduced into the modern browser. It is a series of “break points” based on your browser window (or “viewport”) size.

Your browser only uses the styles within the breakpoint that matches your viewport size. Of course, it also uses styles outside of any breakpoints as well.

14Musketeers.me

Media Queries

1. Use the @import rule to import styles from other style sheets:

<div id=”google_whitespace” style=”@import url(style600min.css) screen and (min-width: 600px);”></div>

15Musketeers.me

Media Queries

2. Put media queries directly in the style sheet. This is the most common approach. @media screen and (min-width: 400px) and (orientation: portrait) {                #nav li {                    float: right;                }        }@media screen and (min-width: 800px) {             #nav li {                 float: left;  } }

16Musketeers.me

Media Queries

3. Include a query in a linked style sheet’s media attribute:

<link rel="stylesheet"  type="text/css"  media="screen and (max-device-width: 800px)" href="style800.css" />

17Musketeers.me

Mobile First

Depending on who you talk to, mobile-first is the way to go.

Design for mobile, serve the mobile breakpoints first and then progressively enhance from there for larger viewports.

Use “min-width” breakpoints so the larger screens inherit styles from the smaller viewport break points, in effect, cascading up.

body { … }

mobile

tablet

desktop

@media only screen and (min-width: 200px)

@media only screen and (min-width: 1020px)

@media only screen and (min-width: 1450px)

style.css

18Musketeers.me

Mobile Content First

The important take-away from mobile-first is “content-first.”

Distill your message down to the essentials!

Start with the content you would show in your mobile view and add in the Design cruff from there.

Also, write semantic markup!

Musketeers.me

Responsive Development

20Musketeers.me

Server side is an alternate, powerful tool to help support your responsive front end strategy.

User Agent Detection can tell you if a device is using a mobile browser, as well as “The IE.”

Server Side Help

21Musketeers.me

Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by:

• Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips.

Server Side Help

22Musketeers.me

Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by:

• Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips.

• Server touch-based javascript for touch devices and omit unneeded code.

Server Side Help

23Musketeers.me

Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by:

• Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips.

• Server touch-based javascript for touch devices and omit unneeded code.

• Embed images with Data URIs for mobile (http://css-tricks.com/data-uris/).

Server Side Help

24Musketeers.me

Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by:

• Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips.

• Server touch-based javascript for touch devices and omit unneeded code.

• Embed images with Data URIs for mobile (http://css-tricks.com/data-uris/).

• Serve correctly sized images for the device.

Server Side Help

Musketeers.me

The IE

26Musketeers.me

• IE 6: it sucks, but government still has a lot of internal systems that only work on it, so…

• IE 7: Sucks less, but few rely on it for internal systems (see IE 6)

• IE 8: really a step in the right direction, but it doesn’t support media queries or html5… and many CSS3 features.

• IE 9: This is the big improvement! Standards compliant… sort of (it’s all relative, isn’t it?). HTML5, media queries- all good!

• IE 10: reported to be awesome with web standards (really!)… and sooo many people don’t have it yet.

State of IEEEEEEE

27Musketeers.me

IE 8 and below can usually be taught html5 and media queries with the help of a couple of javascripts:

1. Modernizer.js teaches pre-HTML5 browsers to see the new HTML5 tags as block elements.(http://modernizr.com)

2. Respond.js teaches IE what media queries are and how to use them.(https://github.com/scottjehl/Respond)

IE retrofits

Musketeers.me

What can we do with a mobile device?

29Musketeers.me

Hardware We Can Access Varies

30Musketeers.me

HTML5 standards opened up access to much of device hardware. And more and broader support is coming.

• Solid support for the accelerometer and GPS in both iOS and Android.

• Access to the GPU (WebGL) and audio hardware (Web Audio API).

• Access to the camera (HTML Media Capture) is a very new feature and has full support in Android 3.0 and limited support in iOS6 Safari and Chrome.

Hardware We Can Access Varies

31Musketeers.me

Facebook’s stint with an html5 app was universally panned. The roars of applause were deafening when the native app was released.

So… no, you shouldn’t try to imitate a native app with responsive design. You will most likely fail.

Are we there yet?

32Musketeers.me

The one thing Facebook did accomplish was the responsive site was a good test case. Responsive Design is good prototype for the native app.

…provided you don’t drive them away in the process.

Slap “Beta” on it!

However…

33Musketeers.me

MOBILE-FIRSThttp://www.html5rocks.com/en/mobile/responsivedesign/

A NON-RESPONSIVE APPROACH TO BUILDING CROSS-DEVICE WEBAPPShttp://www.html5rocks.com/en/mobile/cross-device/

CAPTURING AUDIO & VIDEO IN HTML5http://www.html5rocks.com/en/tutorials/getusermedia/intro/

CREATING A MOBILE-FIRST RESPONSIVE WEB DESIGNhttp://www.html5rocks.com/en/mobile/responsivedesign/

CONDITIONAL LOADING FOR RESPONSIVE DESIGNhttp://24ways.org/2011/conditional-loading-for-responsive-designs

Good Resources

34Musketeers.me

Thank You

Personal Site:kevinbruce.com

musketeers.meProfessional Site:

neutralgood.netBlog:

@kevinbruceTwitter:

https://joind.in/6866Rate me: