Designing in the browser

Designing in the browser

Presenting static images of a proposed website design to a client is fraught with danger. What we are showing them is a picture of how we want a website to look, which is not necessarily how the website will end up looking. A good example is the most basic element of content on a website, and usually the majority of a website’s content, text. Fonts can render quite differently between an image editing program and a web browser, and even between different web browsers and operating systems.

By showing static designs to clients, we set them up with the expectation that the final product, their website, will look like the image. Sometimes we go even further and get them to approve that static image, locking ourselves into reproducing that image pixel for pixel in a web browser. I’m not saying that approval of a design by a client is a bad thing, but that using a static image probably isn’t the best way.

Why shouldn’t web designs look exactly like an image?

As technology changes, we have more and better tools at our disposal for implementing designs on the web. CSS has allowed us to reproduce effects that were only possible before by using static images on a website. But using these technologies means coming to terms with the fact that your website won’t look exactly the same in every web browser, as not all browsers may support the CSS needed. The advantages of using CSS to achieve these effects are numerous. Reduced development time, easier website maintenance, the ability for clients to update content that needed images generated before and reduced page load time because of less images and code to load.

Designing for multiple devices is another challenge where static images fall short. With techniques like responsive web design letting our designs adapt to different resolutions and features, we need a way to articulate how the designs will respond. To do this with static images, we might find the need to have 3 or 4 different images of layouts for each page.

What’s the solution?

Right now, the perfect tool to let us design in the browser doesn’t exist. A possible workflow now could look like this:

  • Work on ideas in low-fi, sketching etc
  • Generate any graphics needed in an image editor
  • Implement design ideas in the browser
  • Go back and forth between these steps

As soon as I get into HTML and CSS, I find it harder to come up with design solutions that aren’t easily implemented straight in the code. For this reason, I go back to sketches and photoshop to come up with new ideas.

The whole idea is to get the client to approve what they see in the browser, as an actual web design is meant to be viewed. This could even happen in stages, with approval for fonts, colour scheme, different interactive elements etc separately.

So have you tried designing in the browser and do you have any work flow suggestions to share?

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top