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/
- Freelance web-developer - small hadron collider\n- Do a bit of everything: &#x201C;full stack&#x201D; / highly unfocused\n
- Last september: Read Ethan Marcotte&#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
- 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
- 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&#x2019;t rely on it\n\n- Not necessarily much more work, in fact can be 10 lines of CSS extra\n
- An old tech, a newish tech, and a hacky tech\n- Will look at the first two then cover images later\n
- 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 &#x201C;position&#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
- 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 & Mini\n- Like an &#x201C;if&#x201D; block of code: if query is true, use this CSS. Not mutually exclusive & cascades\n- All sorts of things included in CSS3 spec for Media Queries: dpi, device width, aspect ratio, etc.\n
- I prefer to have it all in one file: less HTTP requests, so faster site\n- Also encourages the use of the cascade\n
- 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&#x2019;re done\n
- Trickier. The tech doesn&#x2019;t exist yet.\n- But when&#x2019;s that ever stopped web-developers (e.g. Table based layouts)\n- The problem: don&#x2019;t want to use huge images if never displaying an image more than 320px wide\n- Shouldn&#x2019;t download multiple sizes: pointless if mobile downloads desktop and ineffcient if desktop download mobile\n- But: server doesn&#x2019;t know much about the device, so need to use javascript, which does\n- Hopefully this won&#x2019;t be an issue for long: Responsive Images Working Group are on it (&#x201C;Picture&#x201D; tag, like &#x201C;audio&#x201D;). Potentially send more info to the server. But will take a while yet.\n- Two solutions: back-end and front-end\n
- I chose javascript: keep it in one place, cookies don&#x2019;t always get made in time, caching doesn&#x2019;t work\n- Based on Jake Archibald&#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
- Transitions: Save until the end of the project- might upset the client\n- Test on responsive.is - works on locally hosted files, \n
\n
- Six months and around 15 sites\n- Largely without a hitch\n