(This blog article was updated on 2 January 2018.)
In spring 2016 I had a meeting with a client to discuss a corporate design for him, including a website design. One thing that came up was a mobile website for smart phones. Many questions came up that needed an answer. And if you look at mobile websites in general, it doesn’t take long to find out that many companies – no matter how renowned they are – have big problems in this field. This dilemma has made me write this blog post.
WHAT IS A MOBILE WEBSITE?
A mobile website is a website that is specifically made for smart phones, so that the content is user friendly and can be interacted with easily. Let’s take a look at this example:
On the left side you see the mobile website of Adidas. In the top left corner you find the mobile menu button which we all have seen before (also called Hamburger menu), there is a search function, it’s easy to navigate, colourful call to action buttons lead the way through the user interface and everything can be read without problems. This is a mobile website. On the right side you see the website of Hilton on my smart phone. The font is way too small, I cannot even read it, you would need mini fingers to tap on the correct selection, there is no typical mobile menu button etc. You just want to go away from this site asap – the most beautiful beach doesn’t make you stay on this website. This is no mobile website.
WHAT YOU SHOULD CONSIDER
READING HABITS
The most common mistake many companies do is to transfer the entire content of the desktop website onto the smart phone. This is foredoomed, especially for large websites. Reason: The reading habits on a smart phone differ a lot from the reading habits on a laptop, tablet or PC. Thinking of the latter, you normally spend more time on a website as you sit on your office chair or your sofa for example. As mobile websites are mostly read "on the go", it means people probably spend less time on them. People want to find the information they need quickly and without hassle, when they visit a mobile website.
FROM LANDSCAPE TO PORTRAIT FORMAT
The display size and orientation play an important role too. While an ordinary desktop has a landscape format, the smart phone display has a portrait format. This means that the user has to scroll down in order to read the website. Scrolling as such is not a problem as we are used to it when using our smart phones anyway. However: Imagine a website with a lot of copy and how looooooong you would have to scroll down on your phone to read the entire copy, if it’s a 100% replica of the desktop version. Every website owner has to decide for themselves how much scrolling is okay for their target group without annoying them.
DIFFERENT DISPLAY SIZES
Another hurdle are different mobile phone display sizes. A Samsung phone for example has a totally different height-width-ratio than an iPhone screen. This could mean that a logo or text has enough space on a Samsung phone, but is cut off on an iPhone 4s because the iPhone 4s is slimmer. This is why it could make sense to create a mobile website based on the dimensions of the smallest smart phone display.
LOADING TIME
The loading time plays an important role. Google punishes websites with a long loading time and ranks them further down in the search result listing; even though Google ranks websites better in case they also offer a mobile website in addition to the desktop version.
"LIGHT" WEBSITE
You should definitely think about which and how much of your website content you want to display on the mobile version. A smaller version of your desktop website is not only sufficient in most cases, but is often also expected by your customers. Besides loading and scrolling time, consuming content is more challenging on a mobile than it is on a desktop. It’s really important to take this into account!
DESIGN TIPS
1. Long scrolling on the smart phone means you can easily lose yourself on the website. A "back to top" button at the bottom of each page or a well-known mobile menu button can help here. The menu button can either be anchored at the top or scroll with the content. In any case the user has to have to ability to quickly and easily navigate through the mobile website.
2. A very important feature is the call button. The easiest thing for a mobile website visitor is to call as they have the phone already in their hands, right?!
3. Take care of the font size. As you can see in the Hilton homepage example, a desktop font size is really not suitable for a mobile website. Good readability has to be guaranteed in order not to annoy the users!
TEST, TEST, TEST
Please don’t forget to thoroughly test your mobile website on different smart phones.
ONGOING MAINTENANCE
Don’t forget to think about the ongoing maintenance/administration for your website. If you update your desktop website, you also have to update your mobile website – at the same time please! Nobody wants to read old news. Take this into consideration when choosing which website system to go with. For example, there are systems that use one set of data for the desktop and the mobile website, so you don’t have to administrate two websites. If you update your homepage quite often, this is a crucial point in your every-day business.
For my own website, I use WIX which is a WYSIWYG module system based on HTML5. With this system, I can only (!) edit the desktop version of my website, the mobile website uses the desktop data. I cannot add anything extra on my mobile website. What I can do though, is hide elements in the mobile version so that I have a smaller, more compact version of my desktop website for mobile purposes. In addition to that, I can make fonts smaller or bigger just for mobile in order to improve readability on smart phones. I don’t want to promote WIX here, but show what is possible and – in my opinion – works well in every-day business life.
WHO NEEDS A MOBILE WEBSITE?
Until 2017:
This question is not so easy to answer. Let’s take a look at some numbers: More than half of all Google searches worldwide are mobile (source: http://mashable.com/2015/10/12/google-mobile-searches/#EuKeB.UzhaqS). Okay, strong statement. Before I offered a mobile version of hcg-corporate-designs.com, only 5.31% of my website visitors were mobile (September 2015). In March 2016, after the launch of my mobile website, 15.73% came from a mobile phone. The fact that I offered a mobile website, tripled mobile phone access on my website. However, I work in the B2B segment, and this is where things are a bit different compared to B2C. For the B2C segment or end customer businesses, it definitely makes sense to offer a mobile website in most cases. But in the B2B segment there are business clients that mostly sit in front of their computers and laptops all day anyway and might want to dive deeper into product research.
From 2018:
Google launched its mobile first policy, as described in Brian Dean's blog (scroll down to chapter 4): Google is crawling websites based on their mobile version - even though you're not on your phone but searching something from your desktop computer! Yes, you read right. Your mobile website will determine your Google ranking in future, not your "normal" homepage. So if you don't have a mobile website yet and if you care about your Google ranking and SEO (and you really should), it's now definitely time to get a mobile website.
MY CONCLUSION
Offering a mobile website as a "light" version of your desktop website can be a good idea, and if it’s just for SEO reasons. If you are operating in the B2C segment, than you should not just think about a mobile website, but definitely create one.
What are your thoughts on this, what are your experiences with your mobile website? I'd love to hear about it, tweet me your opinion.