Transcript Mukautuvat web

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: black;}
@media (min-width: 1280px) {
#sivu {font-size: 18px;}
}
12/20
“This is an adaptable site, use
the screens real width.”
•<meta
name=”viewport”
content=”device-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 Architects
• More traditional
• Flexible (responsive)
• eg. Ethan Marcotte
• eg. Sparkbox
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 / @beep
• lessframework.com
• @jonikorpi / [email protected]
20/20