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.

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
6
  • 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.
    – chiandet
    Commented Sep 4, 2014 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
    Commented Sep 4, 2014 at 17:32
  • @dojistyle is it possible to ask the dev team what width they'd prefer?
    – Scott
    Commented Sep 4, 2014 at 19:43
  • HA! I think it's a lot more common than people think. Thanks for the advice @DA01.
    – chiandet
    Commented Sep 4, 2014 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.
    – chiandet
    Commented Sep 4, 2014 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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