9 Awesome Examples of Effective Mobile Website Design

by Dave Sotolotto on April 24, 2013

Estimated Reading Time:

9 Examples of Effective Mobile Website DesignHaving a mobile website is critical in today’s business environment.

More and more users are researching and shopping on their mobile phones, rather than waiting until they have access to a computer.

For businesses, this means that your webpage needs to be able to fit in the palm of your prospects’ hands.

Beyond that, your website design needs to be optimized to function specifically for mobile devices.

Research has shown that 91% of all mobile users have their mobile devices within reach 24/7.  That is a constant opportunity for your business to make a positive impression on its prospects.

In order to ensure your website is making a positive impact, make sure your website has a simple design so that users can easily find what they are looking for.  Highlight your most important information on the homepage, and include easy-to-follow navigation to drive users deeper into your mobile site.

The goal is to make your page engaging  while still having maximum functionality.

If you are looking for some ideas on how to develop an effective mobile responsive web design, consider taking a look at a few of these companies’ mobile sites...

9 Examples of Effective Mobile Website Design:

Abercrombie & Fitch



Abercrombie Home Page Abercrombie Item Page Abercrombie Menu

Abercrombie & Fitch may not have the most eye-catching mobile website, but their functionality is impeccable.   The simplicity of the home page presents the user with clear options to begin shopping, which is the main purpose of the webpage.  The promotional coupon and advertisements at the top of the page are also a great addition to encourage action and to fill in space that otherwise would be blank.

When you begin shopping, a clean menu overlays from the left and allows you to narrow your search.  Each individual item is displayed on a clean page that allows you to easily find important details, and the big “Add to Cart” button is the most noticeable thing on the page.  Abercrombie & Fitch may not be full of engaging images, but their website is clean and easy to use.

Caribou Coffee



Caribou Home Page Caribou Nutrition Info Caribou Info

Caribou’s homepage has a very welcoming appearance and uses a color scheme that matches its logo.  A matching color scheme can be an effective way to improve the branding of your mobile website, but only if your logo’s colors aren’t too bright.  Caribou also effectively uses a banner ad to highlight their featured products, but does not sacrifice button size in doing so.

In terms of the content of the page, Caribou effectively highlights the most important features that you would expect a restaurant to offer.  Each submenu has a very clean design with very easy to follow buttons.  You can view the entire menu and each item’s important nutritional information in no time.  Simply looking through their website made me want to run out and buy one of those breakfast sandwiches, which means that they have done their job.

Booking.com




Booking.com Home Page Booking.com Nearby Booking.com Hotel Page

What is the whole point of going to booking.com?  To book a hotel room, of course.  Booking.com gets right to the point on their mobile homepage, and allows the user to easily begin booking a room.  The use of yellow immediately draws your attention to the search function of the site.  Couple this with the supplemental buttons that allow you to choose from popular destinations or places near your current location, and you are set to easily find a hotel wherever you need.

The search itself is about as detailed as you would expect a standard website to be, but in a very functional mobile format.  Each hotel includes pictures, ratings, and pricing information, and there are plenty of sorting options.  The amount of information that booking.com was able to pack into their mobile site without sacrificing its visual appeal is extremely impressive.

Texas Roadhouse




Texas Roadhouse Home Page Texas Roadhouse Menu Texas Roadhouse Social Media

Texas Roadhouse does a great job of encouraging you to visit immediately.  Rather than using scrolling banner ads like many other sites, Texas Roadhouse opts for a single image that improves loading time and supplements their call to action.  Their call to action is clear, and they also effectively utilize location features to make it easier for a visitor to take action.

There is not a large amount of excess information on the mobile website, which really helps to keep the customer focused.  As a restaurant, the most important information is what you serve and where you are located, and Texas Roadhouse really nails those points.  In turn, their website loaded the fastest out of all of the mobile sites listed here, which is extremely important if your stomach is growling and you just want to find where to grab a steak.

Klondike Bar



Klondike Bar Homepage Klondike Products Klondike Bar Video

What would you do for a Klondike Bar?  Would you drive around town searching for a store that sells your favorite type?  If you would, more power to you, but Klondike Bar’s mobile website really helps you cut down on your search time.  Their site allows you to quickly browse their products, and helps find the store closest to your current location.  They even included an embedded Google Maps feature to help you satisfy your craving as quickly as possible.

Beyond providing store locations and nutritional products for each of their products, Klondike Bar also tries to engage users through their mobile website.  There are links to their social media activity, and a variety of different videos to view.  You may have been surprised to hear Klondike Bar even has a mobile website, but they did a great job with designing it to make sure that you don’t have to do much to get a Klondike Bar.

Dove Men + Care



Dove Men Homepage Dove Men Products Dove Men Product Detail

Dove Men + Care is another mobile site that really focuses on simplicity to improve functionality.  There is minimal navigation on the home page, but Dove effectively uses images to increase engagement.  Dove keeps the focus on their products and promotional videos, and tucks all of the extras into a clean menu that can easily be accessed from the top of the page.

Where Dove Men really excels is in their sub-menus.  The thing that separates their pages from the others mentioned here are their buttons.  On every page, each button is large and easy to click with your thumbs, and the spacing between each ensures that you can avoid annoying accidental clicks.  Large buttons may not seem groundbreaking, but it allows a user to truly view a page with one hand, which is great for on-the-go mobile users.

Hidden Valley



Hidden Valley Homepage Hidden Valley Products Hidden Valley Recipes

Hidden Valley did a great job incorporating effective design elements on their mobile homepage, including a strong color scheme that uses white space to its advantage.  The page includes all of its important information without any scrolling necessary, and each navigation menu is just as simple to use as the home page.

The greatest aspect of the Hidden Valley mobile website that separates it from the rest is its content.  Specifically, Hidden Valley has a very detailed recipes section that gives you ideas for all different types of cuisines that incorporate its products.  Essentially Hidden Valley’s website is a tool that you can use for great dinner ideas that will still benefit the Hidden Valley brand.  Each recipe includes pictures and reviews, and it almost makes you think that you are on a different website altogether.  The use of Hidden Valley products and the page design holds these recipes together with the product, so it ultimately becomes an added benefit of the website.


Mountain Dew



Mtn Dew Homepage Mtn Dew Video  

Mountain Dew’s mobile website takes a completely different approach than all of the other sites listed here, but still created an effective design.  There page is very busy, but matches the high energy feel that the Mountain Dew brand encourages.  Each image on the home page will open up a larger area directly on the homepage that provides information and links for deeper reading.  This allows you to see more of the content that may interest you without ever needing to use the back button.

What really separates Mountain Dew from the pack is their customization options.  The navigation menu in the top right corner allows users to customize the home page in real time.  Deselecting any of the options will immediately remove the content that users do not find interesting, and the page will reformat itself quickly to display only what they want to see.  Having customization like this is a great way to create a memorable mobile website that your users will enjoy using.


Adidas



Adidas Home Page Adidas Shop Menu Adidas Below Fold

Adidas’s mobile website includes a variety of the design elements already mentioned here, but does so in such a way that mimics their desktop website.  The banner ads include engaging images that link to current promotions and their large buttons encourage users to begin shopping immediately.  Adidas has a nice balance of engaging content and simplistic design to make the first page you see very clean.

Adidas also does a nice job of extending their home page to include more detailed options that users may want to see.  The options to view your account information or track an order may be very important to some users, but are not really encouraging customers to reach the website's goal and begin shopping.  Adidas did a great job of including their most important information above the fold while still making important supplemental information available on the homepage.

Takeaway

Hopefully one or more of these websites have provided you with some inspiration for how to design, or revamp, your mobile website.  Just remember to keep things simple when designing your website.  Include only what is necessary while giving your page a welcoming feel.  A mobile website is a necessity in this and age, so make sure yours is adding to your business rather than detracting from it.

Comments