Top 10 Tips for Designing a Mobile Friendly Website
1. Top Ten Tips for Designing a Mobile Friendly Site
November 13, 2009
Top 10 Tips for Designing a Mobile Friendly Site
1. Set a Default Zoom – You may want to consider getting rid of any extra white space.
For example, if your site is centered and has white space on the left and right sides,
visitors will likely want to zoom in to see things more clearly.
You can automatically zoom in by default, so visitors don’t have to, by adding the
following line of code in the <head> </head> section of your page…
<meta name = "viewport" content = "width = device-width">
2. Optimizing Images – Keep in mind that connection speeds on mobile devices are likely
much slower than your computer. By reducing the quality of your images, you can
dramatically decrease the size of your image files, while having very little (if any)
noticeable change in the image itself.
Also, make sure all your images have alt tags. Many mobile device users have settings
programed not to display images.
3. Remove Animated GIFS – If you have animated GIFS on the site, you may want to
remove these, as many mobile devices currently do not support these.
4. Remove Flash Content – Similar to animated GIFS, flash content currently is not
supported on most mobile devices.
5. Add a Click to Call – Do you have your phone number displayed on your site? Many
devices such as the iPhone allow users to click the number and automatically start
dialing. In order to set this up, create your phone number as a link in the following way…
<a href="tel:555-1212" target="_self">Call Us Now</a>
6. Eliminate as Much as Possible – If mobile device traffic is an important part of your
site, remove as many unnecessary items as possible. “Less is more” when it comes to
creating a mobile friendly site. Considering making your site a one column site, as
opposed to a two or three column site, in order to give your site the best appearance
possible.
7. Create a Mobile-Exclusive Page – You may also consider having a link on your site
exclusively for mobile users. This page could contain a single column that includes links
to popular pages on your site. If you want to be even more advanced, you can
automatically redirect users that are using a mobile device to this “mobile exclusive”
page.
2. Top Ten Tips for Designing a Mobile Friendly Site
November 13, 2009
8. Consider Text and Spacing – Keep in mind the behavior of mobile users on your site.
If links appear close together, it may be difficult for users to click on the correct one with
a mobile device. Also, small text does not suit well on a mobile device. Keep these types
of things in mind when optimizing your site for mobile users.
9. View Your Site – What better way to find any flaws in your mobile site than by
viewing it in a mobile device? This is a great way to get ideas on new site changes that
will make your site more mobile ready. Don’t have a mobile device? Many mobile device
companies have software that allows you to preview sites on your computer. iPhone’s
preview tool can be downloaded here …
http://developer.apple.com/iPhone/program/download.html
10. Advanced CSS – You can create a custom CSS that will display your site differently
when it is viewed on a mobile device. Add this line of code in your meta tags…
<link media="only screen and (max-device-width: 480px)"
href="/iphone.css" type= "text/css" rel="stylesheet" />
… then create an iphone.css file that suits well to your site.