Adaptable web sites Joni Korpi 01/20

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

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

The old way Many separate sites 04/20

Zeit Online 05/20

Facebook 06/20

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

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

The new way One adaptable site 09/20

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

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

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

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

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

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

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

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

Summary 18/20

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

Interested? Google “responsive design” A List Apart – Responsive Web Design ethanmarcotte.com ethanmarcotte.com / 20/20