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

Kara Wilson
Kara Wilson
2,385 Points
Posted by Kara Wilson
Kara Wilson
2,385 Points

Is it best practise when designing & coding a website to start with the mobile version first?

I was just wondering if it is best practise to always start with a mobile version (designing and coding) before heading onto the tablet or desktop version of the site in question? And if so, why?

4 Answers

Emma Newton
Emma Newton
6,721 Points
Emma Newton
Emma Newton
6,721 Points

Yes. Mobile first is always the best way to go. In my experience, it was easier to add functionality and space as you went up from mobile to tablet and then desktop.

If you start desktop first, you are planning for a larger space and might fill up the website with lots of functionality that is not necessary but of course is fun. The problem is, it doesn't always translate down well which can create a jarring user experience.

I always tell people to try with wireframes starting mobile first and then try doing a desktop first layout. If you are following best practices, the mobile first tends to move much more smoothly and has less problems to solve.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

It's a good practice to get into because it's easier to make a simple website/layout more complex rather than the other way around. If you are building a desktop-only app or website, then it of course doesn't really matter, but having a responsive website is the best practice from an accessibility standpoint, in which case you will find it easier taking a mobile-first approach.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

YES! There are several reason that I know and, and several reasons that I don't know. The biggest one is load time. The reason to have a mobile first approach is that the web browser only needs to read the initial code, and not read the entire code. The idea is that the page will load until it evaluates the media query then stop because the widths are larger then the viewports, so the browser will not read that code, and it makes it a faster load time.

Sebastian Angelo-Perez
Sebastian Angelo-Perez
1,835 Points
Sebastian Angelo-Perez
Sebastian Angelo-Perez
1,835 Points

Ok, I understand, mobile first approach is the proper way to design a website. However, I don't understand why did we start writing HTML, adding stylesheets and testing the first part on our desktop browser. I felt we kinda jump from one approach to another:

  1. Make wireframe to mobile
  2. Designing a website for desktop and testing it in the desktop browser
  3. Before going further with desktop, we suddenly decide again for a"mobile first approach"

I kinda miss a waterfall or structure...it seems that the work was interrupted...