Responsive design

Synonyms: responsive, responsive web design, RWD, responsive computer-aided design, RCAD, tableless web design, flexible design

Responsive design is an approach to design that makes content looks well on a variety of devices or screen sizes to provide usability.


It is all about using scalable layouts where the proportions and sizes of elements are presented as percentages. Thus, this design adapts to different devices. Also, flexible layout and grid are involved in adjusting. They are responsible for combining several styles, depending on which monitor — what size, with what resolution — you use to view the site or application.


Responsive design for the marketing agency by Outcrowd

Here is a quick look at how responsive design works. On every screen content looks well and accessible

4 Reasons To Use It

  1. To low maintenance cost

    With a responsive design you don't have to bother developing multiple sites for different types of devices

  2. To create consistency 

    Responsive design itself provides consistency. Thanks to RD icons, text and images remain unchanged. They can only move slightly in relation to each other

  3. To ease implementation

    Responsive websites have a single URL, which promotes SEO. This way, the pages on your site will have fewer redirects from one URL to another

  4. To direct the data flow to the same page

    All responsive backlinks lead to the same web page. This optimizes search engine rankings. If the site has a separate mobile version, it must also have a high level of trust for search engines, separate from the main site

But Use With Caution

Responsive design is great when you need to quickly update an existing site or to create a site in which the bulk of the content is static. It is also helpful when you have a limited budget.


At the same time you can run into some difficulties using this approach. These are 6 most common challenges of responsive design.

  1. Responsive websites sometimes weigh a lot and often perform slow loading time on mobile devices. A probable solution is conditional loading: first load content, then enhancements and then everything else.

  2. There are types of content that are hard to adapt. For example, most of the data visualisations, such as timelines, tables and charts, look bad on mobile screens. It always takes time to adapt such content.

  3. Creating a responsive site takes more time as you have longer designing and testing periods. In addition to this, there is more complicated front-end code required to scale content.

  4. Scalable images lose details. Sometimes with these details they lose meaning. If possible, crop the image. When it doesn't help, try to change the image

  5. Adapting navigation is sometimes hard as you need both consistency and good UX in completely different screens. To overcome this try to create as simple navigation as possible.

Useful Tools

share the term