Responsive web design: what it is and how to use it?

Responsive layout changes page design depending on user behavior, platform, screen size and device orientation and is an integral part of modern web development. It allows you to significantly save and not draw a new design for each resolution, but change the size and location of individual elements.

This article will look at the main elements of the site and how to adapt them.

Screen Resolution Adjustment

In general, you can break devices into different categories and make up for each of them separately, but it will take too much time, and who knows what standards will be in five years? Moreover, according to statistics, we have a whole range of different screen resolutions.

Flexible Images

Working with pictures is one of the most important problems when working with adaptive website layout. There are many ways to resize images, and most of them are fairly easy to implement. One solution is to use max-width in CSS:

img {max-width: 100%;}

The maximum image width is 100% of the width of the screen or browser window, so the smaller the width, the smaller the image. Note that max-width is not supported in IE so use width: 100%.

The presented method is a good option for creating responsive images, but by changing only the size, we will leave the weight of the image the same, which will increase the load time on mobile devices.

Another Way: Responsive Images

You can use Picturefill to make images sensitive to screen size changes.

To do this, download the picturefill.js file, and then write the following code, inside the head tag:

<script src=”picturefill.js”></script>

To ensure that loading this file does not affect the loading of the site, we recommend adding the async attribute to the script tag. This will allow the site to load without waiting for the picturefill.js file. However, in order for older browsers to recognize picture elements, you need to add the line document.createElement( “picture” ); before the first script tag.

Now you can use the following code to tell the browser which images to display depending on the size of the window:

<img

sizes=”(min-width: 40em) 80vw, 100vw”

srcset=”examples/images/medium.jpg 375w,

examples/images/large.jpg 480w,

examples/images/extralarge.jpg 768w”

alt=”…”>

The sizes attribute is used to specify how much space the image will take up. Read more about sizes and srcset values ​​here. For more explicit control over images, there is the picture element.

Custom page layout structure

For significant changes in page size, you may need to reposition the elements as a whole. It is convenient to do this through a separate responsive CSS file or, more efficiently, through a CSS media query. There shouldn’t be any problems as most of the styles will remain the same and only a few will change.

For example, you have a main stylesheet that defines #wrapper, #content, #sidebar, #nav along with colors, backgrounds, and fonts. If your main styles make the layout too narrow, short, wide, or tall, you can detect this and add new styles.

On a wide screen, the left and right side panels fit well on the side. On narrower screens, these blocks are placed one below the other for greater convenience.

Optional content display

Being able to shrink and rearrange elements to fit on small screens is great. But this is not the best option. For mobile devices, a wider set of changes is usually used: simplified navigation, more focused content, lists or rows instead of columns.

If the screen size is getting smaller, you can, for example, use a script or an alternative stylesheet to increase the white space or replace the navigation for more convenience. Thus, having the ability to hide and show elements, resize images, elements, and much more, you can create an adaptive layout for any device and screen.