Problem: A lot of designs coming off the designer table for desk and laptops, are really best viewed on large screens or high resolutions. Somewhat consistently: a primary nav might be dominating vertical space, page headings steal real-estate and more generally, large sizing and margins seems to misattribute priority to elements, or pages appear cluttered.
Of course, this is only really caught once coded. I think the reasons for this are:
- The design itself won’t necessarily look cluttered or weirdly sized. It’s designed perfectly for the photoshop environment.
- The client only see’s the rendered JPG and views it at full width, which when taking into account that elements in a flat image scale uniformly, is ‘close enough’ to how they were designed unless being viewed on very wide screens.
- The devs generally translate PSD elements to pixels rather than %s and R/EMs.
on the point that sometimes pages look cluttered. I think this happens because particular elements keep their pixel size assigned in the PSD, but not all the spacing between them is ‘coded’ - but rather just emerges from the coding process.
Designers: I work with visual designers that have no experience coding and for one reason or another, let’s assume this will remain the case. They’re designing based on wireframes I’ve given them (not necessarily to scale), or based on component requirements they’ve designed numerous times. They’re also using Photoshop.
Coders: They don’t communicate with the designers and for one reason or another, let’s assume this will remain a fact. They receive PSDs and work from those. They don’t have much interest in design and let’s assume (you guessed it) this will remain a fact.
Question: I am wondering how you obviate this problem, or have tackled it in the past?
As I see it there are potentially a few solutions.
- The designers just keep this in mind when adding elements to their PSD.
- They use different software that changes the relationship between “designing for web” and the designer.
- Devs extract %s and R/EMs from PSDs rather than pixels.
For any of the above (or any other solution you’ve found), can you please help me out?