Effective Design for Multiple Screen Sizes

So you’re a designer and have been tasked with the design of a mobile web site. Chances are, unless you’re designing for only one device you’re quickly going to be faced with a common problem experienced by designers who work with mobile devices; figuring out what screen size to actually design for.

For instance:

The iPhone is 320 pixels wide by 480 pixels high.

Many Nokia N-Series devices are 240 pixels wide by 320 pixels high.

Newer devices often support a landscape mode where the width and height are spontaneously reversed.

Older (yet still popular) Nokia devices have displays ranging from 176 by 208 pixels up to 352 by 416 pixels.

Blackberry screen resolutions range anywhere from 160 x 160 pixels all the way up to 324 x 352 pixels.

This article is intended to help you develop effective design strategies to target a diverse range of mobile devices and screen sizes. To this end, we begin with an outline of two key issues you will encounter when designing for small screens—the diversity in screen and pixel size.

Expect and manage diversity

At this point you’re probably asking yourself “…is it really necessary to design for all of these difference screen sizes?” or “…do I really need to create a separate design for each variant?” Depending on the business requirements of your project, it may be completely feasible to design only for one screen size—or in fact one device. However, if requirements dictate that the application (or web site) be usable by a majority of devices, you’re going to have to find some way to deal with this diversity.

But wait, things may not be as bad as they first appear. When designing for the mobile web we can assume that pages will scroll up and down—as they do within desktop browsers. This somewhat removes the need to worry about the height of the screen, allowing us to primarily focus our efforts on dealing with the diversity found in device screen widths. Fortunately DeviceAtlas Explorer provides us a means to quickly visualize how the screen width property actually breaks down across the thousands of known devices.

As the graphs above indicate, the vast majority of devices share just three screen widths; 128, 240 and 176 pixels—with many of the remaining values; 120, 130, 160, 208 and 220 pixels—not diverging too far from these three core values. That leaves us with a few devices at both the high and low ends of the spectrum with a width of 96, 101, 320 and 320+ pixels. While devices with screen widths of less than 128 pixels may seem a small percentage of the whole, when combined (96, 120, 101 and 84 pixels) they add up to 469 devices! Over half the number of 240 pixel devices—or about 10% of all known devices!

It’s probably also worth noting that at this time, less than 5% of devices have resolutions greater than 320 pixels wide. Expect this to change over the next few years as we’re now seeing smaller screen resolutions (128, 176, etc) give way to the larger (240+); as illustrated in the following chart.

Considering screen size is important but there is one additional parameter to consider—the physical dimension of the screen.

The ‘Problem With Pixels’

For years, designers have primarily been creating visuals for large desktop devices. Screen sizes averaging 1024 x 768 pixels have become the norm and although physical display sizes vary; the overall dimensions typically result in a pixel density of about 85 ppi(pixels-per-inch). Lately however, the display landscape has begun to change;

‘Netbooks’ such as the Asus Eee PC 900 have displays in the range of 9″ diagonal with a resolutions around 1024 x 600 pixels giving them pixel densities of about 133 ppi.

The Apple iPhone has a screen resolution of 320 x 480 pixels which when combined with its 3.6″ diagonal display results in a pixel density of 160 ppi.

The E60 from Nokia has a screen resolution of 416 x352 pixels packed into a tiny 2.2″ diagonal display giving it a whopping pixel density of over 240 ppi!

When combined with the need to support many devices, this wide variance in pixel density introduces a new problem; the impact of pixel size on design.

The following illustration simulates the same 100 x 100 pixel image on devices with pixel densities of 72, 144 and 240 pixels-per-inch. Notice how type and fine details are lost as the image is rendered smaller and smaller.

Fortunately the race for “most pixels ever” has slowed and we’re not seeing too many devices with pixel densities over 200 ppi. From a practical point of view, this means that it is unlikely you will have to support the very wide range of pixel densities illustrated above. It is however important keep in mind that not all pixels are created equal, and where possible:

Determine the full range of pixel densities you will need to support.

Review your designs on these devices to ensure critical detail is not lost.

Design and define layout elements based on relative units such as ems and percentages. This will provide the team with a truer indication of the size and relationships between layout elements.

This ‘problem with pixels’ is sure to become more widely discussed in the coming years as handset vendors seek to build new levels of flexibility into their operating systems. In fact, Google’s Android has already implemented a

With the mobile web, these concerns don’t weight in nearly as heavily. Line lengths are often too short regardless, there simply isn’t enough screen real estate to have more than one useable browser window open at a time, and there isn’t likely to be the extreme changes in width that might be possible with a desktop browser window. In fact, fluid designs lend themselves really well to mobile devices as they work beautifully with low-bandwidth design techniques that maximize the use of CSS and XHTML. These include:

Not specifying a specific document width, thereby enabling the design to expand and contract naturally to fill the screen.

Taking advantage of block elements which will also natively expand and contract.

Using CSS background colours and tiled images to style layout and content elements.

Specifying the size of layout elements using percentages so that they naturally expand and contract to fit page width.

Putting it all together

The following example from bbc.co.uk shows many of the design and adaptation strategies we have discussed in action. Let’s first look at the XHTML markup.

The BBC markup is simple, standards compliant and relies on standard XHTML tags to define the structure of the content. This ensures that the basic content (consisting in this case of several headers, body copy, images and an unordered list) will be rendered—regardless of the device or browser. CSS is then used to style the content.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

h1{

padding:3px;

background:url(/mobile/images/hp-colours/banner-bak_greenblue.gif);

background-repeat:repeat-x;

background-color:#00594d;

color:white;font-weight:bold;

font-size:small;

}

h2{

color:#027063;

font-weight:normal;

font-size:medium;

padding:2px;

background:url(/mobile/images/newimgs/h2-bak.gif);

background-repeat:repeat-x;

background-color:#ecedee;

border-bottom:1pxsolid#c1c0c0;

}

h2a:link,h2a:visited{color:#027063;

font-weight:bold;

text-decoration:none;

}

h2a:hover,h2a:active{

color:#333333;

text-decoration:underline;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

/* New promos */

#topPromo {

background-color:#000000;

}

#topPromo p {

color:white;

font-size:small;

border-top:1pxsolid#757474;

padding:2px;

}

#topPromo a:link, #topPromo a:visited {

color:white;

font-size:small;

display:block;

text-decoration:none;

}

#topPromo a:hover, #topPromo a:active {

color:#8ad3ca;

font-size:small;

display:block;

text-decoration:underline;

}

.linkList ul{

border-bottom:1pxsolid#c1c0c0;

}

.linkList li{

padding:2px;

padding-left:19px;

margin:2px;

}

.listTxt{

background:url(/mobile/images/newimgs/ico_txt_on-fff.gif);

background-repeat:no-repeat;

background-position:top left;

}

As you will note, the layout is entirely fluid. No set width is assigned to the page body, masthead, headers, lists or paragraphs. As seen in the example below, this results in a layout that performs much of the required adaptation on its own; simply scaling as needed to suit different screen widths.

The remaining styles and content are then specifically adapted server-side to suit the device or family of devices.

The logo is resized or replaced to suit the device screen width.

The masthead uses both a tiled and coloured background. Older devices like the Nokia 6680 which feature less sophisticated browsers are unable to render the tiled background but do display the background colour. Even simpler devices supporting only WAP 2.0 (XHTML-MP) may ignore both style properties altogether and simply display the logo. (Note that in the BBC’s case, this causes a problem as the white logo is then displayed on white; rendering it somewhat illegible).

The BBC seems to have chosen to tailor the editorial to specific devices (or device groupings). While the iPhone includes a large ‘Feature’ item promoting music downloads, other devices jump striaght to the display of today’s top ‘BBC News’. This editorial decision may be due to the iPhone’s flat data and strong podcast and media support but could also simply be due to its larger screen size. Were the ‘Feature’ displayed on a Nokia 6680 for example, it would take up most of the display forcing users to scroll to see today’s top news stories. This decision is also counterbalanced by the reformatting of content further down. While all three news stories are displayed on the iPhone, only one includes a photograph. This once again enables all the top news content to be seen without scrolling.

Images are scaled or replaced to suit the width of the display.

On larger devices, icons are associated with each list item. While not visible in the example below, this stylistic element is removed on smaller devices ensuring a comfortable line length for the accompanying list copy.

A balanced approach

The BBC web site is an ideal example as it shows how simple it can be to combine clean markup with well conceived styles and strategic editorial decisions to achieve a great experience on a wide range of devices. Ultimately, your design, adaptation and editorial choices will be based on many factors including your budget, target audience and the functionality of the mobile web site you are designing. In the end, it’s all about striking a balance between the creation of a well optimized, fast-loading site and the delivery of great, targeted content to your users.

15 Comments

Thanks Bryan and everyone for such an informative site!! Truly there is such little knowledge of the Mobile industry. When it comes to the web, telcom providers have no clue, and when it comes the mobile web providers have no clue => hence a gap in the marketplace and probably one of the reasons you all put up this site!!

I’ve just started up with Android development and i really like it. As a designer and developer its all going on the mobile sooner rather than later. Funny thing is that hardly any web guys are going that route and i wonder why – it isnt rocket science!

Well will definitely be reading the great content on your site!! This is a truly awesome design + when you look inside there is alot of great content and learning open for those who want to learn!!

Really good article, just what I was looking for at the moment as I’m trying to develop my [url]http://www.eclecticunion.com[/url] website for the mobile market. However I’m having slight problems trying to retain to hover feel that I’ve developed in my gallery section so my question is does anyone know how to best implement mouseover on a mobile site?
I saw this in the code but I couldn’t fully implement it
h2 a:hover, h2 a:active

Very nice piece of article. I learnt anew how important CSS is overall web development – mobile/desktop.
I will also comment on how this author put in much time to develop such impressive article that is so educative.
Thank you Brian.

A really very informative and exhaustive article.
I have a few questions:
– if we want to make a mobile version of our website and are not sure about the most important screen sizes that people use and do not want to make pictures etc. for all sizes, is then the best way, to simply check with our web analytics about this data or is it better to go with general data from e.g. Deviceatlas Explorer?
– can you recommend some more examples like BBC (e.g. links to these examples)
Going mobile is really a more complex task than I thought.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland