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

Design

Al Lu
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points
Posted by Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points

Responsive design help

Hey. So I like to design and mockup first and code after. With fixed size website its easy but with responsive we need to design for the different media queries and breaking points. The thing is... how can know the sizes for the media queries? I can't guess. The logical thing to do is design for mobile and tablet size and add more media queries as we preview our code. so in photoshop for exemple I have full screen desktop size (something like 1000-960) and two more sizes for mobile and tablet. am I right?

3 Answers

Magnus Hovland
Magnus Hovland
5,657 Points
Magnus Hovland
Magnus Hovland
5,657 Points

You have to go for whatever you feel is right for the design you're doing. If you want to design for specific devices/sizes etc. you could set the media queries pixel perfect for the devices you target. This article could be a good place to start to find out more about the different sizes.

Another approach would be to set the break points at points where it's natural for your design to change, depending on the screen size. Just test it and find a point where you think it would be good to put the media queries. this way you'll still get a good result on mobile, tablet, desktop or whatever is used to view your site.

Hope this was at least a little helpful :)

Stephen Crockett
Stephen Crockett
18,614 Points
Stephen Crockett
Stephen Crockett
18,614 Points

The two most common breakpoints are 768px and 480px which correspond to portrait view in most tablets and landscape in lots of phones, and then portrait in lots of phones, respectively.