This is the third post in a series about Responsive Web Design, described in plain language from a front end designer.
Ok, so we’ve discussed why responsive web design is an excellent solution for our websites. Then we dug a little deeper into how it actually works. Today we want to share our 20 favorite responsively designed websites and why we think they’re so great.
The largest responsive website to date, The Boston Globe handles loads of content effortlessly, keeping the site intuitive and the content easily accessible on the device of your choice.
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
I love this site. I really do. Smashing takes advantage of horizontal screen real estate like few responsive sites do. Go ahead expand your browser window out as far as your screen allows and it just maximizes the space without feeling cluttered. Furthermore, the strength of the layout and menu structure does not degrade at smaller screen sizes. Nicely done.
Clean layout, beautiful photography and playful iconography made me like this site immediately on my first visit. It’s a joy to look at and navigate on any device and if you’re a foody looking for scrumptious, healthy recipes it may be love at first site.
Type designer, Jan Tschichold once said, ‘Simplicity of form is never a poverty, it is a great virtue.’ The simple layout and understated menu and graphic elements juxtaposed against beautiful fluid images communicate that excellence in form and function are givens when working with this architecture studio. This site just says ‘good design’ whether I’m viewing it on my iPhone or my iMac.
If you haven’t check out Sphero, you should. It’s an amazing robotic ball gaming system for IOS and Android devices. But I’m not reviewing their product, just there site. A recent web design trend is the use of background photos that flood the browser window. Sphero does this well. The abstract product photos with a grid overlay don’t distract from the important content. I like the permanent menu and footer bars on my desktop, but appreciate how the footer moves to make room for more important content on my iPhone. Overall, the site is intuitive and attractive. An excellent example that responsive design done well looks great on any size screen.
It might be the conspicuous green frog that causes me love this site. Either way, it’s worth resizing your browser window just to see him change size, shape and color. But seriously, this is a polished responsive site. The breakpoints correspond well with the layout requirements and the result is a sharp looking site that does not degrade at any size. The main menu always looks good even when those sweet little icons go away to make room on smaller screens.
The Grey Goose site shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds. The sky is still the limit with what we can do responsively. Beautiful photography, parallax scrolling, intuitive navigation and refined typography combine to create a site that is as equally functional and attractive on my smart iPhone as it is my iMac. This list is not in order of our preference, but if it was I think Grey Goose would be at the top.
With a name like “New Adventures In Web Design,” one would expect a responsive site for this web design conference. I think my favorite aspect of this site is the use of fluid typography. Notice how the menu, headline and body text resize subtly to achieve optimal legibility on all devices. Good design is all about the details and this site has the details dialed in.
Websites in the higher education space are not necessarily known for being on the leading edge of design trends. So discovering the Lancaster site was a nice surprise. I appreciate its simple, modern, non-trendy look and feel. In spite of it’s large amount of content, it’s as easy to navigate on my iPhone as it is on my iMac.
The spacious layout, bold typography and simple icons make fundraise.com easy to look at and navigate.
Nick La’s blog is a wealth of information and resources for any designer or front end developer. But that’s not why it’s in our list. The great content is accompanied by subtle texture, beautiful illustration and–thanks to its responsive nature–is easily accessible no matter what device you fancy.
Heathlife celebrates the heritage of one of London’s largest parks. Though maybe not quite as stunning as the park itself, this website is a beauty on screens large and small.
Though this site is not fluid, it has well structured layouts for any device class. Where many large responsive websites omit content for smaller screen sizes, London & Partners keeps it all, maximizing accessibility for mobile users. This is a good reminder that responsive design is an excellent solution for large and small site alike.
Oliver Russell has done a good job of building a site that responds well on mobile devices while keeping the integrity of the design in tact. I appreciate the shallow and straight forward content structure. My eyes are drawn to the most important sales points and I can access nearly all that I want to know without leaving the homepage. Refreshingly simple compared to the laborious, text heavy website of other marketing firms. One complaint: I would like to see the site expand beyond width of 960 pixels on larger monitors.
Ryan is product designer at Facebook, but has invested in a personal portfolio site that is a cut above the norm. Well branded and brilliantly responsive, Ryan’s site is a thing of beauty on any screen.
Jessica’s lettering and illustration rocks and so does her site. Seriously, I can’t help but smile when I look at it. It is simple and elegant and delightfully fluid. Oh, and for good measure she through in three additional themes. One of which is “Teen Girl Mode”, replete with rediculously distracting animated gifs and a hideous cat illustration (Just click on the little heart in the upper right corner).
Maybe it’s the friendly King Trident mascot, but this happy little site makes me want to download the Fork cms straightaway, or at least “try the demo”. To increase mobile load times the CSS omits the fun header illustrations at smaller sizes. Overall, site reformats and displays nicely on a variety of display ports.
Ethan coined the phrase, ‘Responsive Web Design’ in 2010, so it comes without surprise that his website is responsive. Ethan’s belief in articulate and intelligent design is expressed in a site that is straight and to the point without extraneous decoration.
This t-shirt shop site stretches and shrinks to fill any size view port with photos of their hip graphic t’s. Fluid images and type make this site a joy to browse on any size device. One complaint: I think the menu could be smaller for use on smartphones. Currently it takes up an unnecessary amount of valuable screen space on my iPhone.
Trent’s site is an excellent example of fluid type. On a large monitor the text size is slightly bigger for increased readability, whereas the text shrinks to achieve comfortable line lengths and legibility on my iPhone. I also really like the simple block print style illustrations Trent includes in his articles.
This is the first post in a series about Responsive Web Design, described in plain language from a front end designer.
Responsive Web Design has recently become a hot topic in the web design and development community. For those of you who are new to this term, responsive web design is a way of creating websites so they are able to adapt for optimal viewing across a variety of devices. Though the practice is relatively young, it is quickly being adopted as an industry standard–and for good reason. Practicing responsive design can help you connect with your audience, stay within budget and as we like to say here at Social Driver, Get With The Future.
In order to connect with your people on the web, you have to first understand how your audience is accessing the web. I could probably sum up the modern web environment with two words: “mobile explosion.” This may conjure very interesting mental images, but let me explain my word choice with the following stats:
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
Okay, enough stats. What do all these figures mean anyway? In summary, more and more people are browsing the web on mobile devices. And if they aren’t yet, they most likely will be very soon. With the introduction of the tablet, “mobile” no longer pertains only to smartphones or feature phones. The gamut of screen sizes and resolutions has widened. People may be viewing your site on a Samsung Galaxy with a resolution of 480×800, a 768×1024 iPad 2 or a 1080×1920 desktop monitor. How do we create optimal web experiences for people across such a wide variety of devices?
Responsive Web Design helps us do just that, by enabling a website to respond to people’s browsing preferences. The content on the page is formatted and scaled to view beautifully and legibly whether on a tablet, smartphone or desktop monitor. This increases our visibility to our audience and helps us connect to people no matter what device they happen to prefer.
To understand the “why” behind responsive design, it’s helpful to understand the status quo. Currently, common practice is to design a desktop/laptop version of a website that will fit well in the minimum screen resolution of a company’s target audience. If the budget allows, the company may develop a second fixed width layout that will view well on most smartphones. While this approach is not necessarily wrong, it has a couple weaknesses.
The first is an increase in development cost and project timelines. Many organizations do not have the budget to develop both a desktop and a mobile site. Programming, designing and maintaining two unique sites often takes more time and therefore more money. Furthermore, not all mobile devices are the same. Tailoring a site to view optimally on an iPhone 4S does not mean it will look good on a Samsung Nexus. And for non-mobile sites, sticking with the good old 960px fixed width site no longer creates an optimal viewing experience on an increasing amount of desktop monitors, who’s resolutions are increasing. That is, unless you like half your browser window to be margins.
By designing responsively you can often save money by creating one website that fits nearly all devices. You will no longer have to worry about managing separate content for your mobile and desktop sites. Now people can access the same content on your website regardless of their device preferences.
While responsive web design is a relatively young practice, it is quickly becoming industry standard. More and more, we are recommending responsive design to the companies we work with. Not only does it help them keep costs down, but it also ensures that their websites will be forward compatible. As pixel densities, screen resolutions and aspect ratios of new devices change, practicing responsive design helps us create websites that will continue to view optimally on them all. In an industry where technology and trends are quickly evolving, it’s important that we’re providing companies with sustainable solutions.
Some companies’ audiences do a majority of their web browsing on desktop computers. If this is true of your company, we think the question to ask is “When does responsive design makes sense for us?” When will enough of our audience follow suite and begin using mobile devices? According to the statistics, the answer is sooner than we think.
Well, we’ve covered the main benefits of responsive web design and you may be curious as to how it works. Don’t worry! I’ve got you covered. Stay tuned for our next two posts, where I’ll dive a little deeper into how responsive design works and we’ll share with you our 20 favorite responsive websites.
