When I was building my first websites, way back in the last millennium, the most common screen resolution was 640 by 480 pixels. Most websites at that time were being designed for 800 x 600 screens, which was rapidly becoming the standard.
Desktop, and laptop, resolutions have been climbing ever since. If netbooks hadn’t become popular a couple of years ago, it is likely websites would be designed for 1200 to 1400 pixel wide screens. Instead the common design standard for current websites is based on a 960 pixel wide grid, centered on the user’s screen.
The problem is more and more visitors to your website now have screen resolutions way below those I originally built websites for, often with as few as 240 pixel wide screens. Of course I am talking about mobile phones, a.k.a. known as smart phones. All the iPhones up until the iPhone 4 only had 320 by 480 pixel screens.
For a long time, that was fine, most smart phone users were willing to put up with websites designed for desktops since they didn’t visit those sites very often. Even the websites designed for access on mobile devices, like many of the airline websites, were more focused on the lower bandwidth issues associated with 2G data.
The iPhone started changing all that, especially when the iPhone 3 came out with 3G data speeds, which jumped from dial up modem speeds to old DSL speeds. Even then, most development efforts were focused on building iPhone Apps, not mobile device oriented websites.
Then Google introduced Android, a competitor to iOS, the iPhone operating system. And a lot of phone manufacturers started building smart phones. Now Android is the biggest selling operating system on smart phones (all while iPhone sales have continued to increase).
Along with smart phones becoming common, mobile data speeds are skyrocketing. With 2G data speeds, basically the same as dial up access, getting web pages took too long. 3G has made most web pages load in a reasonable amount of time, so more people are using their smart phone web browsers. As 4G finishes its roll out this year, giving your smart phone cable internet speeds, you can expect that more and more people will be accessing websites via their smart phones than ever before.
Visitors to most websites from smart phone web browsers have gone from 0.6% in 2009 to 5% in early 2011 and doubled in the last 6 months, according to web tracking company Comstat.
You could ignore 1% of your website visitors and probably not have any complaints. But when 10% of your website visitors are seeing a fraction of that gloriously designed site you spent a small fortune to have built, you now have to be worried about visitors to your site that are limited to 320 pixel wide displays.
When you design your mobile website, think about the use cases about why your mobile visitors are coming to the site. As an example, a trade show’s desktop website might be focused on why you should attend, or exhibit. Visitors come to that version of the website before the show. But when they are at the show, browsing the site from their smart phone, they are less interested in why they should attend, and more interesting in finding the booth they are looking for, or which seminar they should attend in 20 minutes. How they navigate your site, and what content is most important, changes depending on how they are accessing it. I’ll bet your site will have similar differences.
If you had followed the advice in Tech Bit #61 and built your website using a content management system, you have a relatively simple solution. You can have two versions of your website, one optimized for the glorious real estate of a laptop or desktop monitor, and another optimized for the tiny screens of smart phones. The same content is used for both, just with a different organization and presentation.
But wait, there’s more.
Over a year ago Apple introduced the iPad, the first real tablet to achieve commercial success. Tablet computers have been around for almost 15 years, but they have been too heavy, too underpowered, or too expensive to become more than hopeful teases. But the iPad has sold in the millions, bringing a useful tablet at a reasonable price. Android and its legion of manufacturers have made attempts to match the iPad, but to date the iPad is the dominant tablet. Amazon’s new tablet might change that.
The iPad with its 768 by 1024 resolution screen is larger than a smart phone screen and smaller than a desktop screen. While it might be close to a desktop in screen resolution, it really is much different. A desktop user can navigate their mouse to within a few pixels, clicking on hyperlinks that are 10-15 pixels high with ease. However, pointing at links that small using your finger is much, much harder. Navigating on a tablet is much more like navigating on a smart phone, even though it has a lot more real estate to display your web page.
The bottom line is you really need to design your website for three audiences: desktop users with high resolution screens, smart phone users with low resolution screens, and tablet users with medium resolution screens but low resolution navigation. All three are becoming significant percentages of your website visitors and you need to be putting your best face on for all three audiences.
You do need small, medium and large websites. At least I didn’t use Goldilocks!