You probably heard retailers began their holiday season with record-setting sales during “Cyber Week” – the shopping period between Thanksgiving and Cyber Monday. Real-time data from IBM Digital Analytics Benchmark shows online sales grew 8.5% since 2013. Even more interesting, although not surprising, was the fact that “mobile sales up 27.6% year-over-year.” On Cyber Monday specifically, “mobile traffic accounted for 41.2% of all online traffic, up 30.1% over 2013. Mobile sales were also strong, reaching 22% of total Cyber Monday online sales”.
Another important finding was the even though smartphones doubled tablets in online traffic, tablet users spent more money on purchases ($99.61 vs. $121.49).
And, what about desktops? IBM discovered “desktop PCs accounted for 58.6% of all online traffic and 78% of all online sales.” Consumers shopping on their PCs also spent more than mobile users – $128.24 compared to $110.72.
If the 2014 holiday season has proven anything, it’s that online visitors are continuing to use multiple devices to search websites and make purchases. Because of this, it’s once again time to suggest that you have a separate mobile-site or a responsive web design.
According to research from Guy Podjarny, brands are continuing to embrace RWD. After locating the Top 10,000 site on Alexa, he found that 18.7% of them have adopted to responsive web design. When this same test was performed in 2013, the adoption rate was at 10.8%. He also found that RWD sites are almost as popular as mobile sites – 17.2% for RWD, 20.5% for a mobile redirect.
As Guy points out, “Responsive Web Design adoption is growing rapidly, and is already nearing the adoption levels of a dedicated mobile site. Unfortunately, this fast adoption of RWD is moving faster than the attention to its performance.” For example, most RWD sites look amazing on a desktop, but can sometimes be too heavy for a mobile device.
With mobile usage continuing to grow, and more brands adopting RWD, you definitely want to make sure you’re not left behind in 2015. After all, RWB is all about giving your visitors an experience. And, if you don’t deliver, you can expect 68% of them to leave your site.
With all that in mind, here are 50 awesome responsive website designs from the past year you can use for inspiration and motivation. Please note this list is not in any particular order or a “best of” list, per say. Instead, it is a list of websites that were impressive based on the layout, ease of navigation, and how well the site matched with the brand’s message. If you feel we missed any incredible websites from 2014, please let us know in the comments.
Editor Note: Neither SEJ nor the author has any affiliations with the websites listed.
Rolex created an absolutely beautiful website that covers five Young Laureates of the Rolex Awards 2014. The site resembles more of magazine but is interactive and contains amazing content like stunning images, short videos, stats and extensive biographies on each of these incredible people. No wonder Awwwards named this its “Site of the Day” on November 29.
This is another Awwwards “Site of the Day” of the winner – it also was named “Site of the Day” by TheFWA. Why? Because this is a really cool and interactive site that shows the potential of Google Glass for use in sports. Not only is the high-flying imagery enough to give you a first-person view of someone wearing Glass, you also have the chance to use your microphone to give orders. Even with all of this going on, the site loads quickly and does an excellent job of convincing you that Google Glass and sports pair-up nicely.
More Hazards More Heroes is a folk duo from Nashville who have one incredible website that more bands should follow. The link to download their album is colorful and in the center of the page. The page also contains lyrics, but because it’s pretty minimal this site also looks great on mobile devices.
We would expect this design and illustration studio from Jen Adrion and Omar Noory to have a top-notch design, which they successfully accomplished. This lighthearted and interactive site contains a smooth single scroll theme and fun animation that shows how talented these creative professionals are.
Awwwards awarded Greenpeace’s “Into the Arctic” its “Site of the Year.” And for good reason. The Greenpeace expeditions to the North Pole were captured in real-time and placed on the website. Furthermore, the site created high-resolution images of the entire Arctic Circle that shows the damage that has been done to this region.
The BORN Group is actually the “fusion of two award-winning creative, content and commerce companies; Group FMG and POD1.” Their website does a fantastic job of showcasing their creative work as well featuring updates and contact info in a simple and sleek design that looks great on all devices.
This amazing website is part documentary, part website that gives visitors a firsthand experience of what it’s like to live in the world’s biggest refugee settlement, which is located in Northern Kenya through high-resolution images and videos.
The “MOON” website was a partnership between ING Direct and Unicef. What’s really innovative about this site is that if you go to the desktop version it gives you a code and asks you to enter it into your mobile device so that both of your devices are synced. When both devices are synced, you can use your mobile device to navigate the story on the desktop site.
Both the desktop and mobile versions for Bonobos make use of the debatable “hamburger” menu, which works for this site. The three-lined menu makes it easy for customers to shop for their favorite shirts, bottoms, or outerwear no matter where they are.
The site for the Mercedes-Benz V-Class features an informative and interactive video that gives visitors a detailed look at the features and experience of driving the new V-Class. The site is also complemented by a lot of high-quality images with additional information on the vehicle’s features.
For starters, this website is full of animal images. And, you doesn’t like viewing pictures of animals? What WWF does extremely well is provide lots of content on the species that are protecting and more than calls-to-action to get you motivated to help.
To help promote The Hunger Games: Mockingjay Part 1, Lionsgate created this stellar digital campaign that features everything from video messages from President Snow, new shows on Capitol TV and interactive WebGL content. The content and redesign go perfectly with the theme of the film. No wonder this was Awwwards “Site of the Month” in August.
Valspar’s Point Drop achieves a challenging task for website designers. It’s bright and full of vibrant colors while at the same time is clean and easy-to-navigate. The use of larger icons is a touch for users to easily find the information they want on this site as well.
Since the IATSE website is representing the people behind live performances, it just makes sense for this site to effectively gives off the vibe of what it would be like to be backstage. It’s also been designed so that you can navigate effortlessly on any device.
If you were ever curious on what it would be like to fly on a private, luxury jet, then just visit the homepage for Jet Edge. As you scroll down you’re greeted to breath-taking aerial views and stunning images of the interior of the jets.
There are a lot of things I love about this site. For starters, it features clear, high-quality images of the products being offered. Checking out on both desktop and mobile is a painless and smooth experience. What’s most interesting about this intuitive site is that it gives visitors the option to shop by price, food categories or gifts – which comes in handy when searching on a smart phone or tablet.
Creating a homepage for your beloved dog may sound a foolish, but this page will definitely convince you otherwise. I mean, it’s just pictures of man’s best friend. How can you go wrong with that?
Since Social Driver is a “digital innovation agency” that does everything from launching social campaigns to designing website, you would expect they would have a top-notch site – which they totally do. Everything you need to know about the agency is clearly presented and the site contains a couple of informative videos and testimonials, via Twitter, from actual clients.
How can you get people excited for an upcoming release? Take a couple of cues from the website for the video game for “Batman: Arkham Knight.” Besides the endless amount of high-resolution images, there are trailers, concept art, and the very cool, interactive Batmobile Experience. It’s everything that fans of the game would find appealing.
MRY, a creative and technology agency, has an incredibly bold and colorful website that works for the brand. Instead of unnecessary filler, MRY uses it website to provide case studies of the work that the agency has done in one swift, scrolling motion.
Ranked by Forbes as “The World’s Most Innovative Company” for four consecutive years, it’s no surprise that Salesforce would have an amazing website. The website is able to highlight of the services that Salesforce provides in a bright and easy-to-read layout. They also do a great job of highlighting the success that their customers have had.
This Italian website glides swiftly so visitors can learn about the most recent grape harvest, where to purchase the label’s wines, and how to get in touch. Simple, but it makes a statement.
With it’s clean, minimal, and easy-to-read typography, the Boston Globe makes it incredibly easy for users to keep up with the latest news no matter where they are.
This is another Awwwards “Site of the Day” and if you take a minute to visit, you’ll quickly understand why. Besides testimonials and information about the camp, this website does a solid job in capturing the excitement and adventure of attending summer camp.
Just like the product it’s selling, MailChimp’s website is intuitive and efficient. It also nicely breaks down the features that make MailChimp a leader in email campaigns.
A very smooth and responsive website that does an excellent job of showcasing the construction and renovation company’s work. What’s really neat about this site is prior to scrolling done there are easy-to-access links that send to the About page, Contact page, Services Offered and a Tips & Tricks page.
A bright and colorfully designed website that matches the product. Custom iconography, to-the-point text, and large headlines helps this site transcend nicely to mobile devices.
Because the mobile version properly adjusts to the screens of smartphones and tablets, this is a perfect example of a responsive web design. In addition to the clean design, there’s a clear CTA as soon as you arrive on the homepage that motivates you to take action.
When your software company is a household name, your website needs to be something special. And, yes, Microsoft has done that. Their website features high-res images of its products. But, what’s really impressive is how easy it is to navigate through the site to examine all of Microsoft’s products.
This agency manages a small group of photographers and directors, so it’s not surprising that this site has a very slick, clean design that hosts dazzling images. Again, sometimes you just have to keep things simple.
I’ve mentioned clean designs a lot in this post. But it doesn’t get any cleaner than this website. Just look at how the white and blue colors of the theme perfectly fade into each other – along with the moving fog. Overall, this site is extremely relaxing, which is perfect for the products and services they are selling.
This annual music festival takes place at the wondrous Gorge Amphitheater in Washington. Their website has a bold and easy-to-navigate design complete with a musical-note rotator and every piece of info you need to know about the festival.
This site is a great example on how to convince prospective clients, students, employees, etc. to relocate. While aimed at college students, DC Internships does a great job in putting the nation’s capitol in the spotlight through a design that is completely user-friendly.
This fluid website has some really awesome features that work with this brand, such as recipes, a store locator, charitable causes, and what team members love about the brand. If this isn’t an example of brand culture, then I don’t know what it.
Since Squarespace is a company that gives you the tools to construct a website, it’s only fair that their website is one of the best. The feature I like the most is going through the Tour section. It gives you the chance to play around with website templates to get any idea on what your site could look like before making a purchase.
Despite some recent hacking issues, Sony has put together a really solid website. Instead of text, the layout relies on images, screenshots and YouTube/Vine clips that feature the latest offerings from the company.
This website does an excellent job of delivering the most vital information people traveling to or from Montreal need – such as flight times, weather, online reservations, directions, and departure tips. Overall, this is a great example of how a website is designed to keep its visitors in mind.
A beautifully designed layout that proudly displays recent projects, causes, and direct CTA. This creative digital studio did a fantastic job of creating a website that is both interesting to look at and easy to use.
If you ever thought about traveling to Greenland, then this site is a must see. It includes inspiring images with interesting facts about Greenland as well as tips for planning your trip. The easy navigation makes it a breeze to plan your Arctic adventure on any device.
Simple black and white coloring combined with bold fonts, simple navigation, parallax scrolling, and a contemporary vibe makes website for a DC-based pizza chain one of the coolest responsively designed websites around.
Earlier this year Apple celebrated the 30th anniversary of the Mac with an impressive timeline on this mini site that included high-res images on how the Mac has evolved and influenced innovation. (The microsite is no longer up on Apple’s site, but you can revisit it on 9to5Mac if you missed it.)
This design is clean, minimal, interactive, engaging and just a lot of fun to play around with. However, there needs to be some additional content that describes exactly what this product does. It’s some sort of smart phone, I think. Regardless, a really cool site.
The high quality images, font, and parallax design of the website give it a very elegant vibe, which pairs perfectly with the craftsmanship that Grey Goose is known for.
In honor of its 45th anniversary, Sotheby’s Institute of Art developed this scrolling microsite full of high-res images, a history of the institute, and videos. It’s straightforward, but effective.
What’s not to love about this site? Between the unique font, hand drawn sketches, quality images, and trip suggestions, this site has been designed so well that you’ll start planning your trip to Oregon after visiting it.
Just because you have simple design doesn’t mean that you can’t have an elegant layout, as Leodis Lager proves. What I really like about this site, however, is how it profiles people with compelling stories. It’s a great way to engage the community.
This is pretty obvious, but I absolutely love that Blue Fountain Media made use of the color throughout it’s website. On top of that, this digital agency clearly explains what it does and provides a list of clients and testimonials on a site that is fluid and smooth.
This is a slick site that makes great use of black text on a white background so you can easily read the vital information they provide. Because of its simple responsive design, it looks and works great on all devices.
With such a colorful site full of animation and content, it’s surprising how fluid and smooth it runs on all devices. BarCamp, in case you’re not familiar with the event, is a place for entrepreneurs, SEOs, or just creative people passionate about traveling, to come together and network in a completely informal setting. Their website complements the relaxed atmosphere at BarCamp perfectly.
Is there another website you feel deserves special mention from this past year? If so, please let us know in the comments.
Featured Image Source by Tooroot via Wikimedia Commons