We have decided to work with responsive design and are in the process of setting the widths of the pages. I took a look at the screen resolutions our visitors are using at the moment.

The setup we are looking at right now would have four brackets:

• Less than 740px (mobile or small tablet) – would see a fluid page
• Less than 980px (tablets or notebooks) – would see a fixed-width page of 740px
• Less than 1220px (smaller screens) – would see a fixed-width page of 980px
• Wider than 1220px (big screens) – would see a fixed-width page of 1220px

When the current number of screen resolutions is applied to these brackets this is the outcome:

• 2,5 % = Less than 740px
• 2,2 % = Less than 980px
• 16 % = Less than 1220px
• 80 % = Wider than 1220px

These numbers represent 94 % of all visits to our site, the remaining 6 % are spread over 2,300 different screen resolutions.

If we would have a wider page for bigger screens, the result would be:

• 2,5 % = Less than740px
• 2,2 % = Less than 980px
• 49 % = Less than 1360px – would see a fixed-width page of 980px
• 45 % = Wider than 1360px – would see a fixed-width page of 1360px

It’s also possible to move the width bracket for smaller screen sizes, but that immediately creates a cascade effect. The tablet user is not happy when grouped with the mobile users, and someone using a screen resolution of 1192px is not happy being grouped with the users of a 768px screen.

Additionally, the numbers don’t tell the full story as they don’t take into account that a user might display the browser window in a smaller size than the screen resolution they have.

What brackets are you using, and any particular reasons why you chose them?