Summary: The weaknesses in web design tools and processes are being exposed by responsive web design. But until a truly native web design tool arrives, there are ways to ease the transition

By Jake Rayson for Web design & Free Software |


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 Fontsamong 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 theColorZilla 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”.

Topics: Browser, Emerging Tech, Software Development


Jake Rayson

About Jake Rayson


A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text.



As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).



For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.



I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.




Leave a Reply

Your email address will not be published. Required fields are marked *