Best Responsive Web Design Tools 2014

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.

Continue Reading Below

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.

Continue Reading Below

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.

Enjoy!

Editor Note: Neither SEJ nor the author has any affiliations with the websites listed.

Rolex Awards 2014

2014-12-11 09_44_32-Rolex Awards for Enterprise - 2014 Rolex Young Laureates Screen Shot Rolex Awards 2014 12/11/14

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.

ELEKS Google Glass Experiment

2014-12-11 09_53_20-Google Glass Experiment Screen Shot Google Glass Experiment 12/11/14

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.

Continue Reading Below

More Hazards More Heroes

2014-12-11 09_55_15-More Hazards More Heroes _ Official Site Screen Shot More Hazards More Heroes 12/11/14

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.

These Are Things

2014-12-11 09_56_48-These Are Things - Home of the Modern World Map Screen Shot These Are Things 12/11/14

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.

Continue Reading Below

Into The Arctic

2014-12-11 09_58_17-Into the Arctic _ Greenpeace Screen Shot Into the Arctic 12/11/14

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.

BORN

2014-12-11 09_59_54-BORN - A global digital agency connecting creative, content & commerce. Screen Shot BORN 12/11/14

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.

Continue Reading Below

Dadaab Stories

2014-12-11 10_02_15-Dadaab Stories Screen Shot Dadaab Stories 12/11/14

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.

MOON

2014-12-11 10_04_07-MOON, A story you can turn around whenever you want. Screen Shot MOON 12/11/14

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.

Continue Reading Below

Bonobos

2014-12-11 10_06_03-Better-Fitting, Better-Looking Men's Clothing & Accessories _ Bonobos Screen Shot Bonobos 12/11/14

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.

Mercedes-Benz

2014-12-11 10_07_26-The new Mercedes-Benz V-Class. Large as life. Screen Shot Mercedes-Benz V-Class 12/11/14

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.

Continue Reading Below

World Wildlife Fund

2014-12-11 10_09_05-WWF - Endangered Species Conservation _ World Wildlife Fund Screen Shot World Wildlife Fund 12/11/14

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.

The Capitol – The Official Government of Panem

2014-12-11 10_12_12-The Capitol - The Official Government of Panem Screen Shot The Capitol – The Official Government of Panem 12/11/14

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.

Continue Reading Below

The Paint Drop

2014-12-11 10_14_13-Home Screen Shot The Paint Drop 12/11/14

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.

International Alliance of Theatrical Stage Employees

2014-12-11 10_15_58-Home _ IATSE Labor Union, representing the technicians, artisans and craftperson Screen Shot IATSE Labor Union 12/11/14

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.

Continue Reading Below

Jet Edge

2014-12-11 10_18_01-Jet Edge Screen Shot Jet Edge 12/11/14

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.

Hickory Farms

2014-12-11 11_46_21-Gourmet Food Gifts & Unique Specialty Foods _ Hickory Farms Screen Shot Hickory Farms 12/11/14

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.

Continue Reading Below

PACK

2014-12-11 10_20_44-Pack_ Connecting the dog lovers of the world. Screen Shot PACK 12/11/14

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?

Social Driver

Screen Shot Social Driver 12/11/14

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.

Continue Reading Below

Batman: Arkham Knight

2014-12-11 10_24_32-Batman_ Arkham Knight - Coming 06.02.15 Screen Shot Batman – Arkham Knight 12/11/14

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

2014-12-11 10_26_09-MRY _ A creative and technology agency that makes brands remarkable Screen Shot MRY 12/11/14

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.

Continue Reading Below

Salesforce.com

2014-12-11 10_27_33-CRM and Cloud Computing To Grow Your Business - Salesforce.com Screen Shot Salesforce.com 12/11/14

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.

Monte Saline

2014-12-11 10_29_52-Spumante metodo classico, Rosè Brut, Magnum Blanc de Noirs Brut, Cantina Monte S Screen Shot Monte Saline 12/11/14

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.

Continue Reading Below

The Boston Globe

2014-12-11 10_31_20-The Boston Globe Screen Shot The Boston Globe 12/11/14

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.

WinShape Camps

2014-12-11 10_32_59-Home _ WinShape Camps Screen Shot WinShape Camps 12/11/14

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.

Continue Reading Below

MailChimp

2014-12-11 10_34_46-Send Better Email _ MailChimp Screen Shot MailChimp 12/11/14

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.

Java Construction

2014-12-11 10_36_13-Jova __ Home Screen Shot Jova Construction 12/11/14

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.

Continue Reading Below

Orangina European Site

2014-12-11 10_37_53-Orangina Screen Shot Orangina 12/11/14

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.

Change.org

2014-12-11 10_39_38-Change.org · The world's platform for change Screen Shot Change.org 12/11/14

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.

Microsoft

2014-12-11 10_41_36-Microsoft – Official Home Page Screen Shot Microsoft 12/11/14

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.

Valerie Martinez Agency

2014-12-11 10_43_34-Valerie Martinez Agency Screen Shot Valerie Martinez Agency 12/11/14

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.

Blue Lagoon Iceland

2014-12-11 10_45_08-Blue Lagoon Geothermal Spa in Iceland Screen Shot Blue Lagoon Geothermal Spa in Iceland 12/11/14

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.

Sasquatch Festival

2014-12-11 10_46_45-Sasquatch! Festival Screen Shot Sasquatch! Festival 12/11/14

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.

DC Internships

2014-12-11 10_48_14-DC Internships _ Live. Learn. Intern. Screen Shot DC Internships 12/11/14

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.

Whole Foods

2014-12-11 10_50_05-Values Matter _ Whole Foods Market Screen Shot Whole Foods Market 12/11/14

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.

Squarespace

2014-12-11 10_51_40-Build a Website — Squarespace Screen Shot Squarespace 12/11/14

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.

Sony

2014-12-11 10_53_04-Sony USA - Electronics, PlayStation, Movies, Music, Product Support Screen Shot Sony 12/11/14

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.

Aéroports de Montréal

2014-12-11 10_54_55-Aéroports de Montréal_ International Pierre-Elliott-Trudeau et Mirabel Screen Shot Aéroports de Montréal 12/11/14

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.

Wide Eye Creative

2014-12-11 10_56_19-Wide Eye Creative _ web design studio _ interactive agency Screen Shot Wide Eye Creative 12/11/14

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.

Greenland.com

2014-12-11 10_57_59-Greenland - The Official Tourism Site. Find your adventure here! Screen Shot Greenland.com 12/11/14

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.

&pizza

2014-12-11 10_59_54-&pizza Screen Shot &pizza 12/11/14

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.

Apple – 30 Years of Mac

2014-12-11 11_08_13-Apple - Mac Screen Shot Apple – Mac 12/11/14

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.)

Teye

2014-12-11 11_04_28-TEYE Screen Shot TEYE 12/11/14

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.

Grey Goose

2014-12-11 11_11_32-GREY GOOSE® Vodka _ The World's Best Tasting Vodka Screen Shot Grey Goose 12/11/14

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.

Sotheby's Institute of Art: 45th Year Anniversary

2014-12-11 11_13_12-Sotheby's Institute of Art_ 45 Years of Art Market Expertise Screen Shot Sotheby's Institute of Art 12/11/14

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.

Travel Oregon

2014-12-11 11_14_54-Travel Oregon _ From Mt Hood to the Oregon Coast, Explore Oregon Screen Shot Travel Oregon 12/11/14

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.

Leodis

2014-12-11 11_17_09-Leodis Lager _ Start the conversation Screen Shot Leodis Lager 12/11/14

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.

Blue Fountain Media

2014-12-11 11_19_05-Website Design Company & Digital Marketing Agency in NYC _ BFM Screen Shot Blue Fountain Media 12/11/14

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.

Oscar Health Insurance

2014-12-11 11_20_53-Oscar Health Insurance Screen Shot Oscar Health Insurance 12/11/14

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.

BarCamp Omaha 2014

2014-12-11 11_53_55-BarCamp Omaha 2014 Screen Shot BarCamp Omaha 2014

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