The New Responsive Design Evolution
Responsive Design, You Got It All Wrong!
Everybody knows how responsive design works, but most of us developers are still searching for the best practices to implement it.
In early 2013, when I started doing responsive design, I understood very quickly that the popular methods on the web were not good for me, and from this place I began my deep journey into the responsive design world.
Why “Mobile First” isn’t good enough anymore!
Mobile first methodology was invented with the idea that the basic style was in mobile, but that isn’t always true!
In one of my first responsive case-studies, I worked on a very big project.
On mobile, the navbar was a side menu, and on desktop the navbar was a top menu.
See mobile & desktop navbar:
I Understood then, that mobile first would not be appropriate in this case! Why, you ask? because no matter if I built “Mobile First” or “Desktop First”, either way I would find myself with lots of CSS overrides! And if there is one thing I’ve learned in CSS, it’s that CSS overrides are evil!
Organize your CSS/SASS!
To work with my new methodology, it’s important to be very organized and maintain small SASS files for small components. This way you can enjoy the benefits of this Technique.
Components Based
To achieve order, the most important thing is to separate the styles into small components with separate files. When using SASS, we can use @import for the separation. This helps us achieve order.
The output will be only one CSS file, and that’s a good thing for the browser and server, in order to avoid having a lot of HTTP requests.
Where to Place the Styles of the Media Queries?
The separation of files give you an easy order of structure, and because of that the best place to place the media queries is in every component, near their own styles.
Now, because we have the same breakpoints in every component, It will better to put them in variables for easier maintenance of the code. Create a SASS file(for example: _devices.scss), with the common breakpoints as variables.
and now just use the variables instead:
This tip will save you from changing a lot of lines of code when the designer will suddenly feel the breakpoints need to be changed.
My New “Basic First” Method, and why I tossed “Mobile First”!
I realized “Mobile First” was a good idea, but it still isn’t the best, because like I said before, sometimes the mobile is very different from the desktop.
resolving the problem
My new method “Basic First” is based on a very simple principle, that only if the style is common to all breakpoints it will be written in the main root of the component.
The Need for CSS Encapsulation In Breakpoints
Beside this, I had another issue to solve. The common practice on the web was breakpoints that only start with min-width size but don’t have max-width size (I call these “Open Breakpoints”), and it was a very big issue! Why, you ask?! because you can hardly control what will be affected, in the upper breakpoints!
Here is an example from the Guardian website demonstrating why open breakpoints are bad!
here is an inspect element in the browser of a small component, the logo. Look how many overrides it has! when I see this many overrides, I understand something is wrong with the code! It’s very unreadable, and worse yet, if you add something at the bottom it will affect all the upper breakpoints without any control!
Understand the Responsive Breakpoint Types
I categorized the responsive breakpoints into two types,
Open Breakpoints and Closed Breakpoints.
Open breakpoints
Is when we have a media query with a beginning value but no end.
For Example:
Closed breakpoints
Is when we have a media query with both a beginning and end value.
For Example:
OK, which is better to use?
Use only Closed Breakpoints! unless it is the last breakpoint, for the biggest resolution we want to support.
For Example:
But what if we want to use the the same styles in 2 or more breakpoints?
very easy! you can use as many breakpoints as you want in the same media query using the “,” sign(means “or”), and because we already saved these breakpoints in variables, we can use them easily.
The Power of CSS Encapsulation with Closed Breakpoints
Now let’s take a look again at this main-header component. In this image, the HTML is the same, but the mobile+tablet and desktop versions look totally different!
what I have done is put the styles of the “mobile navbar” on the breakpoints of mobile + tablet, and the styles of the desktop on the desktop breakpoint.
- mobile + tablet — works from 0px–1000px width.
- desktop — works from 1001px and up.
Now the styles of the “mobile navbar” don't affect the styles of the ”desktop navbar” and vice versa. They are both encapsulated!
This means that in this method, if I change, in this example, the style of the mobile-tablet, the desktop will not be affected, and if I change the desktop style, the mobile-tablet style will not be affected, either. The freedom of CSS Responsive Design!
That’s all of my methodology of Basic First!
What is important to take from this post:
- Work in small components.
- Define common closed breakpoints in SASS Variables, in a separate file.
- Use the Breakpoints with SASS variables in every component where they are needed.
- Work and think “Basic First”! use common styles in a component only if they need to be in all breakpoints of that component! otherwise, put them only in the relevant breakpoint.
- CSS overrides are evil! Always try to avoid them.
Here is the real website of Walla!NEWS
(The project I was working on at that time)
Summary
That’s all,
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I will appreciate applause and sharing :-)
You can follow me via Twitter.
My Talk (2021)
I gave a full talk on responsive web design, you can watch the video on YouTube:
More of my CSS posts:
The Difference Between CSS Resolution and Device Resolution
Complete Guide to Responsive Images!
This post is based on an older post I wrote in 2015 — Responsive Design Best Practices for Big Projects.
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.
You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel
