This week Imogen, a student at Mayden Academy, talks about responsive web design and the importance of a mobile first approach to CSS.
I previously worked in London as a web designer, but decided to change direction into a career in software development. I wanted to put my skills into building great products rather than imagining them.
During the first week of Mayden Academy our tutor, Mike, introduced the topic of responsive development. It’s something I have been working with from a design angle for many years, but was new to as a developer.
Responsiveness is an approach to design and development that adapts to the user’s behaviour and environment based on screen size, platform and orientation. In an age where the screens we use can vary dramatically, it is considered a must-have for any new build.
But what is the best way to achieve responsiveness as a developer? And why mobile first?
A flexible approach
To begin with, one thing needs to be really clear:
design is not development and development is not design.
The two functions work together to create the end product, but their schedules don’t need to follow the same pattern. It’s fine to take a strictly mobile or desktop first approach to both design and development, if that seems best for the project.
BUT, you can also make desktop the primary focus in the design phase, then code the mobile version in the initial stages of the development process.
This might sound counterintuitive, but it’s not an unusual approach. When designing a website that will attract both mobile and desktop users it’s often best to design the glossy desktop version first, because this is the ultimate showcase for the site.
Once you get to development stage, however, there are several big benefits to hitting reverse and coding mobile first CSS.
Reduced mobile load times
Think about how a browser parses CSS: top to bottom.
This means that if you code CSS desktop first, the mobile browser will have to parse allllllllll the desktop CSS before it gets to the mobile CSS that it needs to render. If you code mobile first, a mobile user’s browser will immediately render the first CSS it encounters, resulting in a faster experience.
Mobile users tend to have less bandwidth, so anything that reduces their download times, even marginally, is a gain.
Cut the code
The second bonus is that taking a CSS mobile first approach usually results in fewer lines of code.
Why? Mobile elements tend to be simpler blocks, which means it is far more straightforward to add CSS properties for a desktop CSS media query to a mobile block, rather than redefining the more complicated desktop elements to be simpler for mobile displays.
Essentially, it makes sense to start with simple default elements you can add to, rather than more extensive elements that need a larger amount of code to then redefine.
So next time you are working on a responsive project remember that, just as an architect might be most inspired by windows but the builder will lay down the floor first, it is also perfectly acceptable to design desktop first, but code mobile first.