4

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?

6
  • 1
    I know this depends on the trend of device, so I add "now" in the topic.
    – p3nchan
    Jul 10, 2015 at 8:39
  • Hi Chenghua Yang, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Vincent
    Jul 10, 2015 at 10:26
  • You might also want to have a peek at stackoverflow.com/questions/10026751/…
    – Vincent
    Jul 10, 2015 at 10:40
  • 1
    1) Draw a couple layouts, 2) figure out break points, 3) do the littler things.
    – bjb568
    Jul 10, 2015 at 14:25
  • If you can code, stick with that as your design tool. Design in the browser. Problem solved. :)
    – DA01
    Jul 10, 2015 at 14:42

5 Answers 5

8

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

2
  • 1
    Thanks for sharing the idea. So just a good practice -- starting from the smallest until it's no longer good.
    – p3nchan
    Jul 11, 2015 at 1:38
  • Yes, it is based on your design. You make a design at one size, and then as you resize it up, there is going to be a point where your design “breaks” — that is a breakpoint. The break might be a huge whitespace opening up, or a column of text getting so wide it is hard to read. So you create an alternate design at that point by sizing some element larger or splitting a text column into 2 columns. Feb 26, 2016 at 8:44
1

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

0

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)

5
  • 2
    I disagree with using specific sizes based on front-end frameworks. It should be based on the layout and is otherwise pretty arbitrary Jul 10, 2015 at 14:00
  • @ZachSaucier what do you mean 'should be based on the layout'?
    – DA01
    Jul 10, 2015 at 14:42
  • @DA01 Based on the content and layout of the page being designed Jul 10, 2015 at 15:18
  • @ZachSaucier this might be a semantic argument, then. I agree, though the content and layout of a page typically has to be designed to accommodate the device(s) people are using. So it's a full-circle argument, I believe. Content and layout are influenced by the devices.
    – DA01
    Jul 10, 2015 at 16:09
  • I am sorry I cannot put this in a comment. I would definitely go with Bootstrap and try to compile getbootstrap.com/customize/#top what you need to make it light. With that in mind a fully responsive mobile-first little site or only a one-page is set up rather quickly. Then of course if it turns out to be a bigger project you are also covered well with those resolution. Despite the rising screen dimensions most people still surf on moderate size screens I think, but I could be wrong. I am just saying the dimensions they use are a good starting point.
    – lowtechsun
    Oct 2, 2015 at 23:42
0

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.

0

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.

1
  • Worth noting that Chrome now has this built in to its developer tools too.
    – Cai
    Feb 26, 2016 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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