Mobile, Desktop... Let's talk about responsive design and its importance
Today we're going to be talking about one of the most important topics on the web, yet one that is all too often overlooked by many.
That subject is Responsive Design.
"What's this thing you're doing? Just another gimmick to look good?
To look good, yes, but it's anything but a gimmick? It's about adapting the size of your website to all screen formats. From a smartphone to a TV or even an overhead projector.
Why is this important? Which device do you think is most often used to access the Internet these days? A smartphone, indeed?
So it's easy to understand why your site/app should be displayed in the best possible way on small screens. PCs are not to be neglected, however.
Mobile first
In general, except in exceptional cases, we now develop a mobile version first, before scaling up to higher resolutions.
Why do we do this? Because it's much simpler and requires less code to do so.
Let me explain:
Rather than starting your CSS or even your design itself from a large size (1080p, 4K, ...), it's better to start with a small size of aa smartphone, on the assumption that if the screen is bigger, there'll be room for the elements anyway.
What's more, they'll fit more easily, thanks to a few rules, in larger spaces rather than in smaller and smaller ones.
So we place our HTML blocks on the smallest possible surface and gradually increase the size.
This way of conceiving things greatly reduces the number of lines of code that would otherwise be required to rectify the mobile display in relation to the PC display.
Versioning or adapting CSS?
There are two ways of implementing responsive design:
- Either you divide your site into two distinct parts. One for mobile, the other for PC. To do this, you can either create a sub-domain for the mobile version, or load different style sheets by detecting (via Javascript, for example) that you're on a smartphone and not a PC.
Example: [mon-site.fr](http://mon-site.fr) (for the PC version) and [mobile.mon-site.fr](http://mobile.mon-site.fr) (for the mobile version) - Or you can just use CSS to manage the different sizes. In my opinion, this is the best and most practical way. Why bother dividing your code or domain names when CSS can handle everything itself? All you need to do is use media-queries, which allow you to condition your code according to the width of the screen.
"Well, that's a nice trick (no pun intended), but what's the point, apart from making it look pretty?"
SEO
Beyond the obvious aesthetic aspect of responsive design, there's also a very strong impact on your site's SEO. In fact, search engines now base themselves first and foremost on mobile rendering before other devices.
This means that your display must not only be optimal, but also as fast as possible on a smartphone.
If you'd like to do the test on yours, you can use this Google tool
Conversion
Now imagine that a potential customer arrives on your site from his smartphone. He sees the home page, which displays just about correctly, takes a quick look at your services and would like to find out more by contacting you.
Problem? Your site isn't responsive enough. Text and images display fairly well on a phone, but buttons are difficult to see and click.
And yes, because once and for all, it's not just about making things look good. Just like a PC design, it has to be usable and offer an enhanced user experience.
Increase font size for better legibility, increase margins and paddings to make it easier to click with a finger, ...
Well, I hope I've convinced you that in 2022 you can't do without a responsive site. It gives a bad image of you or your company, and can actually cost you customers and/or valuable SEO positions.
So don't neglect this responsive aspect in your future projects?
