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

Loading in 2 Seconds...

play fullscreen
1 / 19

PBA Front-End Programming - PowerPoint PPT Presentation


  • 75 Views
  • Uploaded on

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!

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'PBA Front-End Programming' - reginald-ethelbert


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
pba front end programming

PBA Front-End Programming

Responsive Design

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 design1
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 design2
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 design3
Responsive Design

Platforms anno 2000

responsive design4
Responsive Design

Platforms today…

responsive design5
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 design6
Responsive Design
  • Is that even possible…?

HTC Wildfire

3” screen

240 x 320

50x pixels

Apple Cinema Display

30” screen

2560 x 1600

responsive design7
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 design8
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 design9
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 design10
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
responsive design11
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 design12
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 design13
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 design14
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 design15
Responsive Design
  • Is that even possible…?
  • Not in all cases…
  • …but we can at least improve the user experi-ence in most cases