There's a mighty seismic shift grumbling just under the surface in the world of web design — and it's a two-fold grumble. As Andy Clarke says in his slides from An Event Apart Austin, "Design doesn't work when it's separate from development", and this point is as true for the tools as it is for the process.
Let's face it, Photoshop is pretty useless when it comes to communicating responsive web design. Liquid layouts? Forget it. Instead, web designers are forced into a dualistic world of Photoshop mock-ups and designing in the browser, with all its concomitant pitfalls.
Process and workflow are equally hampered by a miscommunication, this time between designers and clients. In a thoroughly entertaining and thought-provoking post, entitled "UX Design at Digital Agencies is F*cked", Ross Popoff-Walker bemoans the exclusion of web designers from the development process. Rather than being included from the beginning of a project, "Only after every pixel has been pushed and use-case documented, will something be made that is working and actually functional".
Leisa Reichelt, in a follow-up post, "Client/Agency Engagement is F*cked, Waterfall UX Design is a Symptom", rightfully points to the client-agency relationship as the root cause. The client expects the final package to match the pixel-perfect mock-ups exactly.
If only we could travel back in time to the days of scamps and Magic Markers, where a mock-up was rough and only ever a guide to what could be. As it is, all web designers are waiting with bated breath for the truly native web design tool. Will it be a browser within Photoshop or Photoshop in a browser? Who knows.
Tools for now
Until such a tool arrives, here are some handy pieces of software for easing the transition:
- Typecast App: test your type in a real browser, with fonts from TypeKit and Google Fonts among others.
- Gridset: an online tool for creating layout grids beyond your wildest dreams.
- Responsive Wireframes: handy tool for a quick preview of what could be, by James Mellers.
- Ultimate CSS Gradient Generator: generate gradients and CSS, by the creators of the ColorZilla browser plug-in.
- Blends in CSS: Wow — hot off the press from those clever folk over at Adobe.
And some closing words by Ross Popoff-Walker: "It's damn time things change".