How do you go about creating responsive web design for all devices?

August 25, 2023

In the current web landscape, responsive design isn’t just a luxury; it’s a necessity. Given the amount of devices available to users, a website must provide an optimal viewing experience across all screen sizes. But how do the devs approach this challenge?

Each week we ask our community a question on a specific topic related to web development. This week, we asked our community “How do you go about creating a responsive web design for all devices? What steps do you take?“

Here’s a summary of what they had to say 👇

1. Start Simple

HTML responsiveness: A great reminder – HTML is responsive by default. It’s our CSS additions that can make it unresponsive. So, consider this: rather than making an existing design responsive, prevent it from becoming unresponsive in the first place.

2. Mobile-first approach

Many of our community members highlighted the importance of the mobile-first approach. With a lot of internet traffic coming from mobile phones, it makes sense to design for the smallest screens first and scale upwards. This approach ensures that as the screen gets bigger, design decisions are additive, rather than having to strip away features or design elements for smaller screens.

3. Utilise developer tools

Chrome’s developer mode and similar tools in other browsers are invaluable. They allow you to simulate different device views. Before finalising, always preview the website across varying screen resolutions, starting from the smallest. It’s advisable to start from the smallest devices and scale upwards, ensuring each resolution offers a seamless user experience.

4. Media queries and breakpoints

While there’s a debate about fixed breakpoints, some common resolutions are frequently mentioned:

Standardised breakpoints: Some developers favour specific resolutions for mobile, tablet, and larger screens (e.g. 768px for tablet).
Content-first breakpoints: An insightful viewpoint suggests breakpoints shouldn’t be device-driven, but content-driven. Introduce media queries when the design disrupts the content, making the process more organic.

5. Frameworks can help

Frameworks like Bootstrap, Tailwind, and Bulma are helpful. They offer a toolkit of ready-to-use components and styles, and can accelerate the design process. But remember: while they provide an edge, there’s no substitute for understanding raw CSS.

6. Units matter

The battle of units in web design has longstanding champions: relative units. Units like `em`, `rem`, and `%` adjust in relation to their context, ensuring the design remains harmonious across resolutions. Understanding the subtle differences – like `em` scaling with its parent’s font size and `rem` with the root font size – is essential. Opt for relative units like `em`, `rem`, and `%` instead of fixed units. These relative units ensure that elements scale proportionally to their surroundings or the base size, facilitating more fluid designs.

7. CSS techniques and tools

Modern CSS offers tools that make responsiveness more intuitive:

Dynamic CSS functions: Utilise functions like `clamp()` to offer a dynamic range of values, ensuring elements fit perfectly irrespective of the screen size.
Modern layout mechanisms: With Flexbox and CSS Grid, you can build detailed layouts that naturally adapt to different screens. These tools have transformed the way designers think about web layouts.

8. Plan before you code

Diving straight into coding, especially with HTML, without a roadmap can lead to unnecessary complexities down the line. To achieve a fluid, responsive design, it’s crucial to study various responsive designs before you even start building your HTML structure.

9: Resources

Some community members shared some great learning resources for learning responsive design. Namely:

10. Responsive design challenge roadmaps

On the Frontend Mentor Discord community, we have a channel dedicated to challenge roadmaps. We have a list of recommended challenges to take to work on responsive design, as well as a list of of handpicked helpful resources.