What is responsive design in short

16.12.2012 1 min read

If you are confused when you hear someone talking about responsive design or layout, you are not alone. Also people who work with websites seem to be baffled about the concept. Because of this confusion I decided to whip up a simple explanation or definition for responsive in web design.

Responsive design/layout is the term used to mean a website layout, which responds to the screen (or browser) width. Basically the layout width depends on the screen/browser width.

In addition to the width some other parts of the style of the website, such as graphics, other images and fonts may vary in size, position and other properties. For instance the menu area of this site is decorated with a "banner" on the wider versions and there's no banner on the narrow versions. Or there's a side column on the wide versions, but the side column contents drop below the main content on the narrow versions.

Responsive doesn't really have anything to do with different devices. It doesn't matter if the device is an iPhone, Android tablet or a PC. It depends on the width, not the device.

This is a reader supported blog without paywalls and advertisement. If you appreciate my work and want to help me rewild the internet, please consider becoming a free or paid patron today. I can't do this without the support of readers like you. So if you can to contribute financially, I would really appreciate your help.

Join free or paid

• Twitter Tuesday: A couple of words about Twitter headers
• Twitter Tuesday: 5 common business and marketing mistakes