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

Josie Nagy
Josie Nagy
14,992 Points
Posted by Josie Nagy
Josie Nagy
14,992 Points

Responsive Web Best Practices Building my breakpoints - In what order?

Developers, when implementing code for a new website page with 3 different breakpoints, do you code each device screen design (mobile, tablet, desktop) separately or all of them together?

For example, do you build the whole mobile page, top to bottom, and then move on to the tablet page?

Or maybe you build them all at the same time, for example: First style the mobile header, then second style the tablet header, then third the desktop header. Like that.

Then move on to the About Section, and again, style the about mobile section, then tablet, then desktop.

Hope that makes sense.

Has anyone struggled with this issue before?

Is there any documentation (articles and books) I can read on this topic?

Thanks a lot for taking the time to read this, hoping someone can help.

1 Answer

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

Hi Josie,

There are several approaches but a mobile-first approach comes highly recommended. As the name suggests, you begin with styles for your mobile devices first, then you scale up to larger devices using media queries.

Check out this Treehouse video on the subject. After watching the video, you may wanna go through this article.

My advice, start small, google ... you will get the gist of it gradually.

Josie Nagy
Josie Nagy
14,992 Points
Josie Nagy
Josie Nagy
14,992 Points

Hey wdan, thanks for your reply!

I'm familiar with the mobile-first approach, but that's not actually what I meant to ask.

My question was workflow related and more technical - whether a developer will code the mobile page completely to the last detail and then move on to building the tablet one (if the mobile-first approach is taken - but again not so important for my question), and lastly the desktop one.

I've already built a couple of informational website types (mostly with scss).

My biggest problem so far is that I start building all of them simultaneously (I'll start with the mobile header - then do the tablet header - and so on), and eventually end up losing track of whether I added some minor detail (padding, margin, font size) in one of the breakpoints.

Can more experienced developers naturally build all of the 3 breakpoints at once without losing sight of any small detail?

Or maybe it's not really a good idea and I should stop doing that?

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

In my experience I find writing the styles for each breakpoint at a time to be more elegant. This approach works best when you have wireframes or at least a clear idea of what your site should look like in each breakpoint.

That said, development is hardly a linear process. Even with the best laid out plans, you will still find yourself needing to go back and forth. I guess the goal is to streamline the process by

  1. Reducing the amount of code you have to write (and ship)
  2. Write more readable code. Whenever possible, your code should be expressive and organized so that you can easily tell what it accomplishes when you come back to it. Let's be honest reading code is kinda boring, thus the easier it is to read so much the better.

Ultimately, you want to find a workflow pattern that works for you that you can progressively enhance. You don't need to get it right away. If I have learnt anything, things suck in the beginning, don't let the 'amateur/imposter' feeling get to you.

You will pick new tricks as you go.