There was a brief moment where I considered not making this webpage responsive. What better way, I thought, to show you what responsive design is then seeing how not to do it? If you were to view this page on your phone and see it displayed the way it should look on a laptop, you immediately see something's wrong.
However, in the end, I couldn't bring myself to do it. Nowadays, it's a given that every website must be responsive. A responsive web design adjusts smoothly to any screen size it's displayed on, ensuring an optimal user experience on every device.
Designing responsive web layouts has become much easier with tools like Figma. They automagically assist in optimizing the layout for various screen widths.
It's crucial to craft designs for all the screen sizes because, as digital designers, we like to keep control. If we don't dictate the way our designs should look on various screens then, god forbid, a front-end developer might do it for us. No, we're the designers here and we create user experience. That means we decide what happens when the screen width decreases.
Fortunately, there are loads of applications and web technology to aid us. Nowadays, we don't have to create a completely new design for every screen size. Instead, responsive design works 'break points'. These are specific points where the design elements break down into smaller pieces. What you see as four columns on a large screen might become two columns wide on a tablet and just one on a smartphone.
Making a website responsive doesn't just benefit the end-user, but your clients as well. Ever since Google started ranking pages with great mobile usability higher than websites without responsive design, every page that's well-designed for multiple screen sizes will rank better in the largest search engine on the planet.
