Responsive design

RESPONSIVE DESIGN

Brandon SullivanWeber Shandwick | Minneapolis

WHAT IS RESPONSIVE DESIGN?

GEEK SPEAK WARNING: A design intended to adapt to multiple layout formats with the intention to empower the user at their selected device

• Allows you to reach all devices through a single URL

• Removes the need for separate mobile sites (ex. m.facebook.com, m.engadget.com)

• Updates to a site can be made in one place

• Provides a more consistent user experience across all devices

MAKING A CASE FOR MOBILE WEB ON ALL DEVICES

MAKING A CASE FOR MOBILE WEB ON ALL DEVICES

MAKING A CASE FOR MOBILE WEB ON ALL DEVICES• The projected demand for tablets by the end of 2012

~100 million devices

• Tablets are accelerating the adoption of the mobile internet

• Tablet users are spending less time on existing PCs – down 20% since 2008

• Heavy mobile data users are projected to triple to 1 billion by 2013

MAKING A CASE FOR MOBILE WEB ON ALL DEVICES• Smartphone web users have increased 45% since 2010

• The number of 3G subscriber base grew 35% year-on-year

• By the end of 2011, smartphone sales have surpassed worldwide PC sales

MAKING A CASE FOR MOBILE WEB ON ALL DEVICES• We are no longer talking about growth in years but in

quarters

• Hard to keep up

• Smartphones better, faster, and smarter and more users

• Still an exercise of patience

• Browsing full web sites on mobile is a pain• Sites are generally too heavy to download to mobile

BIG DEAL. IS IT REALLY THAT IMPORTANT?

371K babies are born each day

378K iPhones are sold across the world each day

NO, REALLY. IT IS.

• ~562k iOS devices sold per day (iPhone, iPad and iPod touch)

• iOS, Android, Nokia, Blackberry total: 1.45 million new devices every day

LOTS OF DEVICES.

WHO ARE THESE USERS?

WHAT ARE THEY DOING ON THE MOBILE WEB?

Assumptions

• Users are distracted• Users are hurried

KEYWORD: CONTEXT

Know your audience

• Significant amount of casual mobile users

• Staples: • 35% of tablet users use in the bathroom• 78% of tablet users use in bed

KEYWORD: CONTEXT

Cost

• Mobile app development is expensive• Managing multiple versions of sites is expensive.

(ex. m.facebook.com, m.engadget.com)

• Responsive web development is far less expensive.• Most cost goes into planning instead of development• Sites built to web standards already support a responsive

workflow• Content only needs to be updated on one spot instead of

across platforms (apps and mobile sites)

SO WHY RESPONSIVE DESIGN?

The experience

• Full sites on mobile are clunky

• Optimizing the content for the device

SO WHY RESPONSIVE DESIGN?

VS

GET STARTED1. Mobile First

• “How does this content or feature benefit the mobile user?” • Focus on core features and content

• Enrich desktop experience by providing focus• Progressive enhancement, not punishing the lowest common

denominator(think base model car vs. full outfit)

2. The responsive waterfall approach

• planning, design, development, delivery• Desktop design mockups, wireframes, and style guides can

inform beautifully

3. The process should be iterative & collaborative.

• Designers and developers come together!• Display can be refined for mobile during development to enhance

the user experience

DESIGN1. Start with your

desktop design

DESIGN1. Start with your

desktop design

2. Work in some mobile wireframes

DESIGN1. Start with your

desktop design

2. Work in some mobile wireframes

3. Collaborate on final solutions

NOW LET’S TALK CODE

5 ELEMENTS TO MAKING RWD WORK1. Clean, semantic code structure

2. Pixels % and ems

3. The magic equation: Target ÷ context = result

4. Setting the right<meta> tags

5. Media queries

SEMANTIC CODE STRUCTURE

What the layout looks like How the code lays out

Use CSS to position elements visually. Use HTML to position them semantically

% VS EMS: WHEN TO USE WHICH

Use % for:

- Layouts

- Boxes- Box padding- Box margin

Use ems for:

- Text and flowing content

- Font-size- Line-height (leading)- Content padding- Content margin

- Horizontally oriented - Vertically oriented

THE EQUATION

Target ÷ context = result

- Weans you off that pixel habit

- May result in long ugly numbers (ex. 0.4583333333333em)

- Browsers convert to local pixel value- For total accuracy, round numbers with caution- More information = better result- That precision > dramatically less layout-based bugs in browser

testing

Example: http://staging.thefutureiselectric.com/

Browsers have defaults, and it sucks.

When resetting your browser defaults using a CSS Reset, include:

body { font-size:100%; }

• Sets the browser default font size at 16px

• 1em = 16px

• All em calculations are relative

FONTS: SETTING A BASELINE

24px font size in your PSD?

Target ÷ context = result

24 ÷ 16 = 1.5

Font-size: 1.5em

FONTS: CONVERTING FROM DESIGN FILES

11px font size in your PSD?

Target ÷ context = result

11 ÷ 16 = 0.4583333333333

Font-size: 0.45833em

FONTS: CONVERTING FROM DESIGN FILES

LAYOUT

Target ÷ context = result

width of element ÷ width of container = percentage value

- Include margins and paddings in your calculations!

- Be wary of the context

http://elsullivano.com/etc/RWD/GM_example.pdf

img, embed, object, video { max-width: 100%; }

Item can only be as wide as its container.

Good for all browsers back to IE7.

(For IE6 support, read Ch. 3 of RWD by Ethan Marcotte)

How do you mean?

FLEXIBLE IMAGES

FLEXIBLE IMAGES

<article>

<figure>

<img>

</figure>

<div class=“content”></div>

</article>

article { width:100%; }figure {

float: left;margin-right: 2%;padding: 2.5%;width: 20%;

}

img { max-width: 100%;

}.content {

width: 77%; }

MEDIA QUERIES: SET UP

Mobile browsers

- Fit the whole page onscreen (960px scaled to 320px)

- Use this in the <head> to set it to a 1:1 scale

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

This activates what we’ll use for our media queries.

THE QUERY

@media screen and (max-width: 768px) {

/* your styles here */

}

- Styles everything from iPad width and smaller.

- Include queries at the end of your main stylesheet.

- Longer, but with less calls to the server (money saver!)- Style only what changes in the query (put the cascade back in CSS)

POPULAR RESPONSIVE DESIGN LAYOUTS

Mostly Fluid Column Drop

POPULAR RESPONSIVE DESIGN LAYOUTS

Layout Shifter Off Canvas

RESOURCESFluid Grid Calculator

http://csswizardry.com/fluid-grids/

Media Queries Debugger

http://johanbrook.com/design/css/debugging-css-media-queries/

Books

Responsive Web Design, by Ethan Marcotte

Mobile First, by Luke W

Sketching/wireframes

http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

RWD testing

http://mattkersley.com/responsive/

Frameworks/boilerplates

http://getskeleton.com/

http://semantic.gs/

http://goldilocksapproach.com/

http://stuffandnonsense.co.uk/projects/320andup/

Font size conversion

http://fittextjs.com/

@RWD

@lukew