10 Examples of Inspiring Responsive Web Design

Responsive Web Design - or as I like to call it, RWD - is absolutely THE trend in web design for 2013. As a web designer, it has become second nature for me to visit a website and pull the corner on my monitor to see how the page responds. Most of the time, I am quite pleased to see the content on screen shift and stack to reveal a new layout at every pixel size. But I am a rare breed in that I tend to visit a lot of other agency websites and designer portfolios to tap into the latest design concepts. Though it’s pretty unusual to see a “design-y” website like those ones not implementing responsive elements, there are still plenty of ecommerce, financial, government, etc. websites out there that have yet to utilize responsive web design for their business.

This blog is not about showcasing the flawless responsive web design skills of the trendiest designers, but rather a compilation of the other websites out there - the websites that are using RWD as a great tool to sell, inform, and educate their users about products, services, and brands regardless of device size. Feel free to click on the images to see the full sites in all their responsive glory (unless of course you're reading this on a phone or tablet, in which case just enjoy that each site works)!

NPR

NPR only just recently updated their homepage to reflect a mobile-friendly, responsive web design. Compared to the look of the old site, this new responsive homepage is incredibly open, inviting and easy to read. According to an article written by NPR about their new look, the redesign is one that aims to “think outside the box” of the traditional news website. It is clear to me that this new design will not only provide readers with a greater variety of content, but also a greater ability to consume that content through different devices.

AIDS.gov

AIDS.gov is certainly one of the more modern looking government websites I have ever come across. This is especially true because of the integration of  RWD. The navigation on this site has been designed particularly well compared to other government websites too. Where some .gov sites come across as bulky and difficult to maneuver, this website features large, easy-to-click navigation tabs and a smart approach to the mobile menu. Overall, the site is easy to use and attractive to look at, but these elements do not detract from the purpose of the organization.

Drexel University  

I just have to take the opportunity to stay that I truly believe every university should implement a responsive web design. Talk about reaching your target audience! There are actually schools out there aiming to put a tablet in the hands of every student, and if you don’t think those students are going to use that tablet to research schools or actually apply to the college of their dreams, then you are crazy. In this site, Drexel is able to clearly showcase their unique culture and innovative perspective. In a press release about their responsive site, Drexel said they used “responsive design to engage students, no matter their location or device.” I think they did just that.

Wendy’s

Seeing that Wendy’s has implemented a responsive web design gets me quite excited. I can only imagine what the competition will do next to make their fast-food chain the most tech-savvy (I’m talking to you McDonalds, Burger King and especially Taco Bell, with your already killer, millennial-targeted social media strategy). The responsive web design on this site features a very fresh and friendly look with big bold images and simple navigation. If I were an on-the-go consumer looking to compare two fast-food restaurants, an interactive, responsive website like this might just sway me to choose Wendy’s over the less mobile-friendly competition.

Indochino

Indochino’s responsive website is an absolutely beautiful mix of images and typography. The site really complements the high quality image of the brand. I am also a big fan of the way the minimalistic design works on the product pages. It would be incredibly easy to make a purchase from this site using a smartphone or other touch screen device. Too often, ecommerce websites try incorporate a responsive web design without giving thought to how the user experience will be impacted without the precision of a mouse. But the designers of this particular site have really taken the time to consider UX in both the shopping and purchasing processes.

Hubspot

Inbound marketing giant Hubspot shows us all how a responsive website can be attractive, informative and sales actionable. Large images and unique content presentations scale to any size, but the message is never compromised as the device width shrinks. Each call-to-action is presented as an integral element of the overall design. Hubspot’s site is also a good example of a web design that doesn’t fear “the fold.” Once upon a time, designers were afraid to make their users scroll to find content, but that’s no longer the case. As Hubspot proves, with the right responsive design, your web visitors won’t mind scrolling or swiping to keep reading.

The Children’s Museum of Pittsburgh

This responsive web design is just perfect for the busy parent on the go. Bright colors, unfussy design, and just a touch of whimsy make this site inviting, while a simple navigation system and the integration of various multimedia elements make it very useable. If you happened to be a mom of three searching for parking or directions to this museum, the CMP website would make it extremely simple to do so. No need to download a separate mobile app or go hunting through endless navigation tabs, because the responsive site puts all the content you could need right at your fingertips.

Icehouse Restaurant Minneapolis 

I have a special appreciation for restaurants that use a responsive web design as opposed to a separate mobile website. Often, the mobile sites that restaurants offer provide limited actionability: they assume I am either searching for directions or need to call and make a reservation. But this approach really neglects those site visitors looking to see a menu or trying to find information about events and happy hours. Icehouse has a simple responsive site that doesn't hide content from someone to research a new restaurant on their phone. You get the exact same experience as if you were to visit from a desktop. 

Town & Country

It's a wonderful trend to see more and more print publications re-vamping their online presence by utilizing responsive web design. In the case of Town & Country, the design is quite faithful to the original print edition with beautiful visuals and elegant typography. A lot of news publications out there utilize a separate mobile site instead of a responsive design. The problem with this is that it creates extra work for publishers who then have to manage two separate sites. Responsive technology creates efficiency for both readers and the content creators.

Design Week Portland 

Another great application for responsive web design is in creating sites to promote business conferences. When attending industry events, people are often glued to their phones to stay in contact with the outside world. If I need to look up a room number or find a speaker schedule, it helps to have a website that makes those things easy to find from my mobile device. Design Week Portland has done an awesome job of putting such important content at the forefront of their solid responsive web design. 

Using responsive web design is a great way to ensure that your customers can interact with your brand anywere, anytime. Responsive design is a tool that can be used for more than just a design or agency portfolio. Almost any type of company can benefit from using a responsive design to educate, sell and inform customers, no matter where they are.   

Follow @jaceyleigh
Follow @SyneCoreTech