1

I've designed a handful of web apps now and I seem to be just as confused about document widths as I was before I ever started. I've made the mistake of mocking it up at 1920 wide and jamming it full of content.

For over a decade I designed countless centered websites at a fixed width that was very easy to determine. 720 then 960, etc. But now I find myself designing A LOT of responsive full width web apps. Which forces me to design the "desktop" version at some obscure min width. Fortunately I've had good data provided by some clients which allowed me to design for the largest segment of their users. But what is a safe/good min width to use in HIFI photoshop mockups? It seems that a lot of dribbble shots are 1280px which is what I've been using as of late.

1

You should avoid high fidelity static mock ups for this very reason.

Responsive web design isn't about designing a desktop version, then a mobile version, and then hoping they work together. It's about designing one version, and then adjusting as needed in both directions.

Now, I realize that is the ideal, and we rarely work in the ideal and lots of clients and lots of development teams are still stuck in there ways and want a static mock up.

In that case, I'd say "pick any size". It's a responsive site, so it should work in any size anyways. Part of the site design process should be figuring out the breakpoints so just grab one of those and go with it. One could make the argument that you should start with the smallest (mobile first) which isn't a bad idea in a lot of situations.

Whatever you do, do NOT build two entirely separate static mockups for two different sizes. This leads to designs that maybe 'look' responsive but aren't actually practical to implement. Design only one static mockup. For the other sizes, design in code.

  • I knew that response was going to come... I work for a software company that requires the design team mock up hi fidelity mocks for the dev team. This is unavoidable. – dojistyle Sep 4 '14 at 17:12
  • @dojistyle yep. I work for a huge company that's the same way. Dev doesn't touch code until they have pictures of everything. Alas, it's a terrible way to do things. Common, but terrible. But because it's terrible, don't dwell too much on issues like 'how wide' to make it, as no matter what, dev will screw it up. – DA01 Sep 4 '14 at 17:32
  • @dojistyle is it possible to ask the dev team what width they'd prefer? – Scott Sep 4 '14 at 19:43
  • HA! I think it's a lot more common than people think. Thanks for the advice @DA01. – dojistyle Sep 4 '14 at 20:12
  • @Scott surprisingly the dev team will generally shoot me a look and expect me to have that answer. It's funny because I work with amazing devs, they're definitely not hacks in any way. But it blows my mind how little they understand about design and how it applies to front end implementation. I'm sure they feel the same way about me from their perspective. – dojistyle Sep 4 '14 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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