Download - 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