Responsive web design (RWD) is a term used for a website designed to provide an optimal viewing experience. This incorporates text and navigation being easy to read with a minimal of resizing, panning and scrolling across a wide range of devices (including computer monitors of various sizes, laptops, IPADS, Kindles, Androids mobiles and many more). RWD is seen by many sources as a cost effective alternative to mobile apps.
Responsive Web Design History
RWD was first referred to by Ethan Marcotte in 2010 who described the theory and practice in his short book titled Responsive Web Design produced and published in 2011, if you haven’t read his seminar article about responsive web design, I highly recommend it!
Although RWD was around it did not really take off until last year as referred to by Mashable as “2013 the year of responsive web design”.
So What Is The Need For Responsive Web Design?
As technology keeps progressing day by day you can now view a website browser on many devices including mobile phones, android tablets, IPhones, IPads, Kindles, TV’s, Computer Monitors and many more. With the progression of these technologies it means that the user’s expectations have also changed. People expect to be able to use a device such as their mobile to browse a website just as easily as having to boot up a laptop or a computer. In response to this web design companies started creating mobile enabled versions of their websites. Looking back this wasn’t really a step forward but at the time it seemed like a quick, workable idea but meant that every website in respect had two versions, a desktop version and a mobile version, costing small to large organisations a lot of money to get a mobile compatible version of their site coded.
What Factors Make Up Responsive Web Design?
Here are two of the key ingredients behind responsive web design:
The first area to keep in mind when designing a responsive web design is the usage of what’s known as a fluid grid. Similar to Liquid layouts (which expands with the page and was never as popular as creating a fixed width layout), fluid grids go a full jump further!
Instead of designing a layout based on rigid pixels or percentage values, a fluid grid is designed more in terms of proportions to allow the layout to be squeezed or enlarged on to the relevant screen size. All the elements will resize in relation to one another.
Fluid grids are a very important part of creating a responsive web design website. For example a complex three-column layout isn’t going to work well on a smart phone when the width of the browser becomes too narrow, however responsive design incorporating media queries has sorted out this problem.
CSS3 Media queries allow you to gather data about the site visitor and use it to apply CSS Styles.
Ideally you would adjust your layout to perfectly match every device width; however putting the effort in to make this happen is not an option therefore you should target certain resolutions. I would recommend targeting the following pixel widths:
The size and spectrum of screen resolutions are forever changing and creating a different version of a website to meet every demand is physically not possible. Responsive web design addresses the situation head on and provides a cost effective solution. Although responsive web design is not a single way of working but is a collection of techniques, it is certainly taking over the web by a storm.
Digital Marketing Manager
The Internet Marketing Academy
(Image by nokhoog_buchachon at FreeDigitalPhotos.net)