Top 10 Tips for Designing a Mobile Friendly Website

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.

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.

Top 10 Tips for Designing a Mobile Friendly Website

0 comments

Notes on slide 1

Favorites, Groups & Events