: When designing HIFI mockups for web apps, how do you determine the width of your file? I've designed a handful of web apps now and I seem to be just as confused about document widths as

@Holmes874

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.

Vote Up Vote Down