7 Examples of Quality Mobile Web Design
Mobile optimization is more than stripping pictures out, increasing font size and squishing the page. Good mobile designers think about the psychology of the mobile user, and model a conversion engine designed to give mobile users what they want as soon as they want it. The following seven examples highlight some of the best aspects of mobile design, with some commentary.
Captain Morgan has a distinct, characteristic brand, and we’d expect to see it displayed on their mobile website—which we do!
Not only is the website functional, but it also has fun, silly sections, like About the Captain, filled with faux history, and the Captain’s Conquest mobile game, which will appeal to young, college-age drinkers. Captain Morgan has truly gone beyond the call of duty by creating a mobile game to promote their product.
One tap away are the meat-and-potatoes of the site; the rum list. Each rum has its own landing page with detailed information and large pictures, ensuring that the user isn’t forced to zoom in. Excellent.
It may not be the sexiest site in the world, but there are two aspects of this website that make it stand out, and worthy of this short list.
One, it’s a fairly traditional brand. Your grandpa probably used Clubman products. You don’t see TV commercials of barrel chested buckaroos prancing around the beach dabbing their pits with Clubman, or sprinkling some of Clubman’s fantastic shaving powder in their crevices. No, this isn’t a very sexy brand, but they have a perfectly functional mobile website. When doing research, I looked at over a dozen men’s colognes and grooming websites and hardly any were mobile optimized. Old Spice was—but the site was broken. Kudos to you Clubman for being with the times.
Second, they get right down to brass tacks. You don’t see anything fancy, but you see exactly what you need—a categorized list of their products, their best sellers, images, prices, purchase options, the lot. Plus, I rather like their curious green and white branding.
The Maxwell Hotel
The Maxwell Hotel is a contemporary hotel located in downtown Seattle and their mobile site reflects their attention to detail and customer service.
We immediately find the important things guests look for in a mobile website—tap-to-call the hotel and tap-for-directions. The CALL and MAP buttons at the top of the page allow guests to immediately connect with the hotel, and to plot directions via GPS. Since many mobile users browsing hotel websites are looking to make last-minute reservations, these are two crucial components of a hotel website that it must have in order to succeed.
In addition, the site displays the hotel’s marketing content neatly and cleanly. With one tap, browsers can see a list of the hotel’s rooms, and choose from among the hotels’ amenities. The guest can flip between languages and connect socially—all from the main page.
My view is that guests and customers don’t want their time wasted. This is especially true on mobile devices, where users go to get answers now. Providing the essential CTAs on the homepage and on all detail pages is important to the success of a mobile conversion engine (that is, website).
Etsy is a growing brand, popular with college-age women and young mothers—exactly the demographic that uses mobile devices. Their mobile site is exquisite. I love the image tiles showing off some popular items right at the top, before the categories. It’s always wise to lead with images. My one criticism is that I don’t know exactly what I’m seeing in those images. Is it $195 for the girl, or something she’s wearing? If the latter, I can’t see it.
You can both browse by category or search by keyword. Search functionality on most websites is hit and miss, but Etsy hit it. Search for top hats, and low and behold, and endless stream of top hats. Beautiful.
Gilt has a unique business model, so I’ll forgive their lack of a search bar. They have a rolling inventory of items divided into categories, so it’s not like each item has a permanent landing page. They overcome this by laying out every category on the site. And there are many categories.
The screenshot is cut down to maybe 1/5th of the results Gilt listed. Not that I’m complaining—it’s a pretty good user experience. Customers scroll until they find the category they want, tap it, and browse items to their heart’s content.
The real reason I ended up including Gilt, however, is because of the shopping cart. Take a look at it. It says ‘5’. What does that make you want to do? I’ll tell you what went through my mind.
“Woah, there are 5 things in my shopping cart? I don’t remember shopping here before! I wonder what they could be? Let me tap on the icon to see.”
And I did. After tapping, I immediately go to the customer sign-up section. There were not 5 items in my cart. There was nothing in my cart, because I had never been here before, but they pretended that there was in order to get you to tap and sign up—which probably works very well. Nice.
This is one of my favorite sites of the list (and they happen to have fantastic scotch). The images at the top are the site’s navigation. Swipe left or right to flip through their catalogue of scotches. Tap the arrow next to the bottle name to read more about it, and to watch a video. See awards, see where the scotch is being sold, learn more about the company—a perfect mobile experience.
Form and function are seamlessly melded together on Zappos’ mobile optimized website. It leads with an attractive picture. It includes an essential search bar which is easy to find and use, and it includes a category and filter tool, which many e-commerce sites neglect. I also like how, even though they have an iPhone app, they don’t push it upon you with a pop-up or fly-over as soon as you land on the website. They simply courteously inform you of the app at the very bottom. I specifically excluded many online travel agencies because they push popups at you.
After one simple query, we find exactly what we’re looking for—in this case, trench coats. The results appear to be fairly on-the-mark, and like Gilt, we scroll for what feels like forever to enjoy a nice cascade of trench coats.
These seven examples are just the tip of the iceberg. There is quite a lot that goes into mobile design, but when the basics are done well, a site will stand out. What do you look for in a mobile optimized website? How would you have improved upon these 7 designs?
Brandon is the Technical Marketing Manager at buuteeq, the digital marketing system for hotels. He manages buuteeq’s SEO, paid media channels, social outreach, and the company blog. You can connect with him on Twitter @buuteeq.