Mobile devices are quickly becoming the preferred way of browsing the internet, and by 2014 it is expected that mobile devices will surpass desktops in web use. That is a stunning trend, and naturally a lot of our clients are asking about making sure their site is ready for mobile.

With that, there are a lot of discussions about the best way to develop for mobile, and there is no single approach that makes sense for every site. In this post I’ll explain the two most-popular techniques for making a site ready for mobile.

Mobile-Friendly

A site that is mobile-friendly is simply a site that will display correctly on smartphones and tablets. Everyone gets the same site and user experience whether you visit the site on a smartphone or desktop computer.

To do this, the site has to be designed to accommodate mobile devices. This includes fonts, images and layout, and interactive features such as slide shows and videos. It also includes functionality such as forms processing, e-commerce systems, and other applications.

We regard this as the absolute minimum for new website development projects, and it is fairly straightforward to accomplish. Because mobile connections can be slow, images should be compact in size to ensure fast loading. And you also have to think about how a site will be rendered on a mobile device, particularly smartphones with small screens. Also, you have to make sure that you use only mobile-friendly technology, such as eliminating Flash.

Layout is also critical, and can make a site either a breeze to browse on a small smartphone, or an absolute slog. Some considerations:

  • The width of your main content area should be narrow enough to read easily on small screens. This is important – how many times have you seen an otherwise nicely designed site that you can’t read the text when it is the full width on your smartphone screen.
  • Make sure the position of any popup layers are sensitive to where you are on the page. Nothing is worse than having to zoom out and scroll around to kill a popup that is off your browser view.
  • Your site should be finger-friendly – elements such as tool tip hovers, right-clicks, drag and drop, and other interactions can be very difficult on mobile devices. And buttons should be large enough so that a fingertip touch does what the user expects.

Mobile-Optimized

A mobile-optimized site is a site built specifically for mobile devices. When a mobile device is detected, the mobile-optimized version of the site is delivered. The goal with a mobile-optimized site is to provide a streamlined user experience that is specifically designed just for mobile devices. Usually this involves a single block design, simple navigation, large buttons and minimal graphical elements that can slow loading and rendering.

So what are the considerations for moving to a fully mobile-optimized website? Well, if your site requires fairly simple interactions and is mostly informational, then a mobile-friendly design is probably all you need. However, if you are getting a very high percentage of your visitors from mobile devices, and you have a lot of interactions such as e-commerce, then a full mobile-optimized site might be worth the extra effort and cost.

If you do go this route, there are a few things to consider:

  • Go all in – make your mobile site truly mobile. Make it really, really simple to navigate and use. Get rid of everything that isn’t essential. Eliminate all popups, images you don’t need and interactivity that can be slow to load like image rotators.
  • Don’t prevent access to your non-mobile website. Give the user a button that will allow them to jump to the full site. A lot of mobile device users actually prefer the full site.
  • Unless you are 13 year old girl, you probably can’t type 100 words a minute on your iPhone. So as much as you can, allow text entry using menus, selection lists, checkboxes and prepopulated fields.

Beyond the two options for mobile websites we have touched on today, there are several new techniques that are gaining popularity such as adaptive and responsive website designs. In future articles we’ll explore these options, and the pros and cons of each.