Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESPONSIVEDESIGNBrandon SullivanWeber Shandwick | Minneapolis
WHAT IS RESPONSIVEDESIGN?GEEK SPEAK WARNING: A design intended to adapt to multiplelayout formats with the intention to em...
MAKING A CASE FOR MOBILEWEB ON ALL DEVICES
MAKING A CASE FOR MOBILEWEB ON ALL DEVICES
MAKING A CASE FOR MOBILEWEB ON ALL DEVICES• The projected demand for tablets by the end of 2012                ~100 millio...
MAKING A CASE FOR MOBILEWEB ON ALL DEVICES• Smartphone web users have increased 45% since 2010• The number of 3G subscribe...
MAKING A CASE FOR MOBILEWEB ON ALL DEVICES• We are no longer talking about growth in years but in quarters• Hard to keep u...
BIG DEAL.IS IT REALLY THAT IMPORTANT?
NO, REALLY. IT IS.371K babies are born each day378K iPhones are sold across the world each day
LOTS OF DEVICES.• ~562k iOS devices sold per day (iPhone, iPad and iPod touch)• iOS, Android, Nokia, Blackberry total: 1.4...
WHO ARE THESE USERS?WHAT ARE THEY DOING ONTHE MOBILE WEB?
KEYWORD: CONTEXTAssumptions  • Users are distracted  • Users are hurried
KEYWORD: CONTEXTKnow your audience   • Significant amount of casual mobile users   • Staples:        •   35% of tablet use...
SO WHY RESPONSIVE DESIGN?Cost   • Mobile app development is expensive   • Managing multiple versions of sites is expensive...
SO WHY RESPONSIVE DESIGN?The experience   • Full sites on mobile are     clunky   • Optimizing the content     for the dev...
GET STARTED1.   Mobile First     •   “How does this content or feature benefit the mobile user?”     •   Focus on core fea...
DESIGN1. Start with your   desktop design
DESIGN1. Start with your   desktop design2. Work in some   mobile wireframes
DESIGN1. Start with your   desktop design2. Work in some   mobile wireframes3. Collaborate on   final solutions
NOW LET’STALK CODE
5 ELEMENTS TO MAKINGRWD WORK1. Clean, semantic code structure2. Pixels % and ems3. The magic equation:       Target ÷ cont...
SEMANTIC CODE STRUCTURE        What the layout looks like          How the code lays outUse CSS to position elements visua...
% VS EMS:WHEN TO USE WHICHUse % for:                       Use ems for:-       Layouts                  -   Text and flowi...
THE EQUATION                        Target ÷ context = result- Weans you off that pixel habit- May result in long ugly num...
FONTS:SETTING A BASELINEBrowsers have defaults, and it sucks.When resetting your browser defaults using a CSS Reset, inclu...
FONTS:CONVERTING FROM DESIGN FILES           24px font size in your PSD?            Target ÷ context = result             ...
FONTS:CONVERTING FROM DESIGN FILES           11px font size in your PSD?            Target ÷ context = result           11...
LAYOUT                             Target ÷ context = result                width of element ÷ width of container = percen...
FLEXIBLE IMAGESimg, embed, object, video { max-width: 100%; }Item can only be as wide as its container.Good for all browse...
FLEXIBLE IMAGES<article>            <figure>                        <img>            </figure>            <div class=“cont...
MEDIA QUERIES: SET UPMobile browsers- Fit the whole page onscreen (960px scaled to 320px)- Use this in the <head> to set i...
THE QUERY@media screen and (max-width: 768px) {        /* your styles here */}- Styles everything from iPad width and smal...
POPULAR RESPONSIVEDESIGN LAYOUTSMostly Fluid   Column Drop
POPULAR RESPONSIVEDESIGN LAYOUTSLayout Shifter   Off Canvas
RESOURCESSketching/wireframes                                    Fluid Grid Calculatorhttp://jeremypalford.com/arch-journa...
Upcoming SlideShare
Loading in …5
×

Responsive design

785 views

Published on

Using elements of work by LukeW, Brad Frost and Ethan Marcotte, this is the default presentation I give to those unfamiliar with RWD

Published in: Design, Technology
  • Be the first to comment

Responsive design

  1. 1. RESPONSIVEDESIGNBrandon SullivanWeber Shandwick | Minneapolis
  2. 2. WHAT IS RESPONSIVEDESIGN?GEEK SPEAK WARNING: A design intended to adapt to multiplelayout formats with the intention to empower the user at theirselected 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
  3. 3. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES
  4. 4. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES
  5. 5. MAKING A CASE FOR MOBILEWEB 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
  6. 6. MAKING A CASE FOR MOBILEWEB 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
  7. 7. MAKING A CASE FOR MOBILEWEB 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
  8. 8. BIG DEAL.IS IT REALLY THAT IMPORTANT?
  9. 9. NO, REALLY. IT IS.371K babies are born each day378K iPhones are sold across the world each day
  10. 10. LOTS OF DEVICES.• ~562k iOS devices sold per day (iPhone, iPad and iPod touch)• iOS, Android, Nokia, Blackberry total: 1.45 million new devices every day
  11. 11. WHO ARE THESE USERS?WHAT ARE THEY DOING ONTHE MOBILE WEB?
  12. 12. KEYWORD: CONTEXTAssumptions • Users are distracted • Users are hurried
  13. 13. KEYWORD: CONTEXTKnow your audience • Significant amount of casual mobile users • Staples: • 35% of tablet users use in the bathroom • 78% of tablet users use in bed
  14. 14. SO WHY RESPONSIVE DESIGN?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)
  15. 15. SO WHY RESPONSIVE DESIGN?The experience • Full sites on mobile are clunky • Optimizing the content for the device VS
  16. 16. 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 beautifully3. The process should be iterative & collaborative. • Designers and developers come together! • Display can be refined for mobile during development to enhance the user experience
  17. 17. DESIGN1. Start with your desktop design
  18. 18. DESIGN1. Start with your desktop design2. Work in some mobile wireframes
  19. 19. DESIGN1. Start with your desktop design2. Work in some mobile wireframes3. Collaborate on final solutions
  20. 20. NOW LET’STALK CODE
  21. 21. 5 ELEMENTS TO MAKINGRWD WORK1. Clean, semantic code structure2. Pixels % and ems3. The magic equation: Target ÷ context = result4. Setting the right<meta> tags5. Media queries
  22. 22. SEMANTIC CODE STRUCTURE What the layout looks like How the code lays outUse CSS to position elements visually. Use HTML to position them semantically
  23. 23. % VS EMS:WHEN TO USE WHICHUse % for: Use ems for:- Layouts - Text and flowing content - Boxes - Font-size - Box padding - Line-height (leading) - Box margin - Content padding - Content margin - Horizontally oriented - Vertically oriented
  24. 24. 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/
  25. 25. FONTS:SETTING A BASELINEBrowsers 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
  26. 26. FONTS:CONVERTING FROM DESIGN FILES 24px font size in your PSD? Target ÷ context = result 24 ÷ 16 = 1.5 Font-size: 1.5em
  27. 27. FONTS:CONVERTING FROM DESIGN FILES 11px font size in your PSD? Target ÷ context = result 11 ÷ 16 = 0.4583333333333 Font-size: 0.45833em
  28. 28. LAYOUT Target ÷ context = result width of element ÷ width of container = percentage value- Include margins and paddings in your calculations!- Be wary of the contexthttp://elsullivano.com/etc/RWD/GM_example.pdf
  29. 29. FLEXIBLE IMAGESimg, 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?
  30. 30. FLEXIBLE IMAGES<article> <figure> <img> </figure> <div class=“content”></div></article> article { width:100%; } img { figure { max-width: 100%; float: left; } margin-right: 2%; .content { padding: 2.5%; width: 77%; width: 20%; } }
  31. 31. MEDIA QUERIES: SET UPMobile 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.
  32. 32. 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)
  33. 33. POPULAR RESPONSIVEDESIGN LAYOUTSMostly Fluid Column Drop
  34. 34. POPULAR RESPONSIVEDESIGN LAYOUTSLayout Shifter Off Canvas
  35. 35. RESOURCESSketching/wireframes Fluid Grid Calculatorhttp://jeremypalford.com/arch-journal/responsive-web- http://csswizardry.com/fluid-grids/design-sketch-sheetsRWD testing Media Queries Debuggerhttp://mattkersley.com/responsive/ http://johanbrook.com/design/css/debugging- css-media-queries/Frameworks/boilerplateshttp://getskeleton.com/ Bookshttp://semantic.gs/ Responsive Web Design, by Ethan Marcottehttp://goldilocksapproach.com/ Mobile First, by Luke Whttp://stuffandnonsense.co.uk/projects/320andup/Font size conversionhttp://fittextjs.com/@RWD@lukew

×