Three Hot Tips for a Mobile-Optimized Website
Smartphone and tablet users make up a growing percentage of web users today. For some businesses, a mobile-optimized presence isn’t optional anymore. Because mobile searches have, for many consumers, replaced the yellow pages, a mobile-optimized site is key to driving customers through the door. Even for businesses that don’t rely on local traffic, mobile optimization results in more site visits, more time on page, and ultimately more contact with customers.
Yet, there’s more to optimizing your site for mobile than simply making the site readable on a mobile device. There are some specific design elements and tactics you need to implement if you want to make the most of your mobile presence:
- Make your site mobile-friendly.
A mobile presence requires a mobile-friendly site. Accordingly, you need a version of your site that is viewable on a screen that’s roughly 2 inches by 3 inches. Your visitor shouldn’t have to zoom in just to read the text of your page.
There are a couple of ways you can go about making a mobile-friendly site. You can use a mobile CSS in order to set up a set of design rules for when your site is viewed by a mobile device. This is usually the preferred method, and utilizes responsive web design techniques.
The other method you can use involves a redirect. When a mobile visitor hits your site, they’re redirected to a separate, mobile-optimized version of the site.
In most cases, the former option is simpler to configure and more effective in the long run.
- Make your pages scalable.
One of the first things a mobile user is likely to do when they hit a mobile site is rotate their phone or start clicking to zoom in. Mobile users are used to doing so, largely because so many sites just aren’t optimized for mobile.
What you want to do is take out those extra steps. Use the meta viewport tag in order to correctly orient the page. This tells the mobile device whether or not the page should scale, and whether it will switch perspective when the device rotates.
- Use mobile icons for branding.
One of the best ways to keep mobile visitors coming back again and again is by offering them a one-click way to do so. Apple mobile icons are a great way to do this. These icons work like a shortcut and allow the user to come to your site right from their home screen.
If you don’t configure a custom icon, Apple will default to a snapshot of your page.
Setting up a mobile icon for iDevices is relatively simple. Create a 57×57 pixel icon. Upload it to your images directory on your website. Put the following text in the header of your website:
<link rel=”apple-touch-icon” href=”/filename.png” />
That’s all there is to it.
Start with these three basic steps to get your website well on the way to being mobile-optimized.
