The following is a guest post by Adrienne Erin from Design Roast.
Mobile web design is more important now than it ever has been, and it is only going to become more vital. The average American spends nearly six hours a day using their digital devices, close to three of which are spent on mobile devices, according to Smart Insights.
Despite the huge increase in mobile web browsing, businesses and brands still make some pretty frustrating mistakes on their mobile sites. Some have been slower to adapt than others. The result is an, at times, frustrating web browsing experience for those of us using our mobile devices.
Google is on the side of the user – at the beginning of this year they made an ultimatum for webmasters: go mobile-friendly, or risk losing rankings. “Mobilegeddon” came and went, but some mobile websites make these six unacceptable mistakes.
You open Safari on your iPhone, type in the web address you want to navigate to and are greeted with an ad to open or install this site’s mobile app. We’ve all found ourselves met with this unnecessary distraction.
If a user has consciously made the decision to view your site on his or her mobile device, you should not be discouraging them from continuing to said site.
Consider Buzzfeed’s mobile site homepage above. When I open Buzzfeed’s site in my Safari browser on my iPhone, I am not met with a promotion or ad for me to download the Buzzfeed app.
Be sure to keep this in mind if you are designing a mobile site that also functions as an app. If you must include the app connection, consider looking into Smart App Banners for iOS devices. This allows for a smaller promotion at the top of the page, which may provide less of a distraction for visitors.
When formatting mobile sites, designers sometimes forget to consider the fact that visitors will be using their hands to navigate the site rather than a mouse. Naturally, fingers are less precise at navigating a site.
Occasionally, mobile sites keep their buttons and menu items at a smaller size, which would work well when navigating a desktop site, but prove difficult to navigate on a mobile device. When configuring a mobile site, you should aim to keep the items needed to navigate the site to a minimum and make them as finger-friendly as possible.
CJ Pony Parts is a Ford Mustang parts provider with an extensive store catalogue containing tens of thousands of products. On the desktop site, the search bar shares prominence with an extensive drop-down menu of product categories. On the mobile site, the search bar takes precedence – because for a user navigating with their fingers, a search bar is far easier than scrolling through a menu.
When you are designing a mobile site, you should keep in mind the key action you want visitors to your site to take. Whether that is signing up for email reminders, adding an item to their cart or purchasing a ticket, it should be front and center on your site. Visitors should not have to look around (e.g. scroll down) to find it.
Retailer Zara’s mobile site, shown above, does an excellent job of allowing its visitors to browse its products while easily adding them to its cart. The “add” button appears directly under the product and shoppers can even select color and size without navigating from the product view page.
Zara’s mobile site design makes its shoppers’ experience direct and simple.
There is a lot of contention on which is better: a responsive website, which works for browsers on any size screen, or separate mobile and desktop websites, which cater to the different needs of these audiences.
On the positive side, having a separate mobile content allows you to pare down the experience of your website to what your visitors really want or need. Often, this means a faster website.
However, maintaining two versions of a website is a lot of work, and it complicates your SEO. Controlling the redirects can be tricky, and done incorrectly you could be redirecting a lot of your traffic straight to a 404. Additionally, user-agent detection doesn’t always work the way it should, which means you could sometimes be accidentally serving up the wrong site to your visitors.
It is my opinion that maintaining two distinct websites is a bad decision for the long term. Some users may want access to features that are unavailable on your stripped-down mobile site. Not to mention all the time and money it takes to maintain two versions of the same content, update information in both places when needed, etc.
Productivity app Kanbanize has a gorgeous website that scales to fit whatever size screen it encounters. Shown above, the homepage makes a big impact whether the visitor is on desktop or mobile.
Honestly, this is a mistake whether the majority of your visitors get there on mobile or on desktop. Your homepage is almost always going to be one of the most-accessed pages on your website;
If you must use separate sites for whatever reason (maybe your CMS doesn’t allow for a responsive enough experience, or your mobile and desktop visitors really do have different needs and priorities from your site), make sure your homepage reflects your mobile browsers’ needs. It should be easily navigable and help them get to the parts of your site they want to get to quickly.
Sephora’s mobile site, shown above, is a great example of a homepage that quickly and easily gets visitors where they need to go. Sephora’s mobile site is “finger-friendly,” with big, wide navigational buttons, and their homepage lists most of the major parts of the site and product categories you might want to access.
This allows for simple navigation and leaves visitors more likely to stay on your site than they might otherwise if they face the frustration of trying to navigate to content on a site designed for desktop.
When designing a mobile site that hosts a lot of photo or video content, you must be sure that this content is available to watch on mobile devices. I know I’ve been on sites on my iPhone that might not load certain content or claims it is “unavailable.”
This might be due to a large number of files hosted on your site. These files might require flash player to be viewed, which some mobile devices do not allow.
Huffington Post’s mobile site, shown above, hosts videos and photos with its articles. This content is available to visitors easily. Despite hosting a large amount of videos and photos, Huffington Post ensures its mobile site’s visitors can view all of these.
If you plan on hosting a good quantity of photo or video content on your mobile site, make sure it works across devices. Google has even created a guide to ensuring your content is not unavailable on mobile devices.
With the importance of mobile now undeniable, make sure you are not making these mistakes when designing your mobile site. Keep in mind the user experience, the actions you’d like them to take and what reflects best upon you.