How can you make sure your design is responsive?

Responsive design is the practice of making sure that the web pages which you create can adapt to different screen sizes. You should expect your web page to be accessed by users with different types and sizes of devices. No matter the device, you should make sure that you provide a good experience for the user. This means that all the key functionality of the page should be in place, and the user shouldn’t have to adjust their zoom levels or otherwise struggle to see your content. In practice, this can be quite tricky. I for one am familiar with the frustration of my design looking fine on one screen size, but then having things go wrong when I test it on a different size.

Fortunately, there are techniques you can use to make sure that your design is responsive. I’ve made a list of some key ones to consider:

• Include <meta name=”viewport” content=”width=device-width, initial-scale=1”> in the head of your page’s HTML. The viewport is equivalent to the area of the browser window in which you can see the content of the web page you’re viewing. This setting is usually a good default to adopt to ensure that your web page is shown at a good, consistent scale across all screen sizes.
• Use relative CSS units instead of absolute ones. The CSS units vh and vw correspond to the viewport’s height and width. This means that when you use them, the size of your elements will be relative to the size of the host device’s browser window. This makes them responsive. By contrast, the px unit is absolute. An element with a width of, say, 600px will be 600 pixels wide on both a wide desktop and a narrow mobile screen. Other relative units include rem and em; the former is relative to the root HTML font size, while the latter is relative to the font size of the parent element. You also have the option of using percentage values (e.g. width: 90%), which are calculated relative to the size of the parent element.
• Use Flexbox and CSS Grid. Flexbox and CSS Grid have been added to the CSS standard in recent years. They both make it easier to control how groups of elements grow and shrink, and otherwise adapt to different screen sizes. Flexbox is ideal for when you have either rows or columns of elements, while Grid comes in handy when you have both.
• Use media queries. Media queries allow you to conditionally add CSS rules depending on the properties of the device which is being used to access your web page. This means that you can add rules which only take effect when the browser window is below, or above, a specified height or width. By doing this, you can amend the size and layout of your elements to handle different screen sizes.

Using a combination of these techniques should help you to create web pages which look good no matter what device they’re viewed on. Once you get the hang of them, it’s very satisfying when your web pages adapt seamlessly to different screen sizes.

Further Reading

CSS Units: https://www.freecodecamp.org/news/css-unit-guide/

Media Queries: https://css-tricks.com/a-complete-guide-to-css-media-queries/

I hope you enjoyed reading the article! If you have any questions, suggestions, or corrections, feel free to get in touch with me.

Email: rossmorran@hotmail.co.uk
Twitter: @RossMorran