SlideShare a Scribd company logo

Responsive Web Design

•Download as KEY, PDF•
•
S
simonstarr

The document discusses responsive web design, which allows web pages to adapt to different screen sizes and devices. It works by using fluid layouts with percentage widths, media queries to apply different CSS styles based on screen size, and responsive images that load appropriately sized images based on the device. The document provides tips on starting with a mobile-first approach, testing pages for responsiveness, and areas that could continue to be improved such as advertising and bandwidth detection.

1 of 14
Responsive Web Design Mark Wales, Small Hadron Collider @smallhadron ·
The Challenge Create all of my projects using Responsive Web Design
What is it? • Responsive designs adapt to how they’re being viewed • Check out: http://mediaqueri.es • Generally based on width of browser window
Why use it? • A web-page is an infinite canvas • But an unpredictable viewport • Responsive designs will always look good • It’s intuitively the right way to do things
How it works • Fluid Layouts • Media Queries • Responsive Images
Fluid Layouts • Been around forever • Using % based widths • Not used on most sites
Media Queries • Browser support is pretty good • JS Polyfil available (Respond.js - on GitHub)
Media Queries • One CSS file: @media screen and (min-width: 960px) { ... } • Separate CSS files: <link rel="stylesheet" href="/960.css" media="screen and (min-width:
Where to start? • Mobile first: use “min-width” not “max-width” • Start with colours • Blocks have width set to “auto” by default
Responsive • How to show the right sized image for each device type? • Should only download the size being used • Should default to mobile images
Responsive • Based on article by Jake Archibald: http://tiny.cc/rsimg • Use <noscript> tags + data tags + JavaScript swapping
Tips & Tricks • Add transition effects on elements that change size and position • Use LESS or SASS for CSS • Test on http://responsive.is/ • W3 Responsive Images Group: http://www.w3.org/community/
Looking Forward • Advertising • Proper Responsive Images • Bandwidth Detection • Pixel Density
The Challenge No problems so far

More Related Content

Responsive Web Design

  • 1. Responsive Web Design Mark Wales, Small Hadron Collider @smallhadron ·
  • 2. The Challenge Create all of my projects using Responsive Web Design
  • 3. What is it? • Responsive designs adapt to how they’re being viewed • Check out: http://mediaqueri.es • Generally based on width of browser window
  • 4. Why use it? • A web-page is an infinite canvas • But an unpredictable viewport • Responsive designs will always look good • It’s intuitively the right way to do things
  • 5. How it works • Fluid Layouts • Media Queries • Responsive Images
  • 6. Fluid Layouts • Been around forever • Using % based widths • Not used on most sites
  • 7. Media Queries • Browser support is pretty good • JS Polyfil available (Respond.js - on GitHub)
  • 8. Media Queries • One CSS file: @media screen and (min-width: 960px) { ... } • Separate CSS files: <link rel="stylesheet" href="/960.css" media="screen and (min-width:
  • 9. Where to start? • Mobile first: use “min-width” not “max-width” • Start with colours • Blocks have width set to “auto” by default
  • 10. Responsive • How to show the right sized image for each device type? • Should only download the size being used • Should default to mobile images
  • 11. Responsive • Based on article by Jake Archibald: http://tiny.cc/rsimg • Use <noscript> tags + data tags + JavaScript swapping
  • 12. Tips & Tricks • Add transition effects on elements that change size and position • Use LESS or SASS for CSS • Test on http://responsive.is/ • W3 Responsive Images Group: http://www.w3.org/community/
  • 13. Looking Forward • Advertising • Proper Responsive Images • Bandwidth Detection • Pixel Density
  • 14. The Challenge No problems so far

Editor's Notes

  1. - Freelance web-developer - small hadron collider\n- Do a bit of everything: &amp;#x201C;full stack&amp;#x201D; / highly unfocused\n
  2. - Last september: Read Ethan Marcotte&amp;#x2019;s book, A Book Apart\n- Challenge: do all projects using RWD\n\n- Speed of presentation (please be honest):\n- Who knows what it is?\n- How many people have tried it?\n- How many people use it regularly?\n
  3. - Responsive designs adapt to how they being viewed \n- demo: smok.local/gallery, erbook.local/books\n- Currently most sites just use the width of the browser, but potential to do it with other things too (bandwidth, dpi, etc)\n
  4. - Early web design came from print: fixed layouts, fixed grids\n- Settled on 960px grid - very flexible for grids\n- Most people had 1024 or higher, but with netbooks and now mobiles and tablets can&amp;#x2019;t rely on it\n\n- Not necessarily much more work, in fact can be 10 lines of CSS extra\n
  5. - An old tech, a newish tech, and a hacky tech\n- Will look at the first two then cover images later\n
  6. - Tech has been around forever (CSS level 1, 1996)\n- % based widths instead of fixed widths (px or ems)\n- percentage width of parent element (if it has a &amp;#x201C;position&amp;#x201D; set)\n- Set body to 80%, content to 70% of body, sidebar to 30% of body\n- Not used much: can look weird at extremes, although min and max widths can be used\n
  7. - CSS2 supported different media types (e.g. print, screen)\n- CSS3 added queries - quickly supported\n- Support good: previous three versions on all browsers except IE\n- IE9+, Firefox 3.5+, Chrome 4.0, Safari 3.1, Opera 9.5, Android/iPhone/Opera Mobile &amp; Mini\n- Like an &amp;#x201C;if&amp;#x201D; block of code: if query is true, use this CSS. Not mutually exclusive &amp; cascades\n- All sorts of things included in CSS3 spec for Media Queries: dpi, device width, aspect ratio, etc.\n
  8. - I prefer to have it all in one file: less HTTP requests, so faster site\n- Also encourages the use of the cascade\n
  9. - Mobile first: if starting from scratch - very easy\n- If media queries are supported\n- Built in IE6 support - just add a few extra bits of CSS and you&amp;#x2019;re done\n
  10. - Trickier. The tech doesn&amp;#x2019;t exist yet.\n- But when&amp;#x2019;s that ever stopped web-developers (e.g. Table based layouts)\n- The problem: don&amp;#x2019;t want to use huge images if never displaying an image more than 320px wide\n- Shouldn&amp;#x2019;t download multiple sizes: pointless if mobile downloads desktop and ineffcient if desktop download mobile\n- But: server doesn&amp;#x2019;t know much about the device, so need to use javascript, which does\n- Hopefully this won&amp;#x2019;t be an issue for long: Responsive Images Working Group are on it (&amp;#x201C;Picture&amp;#x201D; tag, like &amp;#x201C;audio&amp;#x201D;). Potentially send more info to the server. But will take a while yet.\n- Two solutions: back-end and front-end\n
  11. - I chose javascript: keep it in one place, cookies don&amp;#x2019;t always get made in time, caching doesn&amp;#x2019;t work\n- Based on Jake Archibald&amp;#x2019;s method\n- No script tag\n- His version, by his own admission, is very dirty, but avoids repeating code\n- I prefer cleaner code, even if repetition\n- If using generated code then not an issue\n
  12. - Transitions: Save until the end of the project- might upset the client\n- Test on responsive.is - works on locally hosted files, \n
  13. \n
  14. - Six months and around 15 sites\n- Largely without a hitch\n