Adaptive Web-Design
37
Adaptive Web Design Alex Gyoshev Telerik Fronteer
-
Upload
alexander-gyoshev -
Category
Technology
-
view
2.660 -
download
0
description
The slides from my front-end day talk, Adaptive Web Design.
Transcript of Adaptive Web-Design
Adaptive Web Design
Alex GyoshevTelerik Fronteer
Adaptive Web Design
Alex GyoshevTelerik Fronteer
Responsive
State of the Mobile Web
Are iPhone & iPad enough?
The many faces of Android
Copyright: Vision Mobile
and… more?
source: Rethinking the Mobile Web
Explosion of screen resolutions
Balancing solutions
user experiencereach
Responsive Web Design
Inspired by Responsive Architectur
e
Three key techniques1
Flexible media
@media queries
Flexible grid
2 31 2
Flexible Grid
Adapts to all screen resolutions
Preserves proportions
Percentages instead of fixed units
Easily tested by resizing your browser window
Unpleasantly wide on large monitors
max-width: 100em; /* 1600px, elastic */
Can be fixed through
Fixed-size elements, either break it or get cropped
Flexible Grid: Problems
Flexible Media
Media is good at breaking the grid
Behaves, if asked politely
img, object {max-width: 100%;
}
@media Queries
Act when the flexible grid gets overwhelmed or inefficient
Linear content for phones
@media all and (min-width: 600px) { /* desktop-specific styles */}
Usage:
Nice Example
Source: A List Apart
Nice Example
Pictures scale proportionally
Source: A List Apart
Nice Example
Image is cropped
Source: A List Apart
Nice Example
No more scalling
Linear display
Source: A List Apart
Nice Example
Source: Think Vitamin
Nice Example
Smaller menu
Source: Think Vitamin
Nice Example
Smaller text size
Source: Think Vitamin
Nice Example
Compact logo and menu
Linear display
Source: Think Vitamin
Nice Example
Even to this size
Source: Think Vitamin
@media Queries: Do they work?
Work (almost) everywhere
In desperate situations, use JavaScript
source: http://caniuse.com/
CSS3-mediaqueries-js – full media query support
Respond.js – much faster, limited queries Custom scripts
Further things to consider
Connection speed
Pointing devices
Different user context
Connection Speed
Minimizing HTTP requests
CSS sprites
Custom fonts only on desktop
CSS3 instead of images
Responsive images
<img src="small.r.jpg" data-fullsrc="large.jpg“ />
Pointing devices Remember Fitts’ Law
Make touchable content bigger
Grow content when users use it
Majority of users are right-handed
source: http://particletree.com/
User context
Prioritize content
Test!
Delegate responsibilities to other pages
Two Sides
Responsive web design
Pure mobile web
Two Sides
Responsive developer
Purrrist
References
Responsive Web Design by Ethan Marcotte Rethinking the Mobile Web by Bryan Rieger Real-world Responsive Design by Stephen Hay Responsive Web Design Resources at Smashing
Magazine Flexible Web Design book Media queries under IE8 and below
CSS3-mediaqueries-js – full media query support
Respond.js – much faster, limited queries
