What's the width to mockup websites for desktop and mobile now?

Question

Recently, I was practicing web design beyond code things. But after I opened Sketch and just started to make a rectangle of my site, I got stuck.

What width should I use?

I'd search for the resolution stats at this site. And for my own taste, I chose 1440px for width. (Due to the characteristic of 1440, it's easier to divided 2, 3 or 6. ) However, now I have to choose the width for mobile (and also, if possible, for tablet). Although there's an article about media query on CSS Tricks, I have no idea how many px should I use.

Is there any way to figure out this?

Answer 1

The short answer is: there is none.

If you want your website to be prepared for use in the wide, wild world, you should keep any screen width between, say, 480 and 4800px in mind. Modern designers for responsive webdesigns (designs that adapt to the width of the viewport) work with ranges of widths. Each range has its own quirks to adapt the website to the width.

The borders of these ranges aren't set in stone.

In my case, they usually depend on the particular design. I start out with the smallest screen, design that, and stretch the viewport until the layout becomes ugly or unwieldy. Then I set a boundary and start designing for the next width range.

Pixel size is no longer an indication of device type.

Keep in mind that a screen size in pixels does not necessarily give an indication of the type of device used: there's small phones on the market these days that use Retina screens, effectively doubling their pixel widths without changing the physical dimensions (much). Therefore, you could have a 960px phone as opposed to a 800px monitor. (Admittedly, those latter ones are rare these days.)

Answer 2

I find it's best to go with two artboards, sized to a 320px to 1600px width for each.

The difference between the two is that with the mobile one, the width of your content area is the standard mobile screen size of 320px while on the 1600px artboard, it's between 980px (my preference, since it's more graceful in terms of cross-compatibility between screen sizes) and 1200px (so you get a bit of the background to fit into the laptop viewport, which goes from 1280px and up.)

You can always throw in a tablet artboard, but my experience tells me that the two for mobile and desktop are enough, allowing the front-end developers a nice sense of freedom when it comes to a fluid layout, which can be a bit unpredictable once you start loading the assets into it (so things don't get cut off, or need to stick to a size that may not work well between breakpoints (typically being 320px, 480px, 768px, 980px, and 1280px.)

Answer 3

There is two major frameworks Bootstrap (by Twitter) and Foundation (by Zurb)they are the most used ones web frameworks. I recommend to start over there to see the sizes. Here is the code and sizes they use.

Bootstrap

 /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

Foundation

    // Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

I personal use Sketch 3 and start with 850px desktop and mobile 320px Here is one template 3 also for Sketch google bootstrap-3-responsive-grid-template.sketch (I can not paste more than 2 links)

Answer 4

I use the general Bootstrap guidelines. I have found virtual devices to be unreliable. I use three or four actual devices (one an iPad), plus my desktop monitor. Low end tablets and low end phones on WiFi without SIMS of various screen sizes are inexpensive enough to use for actually seeing what my work looks like. The larger the screen, the less close attention to position precision is needed (usually!) so I don't feel I need a full size tablet.

Answer 5

One thing that can really help is to use an extension for your desktop browser that will show you pages in various sizes and orientations that represent a range of devices.

The ones that I have used and can recommend:

• the Chrome extension “Responsive Web Design Tester” which provides you with a list of common Apple and Android devices and creates a browser window in that pixel size

• the built-in Responsive Design Mode in the Safari for Mac browser, which shows you side-by-side approximate renderings in all of the Apple mobile devices plus desktop.