Mobile Web Design

Note: The findings below are a snapshot of current mobile trends.

Given the speed at which the mobile market is evolving, the data provided below will likely be out of date by the time you come to read it.

Data is therefore provided here as a transient reference source for Designers and Developers to support creative decisions and craft realistic experience strategies.

Aspect Ratio

Determining popularity

157 known resolutions were cross-referenced against 5 sources to determine their popularity. Each source offered a percentage of global share or percentage of use. The top 10 resolutions from each source were matched to the 157 resolutions and the percentage was used as a ‘points’ value.

Total points accumulated for each resolution were then divided by the number of sources to give an average score. The average scores were then grouped by aspect ratio and then divided again by the number of scores used. This created a ‘popularity score’ (ps) for each aspect ratio as seen below, making 16:9 and 3:2 the leaders.

Results

Aspect Ratio | Popularity Score
16:9 = 12.5ps
3:2 = 11.8ps
5:4 = 6.8ps
8:5 = 6.5ps
4:3 = 4.2ps
5:3 =3.5ps

Aspect Ratio

Resolution

Defining a maximum resolution

We reviewed the resolutions of 50+ tablet and smartphone devices currently on the market to determine the highest resolution currently in use. 2,560 x 1,600 (8:5) was the highest, of which the Galaxy Note Pro 12.2 is an example. With this maximum threshold defined we could then assume resolutions for the remaining aspect ratios to provide a recommended starting canvas size.

Maximum Resolutions per Aspect Ratio

16:9 = 2,560 x 1,440
3:2 = 2,400 x 1,600
5:4 = 2,400 x 1,920
8:5 = 2,560 x 1,600
4:3 = 2,560 x 1,920 (recommended starting canvas size)
5:3 = 2,400 x 1,600


Resolution

Density

Designing with variable pixel densities in mind

Your goal should be to serve the best quality images as efficiently as possible, but a wide range of screen pixel densities (PPI) can make this a challenging task.

Fortunately, the devices that run the two leading operating systems, Android and Apple, have screen densities that fall into 7 PPI buckets.

Density
From these 7 buckets, 4 can be identified as priorities due to their usage.

There are two main approaches for accommodating these buckets:

  1. Optimising single images, and
  2. Optimising selection between multiple images.

Both have overheads and should be considered on a project by project basis. See here for more information: http://www.html5rocks.com/en/mobile/high-dpi/


References

Aspect Ratio

The following sources were used for mobile usage data:
Mobify – http://www.mobify.com/blog/global-screen-size-diversity/
Rapid Tables – http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm
Stat Counter – http://www.pinterest.com/pin/302022718733676656/
w3schools – http://www.w3schools.com/browsers/browsers_display.asp
All sources were accessed on Friday 14th November 2014.

Resolution

The following sites were used to determine the current models available on the market:
http://i1.wp.com/thedigitaldisciple.net/wp-content/uploads/Screen-Master-8-2014.jpg
http://www.expertreviews.co.uk/mobile-phones/8086/15-best-mobile-phones-to-buy-in-2014-note-4-makes-our-list
http://www.tabletpccomparison.net/
All sources were accessed on Monday 17th November 2014.

Density

The following sites were referenced:
http://developer.android.com/about/dashboards/index.html
http://www.html5rocks.com/en/mobile/high-dpi/
https://mixpanel.com/trends/#report/iphone_models
https://mixpanel.com/trends/#report/ipad_models
http://sebastien-gabriel.com/designers-guide-to-dpi/
All sources were accessed on Tuesday 18th November 2014.