I usually just have a set of breakpoints that I end up adjusting to fit whatever I'm trying to build. It's completely device-independent, as it only cares about how big the width of the screen. The comments hint at roughly "mobile" or "tablet" but you can't make those assumptions, but they're helpful to think about. Here are my defaults in SCSS:

// "mobile"

$width-xs-min: 0px !default; $width-xs-max: 767px !default;

// "tablet"

$width-sm-min: 768px !default; $width-sm-max: 991px !default;

// "desktop"

$width-md-min: 992px !default; $width-md-max: 1199px !default;

// "wide"

$width-lg-min: 1200px !default; $width-lg-max: 2100px !default;

// Helper Widths

$width-site-min: 360px !default; // absolute minimum site width

// sometimes sites have a 'magical' breakpoint based on content structure

$width-magic: 640px !default;

$width-content-max: $width-sm-max !default; // max content block width $width-content-max-narrow: $width-magic !default; // max content block width

$width-content-paragraph: 77ch !default; $width-content-paragraph-narrow: 55ch !default; // adheres to the 75 ch per paragraph rule; ch uses the '0' symbol as char width

I recommend using a 1200px grid now-a-days. Most people have monitors large enough for that.

I always start in 320px (mobile 1st ftw) and then go up to 768, 1024 and 1440px. If youre designing in sketch with all the responsive features, you can just scale up your 320px designs and save a LOT of time.

And YES, 320px is still needed, since there are still some people with 4" devices out there (i just bought an iPhone SE, because i hate this huge smart phones). Scaling UP is always easy, but to fit info in a small screen, is the art of good UI ;)

Yes, and everything above and below.

When designing, you might consider changing your mindset about this. Think of it more as a potential maximum container-width. I tend to never go beyond 1400, but like to work with a maximum container width of 1140px.

That being said, I highly recommend you do not start with the maximum width when designing responsively. Start with the smallest.

Just make sure you TEST it on all possible sizes, and the amount of content both makes sense and sits comfortably.

What is a "web project?" A specialized web app? A product website? A business website? Enterprise? Local business? The user dictates the answer.

Overall, the best approach is to make sure that the website is responsive and looks good at all resolutions. If you are worried about mobile/tablet then start with the iPad size since it is the industry leader/standard. 1024x768

Everything up from there should be evaluated and designed with responsive break points. 1280 x 768 is a good place to start. (Both my monitors are 1680 x 1050)

For this web project do you have any data on what screen sizes your users use? I'd go off that. If not I'd then start looking at what screen sizes are used most globally. You can then use that as your base but starting off at your smallest screen size (usually 320px but like Kamushken has said, that could be different now).

I'd look at: https://ux.stackexchange.com/questions/74798/are-there-devices-narrower-than-320px-and-data-on-their-usage-for-web-browsing

and: http://viewportsizes.com/

the last grid I did was:

• 0-599 phones and phablets
• 600-899 tablets
• 900-1199 mostly tablets in landscape mode, also netbooks
• 1200-1799 most desktops
• over 1800 anything above

to get the breakpoints I went through the data available here https://mydevice.io/devices/ and made sensible breakpoints accordingly

hope this helps

You should try to make it fluid, if the content needs to have a maximum with then just set that. Problem solved!

Depends...

Check your users if you can!

Should aim to do responsive design. This is more feasible with Sketch and other tools now.

http://bradfrost.com/demo/ish/

I use 960 based grid with 60px columns and 20px gutters. Using a grid just makes the aligning and sizing so much easier and faster. You can easily set the grid up to 1900px width or even more. No one is stopping. :) Lower than 400px resolutions I usually drop the grid and resize the elements to use the whole screen width (minus gutters).

Websites, I tend to design for tablet portrait, then go out and in from there. It's kind of a defensive approach as many elements at that ~768 size will scale both directions.

It was my understanding that designing at 960px wide was all about Nathan Smith's https://960.gs/ so if you're going to be using a framework like Bootstrap, design for their breakpoints since that'll make development easier.

If not, I like to look at the analytics for screen resolution, set my canvas width to the most popular option, and then compose a new grid that looks good based on the content.