Dimensions for designing a website

Question

I have three related questions:

1. When it comes to deciding on the dimensions for responsive web design, who calls the shots at a digital agency? Is it the visual designer, developer, product owner or all of them together? What was your experience with this?

2. What dimensions do you or other people use nowadays for responsive web design (in terms of the actual artboard width you start with on Sketch)?

3. Let's say that you'll define the breakpoints while working on Sketch and you are using an 8-pt framework, how would you know which artboard sizes you should choose for specific breakpoints?

Any direct and clear answers would be much appreciated.

Answer 1

who calls the shots?

The market. The current technology.

---

In a specific environment, I guess, the project manager. He/she would decide if it is needed for a low bandwidth project, for only mobile, for a specific super high res project.

Answer 2

Among your choices, the Product Owner gets to call the final shot (including all the blame if incorrect). The Visual Designer and Developer can chime in with their research (not opinions).

Whomever is calling the shot, be sure they are up to date on the latest hardware releases. This is practically a full-time job to stay up to date between Apple, Samsung, Google, and Microsoft.

There is no browser police, but there are several services that offer the latest, widely-acceptable dimensions. There is a list of referrals on creativebloq.com called 'Great Tools for Testing Your Responsive Web Designs.'

Answer 3

Breakpoints typically do not vary to any great degree. Devices haven't suddenly gotten wider or narrower. Therefore, standard breakpoints don't really require anyone to "set them". They should be understood.

If you look at some responsive packaging - Bootstrap, Zurb Foundation, etc - they all use the same relative breakpoints. If anything, as the designer, I'd ask if special breakpoints may be needed (and why), otherwise I'll use what I typically use for x-large/large, medium, and small.

As for artboard width... not certain I understand. It's best to think mobile first. Which means you design for the smaller size then adjust design responsiveness for the larger sizes.

I guess by "artboards" you mean you want to layout an entire page/site in some drawing software then move it to HTML. I simply haven't worked that way in 10 years. It's more trouble than it's worth.

• Wireframe (in drawing app due to the speed and ease)
• Loose comp based on wireframe
  • This is done in HTML to show general responsive alterations. It's merely divs/boxes and blocks of dummy text to show the general areas, sizes and how they react to responsive changes
• Mockup
  • This is also HTML. A drawing application may be used to create the assets needed here such as photos, buttons, etc. But nothing is ever fully laid out in a drawing application.

I am not, by any means, stating this is the only way to work. The are some clients that still want full page mockups and then to let someone else create the HTML/CSS for them. And there are some designers that merely can't create HTML/CSS mockups. No harm there.

If I had to create page mockups in a drawing app, I'd use 4 common breakpoint widths....

• 320px, 425px, 768px, 960px (or larger)