16 of the Best Examples of Mobile-Friendly Website Design

Do you remember the last time you went to a mobile site and had an -- ahem --unmovingexperience? (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 releasedtheir 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:

图片来源：SearchEngineland

While some of the commotion was certainly a bit extreme, the update was a big deal,is一大笔交易，意味着未来几年获得或损失了数十亿美元。现在，移动搜索查询有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 atCrayonhas 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.

16 of the Best Mobile Sites

1)Beaglecat

Beaglecat的移动主页凭借其大胆的颜色和简单的设计，为访问者提供了很多有用的信息，而不会显得压倒性。有了一些快速的滚动，访客可以迅速概述Beaglecat的使命，他们提供的价值以及团队中的谁。要了解有关这些内容的更多信息，您可以单击“更多详细信息”和“了解更多”之类的大型呼吁行动按钮。最后，他们的页面上的表格确实很短而且很容易在移动设备上填写。

2)奥克利大厅酒店

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.

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.

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.

为了获得铅捕获，Speckyboy提供了一种对移动友好的表单，该表格向他们的新闻通讯征集：您要做的就是输入您的电子邮件地址。bob官网官方网站在主页的底部，Speckyboy通过提供了两个单独的历史博客文章列表，可以使用户保持参与度，包括“最受欢迎”和“推荐”。

5)景观领导

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.

6)SyncShow

Everything about SyncShow's mobile website is clear, crisp, and concise.他们的移动主页立即提供了无法错过的通话按钮，随后对目标市场，B2B和B2C制造公司进行了完整描述。当您向下滚动时，您会发现对制造业如何改变的简洁解释，这与他们的目标受众非常相关。您还会发现对公司的价值主张和案例研究的简短描述，该案例研究强调了最近的5倍客户投资回报。bob全站app这里的模式？短时间的糊涂，然后是想要了解更多信息的访问者的召唤按钮。

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.

8)Intellt＆Co。

在影响力和公司的移动网站附近是一个引人入胜，诱人且易于理解的价值主张：“我们与您合作，使您在有针对性的在线出版物中出版，以向您的确切受众展示您的专业知识。”他们继续展示戴尔（Dell）的视觉推荐，以及一个非常简短，触摸友好的形式，以供有兴趣的潜在客户迅速删除他们的联系信息。

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.

10)Trendkite

Trendkite将有关桌面网站的所有好处都带入了他们的手机页面。他们的首页从上面的美学视觉效果开始，然后继续解释其价值主张和联系信息。继续滚动，您可以单击电子书报价并阅读更多针对您的信息，因为它们将内容分开为“品牌”和“ PR代理”。整个过程中都有良好的呼声按钮。

11)Dog-a-holics

出色的移动网页有很多引人入胜的图像 - 狗 - 霍利克斯（Dog-a-Holics）知道他们最好的K-9脸前进。在一张可爱的第一张照片之后，访客可以阅读三个简洁的原因，该公司喜欢狗，这些狗会被令人愉悦的小图标所隔开。在提供商店位置的所有详细信息，操作时间和可点击的联系信息之前bob全站app有关公司的人性化细节，使他们更接近客户：创始人的图片，以及bob全站app为访客提供的通话行动，可以选择加入商店的“特别成员”。

12)Rover Labs

Rover Labs的移动主页做得非常好。首先，该页面讲述了一个易于理解的，但令人信服的故事，讲述了它们为什么存在以及为什么他们的目标受众需要它们。其次，它们包括一些很棒的产品镜头，这些产品在移动设备上确实很容易消化。最后，整个体验都是干净，简短的，并为用户提供大量信息以及采取措施以了解更多信息。

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.

14)蓝色区域SUP

蓝色区域SUPis 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.

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.

16)AX Fitness, LLC

AX健身浪费任何时间在展示他们的崇拜ure: 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.

(To see all of the designs featured in this article, visit theHubSpot COS网站Collection as well as theSquarespace & WordPressCollection atCrayon.)

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.