25 Inspiring Mobile and Responsive Design Websites of 2014

25 Inspiring Mobile and Responsive Design Websites of 2014

Many internet-savvy companies now know that they need to have an impressive responsive or mobile website in order to keep users engaged with their online presence. However, creating a mobile website can sometimes be easier said than done - particularly if you don't have any context for what a great website actually looks like on a mobile device. To try and inspire and inform your business' decisions when it comes to adding mobile functionality to an existing or new website here are 25 of our favorite mobile optimized websites.

1) Moon

Moon Website

A partnership between ING Direct and Unicef, "MOON" is a website that is extremely unique both in how it uses mobile development and design and how the website itself is laid out. The site uses advanced website development to get users to access the site simultaneously on both desktop and mobile devices. The desktop version acts as a video player with simple navigation options for donations while the mobile version acts as a video control that changes what happens in the video by having people tilt their phones. The mobile version also features basic navigation and donation options - making both mobile and desktop browsers optimized for donations while acting as two separate parts of the same experience.

2) ELEKS Google Glass Experiment

Eleks Google Glass Experiment

There's a reason the ELEKS Google Glass Experiment has won "Site of The Day" awards from both TheFWA and Awwwards. The desktop version of the website is one of the most interactive websites to ever be released on the internet - leveraging both visual elements and microphone connectivity to effectively show users what using Google Glass will be like when it comes to doing athletics. While the mobile site could never hope to quite live up to it's desktop counterpart, it does feature some nice elements of its own.

The most impressive part of the site is the large featured image in the header, which moves just enough to keep users engaged while not negatively impacting load time. Furthermore, the text is presented in a clean and efficient manner so that the most information possible is conveyed without drawing away from the mainstay media elements of the video and imagery.

3) Mercedes-Benz

Mercedes-Benz Website
The 2014 Mercedes-Benz landing page for their new V-Class car is a truly inspiring responsive website. The desktop version features a video background that loads impressively quickly and highlights the experience of the new V-Class. Exhibiting foresight in terms of load time, the video is not featured on mobile devices - dropped in favor of equally captivating visuals of the car.

Particularly interesting about this site is the fact that the site that renders on mobile devices has a clear difference in terms of purpose than the desktop version. The desktop version is clearly trying to build brand awareness and feature the car so that users can see how it drives and what it looks like. By contrast, the mobile version is more information driven - perhaps taking into account that most people on the mobile version are probably already looking at the car in a showroom. Having a responsive website with two different purposes that are tailored to two different targeted audiences like this is a brilliant touch and a great use of the medium of responsive design.

4) Jet Edge

Jet Edge Website

If there ever was a website that truly creates the emotional connection of what it is like to fly, Jet Edge's new responsive website has nailed it. As users scroll down on the desktop version of the site, big background images take users higher and higher into the air. On the right hand side there is a navigation bar that measures the five pages on the homepage in feet, while attention to detail is shown through added graphics of clouds floating off the ever-present wing of the plane.

The mobile website isn't quite able to achieve the same emotional connection as the desktop site - however, it does manage to put the scroll to work and retain the big background images that make the desktop version so inspiring.

5) Blue Fountain Media

Blue Fountain Media Website

We're a little bit biased, but we're quite pleased with the new version of our website. The new website, released in early 2014, features responsive navigation that is easy to use on all mobile devices. While efforts have been made to change the experience on mobile devices so that users have an easier time navigating, there are very consistent themes and branding across devices that give users who have been to the website on one device a seamless transition to another. Since adding the responsive version of our website, we've seen dramatic increases in both mobile and overall traffic.

6) Winshape Camps

Winshape Camps
Winshape Camps website does an amazing job of doing multiple components of their desktop in a unique way that works and then transferring the focus to mobile appropriately. The desktop version of the website features video of the campers as well as information about the camp experience while also including an interesting and eye-catching rainbow color overlay over each video.

As the same video content is not possible for mobile, the color overlay becomes the focus of the mobile website. As a result the idea and emotion of a fun summer camp is still conveyed even without the video - this is a great example of a website that is able to easily make the switch to mobile devices on a responsive theme by having multiple things going for it that allow for a shift in focus.

7) Batman: Arkham Knight

Batman Arkham Knight Website

Whether or not you are a fan of video games, the Batman: Arkham Knight website is sure to leave you impressed. The interactivity on the site is extremely impressive on desktop browsers, and the site manages to recreate this on mobile and tablet versions. While there are some kinks in terms of supported browsers, this site makes Batman fun and certainly sets a high standard for the game.

8) Orangina European Site

Orangina Website
The Orangina European responsive website does a fantastic job of conveying the Orangina brand by providing fantastic custom iconography and interesting visuals that are effectively coupled with interesting but to-the-point copy. The site makes a point of creating large buttons that are perfect for tablet and mobile users, but spices them up for desktop users by including interesting mouse-over elements that make the user experience of clicking any button on the site surprising and captivating.

9) My Deejo

Deejo Website

Taking a kitchen knife and making it into an engaging experience for users on a responsive website is no easy task, yet My Deejo pulls it off seamlessly. The site allows users an extremely interactive experience when it comes to knife customization, and surprisingly doesn't sacrifice much on their mobile version. The navigation to each customizable option on the mobile version can be a bit tricky, but considering the site lets you see everything about your customized knife in granular detail, this is a small complaint from an otherwise exceptional site.

10) Blue Lagoon Iceland

Blue Lagoon Website

The epitome of a "clean" design, Blue Lagoon Iceland's responsive website seamlessly melds a white and blue theme into big background images that reflect the Icelandic landscape. The site instantly creates an emotional reaction from users with its calming images. While it would be nice to have a larger call to action, the layout of the site is otherwise superb - with barely noticeable fog moving in and out on the desktop version to keep users engaged and adding another dimension to the site.

11) Aéroports de Montréal

Montreal Airport Website
Aéroports de Montréal is a website that looks at utility before beauty. The desktop version is simple, but does provide a few kicks of inspiration with graphics that scroll down with users as they check arrival and depart times as well as look for more information. The mobile version is equally as helpful, keeping the information travelers are looking for prominent and providing other helpful information below the fold.

While it isn't necessarily as pretty to look at as a lot of the other websites on this list, it is a good reminder that responsive design at its simplest is about making your users happy - this site does this by allowing travelers to get to the data they are looking for on any device quickly.

12) Interior Design by Decade

Interior Design by Decade Website

This website takes a look at the arrangement and style of the British home and how it has changed dramatically through the decades. The desktop version of the site features fantastic transitions from decade to decade through simple scroll navigation. The mobile version of this responsive website loses the transitions but manages to keep the unique graphics and style that make this page engaging while simultaneously repurposing the copy in a way that is easy for mobile and tablet users to digest.

13) Apple - Thirty Years of Mac

Apple Website

A fantastic website in terms of content, Apple's 30 years of Mac website couples the theme of putting creative power in everyone's hands with scrolling big background images in an initial section as well as a side scrolling timeline that shows how Apple has influenced a generation of innovators who continue to change the world.

15) Greenland.com

Greenland Website

The 2014 responsive revamp of the Greenland.com website is truly impressive. The website is driven by captivating photography of Greenland that renders beautifully on both desktop and mobile devices. As each image changes users will feel as if the site has changed entirely without losing the core navigation concepts that keep the site together. The site is particularly effective on mobile devices, where the background image can be changed with a swipe of your finger.

16) The Offshore Partners

The Offshore Partners Website

The Offshore Partners website does a great job of utilizing responsive elements to tell a story through both images and copy. While the mobile version of the website has a lot of text to get through, the scrolling experience is seamless and effectively tells the culture and history of the company.

17) Ray's Restaurants

Ray's Restaurants Website

Ray's Restaurants has a very nice visually driven responsive website that seamlessly intertwines their three dining locations. Mouthwatering imagery translates easily to mobile and tablet, and the site does a good job with their brand story and value propositions. The one drawback is the lack of a clear call to action on both the mobile and desktop sites, but outside of this drawback the site is well developed and engages customers.

18) Blackhouse

Blackhouse Website

Simple yet elegant, the Blackhouse website does an excellent job of coupling delicious visuals with functionality. The website keeps things basic to great effect - creating a website where the food and experience is easily conveyed on the homepage while the information users need to book reservations or find restaurants is quickly and easily accessible. Of particular importance is how quickly everything on the website loads on both desktop and mobile browsers - making for a headache-free website experience.

19) Flex Studios

Flex Studios Website

It isn't often that a website is able to marry great website design with a prominent call to action, but the new Flex Studios website is able to do just that. Located in New York City's Union Square, Flex Studios is able to drive users to sign up for classes while providing helpful information and great visuals of their facilities and classes. The site is particularly interesting on mobile devices, where the responsive version places a much larger focus on iconography than its desktop counterpart. Both versions seamlessly combine captivating multimedia with purposeful and prominent CTAs to make the site functional and beautiful at the same time.

20) Sonny's BBQ

Sonny's BBQ Website

Sonny's BBQ website is another great example of a responsive website being tailored appropriately depending on device. The desktop version of the site features scrolling images, scrolling graphics and interactivity that makes users hungry, while large CTAs get users where the website wants them to go. By contrast, the mobile and tablet versions of the site focus on getting users to use the main CTAs - by providing large, simple buttons that users can actively navigate with while on the run.

21) Corum

Corum Website

Corum's website is a great combination of unique navigation and responsive elements that make for a consistent brand theme across multiple devices. The desktop website is a bit cluttered in terms of content, but has clean navigation and tells the Corum story with clear content and lots of visuals. The mobile version of the site is a bit cleaner and seems to be the main focus of the overall website - helping users make a decision on the product when they are in stores.

It is interesting that the main CTA on the mobile version discusses the uses of the watch while the desktop version focuses on the brand story. Once again, we see responsive website design being optimized based on where it will be used in order to make it easier for users to get the content that they want.

22) Regnum Hotels

Regnum Website

Regnum Hotel's website shows a deep understanding of users with their responsive design choices. The desktop version of the website features scrolling background images that show the hotel from various views, and even features a weather bar on the bottom right hand side. The desktop site as a whole is a lot more focused on selling the hotel to potential guests than actively getting them to reserve. While there is a reservation button, it is small and in the top right hand corner. By contrast, the mobile site does away with a lot of the glitz and glamour of the desktop version - providing a large, prominent and more centered reservation button.

23) Monteré

Montere Website

Monteré's responsive website is a fantastic case study in how the right images can make a website engaging and interesting for users. The responsive website varies only in it's navigation layout from the desktop version but the fantastic images on both versions remain the main focus point. Particularly impressive is the continuing plethora of images as users scroll down - showing the products in the most impressive light possible.

24) Sotheby's Institute of Art: 45th Year Anniversary

Sothebys Website

Sotheby's Institute of Art's 45th Year Anniversary microsite provides great visuals and straightforward scrolling navigation to make for an effective desktop and mobile experience. A particularly impressive feature is the expand "+" icons in the mobile edition of the site, that keeps your phone's screen from becoming too cluttered with text users don't care to see.

25) Aqua Restaurant

Heart of Howth Website

Aqua Restaurant's new responsive website does a good job of creating a consistent, optimized responsive website for the brand across all devices. The site shows a clear understanding of the fact that the site should be about the ocean and fishing industries in order to make the website engaging for viewers as opposed to concentrating on the restaurant's food. While there are images of the restaurant so that guests know what they can expect - the idea of coupling the location and where the food comes from is an extremely interesting and visually engaging way to create an effective restaurant website.

Subscribe to
Our Newsletter

Comments

  1. Pingback: Marketing Day: Email Spammers Fined $350K, Twitter Testing Promoted Videos & More

  2. I’m with you on giving number 1 to the moon site design…that’s awesome! Of course, as the title suggests, all of these sites are so beautiful they’re inspiring. Hmmm…I may go on another one of my design kicks! Have a great day, thanks for the awesome read!

  3. Pingback: Marketing Day: Email Spammers Fined $350K, Twitter Testing Promoted Videos & More | CABizNews.com

  4. Pingback: How do you create the right identity for your business? | Rouge Media - The Creative Design Agency

  5. Ashish Ajani said:

    Excellent collection, all of them are very good but the big concern with some sites are loading time. RWD is a technique where if you do not take care of performence and just concentrate on responsiveness then it can be headache when it comes to site optimization. Nice article and thanks for sharing.

  6. Austin Paley said:

    Hey Ashish,

    Thanks for your comment. That’s actually a great point and one that I should have mentioned. Some of these sites definitely have room for improvement from both a speed and SEO standpoint. They were judged purely on visuals and content, and I only really penalized some of the sites on here when the content loaded up slowly – not the site itself. I know they are inherently tied together, but really wanted to focus on design first. Perhaps I will do a roundup of “Inspiring Usability and SEO Websites” in the future?

Leave a Comment on this post

*
*