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?
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.