Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Benjamin Rochez
Benjamin Rochez
9,508 Points

Does mobile first improve performance on mobile devices?

Hello,

I've finished the course "Build a Responsive Website" a week ago and i have a question about performance with the mobile first approach.

I understood that mobile first design improve performance by the fact you rewrite less rules and that the design on mobile is more basic but i keep asking myself if the code written inside the mediaquerries is interpreted by the mobile if it don't fit the condition.

For example, if i visit this website with a mobile device (width: 360px), is that code interpreted or ignored by my mobile

´´´css @media only screen and (min-width: 720px){ lines of code }

´´´

If the code is ignored, that must impact on performance on mobile and that will be an argument on favor of mobile first design.

I think it doesn't matter on small websites, but that maybe improve performance on large projects.

Thank you :)

1 Answer

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Benjamin, it does impact performance, as well as certain mobile features. Treehouse recently did a show on web performance showing tools you can use for testing. Here's also an article on How To Write Mobile-first CSS, and a quote from ZURB below.

The basic idea with the top-down method of design is to create a large screen display product and then add code after code for smaller screens. In the mix of this de-evolving process, most of the time, you are overloading the smaller devices with far too information causing the smaller devices to lag at excruciatingly low speeds,

Additionally to slowed performance, by developing with desktops first, you omit the multitude of functions and features you can do with a mobile phone nowadays. With integrated GPS, phones, voice input, etc., the mobile first design allows you to take all of these capabilities and put them in your design. —ZURB on Mobile First

Benjamin Rochez
Benjamin Rochez
9,508 Points

Hi Dustin,

that means that the mobile will ignore the code inside mediaquerries if it don't fit the condition?

thank you for those resources i'll look at it carefully :)

Have a nice day !