all

My breakpoints are on 1440px, 1280px, 1024px, 768px, 320px.

Different elements call for different breakpoints. Having a set of fixed breakpoints means at any given time SOME element does not look great. Like somebody else said, design for ALL widths. I personally do this by inserting media queries into my elements where they need them instead of inserting my elements into media queries.

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! — Stephen Hay

Fluid all the way. Become water, my friend.

Don't pick set breakpoints before you know what the content will be. Let the content dictate it, breakwhere it seems natural for the content, don't try to cram it into some breakpoint.

I wrote about this in a series of posts:

http://paulstamatiou.com/responsive-retina-blog-design/http://paulstamatiou.com/responsive-retina-blog-development-part-1/http://paulstamatiou.com/responsive-retina-blog-development-part-2/

Are you asking for breakpoints?

or

Canvas width on wireframes? Which I'm typically at 1400 with a 1000 container (for desktop).

1440 for the base styles and the rest is handled with media queries.

a piece of string

I let the content decide.

3000px obvs

When designing larger scale re-design projects, analytics also give a good indicator of what screen sizes the audience are using and what devices / browsers. This also informs decisions eg. there's no point in designing something for 1200-1400 widths when analytics show that 70% of the audience has 1024 screens.

Your layout and content should always determine how you break. A website like medium.com can break much later than a 4-col dashboard because it's container width is much narrower and there are no sidebars etc.

Always design for the minimum width of each grid. Your website may have a max-width of say, 1200px. But don't design it at 1200, design it at the minimum size. That way, if your content fits at this size, it will easily fit at 1200.

My last project I used: small, medium - min-width 700px, large - min-width 1000px, x-large - min-width 1200px

Helpful reference:

http://screensiz.es/monitor

I'm curious as to what maximum width people are designing up to. Are people designing layouts that actually use up that extra space on a 27"+ display?

We are designing a web-based design app, with sidebars, a canvas and all of that jazz. The min-width is a 13" laptop screen (1350x768). This forces us to keep our palettes compact (less is more), which also helps us keep our features light.

Generally I'm somewhere around 1000px for the desktop version, but it kind of depends on the content and who the page is for.

Several of the internal tools that I designed and helped build were designed to fill most of the browser width up to around 1300px wide or something because I had to display tables with a lot of information in them (luckily, these pages aren't really going to be used on phones or tablets - that would've been a nightmare).

The width of every element should be a percentage. I add breakpoints on the fly where ever required. But as few as possible.

Based on content, but I start with desktops first. Haven't got used to the mobile-first philosophy, nor do I like it.

1280 x 1024 #HelloEnterprise

We still have a lot of users on 1024x768...

Another question related: What heights (if any) do you design for?

I notice on a lot of sites that they're clearly designed for a large screen but don't take into account widescreen displays and so I see very little content on my Air for example.

I tend to have a single max-width around 12-1400px as a generic wrapper but it's not set in stone. I then typically add in a range of media queries in my sass setup file which I then use on elements in my design as needed.

320px and I'm testing the websites using Monochrome.

768px, 1300px

I do my sites for 960px and media queries there after. 480px, 768px, 960px, 1200px, 1400px, 1900px.

My primary web width is around 1140px, as I assume a lot of people are on 13" screens (which, in Apple's case, means 1280x800). That's what I design for. When the design is "done" for that width, I then resize and inject break points per element. But usually I only have three break points, one of which is mobile.

I don't design websites for widths, I design them for people. Oh snap.

In actuality, for me it depends on the project, content, use cases...If I'm just prototyping and testing something out, I'll start out at 960 and then see how it scales and add breakpoints as needed.

Thank you all so much! It helped me a lot. I am building a CMS. Will consider all your replies.

I usually start desktop page comps around 1360 with a conservative estimated fold at 680. Break points usually float around iOS standard 768 and 320, but I'm trying to move beyond thinking that narrowly. In redesigning my company's e-commerce site for cross-platform shopping, I'm finding that a lot of views break around 768 and then almost immediately after at about 700, so I'm kinda looking into eliminating the tablet breakpoint in favor of a more attractively-expandable mobile view that can hold its own from 320 up to where desktop breaks.

Usually 3 depending on the layout. 0-400 800 1200(1400) or so.

Sometimes do an xs to target just iphones, since I really enjoy the extra room on popular android phones.

I have 3 primary breakpoints; 400, 800, 1200.

I'll pay special attention to how things fold down from 400 to 320, and also for what happens around the 720 mark.

1200+ to me is a luxury; it just can't look like crap.