Designing Mobile Sites

Everyone and their brother has been saying that 2010 was going to be the year of the mobile web, and while I must agree that there have been many advancements with the mobile web this year, 2010 hardly lived up to “the year of the mobile web.” With the release of 4G phones by more carriers than ever before, and with the expected sale of more smart phones than pc’s by next year, I feel that 2011 will be the year of the mobile web. Verizon is releasing LTE, T-Mobile has HDSPA+, Sprint has Wi-Max, and AT&T is expanding it’s 3G coverage in New York (get with the program guys). All that combines to mean that it is potentially possible that more people will access your site from a smart phone than from a PC in the coming years. What are you doing about it? First thing – you should design your site with mobile in mind. But how, you ask? Here’s 5 tips to do just that:

1. Use the viewport meta tag

The viewport meta tag was designed to allow you to set scale, width, and other settings for your mobile optimized site. Without it, your site will be zoomed out, not clear, and not cleanly scalable by a mobile user. These are the settings that I like to use.

<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport" />

This removes the ability for a user to zoom in closer, but it keeps your site intact as you designed it very nicely. A trade off I’m willing to make.

2. Working with the iPhone 4 Retina Display

The retina display on the iPhone 4 is a fantastic feat of engineering. it has literally 4x the number of pixels as the iPhone 3Gs and other smartphones in it’s class. Here’s a visual of what I’m talking about (click to enlarge).

So what do you do about that? If you use standard sized images, then they will be pixelated on the iPhone 4′s display. If you use all high res images, then you will be munching valuable bandwith from your users 3G plans even if they can’t see the difference between high and low res. The answer? Compromise. Serve high res to those devices that can use it using a device specific stylesheet declaration within your CSS. Like this.

.image {
height:60px;
width:120px;
-webkit-background-size:120px 60px;
background:url(../images/image.png) no-repeat 0 0 scroll transparent;
}
@media screen and (-webkit-device-pixel-ratio: 2) {  //matches the iPhone 4 and iPod Touch 4G
.image {
background:background:url(../images/image_bigger.png) no-repeat 0 0 scroll transparent;;
}

3. Don’t Use :hover or mouseover

Touch screens of tomorrow may be able to sense finger proximity prior to touch, but not today’s. That makes :hover useless for touch screen devices. Also, using mouseover won’t work in your JavaScript either.

4. Create an icon for your site

I’m not talking logo here, I’m talking website icon. (See picture of retina display above if you need further explanation.) You should stand out in the middle of a sea of  app icons on a users “Sites” page of their homescreen.

5. Use CSS3 Whenever Possible!

You can save users a lot of 3G bandwidth cost simply be removing images from your site, but then what happens to the pretty? Easy – it stays, IF you’re utilizing CSS3 for things such as rounded corners and gradients.

.button {
color:#0066CC;
font-size:18px;
padding:10px 15px;
border:1px solid #CCCCCC;
background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FFFFFF));
-webkit-border-radius: 5px;
}

There’s certainly many more things that could be covered, but that’s all the time we have for today. Check back later or subscribe to our tips & tricks RSS feed.