Top 15 Mobile Website Best Practices

A new reality is rapidly approaching where web design companies will have to adapt or die off as mobility becomes the leading way that consumers access the Internet. Any business that doesn’t have a mobile-friendly version of their website within the next few years may face the wrath of consumers.

The list of considerations and best practices for mobile web design differs from those of desktop websites. My focus is on smartphones not tablets (even if most of the points hold true for iPads and similar devices).

(1) Form-fitting Dimensions

On moving day, you hire movers with a truck because everything you have in your house can’t possibly fit in your car. Similarly, not everything that’s visible on your desktop website is going to fit into the smaller space of your mobile device’s screen. The dimensions of each smartphone will vary and the mobile design needs to account for that.

For example, the sidebar on your website has got to go! As does the huge image in the background. In addition to this, your computer screen remains in the same orientation but your smartphone can be turned on its side, so it’s important to consider what you want people to see when they look at your mobile website for the first time. At the very least, there should be a logo (so they know where they are), menu button that’s accessible without the need to scroll down to find it, and the first item you would want them to see (whether it be a featured product, service or bit of information).

(2) Programming Languages

One of the benefits of programming for mobile devices is that there’s no longer any real need to cater to the quirks of Internet Explorer. What does that mean for you? Well there are some advanced styles and techniques that you can implement that don’t have a lot of overhead for your mobile website. Details like indented text, shadows, gradients and slick text can be easily created without having to worry so much about compatability.

Here’s another way of looking at it. You know how glossy and crisp everything looks on your iPhone compared to your desktop PC? Your website can have that same look and feel without harming your existing website.

(3) Format For Touch

While we still don’t touch our laptop screens or computer monitors, the mobile web is all about touch. Consider how easy it is to use your website knowing that people will be touching their screen to navigate, enlarge items of interest, and so on. Use this new dynamic to your advantage.

If you’re having trouble figuring out how to do that take a look at how the apps work on your phone. Everything responds to your touches and gestures in a much livelier fashion than on your desktop computer. Bouncing icons, sliding panes, and loading animations are everywhere. Make your site feel like an app and your visitors will feel right at home.

(4) Videos

Many videos on the Internet are viewable thanks to a program called Flash. Here’s a fact you need: iPhones have a lot of difficulty reading Flash files. If your website was built in Flash or has Flash elements to it, you’re in trouble. You need to re-do your site to work on mobile devices. The same can be said for other programmed features that may be present on your website. The sad part is that professional SEO consultants have been advising against the use of Flash for years and this is yet another reason not to use it.

If you are planning on incorporating video into your website you can’t simply rely on any old video hosting service. Make sure your videos can be delivered on a smartphone, preferably using HTML5 techniques.

(5) Photos

Unless you’re a photographer, a plastic surgeon who wants to feature before and after photos or have some other worthwhile reason to do so, don’t use an excessive number of photos in the mobile version of your site. Rather, focus on the goal you have in mind for your visitors. If your photo doesn’t lead to that end, or worse distracts your visitor, then it should go.

You don’t need all of the photos and graphics that have been interspersed within your original website’s text to add flair. It’s important to consider the mindset of someone who is looking at your website on a mobile device. Chances are, they are on the move and want some useful piece of information from your site (such as an address). The addition of photos is typically not necessary under these circumstances. And as mentioned above, reducing the number of photos will help your website load faster on a mobile phone.

(6) Cross-browser Compatibility vs. Cross-device Capability

It’s much easier to test how a website looks on different browsers (e.g., Windows, Firefox, Safari, etc) than comparing what it looks like on a mobile device. One obvious point is that designers simply won’t go out and buy many different phones. They may stick to an iPhone and leave it at that.

Still, checking across several phones, with their varying browsers (iPhone, Android, etc) and screen sizes may prove beneficial so if you have reason to believe that your target demographic will be using a Blackberry over an iPhone, for example, be sure to take that into account when preparing a mobile website.

(7) Utility & Marketing

A good SEO web designer will put calls to action around the website. Because of limited screen real estate mobile web designs don’t have that luxury. You want to limit the amount of screen space being used (although tablets will have more space to play with).

That said, mobile designs need to take advantage of the very nature and origin of the device in the first place, that is, the phone itself! Create literal calls to action with an easily clickable phone number. Let consumers click to call you as they’re just a touch away.

(8) Users & Choice

On a desktop website, you would never provide users with the option to view the site as a mobile version but on a mobile device, users expect to be able to switch between versions. Make it easy and obvious for them to do so.

(9) Keep It Quick & Simple

Patience for waiting for a site to load is measured in milliseconds, literally. While on the go and without the luxury of time, people expect websites to load very quickly – even faster than on computers. How do you reduce the waiting time? For starters, remove all the bloat and glam of your desktop website. You don’t need fancy background images, moving banners, and so on. Keep it simple yet appealing, quick to download, and above all to the point.

(10) Text Issues

This is a tough one for most businesses to understand. There is a good chance that you don’t need all of the pages on yoru current website to be developed for a mobile device in all of its grand detail. If someone is using a phone to access info on your website, they probably don’t have time or patience to read every last sentence or page that you have posted. You may want to consider just posting the main pages and then directing them to your desktop website for further information.

(11) E-commerce Content

This is a tricky one as well. Similar to your decision about how much content you want to highlight in your mobile version, you should consider that product info may be best displayed in a different format given that consumers are accessing it on a mobile device. Consider that each product page may just consist of a small image, price, brief description, and a few options like colour. Just to be clear, this is just an idea. It’s not written in stone.

(12) Layout & Navigation Menu

There should be a simple navigation system and easily recognizable layout for each page. If your business has a large website with many different “streams” that people can follow through your website, you should consider simplifying it for the mobile web. Don’t kid yourself, this takes time and can be a lot of work from a programming perspective. Think it through and be reasonable with respect to what you’re trying to accomplish.

(13) Cost

Remember that the more schmaltz you add to your website, the more expensive it will be for many consumers. Not everyone has the most robust data plan and some mobile phone packages are quite expensive. If it costs too much to visit your website, many people won’t.

(14) SEO

Search engine optimization (SEO) for mobile is also a key factor. You don’t want to get a duplicate content penalty and have your site penalized or banned. Make sure your web designer takes the necessary steps to maintain your rankings in the search engine results pages while working on a mobile version of the site. Also, make sure that you consider how some features work on a mobile device. For example, you may have crafted a great title-tag for your desktop website but there is limited space for the wording at the top of your mobile device’s browser. You’ll likely have to cut it down to a just a 2-3 words.

(15) Analytics

When you look over your website statistics, consider reviewing and separating desktop visitors from mobile visitors.

What Comes First?

Over the last 2 decades, we’ve built desktop websites and now we’re converting those into mobile web designs. In the next few years, many companies will build a mobile website first, then consider a desktop version as a secondary option.

As usual, I encourage you to add your own thoughts on what I’ve written and what I may have missed.