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
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
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
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
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
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
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
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
9) Eurosport
One of the biggest sports networks in Europe, Eurosport makes sure their website keeps them in contact with their users with it’s brilliant responsive versions. The site is particularly great at catering each version to be more easily usable for each device. On desktop versions for instance, there is a lot more text for things like scores and latest news – as desktop users are seated and have an easier time reading a lot of text. By comparison, mobile and tablet versions rely more heavily on images to get breaking stories and scores to users and feature less text outside of the actual scores. While each version of the site feels similar, it’s clear to see that Eurosport has taken a lot of time to understand their audience’s needs based on device and cater to them appropriately.
10) Blue Lagoon Iceland
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
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
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
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
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) Nixon Watches
Nixon watches does something that is all too rare for inspirational responsive websites – they take the time to provide a prominent call to action that doesn’t detract from stunning imagery and site layout. The desktop version of the website features lots of great images of the watches in action and takes full advantage of the extra space that a desktop window provides in terms of website design. What is really telling about the site’s purpose though comes with the mobile version, where images are sacrificed in favor of product menus that make it easy for users to get to the products even when they are on the go. While it comes at the cost of some of the great product images that Nixon has on their desktop website, it just goes to show that great responsive websites should be trying to generate sales as well as giving users something beautiful to gawk at.
17) Ray's Restaurants
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
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
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 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'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) Tens Sunglasses
As we’ve seen with many examples, choosing what images to keep and which to get rid of when making the switch between a desktop and mobile version can be a difficult selection process. Brands need to decide whether they want their mobile version to be functional and conversion-oriented, or attempt to build brand equity by impressing users with fantastic imagery so that they take action on their own. Tens Sunglasses does a very interesting job solving this issue. On their homepage they get rid of a lot of the extra imagery that the desktop version uses to show potential buyers what the product looks like in action in favor of more basic product images in order to save space and build a functional page. However, they solve the problem removing said pictures presents by flushing out their “lookbook” page on their mobile versions – telling users to flip their phones horizontally so that they can swipe through images of the sunglasses at work.
23) Monteré
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
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) Bulgari 130th Anniversary
In the luxury apparel market, Bulgari doesn’t quite have the same brand recognition as some other luxury products. This puts them at a disadvantage when it comes to generating traffic and interest in their new landing pages and events online. Bulgari has clearly used this disadvantage to work tirelessly to set the new bar for responsive websites in their industry with their 130th anniversary landing page, which is absolutely stunning. The site seamlessly bridges the gap between offline magazines and online websites by making people scroll or swipe (depending on device) between each page. The action is coupled with a page turning animation that works fantastically well on all devices and keeps user engaged with the website. This site is really the pinnacle of making a brand feel like a luxury product without including excessive amounts of imagery and video that slows the page down and makes it useless from a usability standpoint.
