4

It's 2019. I am designing a web site (not developing). I am considering creating 3 layouts for each page:

  • 375 x 667 (mobile)
  • 1366 x 768 (laptop)
  • 1920 x 1080 (large desktop)

I'm basing these sizes off of what I assume my clients audience will be using most. I recently started using Adobe XD for web design, and have also looked at Sketch. They seem to have different templates for desktop size pages, but I got my desktop size for XD.

Wondering if other designers have "go-to" web page sizes for different screens / breakpoints. Or do you customize the page sizes for each project?

Improve this question
9
  • I always find it odd that people think only in landscape. Having 2 27" screens here I always set a browser to be approx half a screen horizontally, giving me about an A4 portrait page. Even Stack Exchange's responsive design forgets this & forces you to remove all the irritating sidebar stuff so there's still some room for content in the middle.. – Tetsujin Jan 23 '19 at 18:10
  • 3
    As both a designer and developer, just a heads up: If your designers are also developers, designing 3 layouts makes sense. However, if they are not developers, I find that instead of designers creating one responsive layout in 3 versions, they actually end up designing 3 separate web sites, which makes development a challenge and leads to a lot of bloated front end code. – DA01 Jan 23 '19 at 19:31
  • Also Should the browser interface size be taken in to account when designing web apps? – Zach Saucier Jan 23 '19 at 19:54
  • 1
    "what I assume my clients audience will be using most" is a massive mistake. It's 2019 - there can be no assumptions. Seriously. – mayersdesign Jan 23 '19 at 20:39
  • I'm a big fan of the idea that the content is the king. So the max size of the website (or content area) should be whatever looks good with the content. Of course, there are exceptions, but generally if you can't "fill" the width of 1000px with your content in a sensible way, then don't... make the max width 600px or whatever. I design desktop first with max-width and handle breakpoints by reducing the viewport width and adding a breakpoint + adjusting css where needed. I've found this to work the best for me. If I'm lucky I may only need 1 breakpoint for mobile. – Joonas Jan 24 '19 at 11:17
7

Height is irrelevant.

I like to use Zurb Foundation for responsiveness. It's much less "CSS-heavy" than other packages I've seen, such as Bootstrap. Foundation only offers the responsive grid and a few CSS stylings, rather than every pixel being styled (like Bootstrap).

Foundation uses 40em (min) and 64em (min) widths. On very rare occasions I'll set a third break point for 78em (min) for very large screens. But it's exceptionally rare that the 64em width fails to suffice.

If setting my own media queries in pixels, I typically use 3 breakpoints..

  • 420px max
  • 768px max
  • 1200px max

Are these "correct"? Well, to each his own. They work very well for my projects. They may not for your projects. I don't really create a lot of full-blow web sites. I will on occasion. However, I mostly create a great many "landing pages", 3-page "squeeze" sites, or responsive emails.

My personal opinion is that you rarely want to go over 1200px. Because even if someone has a 2560px wide monitor they most probably are not displaying web pages at full screen. I know I never do. For my work, anything which needs to appear wider than 1200px is set to a 100% width and generally it's a background image or a color field. I actually am annoyed by websites that force a 1400px or wider display on a desktop. I find it kind of short-sighted to think that merely because a screen can display something wider, it's not very user-friendly to assume they are displaying pages at full screen widths on a (huge) desktop.

-- Not stating any of this is "how it has to be done" -- it's merely what works for me.

Improve this answer
8
  • Scott ,If you go the SASS route and compile it yourself (I use grunt locally) leaving out non-required components, Bootstrap can get a lot lighter. I haven't used Zurb, but thought I'd point this out in case you hadn't considered it. – mayersdesign Jan 23 '19 at 20:41
  • Yeah but SAS is more than what's needed here. I prefer to be more detailed in the CSS rather than use shortcuts. That is not to say SAS isn't worthwhile. It absolutely is for some environments. My issue with Bootstrap is that it designs for you and is really "over-templated" in my opinion. I mean, there's a reason all Bootstrap-driven sites look like Bootstrap-driven sites. And heaven forbid Twitter deciding to start charging for Bootstrap. – Scott Jan 23 '19 at 20:50
  • Then we mostly agree since I leave out most of what isn't grid, but especially in BS4 the grid is pretty invaluable, especially with all the flex shortcuts. Don't get me wrong, my sites don't look like Bootstrap ;) But I still find it saves time at the expense of reasonable weight (when compiled judiciously) – mayersdesign Jan 23 '19 at 20:53
  • For me Foundation starts at a usable state without any need to strip anything. Just overwrite button, panel, callout, and body CSS (if desired) and it's golden. – Scott Jan 23 '19 at 20:55
  • I will check it out. I looked years ago, but always good to be reminded of new tools. – mayersdesign Jan 23 '19 at 21:50
-1

You'll probably want a size between mobile and desktop while you're designing.

Typically I use:
@media all and (max-width: 1690px) { ...}
@media all and (max-width: 1280px) { ...}
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }
and try and make the elements fluid up to those break points.

I often end up on this page, where your next questions will probably be answered too! https://www.creativebloq.com/rwd/responsive-web-design-tutorials-71410085

Hope this helps.

Improve this answer

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