Dan Lewis James

Designing in the browser

Designing in the browser provides real time feedback on design decisions. More specifically, it allows the experimentation with various content and layout sizes, which is super good when working with unexpected user generated content like user-names, email addresses and generally all the unpredictable content that may cause a layout to be compromised. When designing web applications it's natural to dive in and see how page elements will interact with each other, minimising and hopefully eliminating any crazyness that may occur when the app goes to development, or worse, live.

I am lucky enough to have worked with clients that also see the advantages of designing in the browser, so have been able (on occasion) to jump straight in with the front end coding whilst creating a plan for the overall visual design. Living with a design in this way allows more time to see the design and iterate upon it a little at a time, rather than having to knock out a design in a day, get approval etc etc.

To make this process easier and more coherent in the future, I think it would be good to put together all the resources I could find that discuss techniques for designing in the browser. Starting with one of the best articles from the designer who started the debate Andy Clarke and a great quote from that talk/post that sums up the theory well;

“When you demonstrate a design as a static image, you are reinforcing a mistaken notion that a web page will be a facsimile of a frozen image. And when you demonstrate a design or ask for sign-off on a frozen image, you immediately leave yourself open to the problems that often come when you later implement that design.”

Andy Clarke’s work designed in the browser Stuff and Nonsense

Building structure and layout

CSS Frameworks

One of the easiest ways to design a site in the browser is through the use of a good grid structure. If you don’t want to develop your own structure and have a standard grid idea in your wires then you can use either Blueprint CSS complete with a list of tutorials for successfully using the framework, or 960 Grid, another good framework and although the structure is fixed there are further developers working on a fluid structure. 960 Grid also has the advantage of extensive tutorials like this one on net.tutsplus

Grid Systems

For those who want to construct their own grid there are loads of resources, such as the browser add-on grid fox, for Mac users there is Slammer. There are example grid images from Khoi Vinh and further grid resources from Cameron Moll

Working on typography

Developing a baseline grid for typographic styles based on well developed and classic typographic principles is something every designer should set as their benchmark, with a bit of planning it really isn’t that hard. For reference setting up bassline type grids on Typophile or an older article on a list apart good articles on the subject, but there is no better book on the fundamentals than the elements of typographic style by Robert Bringhurst.

Selectively adding graphic elements

By this time you have a large amount of content to work with and hopefully nice, standardised naming conventions for all your graphic elements, this should make it easy to add styles site wide with just a few lines of CSS, heck you could even do this in front of the client. If the client is not present you can easily document iterations with littlesnapper, this again was suggested by Andy Clarke and it works really really well, no more changing styles in PS or Fireworks over multiple documents. I am sure there are shortcuts but I cant believe that any of them are as fast and as interactive as CSS.

Designing a system not a page

“Designing a system involves working from the content-out to design a toolkit of modular, reusable content components and an underlying grid structure.”

Use CSS to develop various content sections based on the overall grid structure then develop a system that allows the users to add these various sections through adding classes in the CMS of choice. It also forces you as a designer to think of the overall naming conventions throughout the site, before you begin coding. This should happen for any project, but when designing in the browser it’s much more difficult to get away with it, and you’ll come a cropper if you don’t add them in especially if you are then coding in a team.

Conclusion

For the last 2 or 3 projects I have tried to design in the browser, one of these projects was commercial the others personal, they were all equally as successful as my old methods, so there is little difference there. They were certainly quicker to design and develop and with the potential for further improvements as I become more proficient at the methods and techniques involved in designing in the browser.

The main improvement that I have taken from these projects is the need to understand and adhere to standard design principles which you design in to the system from the very beginning. These are standard principles that all designers should know, especially if you are self taught like me. Principles of good grid structure, typographic basslines and implementing Bauhaus ideology will all help your endeavour to design better and faster, it has for me anyways. The only thing I will say against it is that it will be a challenge to encourage clients to go with you on it and to trust that it can be done, and not only that, but it can be done faster and better.