These days, it is common to create a website or an app that adjusts its user interface to suit the browser or device. There are two approaches to achieve this goal. The first is to create different versions of your website or app for different devices. But it is inefficient and can lead to unforeseeable errors.
In the search for a reliable and sustainable approach, responsive – or adaptive – design was invented. It focuses on creating a unique version of your layout that automatically adapts to different browsers or devices.
In this article, we’re going to learn about responsive website design and the fundamentals that will help you build an awesome website.
Responsive Website Design Ingredients
Responsive website design isn’t as complicated as it sounds. It’s a set of practices you can use when writing CSS, not a separate technology that you will have to learn from scratch. You may already be following many of these principles without realizing it. You can understand responsive web design by exploring its four ingredients: smooth layouts, responsive units, flexible images, and media queries.
With a fluid layout, you can create web pages that fit the width and height of the current window. Common practice is to use the maximum width instead of giving an element a fixed width. In addition, using the percentage (%), window height (vh) or window width (vw) improves adaptability which is not possible with pixels (px). So the next time you create a layout, be sure to introduce these small changes and start benefiting from responsive design techniques.
As you move to more advanced CSS, you will often see the use of rem and em units of length instead of px units. It is because the rem unity makes it very easy to scale the entire layout. By default, 1rem is equal to 16px because it is proportional to the the element’s font size, typically 16px. However, you can set 1rem equal to 10px (or any other value) for easier calculations, by adjusting the top level font size.
Images are a major concern when designing even the most basic layout. You should always take care to size them correctly so that they fit the design. In addition, by default, they do not adapt to changes in the window. So you should use % for the dimensions of your images, as well as the maximum width goods.
You can bring responsive sites to life using media queries. Fluid grids are good to start with, but you’ll find that there are a few points where the layout starts to break down. Adding breakpoints for these window widths adjusts the layout for different devices. Media queries help you apply CSS selectively based on the results of media feature tests. You can explore new CSS features to create a responsive website in less time.
Responsive Website Design Principles
While responsive web design is a savior when it comes to multi-screen issues, you might not have a fixed physical constraint to refer to. Therefore, there are six basic responsive web design principles to start with when designing a responsive layout.
Use content-based breakpoints
One of the fundamental design principles is that your website design should support content, not the other way around. Multimedia content such as videos, photographs and textual content such as long and short web copies should be rendered optimally on all screens. The key to responsive web design is to use content-based breakpoints rather than devices.
Choose web fonts and system fonts wisely
Web fonts look great! You have many options to modify your design with attractive web fonts. But you should know that browsers will have to download every web font. More web fonts, more download time. In contrast, system fonts are lightning fast. If the user does not have a named system font on their local device, they will revert to the next font in the font family stack. Therefore, be sure to consider load time and design demand when choosing fonts.
Optimize bitmap images and vectors
Do you have different icons on your website supporting content? It is often a good practice to use a bitmap format if your icons have a lot of detail. On the other hand, vector formats are the way to go for icons that scale well up and down. Vectors are often tiny, but the downside is that some older browsers may not support them. In addition, there are cases where the vectors are heavier than the bitmaps, such as when the image is very detailed. Therefore, always make sure to optimize your bitmaps and vectors before they go live.
Perform tests for the first reactive fold
The first part of a website is the view that visitors see the first time it loads, before any scrolling. It often includes a hero section with a responsive navigation bar, intro copy and media, and a CTA. Responsiveness isn’t limited to mobile devices. You should also consider tablets, game consoles, and other displays. So the key is to perform frequent testing at least for the first sight of the website. You can use Chrome DevTools (Lighthouse) to test the quality of the web page.
Don’t hide content on small screens
Many people thought that mobile users are always in a hurry, looking for small information, while desktop users prefer long contents. We now recognize that this is not true in today’s world. People are using mobile devices everywhere, looking for full content and full access to all services. You need to make sure that instead of hiding the content, you manage the layout and breakpoints to present it as easily and effortlessly as possible.
Manage layout using nested objects
Building a site layout and positioning elements correctly takes a decent effort. You may also have found it difficult to deal with many items that are dependent on each other. Therefore, you should consider wrapping related items in a container or
. This reduces the task of having multiple items to one where you only have one item.
Responsive design: should you go for desktop or mobile?
The first approach to the desktop means that you will write CSS for the large screens and then apply media queries to reduce the design of the smaller screens. In contrast, the first mobile approach is to write CSS for mobile devices, with smaller screens, and then apply media queries to extend the design for larger screens. The main goal is to reduce the website and apps to the essentials.
If you are new to responsive web development, you should go for the desktop approach first, because at the end of the day you will have to stack the containers on top of each other on mobile devices. While this is an entirely personal decision, the mobile first approach helps you structure the HTML code better, while the desktop first approach will help you with layout and spacing techniques.
If you’re looking to learn UX design or improve your skills, here are the six best online courses you can take.
About the Author