7 Tips To Make Your Web Site Mobile-friendly

This guest post has been written by Igor Faletski, co-founder of Mobify, the popular service for optimizing a site for the mobile web. SitePoint uses Mobify for its own mobile site — check it out at http://m.sitepoint.com.

1. Style for mobile

Congratulations — you’ve decided to embrace mobile, one of the fastest growing segments on the Web. The first thing you’ll notice is how diverse the mobile ecosystem is. Browsers, screen sizes, connection speeds — everything is different. The Web community enjoyed a brief period of iPhone domination, when addressing one browser/screen resolution seemed sufficient. But now that Android devices (which come with a variety of screen sizes) are quickly gaining popularity, it’s important to once again think of the bigger picture.

When styling your mobile site, stick to relative units — percentages, ems and so forth. There is no way to predict what mobile devices your users are using today or might be using tomorrow. Relative units can go a long way when it comes to making a lasting, quality mobile design. It’s also important to maintain visual consistency with the desktop site — this will make your brand stronger and reassure your mobile visitors that they’re in good hands. You’ll also want to minimize scrolling and page transitions in order to reduce time spent looking for content.

Snook.ca mobile site

2. Resize images

Small screens call for small images. There’s just no reason to push desktop-sized, heavy image assets to mobile users that don’t need them. A good strategy involves resizing the images on the web server — this way they take up to 90% less time to load. CSS-based resizing can also work, although it carries performance and bandwidth penalties.

If you can, make your optimized images link to the full, original image hosted elsewhere. Your mobile visitors will appreciate it in case they want to zoom in to get more detail.

Matt Bango mobile site

3. Automatically detect mobile devices

Typing is a pain on even the best mobile devices, and many users avoid it when browsing. Combined with the fact that communicating to your users that you actually offer a separate mobile version of your site, and getting mobile users to visit the mobile version of your site is actually quite difficult.

Thankfully, a variety of methods for automatic mobile device detection have become recently available. The most reliable approach, in our experience, is User Agent detection, where a server makes a decision on what to serve based on how an incoming browser describes its capabilities. Other implementations feature real-time JavaScript requests to databases like DeviceAtlas or WURFL that also supply information on what a device can do. A mobile version is not complete until it’s automatically triggered for every mobile user!

Minlo mobile site

4. Rethink navigation

Your website might have a couple of dozen footer, header and sidebar links — but do they matter to your mobile visitors? Mobile web surfing is known for its high bounce rates (users come to look at just one page), so focus on a few key areas of the web site and acknowledge your visitors’ short attention spans. Don’t think twice about eliminating links to destinations that don’t have a high mobile priority.

At the same time, consider adding or prioritizing mobile-specific items. That tiny “Contact” link hidden in the footer of your full site? It could be a great top-line header item for the mobile version, simply because many users will come looking for a phone number or your office address. Another great item to have in the mobile header is Search.

metrolyrics mobile site

5. Provide a clear path to the full site

As a web designer, you are responsible for making content decisions for the mobile visitor. However, occasionally a piece of information that a user is looking for is not included in the mobile version. One very easy solution is to put a footer link to your “Full Site” on every page. Make sure that this link takes the user to the full version of the exact page that they’re currently browsing.

Once the transition to the full site is complete, it’s considered good practice to disable mobile redirection for that user. Some sites do this permanently (e.g. Digg Mobile) while others (CNN) set a timeout period of 1-2 hours with a special cookie. Your call!

6. Don’t break links

In the early days of the mobile web, it was common to see standalone mobile web sites that were structured completely different from their traditional, desktop counterparts. Today, mobile traffic is driven to a large extent by Google searches, links in Twitter streams and email. Most of those links point to desktop web sites, which is why automatic device detection is so crucial.

However, after the mobile user has been detected and sent to m.yoursite.com, it is important to show them the exact content that they expect. For instance, if a www.yoursite.com/category/article/ was the original link, present the visitor with the mobile-optimized m.yoursite.com/category/article/, not just the m.yoursite.com homepage. This might sound easy, but a significant number of web publishers don’t do this right, and end up surprising and frustrating their audience.

7. Measure the mobile audience

Mobile devices are quickly becoming an integral part of the Web, rather than an isolated market niche. Plenty of mobile analytics and advertising services have come and gone, but Google’s recent AdMob acquisition and a Mobile Analytics API are going to further help consolidate mobile services under one roof.

Measuring the mobile audience is important for several reasons. First, by knowing what devices are popular with your users, it is possible to make informed design decisions. For example, if your mobile audience is 99% iPhone, you shouldn’t worry too much about BlackBerry compatibility. Another aspect is traffic and lead generation. After looking at the mobile stats, you’ll likely see that mobile and desktop users prefer different content. Knowing all this, it is possible to create an outstanding mobile presence and successfully monetize it.

Thanks for reading these mobile tips, and best of luck with your mobile sites!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au Tyssen

    One very easy solution is to put a footer link to your “Full Site” on every page. Make sure that this link takes the user to the full version of the exact page that they’re currently browsing.

    Is there a way to do that using Mobify?

  • http://www.crearedesign.co.uk/ Nicola Connolly

    Really interesting and useful general tips here, thanks Igor. Mobify is not something which I had heard of until recently so I will definitely be checking it out. It’s becoming more and more important, as you say, to ensure that device users are seeing relevant web content in an accessible way. Technology such as yours is making overcoming this challenge more achievable for those with little or no programming knowledge – leading to a better browsing experience for mobile users.

  • Ambuj

    Another thing to add to the list: if you are using WordPress and would like to target iPhone users then use this plugin: http://wordpress.org/extend/plugins/wptouch/

  • http://www.factor1studios.com mattlikeshockey

    now how about some getting started resources?

    I have seen countless articles with theory, but little to clear up the confusion on the code. So many parameters like viewport and mobile specific css. all of which seem to be hit or miss. I have had nothing but bad luck testing, experimenting and trying to find the right methods.

  • Toby Clarke

    This has been very interesting to read and we will bear it in mind for our website, it’s so important to have your site optomised for mobile use nowadays.

    Toby Clarke

    http://www.minutebox.com

    Experts and those with skills can now sign up to our beta testing service to become members of an online marketplace where they can monetise their spare time.

  • Niubi

    http://www.dubli.com is a pretty good example of how to make a site mobile friendly.

  • Elizabeth K. Barone – ekbdesigns.com

    I wouldn’t display images at all on a mobile version of a site. I’d just create a separate stylesheet and strip the site down to just plain text, with a smaller version of the logo if needed. Images just slow down loading time and often frustrate users. They also take up space on the screen and force you to scroll more. I don’t know about anyone else, but my thumb can only do so much scrolling before I give up and decide to visit the website later on my laptop — or not at all.

  • James Pearce

    A powerful WordPress option is:

    http://wordpress.org/extend/plugins/wordpress-mobile-pack/

    Which attempts to do a lot of what is described in this article, out of the box, for WordPress sites.

    (Plug? yeah ;-) )

  • Wikus

    I agree with matt, good article but some tips/resources on how to do it would’ve been useful…

  • Les

    Very informitive, thanks.

  • Dimitry

    Very nice post. I think you sould look to new wap creator. http://www.superwap.eu

  • James

    But you didn’t actually explain how to do these things.