PBA Front-End Programming 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 Wildfire 3” screen 240 x 320 Apple Cinema Display 30” screen 2560 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 ExampleExample 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