SlideShare a Scribd company logo

Responsive Web Design - NYC Webgrrls

•
•
Amelie Walker-Yung
Amelie Walker-Yung

Responsive web design allows website designers to create a single version of a website that seamlessly adapts to different screen sizes like phones, tablets, laptops and desktops. It is flexible and adjustable through techniques like fluid grids, flexible images, and media queries. In contrast to separate mobile and desktop sites, responsive design provides a better user experience across devices with fewer maintenance issues.

Related slideshows

How the BBC Make Web sites
How the BBC Make Web sitesHow the BBC Make Web sites
How the BBC Make Web sites
 
Styling WooCommerce
Styling WooCommerceStyling WooCommerce
Styling WooCommerce
 
CV Alan Brady 2015
CV Alan Brady 2015CV Alan Brady 2015
CV Alan Brady 2015
 
1 of 50
Responsive Web Design Webgrrls Discussion Topic March 11, 2013 By Amélie Walker Castle Builder Design www.castlebuilder.com
What is Responsive Design?
Responsive Design is:
Responsive Design is:  Flexible
Responsive Design is:  Flexible – Margin and image sizes change with width
Responsive Design is:  Flexible – Margin and image sizes change with width  Adjustable
Responsive Design is:  Flexible – Margin and image sizes change with width  Adjustable – Layout changes changes with width
Responsive Design is not:
Responsive Design is not: Magic
Responsive Design… Responsive web design is 1 a set of techniques that allows website designers to create a single version of a website that will seamlessly adapt to phones, tablets, laptops and desktop computers. flexible, adjustable version
Photo by Jeremy Keith, Wikimedia Commons
The Old Way Main Website Mobile Website
The Old Way Main Website Mobile Website
The Old Way = Problems  Reduced information on mobile version  Two separate websites to update  What about other devices?
The New Way
The New Way
Navigation
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
Examples  Boston Globe  Emeril’s Restaurant  Microsoft  Starbucks  United Pixel Workers  World Wildlife Fund
Sign Me Up! Not so fast… If you already have a website, it might be expensive to rebuild 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.
Know Your Audience Google Analytics www.google.com/analytics The best free tool to measure your website traffic and more Audience > Mobile > Overview About 25% use this site on mobile.
Broken on Mobile If you can’t make it responsive, at least make sure it works. Zooming in expands menu only, covers content
Pros  Less expensive to maintain  Consistent on all devices  Just one URL  Improved social sharing  Improved SEO (and Google recommends it!)
Google recommends using responsive web design because it has many 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 Google's 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 site's user experience. • It saves resources for both your site and Google's 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 site's contents and keep it appropriately fresh. See “Building Smartphone-Optimized Websites” by Google.
Cons  More time consuming to create  Involves more testing  Not ideal for e-commerce  Slower load time  Not all devices recognize media queries
Responsive Web Design - NYC Webgrrls
Responsive Out-of-the-Box Wordpress Many themes are now responsive, including Twenty Twelve, the latest default Wordpress theme. Search for “responsive” at… Self-hosted: wordpress.org/extend/themes Wordpress.com: theme.wordpress.com
Wordpress: Twenty Twelve Theme
Or… Hire a web designer.
“I am the designer! How do I do this?”
Designing a responsive website Method 1: Mobile First 1. 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.
Designing a responsive website Method 2: Scaling Down 1. 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.
The Ingredients Fluid grids Flexible images Media queries
Fluid Grids: Grids That Respond  Change container widths host.sonspring.com/yui3_grid  Change margins Example: WP 2012 Theme  Change layout Disable floats to stack content, as we’ve seen in examples (www.starbucks.com, etc.).  Remove/add content...
Fluid Grids: Remove/Add Content Hide Content Load Conditionally Use CSS to hide sections when Use javascript to load content screen size is small. only if screen is wider than certain size.  Content still loads, even  Improves load time on when hidden. mobile.
Fluid Grids: Creating Grids Resources for creating grids  grids.heroku.com (online)  www.960.gs (downloadable)  thesquaregrid.com (downloadable) Build a grid for each breakpoint.
Fluid Grids: Basic Layout Break
Fluid Grids: Example/Download Proportional Grids  builtbyboon.com/blog/proportional-grids
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.com Further reading: Which Responsive Images Solution Should You Use?
HTML Special Characters HTML entities that can replace simple graphics, scale nicely ★ ★ ☆ ☆ ♥ ♥ Stars great for ratings: ♣ ♣ ← ← ★★★★☆ ↑ ↑ → → ↓ ↓
HTML Special Characters HTML entities that can replace simple graphics, scale nicely ★ ★ ♣ ☆ ☆ ♥ ♥ ♣ ♣ ← ← ↑ ↑ → → ↓ ↓
Media Queries Components of a media query:  Media type  Query (feature to inspect)  Target value screen and (max-device-width: 480px)
Media Queries Load 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”>
Media Queries Include in CSS as part of @media rule: @media screen and (max-device-width: 480px) { .sidebar { float: none; } }
Media Queries Import 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.
Media Query Support All modern browsers support media queries.  Chrome 1+  Firefox 3.5+  Internet Explorer 9+  Safari 4+
Oh, Internet Explorer… Option #1: Use javascript to help along old browsers ≤ IE8.  Respond.js  css3-mediaqueries.js  Adapt.js
Oh, Internet Explorer… Option #2: Use conditional code to load stylesheet for IE less than 9.  Only solves problem in certain situations.
Tools for Building Responsively Downloadable Toolkits Front-end frameworks for creating responsive websites  Foundation: foundation.zurb.com  Bootstrap: twitter.github.com/bootstrap
Resources www.castlebuilder.com/blog/responsive-design • Getting Started • Online & Downloadable Tools Tweet Amélie @castlebuilder • Examples • Further Reading

More Related Content

Responsive Web Design - NYC Webgrrls

  • 1. Responsive Web Design Webgrrls Discussion Topic March 11, 2013 By Amélie Walker Castle Builder Design www.castlebuilder.com
  • 5. Responsive Design is:  Flexible – Margin and image sizes change with width
  • 6. Responsive Design is:  Flexible – Margin and image sizes change with width  Adjustable
  • 7. Responsive Design is:  Flexible – Margin and image sizes change with width  Adjustable – Layout changes changes with width
  • 9. Responsive Design is not: Magic
  • 10. Responsive Design… Responsive web design is 1 a set of techniques that allows website designers to create a single version of a website that will seamlessly adapt to phones, tablets, laptops and desktop computers. flexible, adjustable version
  • 11. Photo by Jeremy Keith, Wikimedia Commons
  • 12. The Old Way Main Website Mobile Website
  • 13. The Old Way Main Website Mobile Website
  • 14. The Old Way = Problems  Reduced information on mobile version  Two separate websites to update  What about other devices?
  • 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. Examples  Boston Globe  Emeril’s Restaurant  Microsoft  Starbucks  United Pixel Workers  World Wildlife Fund
  • 20. Sign Me Up! Not so fast… If you already have a website, it might be expensive to rebuild 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. Know Your Audience Google Analytics www.google.com/analytics The best free tool to measure your website traffic and more Audience > Mobile > Overview About 25% use this site on mobile.
  • 22. Broken on Mobile If you can’t make it responsive, at least make sure it works. Zooming in expands menu only, covers content
  • 23. Pros  Less expensive to maintain  Consistent on all devices  Just one URL  Improved social sharing  Improved SEO (and Google recommends it!)
  • 24. Google recommends using responsive web design because it has many 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 Google's 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 site's user experience. • It saves resources for both your site and Google's 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 site's contents and keep it appropriately fresh. See “Building Smartphone-Optimized Websites” by Google.
  • 25. Cons  More time consuming to create  Involves more testing  Not ideal for e-commerce  Slower load time  Not all devices recognize media queries
  • 27. Responsive Out-of-the-Box Wordpress Many themes are now responsive, including Twenty Twelve, the latest default Wordpress theme. Search for “responsive” at… Self-hosted: wordpress.org/extend/themes Wordpress.com: theme.wordpress.com
  • 29. Or… Hire a web designer.
  • 30. “I am the designer! How do I do this?”
  • 31. Designing a responsive website Method 1: Mobile First 1. 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.
  • 32. Designing a responsive website Method 2: Scaling Down 1. 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.
  • 34. Fluid Grids: Grids That Respond  Change container widths host.sonspring.com/yui3_grid  Change margins Example: WP 2012 Theme  Change layout Disable floats to stack content, as we’ve seen in examples (www.starbucks.com, etc.).  Remove/add content...
  • 35. Fluid Grids: Remove/Add Content Hide Content Load Conditionally Use CSS to hide sections when Use javascript to load content screen size is small. only if screen is wider than certain size.  Content still loads, even  Improves load time on when hidden. mobile.
  • 36. Fluid Grids: Creating Grids Resources for creating grids  grids.heroku.com (online)  www.960.gs (downloadable)  thesquaregrid.com (downloadable) Build a grid for each breakpoint.
  • 37. Fluid Grids: Basic Layout Break
  • 38. Fluid Grids: Example/Download Proportional Grids  builtbyboon.com/blog/proportional-grids
  • 39. 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.com Further reading: Which Responsive Images Solution Should You Use?
  • 40. HTML Special Characters HTML entities that can replace simple graphics, scale nicely ★ &#9733; ☆ &#9734; ♥ &#9829; Stars great for ratings: ♣ &#9827; ← &#8592; ★★★★☆ ↑ &#8593; → &#8594; ↓ &#8595;
  • 41. HTML Special Characters HTML entities that can replace simple graphics, scale nicely ★ &#9733; ♣ ☆ &#9734; ♥ &#9829; ♣ &#9827; ← &#8592; ↑ &#8593; → &#8594; ↓ &#8595;
  • 42. Media Queries Components of a media query:  Media type  Query (feature to inspect)  Target value screen and (max-device-width: 480px)
  • 43. Media Queries Load 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”>
  • 44. Media Queries Include in CSS as part of @media rule: @media screen and (max-device-width: 480px) { .sidebar { float: none; } }
  • 45. Media Queries Import 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.
  • 46. Media Query Support All modern browsers support media queries.  Chrome 1+  Firefox 3.5+  Internet Explorer 9+  Safari 4+
  • 47. Oh, Internet Explorer… Option #1: Use javascript to help along old browsers ≤ IE8.  Respond.js  css3-mediaqueries.js  Adapt.js
  • 48. 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.
  • 49. Tools for Building Responsively Downloadable Toolkits Front-end frameworks for creating responsive websites  Foundation: foundation.zurb.com  Bootstrap: twitter.github.com/bootstrap
  • 50. Resources www.castlebuilder.com/blog/responsive-design • Getting Started • Online & Downloadable Tools Tweet Amélie @castlebuilder • Examples • Further Reading

Editor's Notes

  1. It’s a set of techniques, not a magic bullet; still a work in progress, no setbest practices
  2. You can&apos;t assume know how people will be viewing.
  3. Separate mobile site - don&apos;t get content
  4. It’s not just computer or phone now.
  5. Also show live example, changing Starbuck site
  6. New, most web designers still learning
  7. Also show live example, changing Starbuck site
  8. 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.
  9. Not finished
  10. Go to sites and walk through?
  11. Best practices are still in flux, place to watch(Not finished this page…)
  12. Just fun side note
  13. Just fun side note
  14. Think more about this!