Responsive Design Best Practices for Big Projects
Everybody knows how responsive design works, but most of us developers still search the best practices to implement it.
NOTE: To achieve best practices, I’m showing examples written with LESS, the CSS pre-processor. But you can also achieve the same goals using SASS.
Common Questions in a Big Project of Responsive Design
In your first project involving responsive design, you ask yourself a lot of questions, like:
- How to arrange your project?
- “Desktop First” or “Mobile First”?
- Where to put the styles of the media query in the CSS?
- Open or closed breakpoints?
- What are the best breakpoints?
- How many breakpoints?
Arranging Your Project
To achieve order, the most important thing is to separate the styles in to small components with separate files. When using LESS or SASS we can use the @import for the separation. By that we achieve order, and 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.
Desktop First or Mobile First ?!
First we need to understand why there are two different approaches.
The Desktop First:
- The web began with desktop, and because of that, it’s very normal for us to think desktop first.
- Old browsers like old Internet Explorer versions (7 and 8) don’t supported the new responsive media queries.
The Mobile First:
- For us to achieve desktop site to work. on a mobile we need lots of override styles, and override is evil.
- You can separate styles for big devices, this way you load smaller and faster stylesheets in mobile version.
- It’s easier to plan a website this way.
OK then, what is the best way? wait, we will get to that soon.
Where to Put the Styles of the Media Queries?
The separation of files give you an easy order of structure, and because of that the best place is to put media queries in every component, near it’s own styles.
Now, because we have the same breakpoints in every component, It will better to put them in variables for the maintenance of the code. Create a less/sass file(for example: devices.less), with the common breakpoints as variables.
and now just use the variables instead:
This tip will save you from changing thousand of lines of code when the designer will suddenly feel the breakpoints need to be changed.
Open or Closed Breakpoints?
First, what does it mean? Open breakpoint, is when we have a media query with a beginning value but no end.
For Example:
Closed breakpoint, is when we have media query with both a beginning and end value.
For Example:
OK, what is better to use?
Use only Closed Breakpoints! unless it is the last breakpoint, for the biggest resolution we want to support.
For Example:
You might ask why, because in big project, in many cases you affect on styles in other breakpoints that you don’t want to effect!
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 hold them in variables we can use them easily.
Back to the question “Mobile First” or “Desktop First”?
From my point of view it is better not to use both way, because both methods take assumption that aren't always good for us.
“Desktop First” is a bad way because you get overrides, and override is evil. “Mobile First” assuming that the basic styles are in the mobile styles, but this assumption is problematic.
For Example:
Let’s say you have a mobile site , and the side menu look like this:
But in desktop this menu look like this:
The styles are very different between mobile and desktop, and it will need a lots of overrides to overcome this differences.
OK , then what is the best way to work in Responsive Design?!
Go “Basic First”!
In this method of responsive design, we declare only the common styles for our component, and in our breakpoints we are just adding more styles to our component, and because of that we prevent style overriding in our breakpoints.
Example:
Our Last Two Questions “What are the Best Breakpoints?” and “How Many Breakpoints?”
There aren't really best breakpoints. in the company I’m working for, on big screens (from 1024px or bigger) we wanted the menu to open in a row, and in mobile to tablet as a hidden menu with a hamburger button.
We decided that mobile is until width of 570px, why? because in 600px is the beginning of tablet screen like nexus 7 screen, and we want the view of “tablet”, two column grid.
But there isn't really mobile, tablet, desktop screen. IPAD on landscape view you will get the “desktop view”, and in “Samsung Galaxy S5” on landscape you will get the “tablet view”.
Because of that, the most important decision is that your website will look good in every resolution, and the best breakpoints the web designer will decide according to its designs.
And for the question , How many breakpoints ?
How many breakpoints the web designer wants, they need to be global, 2–4 breakpoints, Will be sufficient in most cases.
Summary
These are my best practices from my day job.
That’s all, I hope you enjoyed it, and maybe learned something.
I updated this post. The new post called The New Responsive Design Evolution.
Follow me on:
Twitter
You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel
