.
According to recent Nielson's numbers, 43% of all mobile phones are smartphones, and Google anticipates that 85% of mobile devices will be web-enabled by next year. This means smart marketers simply can't afford to ignore mobile phones and mobile phone users. But what do you really need to do to make sure your website is mobile-optimized? Here are the top 3 essentials for a mobile-optimized website.
1. Create a Mobile-Friendly Version of Your Website
The first -- and most important thing -- you can do to mobile-optimize your site is to create a mobile-friendly version. This allows people who are visiting your website on a mobile device to easily view it on a screen that is typically 2 inches wide by 3 inches long. Because of their size, mobile phones present a unique challenge when displaying lots of information. You want to make sure that text is readable, links and calls-to-action are clickable, and that the site is easy to navigate.
There are 2 ways you can implement a mobile version of your website.
- Mobile CSS: Mobile CSS allows you to change the way your website is organized and displayed just on mobile devices. Just as you can have a printer-friendly version of your page, you can also have a mobile-friendly version using mobile CSS.
- Mobile Redirect: You can also choose to create an entirely different website for mobile viewers. If you do this, you need to have a mobile redirect so that users who visit your site using a mobile device will automatically be redirected to the mobile version of your site.
2. Set Up a Meta Viewport Tag
Smartphones are also navigated differently than a desktop or laptop computer. Instead of using a keyboard and mouse to move around your site, users are typically using their fingers on touch screens. As a result, smartphones allow users to do things like rotate their phone to view a website in a different orientation or scale a page larger or smaller.
The meta viewport tag is what makes this all possible. This line of code tells a mobile device how to orient a page when it's loaded. It also determines if a page can be scaled larger or smaller and if it should rotate as users rotate their mobile devices.
If your site is missing a meta viewport tag, you need to add a line of code like the following to the header section of your website. (Note: This line of code can be customized by your developer depending on your desired height and scale specifications)
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
3. Add Apple Icons
Apple icons are a great branding opportunity for people who use iPhones, iPads, and iPod Touches. Apple allows users to add a quick link to the desktop of their device for easy access. Similar to a shortcut, the quick link lets users come back to your site with one click, right from the home screen of the device. Without any customization, the device will take a screenshot of your site and use this as the icon. Defining the icon that will be displayed is a great branding opportunity.
If your site is missing the Apple iPhone and iPad icons, you will need to do three things.
- Design a 57x57 pixel icon that you would like to use for your Apple iPhone and iPad icon. This can be something as simple as a screenshot that you crop to the appropriate size or your logo.
- Upload the icon to the file manager of your website where you store other images.
- Add the following LINK element to the Header HTML of your website, pointing to the new icon you created.
<link rel="apple-touch-icon" href="/filename.png" />
Marketing Takeaway
The role of mobile devices in marketing is still being figured out by users and marketers alike. You can expect to see changes in how smartphones are used and what you need to do to support your users. Implement these 3 essential steps, and you'll be ahead of the curve, making it easy for mobile users to access your website and its content.
Have you mobile-optimized your business website yet?
