responsive web design, hidpi displays and the transition period

TOPICS 1.  Current state and future of the (mobile) web 2.   Graceful degradation vs. progressive enhancement 3.   Mobile first 4.   New approach 5.   Media queries (what else) 6.   Fixed, fluid or mixed 7.  Images for HiDPI displays 8.   Frameworks 9.   Choosing a framework 10.   Responsive sliders and galleries 11.   Questions 12.   Resources

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

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

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

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

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 platforms

More info: http://en.wikipedia.org/wiki/Fault-tolerant_system

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 constraints

More info: http://en.wikipedia.org/wiki/Progressive_enhancement

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

DO DESIGNERS LIKE MOBILE FIRST

•  Most of them don’t

•  Reverse logic

•  Takes more time

•  Stick to habits

•  Do what they are good at

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

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

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

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

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

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! It's free and creates a better experience

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

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 (https://github.com/scottjehl/Respond)

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

IMAGES AND HIDPI DISPLAYS •  Add media query for HiDPI •  Use @2x in file name to know which image is for HiDPI screens (defined by

Apple's 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 CSS3's background-size property

•  Inline and content images

- Create one image that is twice the size (more info: http://blog.netvlies.nl/design-interactie/retina-revolutie-follow-up/) - This image is likely to be smaller in file size than the higher quality smaller image

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 pixels

More info: http://lessframework.com/

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 pixels

More info: http://www.getskeleton.com

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): http://fortawesome.github.com/Font-Awesome/ •  Increments: 1382 pixels, 992 pixels, 768 pixels, 600 pixels, 480px and lower More info: http://stuffandnonsense.co.uk/projects/320andup/ * My favorite

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 (http://www.zurb.com/playground/foundation-icons)

•  Increments: 1440 pixels, 1280 pixels and 768 pixels More info: http://foundation.zurb.com/

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 (http://twitter.github.com/bootstrap/base-css.html#icons)

•  Increments: 1200 pixels, 980 pixels, 768 pixels and 480 pixels

More info: http://twitter.github.com/bootstrap/

DEPENDS ON

•  Scope of the project

•  Time and budget

•  Required devices

•  Knowledge of frameworks

•  Your own favorite

A SELECTION

•  Flexslider (http://flexslider.woothemes.com/)

•  Responsive slides (http://responsive-slides.viljamis.com/)

•  Elastislide (http://tympanus.net/Development/Elastislide/index.html)

•  Photo Swipe (http://www.photoswipe.com/)

Twitter: RWD: http://twitter.com/RWD Testing: http://screenqueri.es/ http://www.responsinator.com/ Design: http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/ Development: Response JS (http://responsejs.com/): Breakpoints for responsive design Respond.js (https://github.com/scottjehl/Respond): Media queries for IE8 and lower Mobile first: http://www.abookapart.com/products/mobile-first

Images for HiDPI:

http://retinajs.com/

Guidelines:

Apple's high-resolution modifier

http://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html#//apple_ref/doc/uid/TP40010156-CH15-SW1

Future of the web:

http://thenextweb.com/mobile/2011/11/15/the-future-of-mobile-design/

http://vimeo.com/23903009

http://thechrisvossshow.com/mobile-web-will-rule-by-2015/

http://gigaom.com/2011/08/25/by-2015-smartphones-will-rule-the-mobile-planet/