Responsive Web Design

Editor's Notes

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