Blog: Archive

agsdix-fas fa-home

Blog: Home

agsdix-fas fa-pen-fancy

Blog: CEO's Corner

agsdix-fas fa-code

Blog: Tech Talk

Blog: Product Releases

agsdix-fas fa-chalkboard-teacher

Blog: Viewing

Blog: Conversion

Quick Tip for Rapid Web Site Prototyping

by | Mar 28, 2011

One of the things I’ve been surprised about as a designer is how easy it is to create a reasonably simple site in a short amount of time once you have a basic understanding of HTML, CSS, and JavaScript code. Troubleshooting and making it work for various browsers is another article, but putting up a basic, static website isn’t too terribly difficult.

For me the hard part is the design. There’s always something more to add, another element to experiment with, a new widget or technology to implement or a new technique to try. As web designers, part of our nature is to explore new ideas, learn new technologies and create new, improved ways of representing data.

So when I finally choose a layout, the code part seems easier than designing. Web development can be difficult as well but at least there is a relatively clear path to follow when writing code. It works or it doesn’t. It’s valid or it’s not.

Let’s assume that the tough decisions about navigation, site architecture, color schemes, usability, and how best to represent your content on an aesthetically pleasing page have been decided. For arguments sake, let’s also assume that we have communicated – at a glance – what our site is about and it is time to start writing the HTML/CSS code and editing the PHP template files.

Two hurdles to overcome:

1. In the past, I started from scratch – meaning, I wanted to be a purist and write every line of code, not only is this unnecessary but it wastes valuable time, for you and your clients.

2. Next, I would make sure everything was pixel perfect by scribbling down some of the exact measurements from the Photoshop layout, but no more!

Instead of dissecting a Photoshop file as I have in the past, or even taking measurements, there is a much easier way to get that pixel perfect design you spent hours perfecting.

A few weeks ago I was building Photoshop compositions for a new landing page when I realized I could use the entire comp as a background image and then code on top of the image. The technique is very similar to that of using tracing paper in your high school art class.

Take a look and see how it’s done:

First you need to have a mock-up created and ready to roll out to your new page. For this example, I’ll use a basic page from an older project:

Simply use Photoshop to save your file for web and devices once you’ve prepared a standard 960px width file (or choose your own width). I generally start with 960px.

File > Save for Web and Devices

Now set up a basic HTML file and place an inline style tag on the body. Note: Normally, we wouldn’t want to use inline style but because we plan to remove it once we have our framework in place, it should be fine for now.

And that’s all there is to it!

You can see what the final web page should look like as it sits in the background which makes writing the content code on top of the image much easier and allows you to line things up pretty precisely.

As an added bonus, you can quickly delete the inline style and see what your page looks like as you build it. This has generally helped decrease my time building HTML layouts and definitely improves the accuracy of the design/code.