I have three questions:

  1. I've read in some places that I should start designing for mobile and then build responsively out for tablet, then laptop, and finally different desktop sizes. I've also read the opposite: to design top down, ending in mobile. What should I do?

  2. What are the "traditional", or perhaps the best places to place breakpoints in my design for the website to be optimized for any and all devices?

  3. Related to the previous question: how large should my largest design (breakpoint) be?


You start with the smallest screen because that is the simplest, most lightweight version of your website, with only one flowed column. The larger screen versions are enhancements of the smallest screen, where the number of columns typically grows.

Where your break points are depends on your design. The break points are where your design breaks. Where it breaks, you create a media query and modify the design in some way. Some designs are newspaper-like, with many columns. Some are book-like, with text on one side and an image on the other. some are poster-like, with very little text. So there is not one right answer.

How large of a screen you specifically design for also depends on your design. Your tablet design might scale to a 5K iMac, or not. I like to make an HDTV design at 1920x1080 and the 2x resources are 4KTV. So it goes phone, tablet, notebook, desktop, TV. But that suits the sites I make.

You might want to start with Skeleton which is very easy, the most minimal template you can imagine. Bootstrap is very popular but more complicated. Maybe you go to that later.

Not the answer you're looking for? Browse other questions tagged or ask your own question.