Why a mobile website is not good for business

It seems that every time I visit a website these days using a smartphone I get asked to download their app. Why do they do this? I’m perfectly capable of using a website, I don’t need the cutdown and ‘optimised for mobile’ versions.

This article is posted on a WordPress site and the theme is responsive. Look at it in different screen resolutions and the structure doesn’t change. What does happen is that it adapts to the device. It’s not a ‘mobile’ website.

But there are plenty of developers who will create a mobile version of a website.  I do wonder though if the site owners ever look at these mobile versions.  Here’s an example:

You would have thought a major UK retailer could do better but all they seem to have done is plump for the same cut down hopeless product that everyone else has done.

The needs of your visitors to your site are the same irrespective of the device they are using.  They are looking for the same information, buy the same products or be entertained in the same way that everyone else is. It makes no sense for a web designer to suddenly remove the features I expect to see. You could even argue that a site should be built for the small screen then scaled up for a 21” monitor but way leads to some spectacular failures. Just look as the mess Microsoft have got themselves into with Windows 8.

Mobile isn’t mobile anymore

The concept of ‘mobile’ devices falls over at the first hurdle.  I have a smart phone with a 320px wide screen. I also have a laptop with a 1280px resolution screen. Both are mobile. My Dad on the other hand has an ancient old computer with a 1024px resolution screen. Which means one of my mobile devices has a better resolution than his PC. And the recent innovation of phablets gives us smartphones with screen resolutions better than an iPad. All of which means you should throw away preconceived ideas of mobile and fixed computing; they just don’t apply anymore.

So here’s a few thoughts on creating a usable and accessible website that works on all devices.

The Logo

If it’s narrow then it will display without much adjustment. If it’s full width then you need to accept a teeny tiny logo on a small screen or you need to upload a range of logos to cover all resolutions.  You can use @media in your CSS to call up the right logo at the right time.

Consider separating logo and tagline so that they resize separately. Like on this test site.  That way you get the logo at the top and a readable tagline underneath no matter how big or small your device.  There are some very nice solutions where the logo is cropped leaving just part of the image. This could be for example just the central part showing the company name.

Navigation

The more complicated the navigation the less usable it becomes on a small screen. Be a bit ruthless, strip out dropdowns and clever styling and you make your life so much simpler.  A good primary navigation system shouldn’t have more than half-a-dozen links anyway…

Using @media you can change the way your navigation displays as the screen width reduces. Try it on this site, reduce the browser window and you will see the top navigation fold up and change to suit the width of the device. The trigger points are 768px (iPad), 600px (smaller tablets), 480px and 320px (smartphones).

Here’s a test site of mine at various widths:

The Main Content

As the meat of your site this is the bit you need to give prominence to. On a smaller device make sure it fills as much of the page as possible. Tweak the font size to keep it readable. Ideally there should be 10-12 words per line but if this gets too small up the font size a bit.

Make sure your images resize. But also make sure you resize to fit the orientation.  On a smartphone in portrait mode the image should be full width. If they turn it sideways (lanscape) then you may well need the image on the left and blurb on the right (or vice versa).

Turn off all those complicated zoomy tools. Make sure any buttons and links are increased in size so that they are easy for fat fingers to press.

If you have an image intensive site consider using an interface where visitors swipe to scroll through the images. Some gallery plugins end up being a right pain to use on a small screen, requiring you to click on a link to exit but hiding that link off screen. So you may want to deactivate these.

Sidebars

Pretty much a standard part of most websites, the sidebar holds all sorts of info: categories, pricing filters, checkout, special offer, contact forms and so on. There are two main choices here: leave it where is it or push it down below the main content.

It still needs some thought though.  You may have a checkout you want to keep next to the product and shove every things down the page.  Use @media and display;hidden in your stylesheet to hide various bits until you need them. This way you won’t have any invalid markup and you can put the checkout exactly where you want it.

Footer

This is where all the useful contact info and site links often reside. And this is where you should leave them. Complex multi-column footers just need the right floats to organise them for smaller screens.

Again look at this site on a narrow browser width. At 480px the side bar and footer are side by side. At 320px they sit one above the other. This is just one way to organise your footer. A bit of preparation on the site structure and you can do what ever you want.

What Next

Pour over your analytics. Look at the devices that people use to view your site.  If 99% of them use a ginormous screen then it’s probably not worth spending much time on creating a responsive site or a mobile app. If you have a lot of people browsing on the move then it’s probably worth investing in a responsive site.

Don’t just leap in and spend time and money rebuilding everything. Analyse your visitors and they will indicate your best course of action.