More and more people these days are accessing the Internet from smartphones like iPhones and Android phones and tablets like iPads. More than 5% of worldwide web traffic and 8% of U.S. traffic is from a mobile device, and mobile is the fastest growing source of traffic on the Internet. As more of your visitors access your site from a mobile device, it becomes increasingly important to make sure that they have a positive experience on your site.
Not convinced mobile is important? Check out these stats from eMarketer:
- The number of tablet users will reach 54.8 million is 2012 (of which 41.9 million will be iPad users). Tablet use in 2012 will be a 62.8% increase from 2011.
- Smartphone users will reach 106.7 million in 2012.
The number of people shopping from their smartphones will reach 68.6 million in 2012, and the number of smartphone buyers will reach 36.4 million.
Fortunately these newer mobile devices, unlike older “web enabled” phones, make a good effort to render normal web pages in a functional manner. Even so, there are a few things you can do to make sure your mobile visitors have an optimal experience. Below are some recommendations that will help you improve their experience, and avoid common pitfalls.
It’s important to thoroughly test your site’s functionality on a variety of smartphones and tablets to see just how mobile-friendly your site is.
Here are 3 things you can do to make your website display and function better on mobile devices:
#1 – Specify a meta viewport tag.
Because mobile devices have small screens, they typically shrink a webpage down so that it will fit the screen. These devices do a pretty good job, but specifying a meta viewport tag lets you influence how a mobile device – like a smart phone or tablet – will scale your website’s content when a mobile visitor first arrives at your site.
Using a meta viewport tag can help avoid issues where the phone shows a tiny rendering of the whole page instead of zooming right in on the important content. Non-mobile browsers will ignore this tag.
How to add a meta viewport tag:
If you are able to edit the HTML code of your web pages yourself, you’ll want to add this tag to the <head> section (below <head> and above </head>) near the top of the page’s code.
Here’s an example of a meta viewport tag:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The following directives can be used in the content attribute to control how a phone will render the content.
width — The width of the viewport, in pixels. Specifying device-width means the viewport width should be the screen width of the device.
height — The height of the viewport, in pixels. Specifying device-height means the viewport height should be the screen height of the device.
user-scalable — Controls if the user can zoom in and out. Possible values are yes and no.
initial-scale — Sets the initial zoom factor of the page. 1.0 means display it unscaled. 2.0 makes it twice as big.
maximum-scale — The limit on how far a user can zoom in, that is increase the size of the content.minimum-scale — The limit on how far a user can zoom out, that is decrease the size of the content.
#2 – Avoid using hover effects for important functionality.
A hover effect is triggered when a user moves their mouse cursor over an element on a web page. For example, a link may change colors before you click on it, or a drop down menu may appear when you hover over a navigation tab.
This matter because smart phones and tablets don’t use mice.
As the popularity of touchscreen devices has exploded, it has become important not to rely on hover effects for important functionality. Overuse of hover effects could make your site unusable or difficult to navigate for anyone using a mobile device like an iPhone or iPad.
How to stop using hover effects:
Go to your site and make sure that all menus, popups, and content can be accessed without needing to hover. If you are relying on hover effects try to figure out how to provide the same functionality triggered by a click, so that mobile users don’t encounter a crippled version of your site.
#3 – Avoid using Flash.
While flash can make a website more – well, flashy – there are currently very few mobile devices that will render flash content. Instead, most devices like the iPhone and iPad will just leave a blank space where the flash content would normally be.
For this reason, it’s important not to rely heavily on flash content, especially if you expect a significant number of visitors on mobile devices.
How to make the switch:
If you are heavily relying on flash, you’ll probably want to consult the Help section of your website editor tool or content management system (CMS), or contact its support team, to see if there are alternative ways to power your functionality. You may also want to talk with your web design person or company if you have one.
Here at AboutUs, we check our customers’ websites for these elements that affect the usability of their site on a mobile device. We also check the things that matter for SEO and their social media presence, and compare all of this to their top 3 competitors. Intrigued? Learn more about what we offer.
This article was written by Kristina Weis of AboutUs.
Kristina is customer service and social media lead for AboutUs. She helps website owners who are trying to promote their businesses online. Her personal blog is at KristinaWeis.com and she tweets at @KristinaWeis.