Mockup in Markup

by Graham Miller

Fifteen Reasons Why I Design in a Browser, Rather than Photoshop.

I believe 'design' isn't about how it looks, it's about how it works.

Photoshop is a great tool, and it used to be the second part of my design process (after I'd made a start with a pencil and a bit of paper), but I changed, and these are the reasons why:

1. You Can Put the Content First

As a certain Jeffrey Zeldman said "Content precedes design. Design in the absence of content is not design, it's decoration." When you design in a browser you can start with putting the unstyled content onto the page, then you can style it in the CSS. The design grows naturally, and the form follows the function.

2. More Interactivity

User experience enhancements with jQuery and CSS3 can't be seen in a flat psd. This is not just for the benefit of the client, issues like navigation and usability need to be considered at the design stage.

3. Better Collaboration

Need some assistance? Anyone can jump into web pages and help out, but with a psd you're on your own.

4. Focus on How it Works, Not How it Looks

Spending too much time on small aesthetic details at the cost of usability issues can be damaging to the success of the site.

5. Experiment

Don't like that column on the right? Let's try floating it to the left. Need to try some different colour combinations? Experimentation is easy-peasy in a browser. And design serendipity is more likely to strike in a browser window.

6. It's Easy to Change

The design feedback comes in: "Can you just change the font to Helvetica?" "Can you make the rounded corners 10 pixel radius rather than 5?" "Can you change all the blues to green?" Interface changes like these are a breeze in the CSS.

7. Take the Important Decisions

Performance considerations (What happens on a massive viewport? How will that transparency work?) can be made at the design stage. As can decisions about search engine optimisation.

8. Take Control

Nobody wants a developer to do a poor job of butchering their design. Do it yourself and maintain your personal quality control.

9 It's Safer

Half of designing in HTML is clicking 'save'. (OK I made that up.) But if photoshop crashes you're buggered, and photoshop has a knack of doing it at just the worst possible time. If your HTML editor crashes you're unlikely to lose more than a few minutes work.

10. It's Faster

Browsers are fast fast fast. TV adverts tell us that. Text editors even more so. Some days it can take 20 seconds for photoshop to save a psd, and I've been brought up with the Internet - I don't like to wait.

11. We Don't Need The Effects Anymore

We used to use photoshop for the drop shadows, outer glows, rounded corners and transparency effects. The fantastic CSS3 does all of this for us now.

12. Easy Grids

You don't need to spend time lining up pixels in a psd if you design in a grid in the browser.

13. Text Flow

Getting text to flow in a psd is difficult. Not so in HTML. And don't get me started on the text rendering...

14. Design to Deployment is Easy

Moving from a psd design to markup can take days. Designing in the browser means this is already done for you.

15. It's Free

Photoshop comes with a hefty price tag. I'm not saying that we can build web sites without any image software, but Fireworks might do for most of you.

Convinced?

To me designing in a browser is more efficient, more creatively stimulating, and more fun! Give it a try and make your own mind up.