Responsive Web Design - NYC Webgrrls


Published on

Presentation given to NYC Webgrrls on March 11, 2013

Published in: Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • It’s a set of techniques, not a magic bullet; still a work in progress, no setbest practices
  • You can't assume know how people will be viewing.
  • Separate mobile site - don't get content
  • It’s not just computer or phone now.
  • Also show live example, changing Starbuck site
  • New, most web designers still learning
  • Also show live example, changing Starbuck site
  • It’s possible that there are things in your current design that don’t need to be in any responsive configuration, because they really aren’t useful to the user.
  • Not finished
  • Go to sites and walk through?
  • Best practices are still in flux, place to watch(Not finished this page…)
  • Just fun side note
  • Just fun side note
  • Think more about this!
  • Responsive Web Design - NYC Webgrrls

    1. 1. Responsive Web DesignWebgrrls Discussion TopicMarch 11, 2013By Amélie WalkerCastle Builder
    2. 2. What is Responsive Design?
    3. 3. Responsive Design is:
    4. 4. Responsive Design is: Flexible
    5. 5. Responsive Design is: Flexible – Margin and image sizes change with width
    6. 6. Responsive Design is: Flexible – Margin and image sizes change with width Adjustable
    7. 7. Responsive Design is: Flexible – Margin and image sizes change with width Adjustable – Layout changes changes with width
    8. 8. Responsive Design is not:
    9. 9. Responsive Design is not: Magic
    10. 10. Responsive Design…Responsive web design is 1a set of techniques thatallows website designers tocreate a single version ofa website that willseamlessly adapt tophones, tablets, laptopsand desktop computers. flexible, adjustable version
    11. 11. Photo by Jeremy Keith, Wikimedia Commons
    12. 12. The Old WayMain Website Mobile Website
    13. 13. The Old WayMain Website Mobile Website
    14. 14. The Old Way = Problems Reduced information on mobile version Two separate websites to update What about other devices?
    15. 15. The New Way
    16. 16. The New Way
    17. 17. Navigation
    18. 18. What happens? Logos change size and/or format Menus consolidate or collapse completely Sections reorder, right column often goes to bottom Less important items disappear
    19. 19. Examples Boston Globe Emeril’s Restaurant Microsoft Starbucks United Pixel Workers World Wildlife Fund
    20. 20. Sign Me Up! Not so fast…If you already have a website, it might be expensive torebuild your website to be responsive. Is it worth it?YES if… You have a significant mobile audience.MAYBE NOT if… You already have a great mobile site, or You have a very small mobile audience.
    21. 21. Know Your AudienceGoogle best free tool to measure yourwebsite traffic and moreAudience > Mobile > Overview About 25% use this site on mobile.
    22. 22. Broken on Mobile If you can’t make it responsive, at least make sure it works. Zooming inexpands menu only, covers content
    23. 23. Pros Less expensive to maintain Consistent on all devices Just one URL Improved social sharing Improved SEO (and Google recommends it!)
    24. 24. Google recommends using responsive web design because it hasmany good aspects:• Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Googles algorithms assign the indexing properties for the content.• No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your sites user experience.• It saves resources for both your site and Googles crawlers. For responsive web design pages, any Googlebot user agent needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the sites contents and keep it appropriately fresh.See “Building Smartphone-Optimized Websites” by Google.
    25. 25. Cons More time consuming to create Involves more testing Not ideal for e-commerce Slower load time Not all devices recognize media queries
    26. 26. Responsive Out-of-the-BoxWordpressMany themes are now responsive, including Twenty Twelve,the latest default Wordpress theme.Search for “responsive” at…Self-hosted:
    27. 27. Wordpress: Twenty Twelve Theme
    28. 28. Or…Hire a web designer.
    29. 29. “I am the designer!How do I do this?”
    30. 30. Designing a responsive websiteMethod 1: Mobile First1. Start with minimum amount of content and navigation.2. Focus on core content.3. Add slowly, considering each piece.4. Progressively enhance for larger screen sizes.
    31. 31. Designing a responsive websiteMethod 2: Scaling Down1. Start with desktop version.2. Decide what is less important or can be consolidated.3. Reflow or collapse existing content.4. Move non-essentials to bottom or remove.
    32. 32. The IngredientsFluid gridsFlexible imagesMedia queries
    33. 33. Fluid Grids: Grids That Respond Change container widths Change margins Example: WP 2012 Theme Change layout Disable floats to stack content, as we’ve seen in examples (, etc.). Remove/add content...
    34. 34. Fluid Grids: Remove/Add ContentHide Content Load ConditionallyUse CSS to hide sections when Use javascript to load contentscreen size is small. only if screen is wider than certain size. Content still loads, even  Improves load time on when hidden. mobile.
    35. 35. Fluid Grids: Creating GridsResources for creating grids (online) (downloadable) (downloadable)Build a grid for each breakpoint.
    36. 36. Fluid Grids: Basic Layout Break
    37. 37. Fluid Grids: Example/DownloadProportional Grids
    38. 38. Responsive Images Resize images with css One image, resized, no change in file size Serve different versions of images Save on load time www.adaptive-images.comFurther reading: Which Responsive Images Solution ShouldYou Use?
    39. 39. HTML Special CharactersHTML entities that can replacesimple graphics, scale nicely ★ ★ ☆ ☆ ♥ ♥ Stars great for ratings: ♣ ♣ ← ← ★★★★☆ ↑ ↑ → → ↓ ↓
    40. 40. HTML Special CharactersHTML entities that can replacesimple graphics, scale nicely ★ ★ ♣ ☆ ☆ ♥ ♥ ♣ ♣ ← ← ↑ ↑ → → ↓ ↓
    41. 41. Media QueriesComponents of a media query: Media type Query (feature to inspect) Target valuescreen and (max-device-width: 480px)
    42. 42. Media QueriesLoad external stylesheets:<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=”smallscreens.css”><link rel="stylesheet" type="text/css" media="screen and (min-device-width: 960px)" href=”largescreens.css”>
    43. 43. Media QueriesInclude in CSS as part of @media rule:@media screen and (max-device-width: 480px) { .sidebar { float: none; }}
    44. 44. Media QueriesImport at top of css:@import url(”smallscreens.css") screen and (max-device-width:480px);@import url(”largescreens.css") screen and (min-device-width:960px); Import can slow down page load, not recommended.
    45. 45. Media Query SupportAll modern browsers support media queries. Chrome 1+ Firefox 3.5+ Internet Explorer 9+ Safari 4+
    46. 46. Oh, Internet Explorer…Option #1:Use javascript to help along old browsers ≤ IE8. Respond.js css3-mediaqueries.js Adapt.js
    47. 47. Oh, Internet Explorer…Option #2:Use conditional code to load stylesheet for IE less than 9.<!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" type="text/css" href=”IE.css" /><![endif]--> Only solves problem in certain situations.
    48. 48. Tools for Building ResponsivelyDownloadable ToolkitsFront-end frameworks for creating responsive websites Foundation: Bootstrap:
    49. 49.• Getting Started• Online & Downloadable Tools Tweet Amélie @castlebuilder• Examples• Further Reading