What is Responsive Web Design?

Please note: all information articles are guidelines only. They are purely for reference purposes and may be changed or updated over time.


“Responsive” is the term given to websites that change shape and size according to the device they are being viewed on. So when you view a responsive website on a normal desktop computer it will behave like a regular website, but when you view the same site on a mobile device such as an iPhone, it will squeeze down to better fit the phone’s viewport.

You can test this on just about any website by clicking and dragging either the left or right edge of the browser window and making the browser narrower. If the content collapses down and stacks on top of each other, you are most likely looking at a responsive website. If instead the content stays the same and you simply get a horizontal scrollbar at the bottom of the browser, the website is considered non-responsive.

Why do we need it?

Viewing regular websites on smaller screens can be very frustrating for users. In non-responsive websites, the layout of the content doesn’t change and is simply crammed into whatever available screen space there is. Usually this means you have to zoom in to see the content properly and links can also be hard to click because of the smaller size of the hit area.

Responsively designed websites address these issues usually by collapsing multiple column content (usually) into a single column. They also ensure links have a larger click area and that text size is increased to counter the reduced screen real estate. Rather than trying to cram everything into a smaller screen, the content is made more linear and the whole interface is normally cleaner and simplified.