Responsive Website Design

Get it right for everybody


Think Green! ;)

Wikipedia defines it here like this: Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

 

I remember the old days we had first to worry about browser compatibility, the screen size we designed for was for a good time optimized for a 800 pixel wide screen, next came the bigger sized lcd screens and the race started to get it right for all sizes also the bigger ones and as soon we thought we got that under control the smaller devices like the tablets and smart phones came out with yet an additional challenge.

So for what screen size should we design?

Guess the best solution is for all sizes unless your in a special niche that requires design only for defined devices.

Now I found a good way to go responsive is to use a responsive word press theme, remember word press does not need anymore to look just like a blog, it can be easily used as content management basis and the great advantage is you can change themes later on with relative ease. There are some downsides to WP but that's for another story I guess. Another great way is to use a responsive HTML template as we did in our redesign here and I can only highly recommend you check out HTML5 UP  that offers free templates. Surely there are also other templates free and paid available just search around and you will find them. For the more pro designer its of course best you design it to your own needs and skills as needed with or without a content management backend.

 

See also: skel.js - A lightweight frontend framework for building responsive sites and apps.

 

Please see also the following book for some more information:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—acrosFrom mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users' needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.s a wide range of devices (from desktop computer monitors to mobile phones).