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

Kevin Dunn
Kevin Dunn
6,623 Points

Mobile first approach when developing websites

So I've gone through some of the front-end development videos here and it seems that it is recommended to first create the mobile version of the website and then go on from there to develop the website for larger screens.

I am a bit confused on the width resolutions used for mobiles. For example is there different widths used in css for different mobile screen widths? What is the width resolution that we should start from when starting to create the mobile version of the website? After the website is ready based on the mobile width, what would be the next resolution that we should use?

1 Answer

If you haven't already I highly recommend you take these classes:

responsive layouts

media queries

Both are very informative.

To answer your question, when you start writing styles its for all sizes, so your base styles are for all viewport widths. You use the media query to tell the browser that at the viewport width of X use these styles, and then at this width use these styles, and so on. The base style is the mobile width, then you use media queries when the layout requires a change. a rule of thumb is first breakpoint at 768px, but personally, I feel its when the layout breaks or when you want a design change to use media queries, but that is just me.

There are a lot of really good articles on using breakpoints, My favorite is Brad Frost's blog:

brad Frost

If you need any help please feel free to ask. I hope this helps.

Kevin Dunn
Kevin Dunn
6,623 Points

Thanks! I will try and go through those courses. Haven't managed to get that far yet.

Not a problem. Yeah it will make a lot more sense after you take those courses.