CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
Mobile-first vs Desktop-first
Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.
Mobile First Responsive Design
The skills you’ve learned in this desktop-first tutorial are also applicable to mobile-first. From a technical point of view, there are two small differences with mobile-first design:
Here is the basic structure of a desktop-first stylesheet:
And here is the basic structure of a mobile-first stylesheet:
The mobile-first approach is advisable if you are starting out with:
Mobile-first is considered best practice. The end result for mobile tends to be better if the site was initially designed for mobile – designed with the constraints of small screens in mind.
Mobile-first can produce faster page load on mobile. One example of this is background images. If you set a small image globally and a large image inside a media query, mobiles only download the small image. If you reverse this, mobiles download the large image as well as the the small image. This is what happens with the desktop-first approach.
Using Mobile-first Media Queries in Microthemer
Microthemer’s default media queries are desktop-first oriented. But if you like the mobile-first approach you can use a mobile-first set in Microthemer.
Mobile has taken over desktop. So it’s reasonable to prioritise this group of users when starting a new project. But redesigning your site from scratch can cost a lot of time. This should be weighed up against the advantages of mobile-first design. For many, it makes business sense to add extra mobile styles to an already functioning desktop-oriented site.