Responsive web design, HiDPI displays and the transition period


Published on

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive web design, HiDPI displays and the transition period

  1. 1. TOPICS1.  Current state and future of the (mobile) web2.  Graceful degradation vs. progressive enhancement3.  Mobile first4.  New approach5.  Media queries (what else)6.  Fixed, fluid or mixed7.  Images for HiDPI displays8.  Frameworks9.  Choosing a framework10.  Responsive sliders and galleries11.  Questions12.  Resources
  2. 2. CURRENT STATE•  Direct access to information – that matters – from everywhere - Time = Money - Money = Mobile devices - Time = Mobile devices•  More processing power in smaller packages•  Big(ger) touch screens•  Integration of HiDPI displays on small group of devices
  3. 3. FUTURE•  Around 2015 the majority of the web will be mobile•  Adapt fast, go mobile now•  Majority will be HiDPI (> 200 DPI and < 400 DPI)•  DPI depending on reading distance•  Major mobile screen sizes around - 4 inch - 7 inch - 10 inch
  4. 4. MOST USED RESPONSIVE RESOLUTIONS•  1382 pixels: 58 pixels left for scrollbars (1440px)•  992 pixels: 32 pixels left for scrollbars (1024px)•  768 pixels•  600 pixels•  480 pixels•  320 pixels
  5. 5. HIDPI RESOLUTIONS *•  15 inch MBP Retina: 2880 x 1800 pixels at 220 DPI•  13 inch MBP Retina: 2560 x 1600 pixels at 227 DPI•  iPad: 2048 x 1536 pixels at 264 DPI•  iPhone 5: 1136 x 640 pixels at 326 DPI•  iPhone 4(S): 960 x 640 pixels at 326 DPI•  Samsung Galaxy S3: 1280 x 720 pixels at 306 DPI•  Google Nexus 4: 1280 x 768 pixels at 320 DPI•  Google Nexus 10: 2560 x 1600 pixels at 300 DPI•  …* Small selection of known devices
  6. 6. GRACEFUL DEGRADATION•  Desktop > Tablet > Smartphone•  Focused on desktop•  Put everything for desktop in it•  Scale down to mobile devices•  Spend /waste time on workarounds•  Difficult to adapt to larger platformsMore info:
  7. 7. PROGRESSIVE ENHANCEMENT•  Smartphone > Tablet > Desktop•  Focused on mobile•  Mobile first approach•  Add more functionality depending on the platform•  No time wasted on finding workarounds•  Easy to expand to other larger platforms with fewer constraintsMore info:
  8. 8. MOBILE WHAT?•  Design and build a website from the mobile point of view•  Using progressive enhancement•  Preferably use media queries with only min-width properties•  Define content and logic depending on screen size
  9. 9. DO DESIGNERS LIKE MOBILE FIRST•  Most of them don’t•  Reverse logic•  Takes more time•  Stick to habits•  Do what they are good at
  10. 10. SO WE’RE SCREWED?•  Absolutely not.•  Designers: - Desktop design first - Scale down to mobile versions•  Developers: - Mobile development first - Progressive enhancement - Scalable for larger platforms
  11. 11. MAKING IT WORK•  On which devices?•  What is the content?•  Define content per device•  Small screen users want the essentials•  Bigger screen users get all the details
  12. 12. WHY THIS APPROACH?•  Best of both worlds•  Designers: - Do what they know best - Large screen first - Small screen later•  Developers: - No workarounds - Progressive enhancement - Easy to expand
  13. 13. CONTENT•  Know the content•  Define content for mobile and add more content for desktop•  Or define content for desktop and strip down for mobile•  Richer experiences for mobile and desktop•  Smaller screens only get served what matters the most•  Mobile users want to find and consume information quickly•  Desktop users spend more time consuming information
  14. 14. DESIGN•  Start with a desktop design•  Narrow down to mobile•  Design each screen based on defined content•  Happy designer•  When reducing horizontal space, also reduce vertical space
  15. 15. STYLE•  Mobile: - Easy and pleasant to use - Fewer or lightweight graphics - Always leave margins on each side of the screen•  Larger platforms: - More presentational graphics•  General: - Use white space! Its free and creates a better experience
  16. 16. DEVELOPMENT•  Mobile first progressive enhancement•  No time wasted on workarounds•  Invest that time in a better experience•  Use percentages, it does make your responsive life easier
  17. 17. PICKING THE RIGHT ONES•  CSS 3 Media Queries•  Up to six media query increments: 1382 pixels, 992 pixels, 768 pixels, 600 pixels, 480 pixels and 320 pixels•  Two increments for 1024 pixels and bigger: 1382 and 992 pixels for larger screens•  Media queries in IE8 and lower: Respond.js (
  18. 18. PICK YOUR FAVORITE•  Fixed: - Jumps between media queries - Will not always use the available screen space - Not future proof for newer screen sizes•  Fluid: - Adapt to available screen space - Future proof for newer screen sizes - Difficult to successfully execute•  Mixed: - Use fixed or fluid depending on screen size
  19. 19. IMAGES AND HIDPI DISPLAYS•  Add media query for HiDPI•  Use @2x in file name to know which image is for HiDPI screens (defined by Apples high-resolution modifier), e.g. background-header.jpg, background-header@2x.jpg•  Adapt images used in styles - HiDPI image is twice as big - Scale to 50% using CSS3s background-size property•  Inline and content images - Create one image that is twice the size (more info: - This image is likely to be smaller in file size than the higher quality smaller image
  20. 20. LESS FRAMEWORK 4•  Only media queries•  HiDPI media query optional•  Simple, fast and easy to use•  Fixed (fluid after adaptation)•  Very basic typography•  Increments: 992 pixels, 768 pixels, 480 pixels and 320 pixelsMore info:
  21. 21. SKELETON•  Only media queries•  Simple, fast and easy to use•  Has basic grid system•  Fixed (fluid after adaptation)•  Typography, forms, buttons•  Increments: 960 pixels, 768 pixels and 480 pixelsMore info:
  22. 22. 320 AND UP *•  Media queries and JavaScript•  Only uses the min-width property (mobile first approach)•  HiDPI media queries•  Works fluid until defined max size•  Grid system: 4, 3 and 2 columns (easy to expand)•  Works with percentages•  Icon font (Font Awesome):•  Increments: 1382 pixels, 992 pixels, 768 pixels, 600 pixels, 480px and lowerMore info:* My favorite
  23. 23. ZURB FOUNDATION VERSION 3•  More advanced•  Media queries and JavaScript•  Works fluid until defined max size•  Good for prototyping•  Works with percentages•  Possibility to customize download•  Learning curve•  Icon font (•  Increments: 1440 pixels, 1280 pixels and 768 pixelsMore info:
  24. 24. TWITTER BOOTSTRAP•  More advanced•  Media queries and JavaScript•  Big library of components•  12-column grid•  Learning curve•  Not fluid, not fixed, but mixed•  Icon font (•  Increments: 1200 pixels, 980 pixels, 768 pixels and 480 pixelsMore info:
  25. 25. DEPENDS ON•  Scope of the project•  Time and budget•  Required devices•  Knowledge of frameworks•  Your own favorite
  26. 26. A SELECTION•  Flexslider (•  Responsive slides (•  Elastislide (•  Photo Swipe (
  27. 27. Twitter:RWD: JS ( Breakpoints for responsive designRespond.js ( Media queries for IE8 and lowerMobile first:
  28. 28. Images for HiDPI: high-resolution modifier DrawingPrintingiOS/SupportingHiResScreensInViews/ SupportingHiResScreensInViews.html#//apple_ref/doc/uid/TP40010156-CH15-SW1Future of the web: