For many of us demonstrating design to a client using a static mockup done in an application like Photoshop has been the way we have historically done it. We find using the application to show the design before integrating it into HTML and CSS quicker and easier than demonstrating the design in the browser, which we often find to be slow.
There are however benefits for demonstrating design in the browser. The main benefit being that the client gets to see how the design will actually look and behave in a browser.
Below are some tools that can help you speed up designing in a browser, and encourage moving a lot of the design decision process out of your image editing program and into the browser.
If your design is based on a grid, Gridset is a fantastic tool for trying your grid out in the browser. If your grid isn’t based on a generic framework, like 960 grid, it can be time consuming to do all of the calculations needed to build your grid in CSS. With Gridset, you can create very complex grids visually and then use the generated CSS in your prototypes. Seeing how your content behaves instantly when you make grid changes, instead of having to line everything up with new guides in Photoshop for example, make grid design in the browser very fast and satisfying.
Typecast solves many problems with web typography. Instead of needing to use an application like Photoshop to try out different fonts and then having to test how your typography renders separately, you can now do it all straight in the browser. Typecast makes the fonts from many web font services available so you no longer have to use screenshots of web font example text or buy font licences just to use them in your comps. It also generates CSS for you, so once you’ve set up your needed font styles, you can use them in your prototypes straight away.
If your design requires multiple pages or repeated sections within a page, reusable chunks of HTML can really speed up your workflow. Instead of needing server side scripting to enable things like HTML includes, you can use a tool like Hammer to generate reusable chunks in your HTML with less setup time. Hammer has lots of features that make building static HTML much quicker and more manageable. HTML includes make using common code, like a header and footer, across multiple files much easier. Variables and helpers also make it easier to reuse a lot of HTML and take the pain out of static HTML.
SASS and LESS
SASS and LESS are both precompilers for CSS, while LESS also has the option of compiling in the browser as well. They both have lots of great features that make writing CSS a lot quicker and more manageable. Things like variables and definable functions to output reusable CSS make it very easy to make design changes and try things out in the browser. For example, if you use variables for colours, changing the colour in one spot means it will be changed everywhere it is used in your CSS. Where SASS or LESS get even more powerful is if you define some styles common to lots of design elements in a mixin, tweaks to those styles only need to happen in one place and will be changed for any element where the mixin is used.
There are lots more tools out there, and new ones constantly being developed to take the pain out of designing in the browser. If you haven’t tried presenting design in the browser yet, check out some of these tools and give it go.