5 Reasons to Stop Using Static Design Tools and Start Designing in the Browser

I got a request today from a former colleague:

@marky I need some quick practical selling points why our designers should stop using dedicated design programs and design in the browser instead. 2 or 3 should do!

I guess he had to add in the "2 or 3 should do" knowing I'd go off on a long rant. In either case, I gave him 5, here they are:

1) Don't Build Up Expectations for Your Client

When you use a static tool such as Photoshop, you build up expectations for your client. What usually happens is that all titles are the same length, all images have the same crop proportions, etc. But when your client adds real content, the rendered page looks like an approximation of the design.

With design in the browser, what you show to your client is what your client will get.

2) Quicker for Implementing Change Requests

If changes are needed, they can very quickly implemented by editing classes in CSS (for example, the new theme for Drupal core has a base font size of 15px. We’ve decided to up that to 16px - which means one line of code in CSS - instead of redoing all the Sketch files). The same is true if you want all image in a teaser list to position on the right hand side of the text instead of the left. Doing this in Phhotoshop is a pain.

3) QA Starts Sooner

QA testing can start waaaay sooner than using Photoshop or Sketch. As the client is signing off the designs (or each component) they are also signing off the frontend QA. Using something like PatternLab with Twig you can have almost the whole Drupal theme developed in this design phase, and then get the backend developers to output the HTML that will match it.

4) Signoff is on Real Devices

Client will see the designs in a real device and how they will render on that device - not looking at a mobile design on a desktop screen. When a client looks at a pdf of their new site, they will zoom out until the text is unreadable to see the whole page on one screen. No one will ever view the site like that though. Design in the browser forces your client to view the site as it will finally be viewed, in whatever browser/device they choose.

5) Multiple Variations is a Breeze

It’s very easy to show different variations of the same design (e.g. blog post with short title, long title, no image, etc) to see how the design stacks up against these real-world scenarios. This takes much longer in Photoshop or Sketch if you need to create individual mockups for each. Again, using PatternLab for this, you can have a base blog.json file (with the data for the blog component) and then extend that with each variation you need blog~long-title.json (with just the title variable changed), blog~long-title-no-image.json (you get the idea).

Okay so, at this stage it looks like I'm not a fan of Photoshop (I'm not) or InVision (I'm definitely not), or Sketch (I am! I love Sketch). So is there are place for these tools? Well, yes. If you designer likes to use them, and can work quicker with them (maybe he/she is not a frontend developer), then by all means they should use them. As each component is designed, they can then hand them over to the frontend team to implement them as HTML/CSS/JS, and it's these files that are sent to the client for signoff.

Won't that take longer? Initially, yes - it'll take a little longer to get the designs to the client, but the payoff is in how much sooner QA is done, how the client doesn't expect a unicorn to eventually be delivered as that is not what they signed off, and ... at some stage you are going to have to write the necessary HTML/CSS/JS, so why not early on?

After all that, what was the response from the person who said "2 or 3 should do"?

/me has started wondering how to turn @marky off now that he has started him...

I'll be speaking about this at DrupalCon Vienna on Wednesday 27th September at 15:45. My talk is titled: "Back to the Future: No More Static Mockups!" I'd love to chat with you there.

Here's a video of a similar talk from Frontend United in Athens this year: