For today’s web design post, I thought it was necessary to talk about something that is very relevant to today’s average customer- mobile usage. There are many great websites out there that are cutting edge technology, follow most of the latest design trends, and really do well to explain exactly what the business does. But how does that website look on a smart phone?
Maybe you’ve experienced this before. You’ve got a smart phone. You’re at your favorite store, and a thought comes rushing into your mind- “I wonder about [blank]. I should check that out on Google.” So you pull out your phone, search Google, and go to the first relevant website that shows on the search. Suddenly, you find yourself staring down some of the smallest text you’ve ever seen in your life. So, as any savvy smart phone user would do, you perform the “two finger spread” motion 26 different times to try and zoom in to the website in order to read what it says. You’re not alone!
Responsive web design, or the approach to web design in which a site is crafted to provide an optimal viewing experience for any platform, has rapidly become #2 in the top web design standards. This is no surprise, as some 88% of U.S. adults own a cell phone of some kind as of April 2012, and more than half of these cell owners (55%) use their phone to go online (Pew Internet & American Life Project). Not to mention, 31% of current cell internet users say that they mostly go online using their cell phone, and not using some other device such as a desktop or laptop computer.
So what is Responsive web design? Basically, a responsive website is one that resizes, pans, and scrolls differently depending on the type of device it is being viewed on.
As you can see here, the phone on the left is viewing the regular, non-mobile website. At first glance, you cannot read the text, find the navigation, or make much of the website in general.
The image on the right is the optimized, mobile-ready website for eBay. In contrast to the regular website, it’s very easy to see the navigation.
What’s more, the mobile user’s internet experience is completely different than a customer using a conventional computer to surf the web. Understanding that mobile web can be slower, and that a customer using their phone to check a website is generally at the point of making a decision, you have to re-think your tactics. Here are some helpful tips to keep in mind for your mobile users.
Use Only the Essentials:
The best mobile websites are ones that deliver the best navigation experience, despite the limited real estate. So the first thing to do is to prioritize the content that would make it to the small screen. What essential can be put in, without a horizontal scroll bar, and without making the page too long.If it is fairly long, have a link on the footer to take the visitor to the top of the page without having to scroll back.
Your mobile website should match your regular website in appearance. This makes it look familiar to returning visitors, and establishes a connection immediately. It could be the color schemes, logo and other trademark visual elements.
Make it Readable.
Mobile devices are most likely to be held at arm’s length. So smaller text and too many links are going to make it all the more difficult to find a speck of information. Interaction is going to be “touch”, rather than point and click. So the interactive items like links need to be touchable icons.
And Writability too. Text input fields on forms can be a pain if there are too many. It is not so easy to type using an on-screen keyboard on hand-held devices.
Having too many images as in your regular website can seriously slow the page down on mobile devices. Use very few, compressed images.
Smart phones offer features like “Tap to call” or “send an SMS”. A visitor can touch the contact number on your website to initiate a call instantly. Features like this ensure seamless navigation, resulting in higher conversions.
In our mobile age, and with the staggering statistics of your customers who are using their phones to view your website, are you ready?
Bonus: During this important presidential election, both Democratic and Republican candidates have spent small (or large) fortunes on their websites. Both of which have mobile capabilities, only one has a separate mobile website (rather than their main site being responsive. Check them out!