5
JUN

A quick look at responsive webdesign

As a web designer you might heard of or perhaps already applied Responsive Webdesign. Responsive webdesign is a adaptive way of creating your website. It is an answer to the multi-device era of today, where you as a web designer have to make a suitable site for different devices with different resolutions. Although I’m a big fan of this new technique, responsive webdesign is not the only, and not always the best solution. In this article I want to briefly explain what the pros and cons are so that you can make the right choice before creating your website.

How

  • Use media queries and media query listeners
  • Resize images and media (dynamically or CSS)
  • Use a sizing layout-grid

With these three bullets listed above you can get the following result:

As you can see the website above adjusts itself to different browser sizes. No matter how small the browser resolution gets, the website stays readable and clear. Some less important elements may even disappear, but the main content remains intact. My own website is also responsive, try resizing the browser and see what happens. My recommendation would be to use a existing framework instead of creating your own like I did for learning purposes (see links at the bottom of the article).

Pros and Cons

Pros:

  • One website, one solution - You’ll have a single version of a website that works on every device using  the same url
  • Maintenance - It’s easy to maintain compared to the situation where you have different websites for different devices.
  • No horizontal scrollbars - You’ll (almost) never get horizontal scrollbars no matter how small your browser is.

 Cons:

  • Development time - Building a responsive website requires a new way of thinking for the developer but also for the designer. It requires good teamwork, especially the first time.
  • Cross-browser compatibilities - Not all browsers support HTML5 and CSS3, keep that in mind when building a responsive website.
  • Loading time - Huge images will be resized on smaller browsers, but that doesn’t mean smaller file sizes. Internet connection is still an issue on mobile devices.
  • Different devices, varying objectives - Sometimes the information and / or functionality requires something more than just a responsive website. Sometimes you’ll have to create different websites for different purposes.

Helpful articles and frameworks

A good book about responsive webdesign:
http://www.abookapart.com/products/responsive-web-design

Some good frameworks/templates:
http://www.getskeleton.com/
http://goldilocksapproach.com/
http://foundation.zurb.com/
http://lessframework.com/
http://goldengridsystem.com/

Some responsive websites:
http://forefathersgroup.com/
http://sasquatchfestival.com/
http://www.benhandzo.com/