Use the CSS zoom property to make responsive web development easier.
Responsive web development is basically a requirement in 2020. The percentage of mobile users will only continue to rise, so having an website optimized for mobile is absolutely critical if you want to have a meaningful online presence. That being said, there is a gray area with responsive web development. It usually occurs when a browser is not quite mobile, but not quite a laptop or full screen. More specifically, it's the area between about 1000 pixels wide and about 700 pixels wide.
Most developers sort of put their hands up and enable the mobile optimization a bit earlier than they should. This leads to users on laptops getting the sub-optimal mobile layout when they really should be getting the full layout. The main reason developers do this is when there is a large header or a large block of content that doesn't gracefully break down in that gray area. It makes sense, since most users won't fall in this screen size, to just ignore it. Show your boss or clients how pretty the website looks in full-screen, and then move on with your day.
But I've been using an alternative approach lately and I'm surprised that it's not used more often. It's incredibly simple and can be applied to any website with just a couple of extra lines of CSS. My approach to utilize the CSS zoom property and a couple of media queries that usually go in the head section so that theres no layout flash when the property gets parsed. You can see it in action on this website (it might be more impressive when looking at the homepage).
So as a copy-paste example, all you would need to add in order to scale your content gracefully in those gray areas, is to add the following CSS Code:
@media only screen and (min-width: 600px) {
html {
zoom: .8;
}
}
@media only screen and (min-width: 800px) {
html {
zoom: .9;
}
}
@media only screen and (min-width: 1000px) {
html {
zoom: 1;
}
}
The breakpoints and the actual percentage that you zoom in and out will vary depending on your website and the screen sizes you want to support. But with just those lines you can now get a lot more mileage out of your design and you don't have to switch that mobile breakpoint too early.
Another alternative is to use em or rem units for everything. But in practice this can be pretty tricky and is very easy to mess up if you have a large code base or multiple developers working on the project. So in my experience this quick "hack" should get you most of the way there with a very little bit of effort. And, for me at least, it's been a great solution that has saved me countless hours of development time.
The one drawback, and it is unfortunate, is that Firefox has yet to recognize the CSS zoom property. Hopefully this will change in the future- but if Firefox is a large part of your audience you will want to reconsider this approach.
