You hear this term a lot. But what does “mobile first” mean? Sure, you design your webpages so they incorporate mobile and small format versions into them. Then when you actually lay out the site in Dreamweaver or whatever, you add the @media tags to make the layout responsive. That’s part of the issue, but not really what we mean.
Mobile first is when you are coding the CSS & HTML. You want to code the mobile version first, then add @media rules to handle the sizes typically displayed on desktop. This is because the desktop version can get incredibly complex – you add floats and absolute positioning to elements, modify their z-indexes etc. If you do desktop first, then you have to add rules to counteract all of the code you’ve written to make it appear nice in mobile.
For example, let’s say we’ve created CSS for “.quote-w-image” – in the desktop view, it takes up 50% of the screen width at anything over 768px, has a 3pixel wide red border and is 2 em from the top of the page. In addition, it has a z-index of 3, because it floats on top of other elements.
.quote-w-image{position:absolute;top:2em; border:3px solid #ff0000;z-index:3; width:50%}
In the mobile mode, the “.quote-w-image” has no border, takes up 100% width, is positioned static and the z-index and top don’t matter as it’s supposed to be within the document flow. In a desktop first approach, our code will look like this:
.quote-w-image{position:absolute;top:2em; border:3px solid #ff0000;z-index:3; width:50%}
@media screen and (max-width:768px){
.quote-w-image{position:static !important;top:0 !important; border:0px solid #ff0000 !important;z-index:0 !important; width:100%}
}
Since we previously defined the position, top, border and z-index properties, we had to overwrite them, when really the only property we cared about was the width and position. So we had to do double work to make our “mobile” version appear properly.
If we do our code “mobile first” however, you can just add properties as you want them to exist, like so:
.quote-w-image{position:static;width:100%}
@media screen and (min-width:768px){
.quote-w-image{position:absolute; top:2em; border:3px solid #ff0000; z-index:3; width:50%}
}
The mobile version is defined first – position:static; width:100%
Then we use the @media to define rules for the desktop – anything over 768px – and add in the absolute positioning, top placement, border, z-index. It’s still 2 lines of code – one for each screen format, but we add new properties and update the properties we want to change rather than redefine everything.
Yes, there will be instances where you still need to overwrite properties and use !important. Yes I’m probably missing something. In any case, I find this method easier for my coffee addled brain to read at 3AM when I’m trying to remember what I did to make an element appear a particular way.
Recent Comments