According to Wikipedia:

Responsive Web Design -- is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling---across a wide range of devices from mobile phones to desktop computer monitors. A site designed with RWD adapts the layout to the viewing environment.

New technologies require constant improvement, product development and continuous update. A good website built using RWD techniques, makes content easy to read, navigation user friendly and reduces the need to zoom in / out and scroll sideways. Sometimes it becomes an essential element to keep visitors coming back to our website.

How to build a good RWD website?

Construction of RWD sites differs from the classical method.

In both cases, it is best to start with the preparation and description of content. The next step for the RWD websites is the analysis and preparation of the appropriate grid for the site and presented content. While in the classical approach, the grid is moderately important, whereas in the case of responsive websites is of particular importance. When planning text layout on the RWD, you always have to keep in mind how content will look like on different types of screens.

Please also note that for the page presented on smartphones look and operations need to be simplified. Pictures, attractive sliders or pop-ups look very nice on large screens, while on small screens they very often disturb and decrease space. Each solution should be accustomed to the concept, and should not adversely affect its perception.
It is so important to ensure that operating the website is user friendly. Remember, that you cannot connect classic computer mouse to a smartphone or a tablet, therefore site navigation should not be as if it was designed for a device with mouse.

A common disadvantage of this problem is an option of a drop-down menu when you place the cursor over the selected menu item (onHover). Meanwhile, for phones and tablets such option is completely useless. Something that is useful on personal computer desktops becomes impractical for smaller devices.

Prawidłowy kierunek projektowania stron RWD

In addition, remember that: we always start designing RWD sites from the lowest resolution (Smartphones (480px) and then we go up to tablet and PC screens in the 16:9. We can assume maximum resolution on the level of 1200px - for majority of websites increase of the maximum width would reduce the readability of content. Of course there are websites which always use the whole available screen space -- solutions should be tailored to each project.

Advantages

  • One URL address
  • One programming environment
  • Legible website
  • Flexibility and versatility of the layout
  • Lower maintenance costs
  • Consistent image
  • Modern look
  • Google recommends RWD...
  • Positive impact on SEO
  • Proper display of sites on all devices

Examples of RWD