Think Mobile : the issue of screens

> recap of main constraints to be considered in devices display
.
Screens sizes and resolutions
.
Mobile-devices
.
With several display features to be aware of when designing mobile websites, combinations are almost endless, and so are optimization troubles:
.
  • Screen size (diagonal): ex. 4″ for smartphones, 7″ for mini tablets, 10″ for regular tablets
    .
  • Aspect ratio (ratio of height to width of display): ex. 4:3 for iPad, 3:2 for iPhone 4
    .
  • Resolution: 320×480, 640×960, 768×1024, etc…
    .
  • Pixel density in PPI (Pixels Per Inch)
    .
  • Device pixel ratio: the ratio of how many “real” pixels (physical pixels of the screen) are used to display one “virtual” pixel (device-independent pixels aka “dips”) – ex. 1 for non-retina iOS devices, 2 for retina ones
    .
  • Orientation: portrait or landscape
I might say technical display vocabulary is quite subtle, so what’s better than visual information to figure things out? As you can see below, devices can have different screen sizes but same resolution (ex. iPad / iPad Mini), or they can have same screen sizes and Aspect Ratio but with different resolutions, PPI and Pixel Ratio (ex. iPad / iPad Retina Display):
.
Apple - Display of current models
.
You obviously cannot create optimized versions of your web pages for every brand / version / type of device, that’s simply impossible! Instead you’d better gather devices under a reasonable number of size / resolution categories that will actually compose your Media Queries. Here are the main width breakpoints to help you with this:
.
  • 320px > small screens in portrait mode
  • 480px > small screens in landscape mode
  • 600px > small tablets in portrait mode
  • 780px > tablets in portrait mode
  • 1024px > tablets in landscape mode (and small laptop screens)
  • (1200px > large screens)
_____________________________________________________________________________________
.
Tactile zones
.
Today most of mobile devices – smartphones or tablets – are characterized by tactile interfaces. And on such screens the position of displayed elements is not insignificant for that devices in question involve precise ways of handling them, as shown below:
 .
Mobile-devices-handling
.
And I’m sure that, as a mobile user browsing mobile websites, you wouldn’t like to click inadvertently on an item you didn’t choose, or on the contrary have troubles reaching the one you want… To avoid any headache you can simply take a look at the following illustration giving you an idea of accessibility degrees in tactile zones:
.
Tactile-zones
.
_____________________________________________________________________________________
.
NUI – Natural User Interfaces
.
In addition to the question of handling, mobile devices have also brought whole sets of touch gestures: tap, drag, pinch, spread, and so on… The asset here is that these gestures are quite obvious to mobile users – we generally don’t need to learn  them, for that they get inspired from “real” life movements we make! This is why web-designers should definitely use the possibilities of Natural User Interfaces that mobile devices offer.
.
The “Touch Gesture Reference Guide” is available in PDF, and it provides a great overview for everything related to touch gesture: basic actions, object-related actions, navigating actions and even drawing actions. I’m sure you had no idea that mobile tactile interactions could be that rich! This document is for sure a must-have for my mobile webdesign resources!
 
TouchGesture-Reference-Guide
_____________________________________________________________________________________
..
Images and PDF guide credits: www.lukew.com

.
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s