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

@alex_gyoshevalex@gyoshev.net

Qwestuns?

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