Website design for mobile devices (phones and tablet computers) is more important than ever. Traffic from mobile devices has been increasing rapidly, and is projected to continue to grow.
Pull out your “smart phone” for a moment. If you don’t have one, borrow one for a few minutes. Now look at your own website on the phone, and ask what you can learn about your business from what you see on the phone. If you are not satisfied, read on. According to Pew Internet:
17% of cell phone owners do most of their online browsing on their phone, rather than a computer or other device. Most do so for convenience, but for some their phone is their only option for online access.
If you are going to capture these visitors and convert them to customers, what kind of website do you want to mobile visitors to see? Three methods are in common use to serve a website page to a mobile device:
- Everyone sees the same page
- The page responds to the capability (or settings) of the device
- An optimized version of the page is sent to mobile devices
Each of these has its advantages, and some may not be appropriate to your business. Let’s look at each in turn.
“One version for all devices”
If your current website is more than 1-2 years old, it was probably designed to be viewed on a desktop PC with a monitor at least 800px (pixels) wide. Most flat-screen monitors in use today are 1000-2000px wide. Your site probably looks great on a 17-inch desktop or laptop computer, but on a 2” by 3” cell phone screen, it may not work at all.
Compare the illustrations below of my website, as seen on a desktop computer and on a cellphone:
You can see the page easily on the desktop monitor, but on the cellphone the web page is far too wide for the device, requiring the visitor to move the image around the screen to see the content. The text and pictures are tiny and hard to read. A potential customer to a mobile website like this may quickly leave, taking the business along.
The “one design fits all” approach offers the advantage of savings in development and maintenance costs for the website, but those savings will drive visitors away from the website in frustration.
The “responsive” website
For several years browsers have been expanding their ability to respond to the capabilities of the device being used. This lets the developer use special formatting commands on the website which tell the browser how to adjust the layout, image size, and navigation button size and placement, customizing these design elements to different screen widths.
Here is an illustration of my “responsive” website, as seen on a desktop computer, an iPad and on a cellphone:
Notice that each page shows similar content, but the layout “responds” to the size of the screen by changing size and position of objects on the screen. On the cellphone, the content must be scrolled up and down, but not side-to-side, and some content (such as the picture of this website’s owner) can be simply omitted from the cellphone version.
If you already have a website, and it was prepared more then 2 or 3 years ago, chances are the site will need to be fully rewritten to permit responsive techniques to be applied.
The “mobile-specific” website
A third approach to designing websites for mobile devices is to recognize that the mobile user has typically arrived at a website with specific questions in mind. He is apt to be less interested in “browsing” and more ready to find your business and to buy from you. Many mobile users want to know how to get to your business, what your hours are, and how to contact you.
A mobile-specific website can address these needs in very convenient ways: your phone number can be made to dial the phone when clicked; a map can link directly to the phone’s navigation tools or to online driving directions.
The layout of mobile-specific websites is much different as is illustrated below. The navigation is often greatly simplified to highlight key tasks of interest to a mobile user. This is represented in the image below.
While mobile-specific websites can be more convenient for the user, they require that your website be rewritten to take advantage of these enhanced features.