Design for Mobile Phones

© 2015, Sam Scott.

About This Page

This page gives you my top 6 tips on making your web site better for mobile phone browsers.

This page is meant to be viewed on a narrow screen (around 300 to 400 pixels).

To see what this page might look like if we didn't follow these tips, click the link below.

1. Set the Viewport

The viewport is the size of the rectangle the web page occupies.

For most desktop browsers, this size is the same as the size of the browser window.

But some mobile browsers will set the viewport for a page to be much bigger than the device screen. Then the mobile browser zooms out to get it all in and everything ends up looking really small.

You can get around this using the tag below in the <head> section of your document:

<meta name="viewport" content="width=device-width, initial-scale=1">

This tag tells the device to set the width of the viewport to be the same as the width of the screen. That solves the problem.

2. Use Big Links and Text

On a touch screen, it's hard to read small text and it's hard to hit small text links, especially if they are embedded in text or positioned close together.

Use large sans-serif fonts.

use borders, padding and background properties to make bigger link targets. (A user's thumb is typically around 50 to 60 pixels wide.)

Use display:block to turn links into block elements.

On this page, I have changed style properties for a and a:active. view the page source to see what I did. The result is below.

(You don't have to make text links look like buttons. If the backgrounds and borders were invisible on the links above, they would still be nice big targets for touch screens.)

3. Keep it Simple

One column only!

Limit the amount of text and use images instead of text wherever possible.

Use lots of whitespace.

Control margins, padding and font sizes on elements like <body> or <html>. Try the link below for a CSS Reset style sheet.

4. Use Fluid Layouts

Fluid layouts stretch or shrink to fit the available space.

Let elements stretch across the entire screen by leaving CSS width property unset or using width:auto.

Specify horizontal box model properties (margin-left, padding-right, etc.) using % instead of px.

side by side imagesside by side images

For side by side images like above, try this:

margin:1%; padding:0%; width:48%;

Now each image uses 50% of the available space.

5. Use Small Picture Files

Bandwidth is often an issue for mobile users.

Don't just use CSS to resize a large image. It will still be expensive to load even though it looks small on the screen.

Use an image editor (paint will do) to change the size of the image.

The images in the previous section were resized from 690KB to 33KB. This makes a big difference!

6. Don't Use Hover

Most mobile devices don't support hover.

Don't rely on the title attribute or CSS :hover styles when designing for mobile users.

For links, define :active styles instead.