Latest CMS Developer Posts

HubSpot CMS Blog

16 of the Best Examples of Mobile-Friendly Website Design

Written By Dan Slagen on Sep 8, 2015 9:00:00 AM

mobile-websites.jpeg

This post originally appeared on HubSpot's Marketing Blog.

Do you remember the last time you went to a mobile site and had an -- ahem -- unmoving experience? (Pun intended.) Maybe the site wasn't responsive. Or perhaps it was really difficult to find what you were looking for. Or, maybe it just loaded really slowly.

Whatever it was, you may have left to go to another site as a result. Google knows that unhappy website visitors will go elsewhere, thereby increasing bounce rates and decreasing the chances a site will rank on mobile searches.

That's why, back in April, Google released their much-anticipated mobile update -- which set the marketing world ablaze with commentary. Millions of tweets were posted about the mobile update, hundreds of thousands of people searched for "mobilegeddon" on Google, and people made a lot of graphics that look like this one:

mobilegeddon.jpg

Image Credit: SearchEngineLand

While some of the commotion was certainly a bit extreme, the update was a big deal, is a big deal, and will mean billions in revenue gained or lost in the coming years. This is especially true now that mobile search queries have already begun to surpass desktop.

Many brands across the globe have been working to improve their mobile website experiences. To help inspire your own mobile web design, the team here at Crayon has compiled 16 companies that are doing a great job with their mobile optimization. Let's take a look at the designs of their mobile websites and go over what makes them so great.

Download our free guide here to learn how to design your own mobile-friendly website.

16 of the Best Mobile Sites

1) Beaglecat

With its bold colors and simple design, Beaglecat’s mobile homepage gives visitors a lot of helpful information without seeming overwhelming. With a few quick scrolls, visitors can quickly get an overview of Beaglecat’s mission, the value they provide, and who's on the team. To learn more about any of these things, you can click on big call-to-action buttons that say things like "More Details" and "Learn More." Finally, the forms on their pages are really short and easy to fill out on a mobile device.

beaglecat-mobile-website.png

2) Oakley Hall Hotel

When you're looking for a hotel, the top three things you want to see are big pictures of the rooms and spaces, room availability, and pricing information, right? Oakley Hall does a tremendous job capturing the essence of their hotel with big, high-definition images and a mobile-friendly availability feature that leads users to pricing options. They also provide concise but enticing descriptions of their room styles, as well as call-to-action buttons for users who want to learn more about weddings and their exclusive dining club.

oakley-hall-hotel-mobile-website.png

3) Impact Branding & Design

Impact’s mobile site is a great example of blending multiple elements of your value proposition into one, succinct scrolling page. Starting off with easy-to-click buttons, users can learn more about what Impact does and the value they provide -- followed by customer testimonials, a graphic on what inbound marketing is, and finally, a big call-to-action button linking to their learning center.

impact-branding-design-mobile-website.png

4) Speckyboy

Speckyboy is a design blog -- so you'd expect a great mobile experience from them, right? Well, they deliver. The experience scrolling through Speckyboy’s blog is flawless, including intriguing imagery, article titles in large fonts, and an easy-to-read introductory paragraph teasing each article, which users can click if they want to read the rest.

For lead capture, Speckyboy offers a mobile-friendly form that solicits subscribers to their newsletter: All you have to do is enter your email address. Toward the bottom of the homepage, Speckyboy keeps users engaged by offering two separate list of historic blog posts that users can click, including the “Most Popular” and “Recommended.”

speckyboy-mobile-website.png

5) Landscape Leadership

One of the first things users see on Landscape’s mobile homepage is a press-to-dial phone number that connects directly to the firm. We love the placement of that call-to-action. The rest of the site then goes on to explain what Landscape specializes in, followed by useful content including blog articles, website links, and large, easy-to-press social media buttons. For visitors who want more information, Landscape provides a large search box near the bottom of the mobile page.

landscape-leadership-mobile-website.png

6) SyncShow

Everything about SyncShow's mobile website is clear, crisp, and concise. Their mobile homepage immediately offers can’t-miss call-to-action buttons, followed by a full description of their target market, B2B and B2C manufacturing companies. When you scroll down you'll find succinct explanations of how the manufacturing industry's changed, which is very relevant for their target audience. You'll also find a short description of the company's value proposition and a case study highlighting a recent 5X return on customer investment. The pattern here? Short blurbs followed by call-to-action buttons for visitors who want to learn more.

syncshow-mobile-website.png

7) NudeAudio

NudeAudio sells portable speakers -- and their mobile homepage does a great job of providing visitors with exactly what they're looking for on the website: Striking product imagery coupled with feature details and big call-to-action buttons. They also include product update links that send people directly to their blog, as well as a one-field form where visitors can enter their email address to sign up for the newsletter.

nudeaudio-mobile-website.png

8) Influence & Co.

Near the top of Influence and Co.'s mobile website is this compelling, inviting, and easy-to-understand value proposition: “We work with you to get you published in targeted online publications that showcase your expertise to your exact audience.” They go on to display a visual testimonial from Dell, along with a very short, touch-friendly form for interested prospects to quickly drop off their contact information.

influence-and-company-mobile-website.png

9) 1252 Tapas Bar

What would you want from a tapas bar's mobile website? If you answered food pictures, a blurb about delicious, locally sourced food, and menus, then you'll love this website as much as we do. Their full menu is designed to be mobile responsive, so no pinching and zooming is needed. They also tell a charming story about their head chef, Wes Tyler right on the homepage, which gives a welcoming feel to this local restaurant.

While the page has all of the relevant contact information and hours of operation, we love the special offering at the bottom of the page, which highlight 1252’s weekly food-and-drink specials with delicious-sounding descriptions.

tapas-bar-mobile-website.png

10) TrendKite

TrendKite takes all the good things about desktop websites and puts it on their mobile page. Their homepage starts with an aesthetically pleasing visual above the fold, and then goes on to explain their value proposition and contact information. Keep scrolling, and you'll be able to click into ebook offers and read more information catered specifically to you, as they separate content "For Brands" and "For PR Agencies." There are well-positions call-to-action buttons throughout.

trendkite-mobile-website.png

11) Dog-a-holics

Great mobile webpages have a lot of compelling imagery -- and Dog-a-holics knows to lead with their best K-9 face forward. Following an adorable first picture, visitors can read three, succinct reasons the company loves dogs, which are separated by delightful little icons.Before providing all details on store locations, hours of operation and clickable contact information, Dog-a-holics includes a few humanizing details about the company to make them feel closer to the customer: a picture of the founder, and a call-to-action offering visitors the option to join as a “special member” of the store.

dog-a-holics-mobile-website.png

12) Rover Labs

Rover Labs' mobile homepage does three things exceptionally well. First, the page tells an easy-to-understand yet compelling story of why they exist and why their target audience needs them. Second, they include some awesome product shots that are really easily digestible on mobile. Finally, the entire experience is clean, brief, and offers users plenty of information along with calls-to-action to learn more.

rover-mobile-website.png

13) VentureFar

VentureFar's mobile website has a difficult goal: They need to convince users to climb Mount Kilimanjaro ... on a cell phone. What's impressive about the site is that they actually do a really good job. Starting off with a postcard image of the mountain, they immediately offer users the ability to compare tour-operating prices. (Yes, they know their demographic well.) They also include one of the better mobile responsive charts we’ve seen, which includes a simply designed but detailed chart showing all the tours they offer. Finally, their homepage ends with a short blurb answering frequently asked questions, like “Why Climb?” and “When Should You Go?” Being a remote tour company, VentureFar is also sure to include details on their licenses/verifications and options to book direct.

venturefar-mobile-website.png

14) Blue Zone SUP

Blue Zone SUP is a stand-up paddle boarding camp in Costa Rica, and after seeing their mobile site, we totally want to go. Their site begins with an enchanting hero image, followed by a quick company description and well-produced video that works really well on mobile. They also show visitors a nice chart they can measure their skill level by on a scale of one to five. This way, when browsing camp dates (which is offered via call-to-action button under their video), visitors will know which weeks are most applicable to their skill level. To showcase more of the company culture, Blue Zone provides links to blog articles and additional imagery.

blue-zone-sup-mobile-website.png

15) TinyPulse

TinyPulse’s mobile homepage is loaded with visuals, including customers from more well known brands and PR features from national publications. Instead of a text-heavy value proposition, the one on their mobile site is visual and concise, and they follow it with a mobile responsive product video.

tinypulse-mobile-website.png

16) AX Fitness, LLC

AX Fitness wastes no time in showcasing their culture: The very first thing you see when you go to their mobile site is a large picture of a group running a foot ladder workout, along with the phrase (in all caps): “Real People. Serious Fitness.” We commend the focused approach. Keep scrolling, and you'll immediately see a "first free class" call-to-action button along with a special first month deal. It also includes a few words from the owner, showing visitors her passion and commitment to customers as both a gym owner and fitness enthusiast. From there, users can learn about personal training, group fitness, read blog articles, and get information on exciting, upcoming events.

ax-fitness-mobile-website.png

(To see all of the designs featured in this article, visit the HubSpot COS Websites Collection as well as the Squarespace & WordPress Collection at Crayon.)

Oftentimes, visitors to your website will visit your website from both desktop and mobile devices. Perhaps they'll find your site while scrolling through their mobile Twitter feed, then switch to desktop for more in-depth research later, and then send themselves an article from their desktop research session to read on mobile on the train home.

The takeaway here? It's critical your content can be read anywhere, with ease.

So, what other companies have fantastic mobile sites? Share your favorites with us, and be sure to mention why they're so great.

Editor's Note: This post was originally published in December 2013 and has been updated for freshness, accuracy, and comprehensiveness.

HubSpot Developer Day 2016

Topics: Website Design

Dan Slagen

Dan Slagen is the Co-Founder of SpeechBooth. With successes in building teams and industry leading go-to-market strategies, Dan has experience with both on and offline marketing and advertising across start-ups including Wayfair and HubSpot, brands and agencies.

Stay Up To Date 👇

Learn how to code on HubSpot CMS
  • There are no suggestions because the search field is empty.
 
Join the HubSpot CMS Developer Slack

Ask questions in the CMS Developer Forum

Join the free CMS for Developers Course

View the HubSpot API Documentation

Recommended Posts