Responsive

Responsive

Design

Responsive design is a method by which a website can be beautifully displayed on every kind of device, indifferent of its screen size. Since the popularity of the smartphone, the responsiveness of a website is more important than ever. Every potential customer has to receive the best content or else it will quickly disengage. Therefore, by having a mobile-friendly website, your customers will spend more time on it, increasing your sales and your ranking in search engines. Finally, the goal of the responsive design is to get rid of the unnecessary resizing, zooming, scrolling that one must do on a different device in order to see the full content.

Click on any icon to see below how a responsive design behaves on different screens:

360x640
768x1024
1440x2960
1366x768
1920x1080
3840x2160

How to make a website responsive:

Change absolute values to relative values. When you set a absolute value for an element, it will look the best only at that screen size, The further you increase or decrese the size, the worse will behave. Thus, getting rid of absolute values is a must. There are many option to choose from, like %, em, vh or vw.

Set media queries. Relative values aren’t a silver bullet. Almost always, they come together with media queries. There are cases when after a screen size the text is either too large or too big to look good, even with relative units. A media query allows you to adjust the size of the elements when according to the screen size.

Use a grid layout. Using a modern layout like the grid offers many benefits. First, you have to spend less time setting properties to elements to adjust their position. Second, you create a clear and organized layout, which is great when you want to make changes. Last but not least, grids are flexibile. While using rows and columns may seem restrictive, it’s powerful enough to the suitable layout for your website.

Use a mobile first strategy. Maybe the best tip for make a website responsive is designing the layout for the mobile first. Because of its screen ratio, the content has to follow a liniar layout. Thus, it’s more restrictive than the desktop screen, where you can place content side by side and one under another. In order to create a desktop layout from the mobile one, you can place some items inline or add new feature, not suitable for mobile.