It is widely accepted that responsive design is needed to accommodate mobile, tablet, PC and a growing proliferation of devices and situations where a ‘website’ needs to be both functional and beautiful. However, spare a thought for the poor graphic designer who needs to design and carve up all those different PSD files for the many layouts and visual elements needed.

In such a world, what are the tools we’re looking to at Link Digital to make the process of generating a responsive design easier and more effective?

Well, the short answer is we are still working on a new non-linear design process for responsive design. But, here is a short round-up of what graphic designers can look into to get their own web design processes looking more responsive.

For Adobe PhotoShop users

  • Sliced PSD files are on the way out.
  • PhotoShop is moving back to being more visual/image based.
  • Adobe are moving the tools around the platform and making brand new tools (Muse etc., see below).

For Adobe Illustrator users

  • Artboards are used in Illustrator so in theory you could use these at different sizes to produce different graphic versions – But it will not produce HTML files – just the graphics.
  • You would use Illustrator to produce SVG – a HTML5 graphic standard – example would be http://svg-wow.org/camera/camera.xhtml (requires no plugins etc.)
  • So in Illustrator you can…
    • “Save for web” exports parts of a site in JPG/PNG/SVG etc
    • Produce the raw SVG files for animation
    • New Document Profiles for web and devices – Set up new documents with pixel-grid alignment from web and mobile device profiles, which also include relevant dimensions, colour groups, and more.

For Adobe InDesign users

  • InDesign has better interactive features – Exporting to HTML, EPUB3, or .folio for Adobe Digital Publishing Suite.

However… The real game for responsive design is over with Muse
and Dreamweaver + PhoneGap 2

Adobe Muse

  • See http://www.adobe.com/au/products/muse.html
  • Create HTML websites without writing code with Adobe Muse software.
  • Right now it’s mainly tied to Business Catalyst – but there should be a Dreamweaver version coming soon…

Dreamweaver + PhoneGap

For the record, the design process we followed for the Department of Human Services was based on a primary set of PSD files and we are using that same approach for our work to improve the responsive design for the Canberra Theatre Centre and a new website for Prime Minister and Cabinet.  However, we can see that the end is nigh for this approach with PhotoShop.

Being pixel perfect is just not viable when those pixels are all over the place. Time to build a new school approach.