19 of the Best Examples of Mobile Website Design

19 of the Best Examples of Mobile Website Design

0

By rleist@hubspot.com (Rachel Leist)

Now more than ever, businesses are focusing on creating delightful mobile website experiences.

After all, Google has been heavily favoring mobile-friendly websites since 2015 when it updated its ranking algorithm in April 2015, and then started indexing mobile sites in March 2018.

And that’s crucial, seeing as there have been more Google search queries on smartphones than on desktop computers and tablets for over a year now.

Going forward, Google will only continue to raise the bar for what it considers to be mobile-friendly (

To help inspire any mobile website design changes you’ll be making, here’s a list of 19 companies who really nailed their mobile web experience.

Best Mobile Websites

  1. Shutterfly
  2. Google Maps
  3. Typeform
  4. Etsy
  5. Adrian Zumbrunnen
  6. Elf on the Shelf
  7. BuzzFeed
  8. Evernote
  9. Huffington Post
  10. Express
  11. Nationwide Insurance
  12. Squaredo
  13. Zappos
  14. ABC
  15. Lean Labs
  16. SAP
  17. KISSmetrics
  18. idig Marketing
  19. IndiaMART

1. Shutterfly

Shutterfly is an online service that allows users to create photo books, personalized cards and stationary, and more. Because more and more people are taking photos and then accessing them using their smartphones, Shutterfly recognized the need to create a great mobile experience for their customers — and they delivered.

Shutterfly accomplishes two key goals on their mobile website:

  • It’s easy for users to find out information about their offerings.
  • They’re selling that information by way of beautiful imagery.

When you arrive on their mobile site, you’ll see Shutterfly’s latest promotion front and center, as well as a large finger-sized sign-in button for returning members — neither of which overpower the user experience.

Scroll down, and users will see large buttons that make it easy for users to quickly select which type of product they’re interested in. Once users click through to one of those options, they’re greeted with large photos showcasing what Shutterfly is capable of for easy browsing.

shutterfly-mobile-website-2

2. Google Maps

Everyone has their favorite map or directions application. Mine is Google Maps, which I use whether I’m walking, driving, biking, or taking public transportation. What’s special about their mobile website is that it’s virtually indistinguishable from their downloadable mobile app.

The screenshots below are taken of their mobile website, but if you’re familiar at all with the app, you’ll notice they look exactly the same. Not only is the appearance identical, but the mobile website has the speed and functionality of the app.

google-maps-mobile-site-1.png

google-maps-mobile-site-2.png

3. Typeform

Typeform is a Barcelona-based tech company with one simple mission: to “make forms awesome.” Their desktop website is really beautifully designed, greeting visitors with succinct copy, high-definition videos, relevant animations, and other, more complex design components.

But for mobile users, they recognized that complex design components like video and animations could significantly affect page load time, among other difficulties. That’s why they actually removed many of them — which decluttered the site and simplified the overall mobile experience. The mobile website is a simpler version of their desktop website, and it’s still beautifully designed.

typeform-mobile-website

Take note of the large buttons on their menu page — perfect for tapping with your finger on a mobile screen.

typeform-mobile-website-2

4. Etsy

Etsy is an ecommerce website where people can buy and sell vintage or handmade items. Most buyers who visit Etsy’s website are there to do one of two things: Either they’re searching for a specific item, or they’re browsing items in categories that interest them.

The mobile website caters to both types of visitors from the very beginning. When you first go to their mobile website, you’re greeted with an option to search for specific items, shops, or categories.

etsy-mobile-site-1.png

Immediately below the search bar are thumbnail images of trending items that showcase some of the most popular things you can buy on Etsy. Mobile users can view these trending items in a collage format, and the images are big enough for them to easily tap with their finger.

etsy-mobile-site-2.png

5. Adrian Zumbrunnen

This is the personal website of Adrian Zumbrunnen, a UX designer, writer, and speaker. When you visit his website, you’ll notice right away there’s something very unique about it: It’s a conversational website.

It almost looks like a text message conversation you’d normally have on your phone — including the ellipsis to show he’s “typing.” Users are given two response options at the end of every exchange, so it’s kind of like a “choose-your-own-adventure” experience.

While the mobile and desktop experience are very similar, the desktop website feels like it was made primarily for mobile — which could be the direction sites will go in the future.

adrian-zumbrunnen.gif

And if you’d prefer not to engage in the conversation-like exchange, you can simply scroll down for details.

zumbrunnen-mobile-site.jpg

6. Elf on the Shelf

Elf on the Shelf is, relatively speaking, a fairly new Christmas tradition based on a children’s book. If you’re unfamiliar, the basic premise is this: The book tells the story of Santa’s scout elves, who are sent by Santa to watch over children in their homes all over the world and report back to Santa.

Along with the book, parents can purchase an elf figurine, which they’ll subtly place somewhere in their house where their kids can see it. Every night leading up to Christmas, parents move the elf to a different location around their house to “prove” to their kids that the scout elves are real and always looking over them.

When you first arrive on Elf on the Shelf’s website, you’ll see there are actually numerous types of Elf on the Shelf products you can purchase. But instead of forcing users to scroll through each product individually, the web designers package each product into a large, enticing tile describing the goal of each buyer’s journey, with the featured item displayed on the front.

You’re not buying your own elf or pup — you’re adopting it. It’s a truly empowering experience on such a small screen.

elf-on-the-shelf-mobile-website

7. BuzzFeed

BuzzFeed is a news company known for it’s viral content and popular quizzes. It also happens to be one of my favorite sources of entertainment during my commute to and from work.

And where do you think I’m checking BuzzFeed during my commute? You guessed it: on my phone. BuzzFeed knows that a lot of their visitors are visiting their site on mobile, so they’ve taken great care to create a smooth experience for their on-the-go readers.

When you arrive at BuzzFeed’s mobile website, the first thing you’ll see is some of their most popular pieces of content displayed in a simple, collage-like format using large images that are easy to tap with your finger.

buzzfeed-mobile-site-1.png

For users interested in specific categories, there’s a clickable menu in the top left-hand corner of the screen that lists out all the post categories.

buzzfeed-mobile-site-2.png

8. Evernote

Evernote is an application that allows you to store notes, images, and web articles and then access them across all your devices. Because users tend to download the app or access the website on multiple devices including desktop computer, smartphone, and tablets, it’s essential that Evernote get the mobile experience right.

If you look at Evernote’s homepage on your desktop computer, you’ll notice how clean the design is. The value statements are short and to-the-point, and the graphics add to the brand’s positioning but don’t clutter the page.

evernote-mobile-website-2

When you look at Evernote’s mobile website, you can see they’ve kept their color palate and general brand style entirely intact. The company’s mobile website is clean, simple, and doesn’t detract at all from the value of the app. Evernote’s conversion path is obvious from the centered call-to-action: “Sign up for free.”

evernote-mobile-website

9. Huffington Post

The Huffington Post is a well-known news outlet that reports from everything from politics and current events to entertainment and technology. What makes their mobile website unique is that they actually alter their headlines slightly for mobile users so their content is more easily scannable.

If you compare the desktop versus mobile websites, you’ll notice that the mobile website has fewer words on the homepage. The headlines are shorter and much more digestible — perfect for someone skimming or reading on a small screen.

huffington-post-mobile-website

As with BuzzFeed, you’ll find a clickable menu in the top left-hand corner of the screen listing out all the post categories.

huffington-post-mobile-website-2

10. Express

Express is a clothing store that caters to young men and women. Because their audience often comes to their website to browse clothing, it’s important for their website to include big, clear images of their clothing — especially on mobile devices, when users will need to tap items on the screen with their fingers to click through for purchase information.

Express takes their mobile experience a step further than most online retail sites. If you slide your finger from left to right across an image showing a piece of clothing, the image will change so you can see the clothing in a different view. In other words, users don’t have to load another page to see multiple pictures of the same article of clothing.

Look at the image on the top right in the following two images to see how it changes when you swipe to one side:

express-mobile-website-designexpress-mobile-website-design-2

11. Nationwide Insurance

Nationwide Insurance provides insurance and financial services. You might think a financial company would have a really complicated website, but on mobile, Nationwide Insurance nails down the simple user experience.

When you arrive on Nationwide’s mobile site, you’ll see two tabs at the top allowing you to identify as one of two types of users right away to customize your experience: Personal or Business. Or, alternatively, you can “Find an Agent” or “Find an financial advisor” to learn more information about their services.

Although limiting the experience to these two options excludes Nationwide’s more in-depth features, it makes for a much easier experience for visitors using small screens. This is a great technique to lead potential customers in the right direction if they’re not yet account-holders and are visiting the website for the first time.

nationwide-mobile-website

12. Squaredot

Squaredot is an agency based in Dublin, Ireland that helps marketers build out their inbound marketing strategies. Their mobile website is colorful, simple, and makes for easy navigating.

What sticks out to me most is the visually pleasing color combinations and three-dimensional texture to their homepage — as well as the large clickable dots at the center of each section you can scroll to.

squaredot-mobile-website

These dots are animated call-to-action buttons, and the tapping the ones below the home screen will produce a pop-out page with more information on Squaredot’s approach to marketing.

squaredot-mobile-website-2

13. Zappos

Zappos is an online vendor for shoes and clothing known for their stellar customer service. Their top priority on mobile is to help users search easily for the items they’re looking for on their website, so they’ve put a large search bar at both the top and bottom of their mobile website to make it super easy for them.

This is what the top of their mobile site looks like:

zappos-mobile-site-1.png

14. ABC

ABC is a television broadcasting company known for popular shows like “The Bachelorette,” “The Rookie,” and “General Hospital.” Users visiting ABC’s desktop website are greeted with these options and more. View the network’s television schedule, check out the most recent Emmy winners, watch some of your favorite television shows, or even look at entertainment news relating to those shows.

But because nearly every household today is a multi-screen household, ABC knows its experience on a mobile device should be both simple and ready for viewing.

When you visit the ABC website on a mobile device, you’ll see a dark background for a theatre-like experience with tiles for each program you might want to stream. Users can scan through these options and click into any show they want based on genre, alphabetical order, what’s popular, and similar categories you’d also find on your TV’s streaming platform.

abc-mobile-website

15. Lean Labs

Lean Labs is a marketing agency that creates engaging, responsive, and high-conversion web solutions. (They were also featured on ABC’s hit TV series Shark Tank.) The folks over there do a great job of providing a smooth experience for their mobile users, especially with regard to their design techniques and the emphasis they place on their “10x formula” — which is apparent to visitors within seconds of landing on their mobile site.

Notice how Lean Labs’s mobile website uses scale, contrast, and typeface to distinguish certain elements of their page. You can even see the subtle photo of a mountain set to the website’s background, eliciting the heights your brand can reach as a Lean Labs customer.

lean-labs-mobile-website

And, as explained above, their core “10x” formula is clearly visible and broken down into easy steps for mobile users scrolling through the homepage, with relevant icons to match.

Lean Labs mobile website with circular CTAs to learn about 10x formula

16. SAP

SAP is an enterprise software company that manages business operations and customer relations. The business enhances its mobile experience by condensing information, specifically into one important video case study, playable from the homepage on a mobile device.

sap-mobile-website

SAP also combines some of their calls-to-action into sliders, whereas their desktop website has these CTAs laid out horizontally. This helps keep things simple so mobile users aren’t overwhelmed with a lot of information at once, and it also ensures none of the CTAs are too small to read.

SAP mobile website with call-to-action sliders

17. KISSmetrics

KISSmetrics provides analytics software for businesses. On their homepage, there’s a lot of information explaining what the software does along with a testimonial.

But their mobile site is displayed a little differently: On a mobile device, the information on their site is shown in a list with alternative dark and light modules. This makes it easy for users to skim the page without getting lost in text.

kissmetrics-mobile-website-2

They’ve also made the text and fields on their forms large and easy to read:

KISSmetrics mobile website with large form fields for users to sign in

18. idig Marketing

idig Marketing is a development and communications provider. Their mobile website is laid out similarly to their desktop website, but I especially liked how they incorporated the interactive heart icons into their blog posts so users can “Like” their posts.

This mimics the “Like” heart icon in Instagram and Twitter, which is easily recognizable for mobile users familiar with those platforms.

idig-marketing-mobile-site-2.jpg

19. IndiaMART

IndiaMART is the largest online B2B marketplace in India, and its simple category-based mobile store makes it one of the best mobile websites we’ve ever seen in the ecommerce industry.

The company’s mobile homepage puts the search bar right at the top so you can always retreat to a custom search if browsing no longer suffices to find the item you’re looking for.

But, IndiaMART makes it easy to peruse its digital aisles by sorting each item by item type, and then sub-types within each item type — a smart design move to encourage users to explore your site further. Under “Apparel & Garments,” for example, you have easily clickable tiles to check out more specific categories of clothings, such as menswear, women’s dresses, and even suits, sarees, and similar garb native to India.

indiamart-mobile-website

Underneath IndiaMART’s browsing tiles, the company has its own trending section specifically for merchandise people are paying most attention to — similar to a trending list of news on a social media platform. Each trending category has a mobile-friendly call-to-action button allowing users to get price quotes for the product they’re interested in.

indiamart-mobile-website-2

Want more information on how to optimize your business for mobile devices? Download the free kit on mobile marketing below.

New Call-to-action

Puedes leer el artículo completo en: : 19 of the Best Examples of Mobile Website Design

COMENTARIOS

Leave a Reply