1. Adaptable web sites Joni Korpi 01/20

2. Definition A page, whose layout – and possibly content – changes according to the devices size. 02/20

3. Contents 1. The old way of developing 2. The new way of developing 3. Summary & best uses 4. Resources for those interested 03/20

4. The old way Many separate sites 04/20

5. Zeit Online 05/20

6. Facebook 06/20

7. Separate sites Often completely independent: HTML, CSS & Javascript Template code Lots of work Mostly for heavy sites 07/20

8. Problems User guidance Browser sniffing Requires constant maintenance Error prone Unconsistent 08/20

9. The new way One adaptable site 09/20

10. Differences One consistent site Adapts to browser size No browser sniffing No user guidance 10/20

11. CSS3 media query Part of the CSS3-standard Uses a certain part of CSS when certain conditions are A type of IF-statement Used to everride CSS-styles 11/20

12. “If the browsers width is this, do that.” #sivu {font-size: 16px; color: black;} @media (min-width: 1280px) { #sivu {font-size: 18px;} } 12/20

13. “This is an adaptable site, use the screens real width.” 13/20

14. Browser support Standard All except: Internet Explorer 6–8 The old Nokia Webkit & Opera Respond.js adds support 14/20

15. Two types Static (static/adaptive) eg. Information ArchitectsInformation Architects More traditional Flexible (responsive) eg. Ethan MarcotteEthan Marcotte eg. SparkboxSparkbox 15/20

16. Problems “Faking size” eg. Samsung Galaxy Tab Developer can’t do anything about this Problem of the manufacturers File sizes possibly heavy for 3G 16/20

17. To think about Same content for different devices? Does the cell-phone surfer want different things than the PC-surfer? Touch screen vs. mouse Different requirements 17/20

18. Summary 18/20

19. Recap A new way for normal sites Media querys: standard Fix support with Respond.js:llä Static vs. flexible Keep context in mind The old way only for exceptions 19/20

20. Interested? Google “responsive design” A List Apart – Responsive Web Design ethanmarcotte.com / @beep ethanmarcotte.com lessframework.com @jonikorpi / me@jonikorpi.comme@jonikorpi.com 20/20