Responsive
Web design

What actually is it?

Responsive web design (RWD) is a technique of designing a website so that it's layout adapts automatically to the size of the browser window on which it is displayed, e.g. browsers , smartphones or tablets . The website created with this technique is universal: it displays well on large screens and on smartphones and tablets.

Responsive Web Design

We use the Internet today not only using a traditional computer (PC), but also mobile, i.e. through smartphones, tablets, etc. Mobile Internet is developing at a very fast pace , so adapting websites to the requirements of mobile devices is really necessary. Until now, the next version of the website was most often created so that it could be reproduced using a small device, i.e. the so-called mobile website. The website is therefore definitely "lighter", with a simple navigation system that facilitates the reception of content. However, creating several versions of websites, where each is to be adapted to the requirements of another device (tablet, smartphone, notebook, etc.), is on the one hand troublesome (technologies are constantly changing, new devices will appear), and on the other - expensive.

Idea Responsive Web Design

It didn't take long for this answer to appear - the idea of ​​Responsive Web Design (RWD) . It was initiated by Ethan Marcotte and quickly interested website creators, gaining many followers. RWD assumes that a properly prepared website can automatically adapt to the devices it is currently browsing . However, Responsive Web Design is only a concept, assumption, it is not a technique or technology for creating websites . To create websites in accordance with this concept , various available technologies and techniques are used, which, due to the constantly growing number of devices with which we use the Internet (from time to time technological innovations appear, equipment parameters change) and Internet users' requirements are constantly developed.

A "flexible" site, or breakpoints

It can be said that the website created in accordance with the concept of Responsive Web Design is "flexible" . It turns into so-called breakpoints (or breaking points ), which constitute the "limit" of the website's reaction to changes. The page is changed to adapt to the screen resolution on which it is viewed. At the breakpoints, both the layout of the website and the graphic elements can change (they can disappear or adjust in width and height), the number of elements on the page or the navigation system, etc. There may be many points of change, they are related to the resolution of the equipment used by Internet users.

The number of breakpoints, i.e. the version of the website

"Versions" that will change at breakpoints , we can really have a lot, it all depends on us. The most frequently prepared versions are options for tablet, smartphone, PC or netbook. The following resolutions are usually borderline for the page version :

  • 576px

  • 768px

  • 992px

  • 1200px

At the end

Responsive Web Design assumes that the website, depending on the screen resolution of the device on which it is viewed, adapts - in terms of content, appearance, individual elements, navigation. It may also be that in some versions the site will give up some elements (which may be too "heavy", e.g. for a small device such as a smartphone). Since the appearance of CSS3 , or more precisely the property of Media Queries , as well as thanks to the use of Fluid Design or appropriate Javascript scripts , the RWD trend has been developing quite dynamically.