Optimizing your Website for Mobile Devises

It wasn’t too long ago that a website designer only needed to worry about how the website looked on a few of the major browsers and 2-3 different screen resolutions. Usually that meant every couple of years updating your site to a higher resolution with a larger screen size. Anymore that is only half the story. If you are not paying attention to how your site looks on the new (and much smaller) mobile devises you will be losing visitors and in the long run loosing sales.

SmartPhone, tablet and computer Resolutions

Due to the physical size of the screen a site optimized for any one of these three devises (SmartPhone, Tablet or Computer) will not look or act right on the others. While this is not always the case between Tables and Computers because the tablet browser is usually made to zoom out to see the full page and zoom in so that a link can be clicked you still need to make sure that the content is visible and the links can be found even on these browsers.

What does it mean to be Mobile Friendly?


This depends on the nature of your original site. But in general there are several things that need to be considered.

  • Screen Size and Resolution: Although these are often dealt with at the same time, you really do need to consider both separately. For example the new Kindle Fire HD and IPADs have high Resolution screen, this works great for movies but with the small screens may mean that some of the elements of your website may be too small to see easily. This is especially the case if you are targeting a somewhat older audience. For sales pages it is often a good idea check the page to be sure that images and font are rendered at a size that makes for easy viewing. Keep in mind that as your audience gets older the chances of them zooming in on the page grows, that means that key text and images may be pushed off to the side and never viewed by the potential buyer.
  • Bandwidth Needed: While wireless internet speed continue to increase that doesn’t mean you want to chew up all the band width with large high definition pictures. Consider also that mobile devices often are limited in their download speed and if it takes too long to download your reader (and potential buyer) will likely go somewhere else. That being said if someone is trying to blow up a picture to look at the detail before buying an item you should have that option available.
  • User Experience: Often a page that looks great with easy to find and use navigation gets adjusted on smaller screens making it difficult to find and click on links to other pages. Some styles of links just don’t work which include at times button links and usually all flash links. While navigating the web with my tablet I often find that when I am ready to buy an item I can’t because the website owner has used a style of link my tablets browser refuses to click on. This seems to often be the case with shopping cart checkout buttons. That means I need to open up my laptop, find the page again and then complete the purchase which greatly increases the chance of my finding the item and buying it elsewhere.
  • Flash, Cookies and Javascript: Three very useful tools when designing website which can be mobile device killers. While it has never been a very good idea to imbed you links in Flash or Javascript, with the age of Mobile devises this can mean full sections of your site can become impossible to navigate. It also could mean that key elements of your design show up as that ugly “X” on your site visitors screen. This at times leave you with an uncomfortable choice either a boring static design that works well with all mobile devises or a engaging animated site that turns away potential mobile customers.

Is it worth creating a second site only for Mobiles?

Is it worth creating a second site or a “Mobile Friendly” version of my site within the main site only for Mobiles? This depends to a large degree on how much on your site will be inaccessible to mobile devises. If your site is mostly static, clean navigation, moderate use of headers and other screen space hogs and well optimized (pictures, compression etc.) than you might be able to stick with one site and maybe have a few pages for mobile devices only when needed.

However if you are using a complex, Flash and animation oriented design with a large header, complex navigation (or navigation that is not near the top header or left sidebar), than you might consider either a completely separate mobile site using a .mobi extension instead of a .com (other one of the others).

So, next choice, do you make the site automatically check for device type and redirect you to the right page or site, or do you have a link on the page where people can manually click and go to pages optimized for mobile devises.

Automatic Redirect vs. a Manual Link

So you have made the decision to make a “Mobile Friendly” version of your website, you now have a choice on how to get people to it. There are really two choices.

  • Automatic Redirect: Personally, don’t think it is a good idea to make decisions for my visitors. Not all mobile browsers render the pages the same and some readers like to use the heavier computer browser optimized pages instead of the lighter mobile optimized pages. However, you can do this with code. Most browsers tell the page information about the user’s computer when a page is requested. You can use this information to programmatically decide where to redirect your visitor.
  • Manual Link: I like this choice better, usually in a place that is obvious like at the bottom of the page or in the top right hand corner you put a link that goes to your mobile optimized section. This allows your visitor to make their own choice as to how they would like to view the page. Be sure to include a similar link going to your standard pages on all of the mobile optimized pages.

The decision whether to create a second mobile optimized version of your website or to simply reduce the elements on your normal web optimized website that will cause problems with mobile browsers isn’t an easy one and will be different with each website. It is a good idea to check your website analytics to determine how much of your traffic is affected and if it is causing an adverse affect to the “Bounce Rate”, “Pages / Visit” and “Avg. Visit Duration” of your mobile devise visitors. If so, then the next consideration is the cost of making the changes vs. the expected return on the dollar. Creating and maintaining a second Mobile Friendly site can be expensive but is often worth the price if it will increase the duration of visits and conversions