1 / 19

PBA Front-End Programming

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!

reginald-ethelbert
Download Presentation

PBA Front-End Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PBA Front-End Programming Responsive Design

  2. Responsive Design • Is there such a thing as a ”typical user” of our website…? • With regards to • Screen resolution • Bandwidth • Browser • Plug-ins • …

  3. 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

  4. 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

  5. Responsive Design Platforms anno 2000

  6. Responsive Design Platforms today…

  7. 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

  8. Responsive Design • Is that even possible…? HTC Wildfire 3” screen 240 x 320 50x pixels Apple Cinema Display 30” screen 2560 x 1600

  9. 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!

  10. 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”

  11. 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

  12. 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

  13. 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

  14. 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”

  15. 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…

  16. 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!

  17. Responsive Design • Is that even possible…? • Not in all cases… • …but we can at least improve the user experi-ence in most cases

  18. Responsive Design

More Related