Responsive Web Design

ISO Breakfast Talk

Transcript

1. Responsive
   { web } design David Roessli
   cybermedia concepts Creative Commons Attribution-ShareAlike 2.5 Switzerland License. ISO Breakfast Talk on June 20th, 2012
2. Andy Clarke @Malarkey stuffandnonsense.co.uk
3. Mobile browsing is expected to outpace desktop-based access within 2013 to 2015” theverge.com/2012/2/4/2769538/smartphones-overtake-computers-shipping-increase-2011-canalys mediapost.com/publications/?fa=Articles.showArticle&art_aid=120590 morganstanley.com/institutional/techresearch/mobile_internet_report122009.html “
4. A shifting
   landscape
5. there was a time when screen size ~ user’s location
6. there was a time when screen size ~ user’s bandwith
7. www.osteofrance.com vs m.osteofrance.com
8. but not anymore
9. small screen size ≠ at a street corner in a hurry
10. large screen size ≠ at the office
 or at home
19. so let’s not assume
20. We’re faced with a greater number of devices, input modes, and browsers than ever before
21. Becoming responsive
22. Responsable responsive web design is currently the best answer we’ve found to address this issue. Today.
23. www.iso.org at different browser sizes
24. www.iso.org
25. layout agnostic
27. target ÷ context = result Flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes. Fluid grids: adapt beautifully alistapart.com/articles/fluidgrids 24ways.org/2011/theres-no-formula-for-great-designs
28. Fluid grids: adapt beautifully
30. Flexible images: resize smoothly
32. Media queries: know your breakpoints 480 600 768 992 1382 phone phone (landscape) kindle tablet tablet (landscape) desktop desktop+
33. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages.
34. Designing adaptable pages is designing accessible pages