Download
pba front end programming n.
Skip this Video
Loading SlideShow in 5 Seconds..
PBA Front-End Programming PowerPoint Presentation
Download Presentation
PBA Front-End Programming

PBA Front-End Programming

77 Views Download Presentation
Download Presentation

PBA Front-End Programming

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