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 How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Kellie Etterman
Kellie Etterman
5,859 Points
Posted by Kellie Etterman
Kellie Etterman
5,859 Points

Mobile First

Mobile-first seems like such a complex concept. Because, you take a PSD and then code it up. Most PSDs only have the finished desktop version and then you are left to make an educated guess as to how it should respond / look.

Is it fair to say that mockups need to have both the desktop visual and the mobile visuals?

Also, in the video, Nick mentions that the mobile version should be built first and then move on to the desktop version. What does this mean, exactly? Should I build a single-column website and then add in the code and css for the desktop version?

I'm just having a hard time grasping this concept. Thank you for any input!! :)

1 Answer

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

The idea is that it is easier to take a simple mobile design and make it more complicated to fit the desktop design than it is to take a complex desktop design and condense that down to a mobile design. Its also good to design with mobile users in mind first since its a large part of your userbase, and it also helps you focus on what the core aspects of your site are.

Yes, generally you would build the mobile version first, then add media queries and other CSS to make the desktop version