Responsive Design

Feb 25, 2014

Comments Closed
Web Design
, ,


If you are in the process of developing or redeveloping a website then you will likely hear the term “Responsive” thrown about.


What does this mean and do you need to know?

A responsive website alters it’s contents depending on the width of the browser ( or more importantly the screen size of the device it’s being viewed on). This means that when the site is viewed, say, on a smartphone or tablet, rather than serving the user a zoomed out version ( which typically means very small text which they have to pinch to zoom in and then drag about trying to find what they are looking for) … they are instead served a website specially re-organised which will work well on their device. If you are developing a website then this is important because there is a very large and growing number of users who are using phones and tablets ( and other devices ) to surf the net.

Development Costs

Responsive sites do cost more as we are really developing multiple views for one website, so testing time is much increased. It is important to note that getting every conceivable view absolutely perfect across a wide range of browsers can add considerably to the price … and you may not wish to spend a lot of your budget developing every conceivable view ( for instance on old mobile phones with 320px widths ) so you can discuss this with your developer. Modern thinking is to develop the website “mobile first” so that it works on very small screen sizes first, and then progressively enhance the site for larger widths. The important factor to consider is breakpoints. You can have as few as 3 or as many as 5 or 6 but  ‘beyond breakpoints’ design ideas also exist where the site will work at irregular widths and this is more futureproof and guaranteed to work on more devices but can cost costs more. In reality it is necessary now to develop for all sizes and shapes with the arrival of 4K televsion and smartwatches the full gamut needs to be covered … and in reality this does increase the budget; however the industry shift is towards usablilty and away from aestethics partially because of this, which will offset the cost to some extent

Responsive vs Mobile Sites

Responsive sites differ from mobile sites because a mobile site is a separate version of a regular site, whereas a responsive site is the same website, so it’s easier to maintain from your point of view as the site owner.

Recognising Responsiveness

You can tell if a site is responsive by resizing your browser ( sometimes you need to refresh the page too). It gets quite easy to spot them after a while. Visit mediaqueri.es to see a variety of responsive websites.

Comments are closed.