PBA Front-End Programming Responsive Design. Is there such a thing as a ”typical user” of our website…? With regards to – Screen resolution – Bandwidth.

PBA Front-End Programming

Responsive Design

Responsive Design

• Is there such a thing as a ”typical user” of our website…?

• With regards to– Screen resolution– Bandwidth– Browser– Plug-ins– …

Responsive Design

• Harder and harder to define a ”typical user”…• …so we should move beyond that!• User ”landscape” defined in terms of personas,

with different habits, platforms, abilities, etc• Our design should provide all personas with a

positive user experience

Responsive Design

• One element in user behavior which is evolving rapidly is choice of platform

• Platform: The device through which the user accesses the website

Responsive Design

Platforms anno 2000

Responsive Design

Platforms today…

Responsive Design

• Today – a very wide range of platforms• A wide range of– Screen sizes– Screen resolutiuons

• Responsive design – the notion of letting the website adapt dynamically to the platform at hand

Responsive Design

• Is that even possible…?

50x pixels

HTC Wildfire3” screen240 x 320

Apple Cinema Display30” screen2560 x 1600

Responsive Design

• How can a website adapt between 240x320 and 2560x1600 resolutions…?– Solution 1: Don’t!– Solution 2: Some elements

static, some dynamic– Solution 3: Everything is

dynamic!

Responsive Design

• Solution 1 – Don’t• What’s wrong with the good ol’ ”this site is

optimised for 1024x768”…?• It reads– ”I’m lazy”– ”I don’t want to do something new”– ”I don’t care about my users”– ”Scroll around or go away”

Responsive Design

• Solution 2: Some elements static, some dynamic

• Status quo for many websites today• Dynamic: layout columns and text• Static: images, menus, etc.• Better, but is still problematic particularly for

”narrow” resolutions

Responsive Design

• Solution 3: Everything is dynamic• When the resolution is changed, (almost)

everything in the layout changes• Not only size, but possibly also position!• Some elements might be replaced or

omitted entirely• Example Example

Responsive Design

• How is it done…(technically)?– Awareness of platform (media query)– Awareness of resolution– Fluid grids– Fluid images– Show/hide content– Dynamic choice of layout

Responsive Design

• Awareness of device and resolution• CSS3 supports ”media query”• Given media and resolution, pick a suitable

layout (defined by CSS)• Isn’t resolution all that matters…?– 1280x720 on 4”– 1280x720 on 12”

Responsive Design

• Fluid images• Change the image according to

available space• ”Raw” resizing of the image• Show/hide portions of the image• Not trivial how to scale an image in

an aesthetically pleasing manner…

Responsive Design

• Dynamic choice of layout• Rearrange or show/hide elements• Biggest concern is usually the

width of the layout• Move column content to the top

of the page• Avoid the horisontal scroll bar!

Responsive Design

• Is that even possible…?• Not in all cases…• …but we can at least

improve the user experi-ence in most cases

Responsive Design