When designing anything, you can get the best sense if the design is working by viewing the design in its final habitat—or as close to the final habitat as you can get. With large installation art or architecture, that’s a real challenge. But for web design, the Chrome/Firefox/Safari is just a program or two away from Photoshop/Fireworks in the Apple Dock.

The challenge is how to move between Adobe designing and browser previewing as smoothly as possible. Fireworks provides a “preview in browser” feature, but that feature just drops an image of the design in the browser window. Most websites aren’t left-aligned and contain a 10px margin around the image. Those are features that the Fireworks feature leaves in.

I’ve come up with a solution that fits into my work flow better and provides a more realistic preview. By combining a little PHP to pull the correct preview image from the file directory and using CSS to correctly size and position the image, you can save a preview of your design to a folder and then immediately refresh the web page associated with the index.php of the preview folder.

Here’s an example of a preview page that is using the process I’m describing. At the end of the post is the PHP code that you’d need to paste into the index.php of the file.

Here are the steps:

1. Make sure you have a web server working. If you own your own website, you can save the previews using an FTP server. I have a local server running using Mac OS, but for a cleaner local server solution try MAMP.
2. Create a new directory/folder. Add a text filed called index.php and paste in the code at the bottom. Save it. You won’t have to touch it again.
3. As you work on your design, periodically save new preview images of the design to the folder. The index.php script will choose the latest image and display that one. A cool side benefit: if you always rename your previews (preview-20131008-1, preview-20131008-2, etc), by the end of the project you’ll have a nice way to see all the progress you’ve made.
4. After you save your new image, open the index.php in your browser. You’ll see a nice preview image. If you save a new preview image in the folder, just refresh the page.

Some images from this post were already missing from the server when it was archived in 2014.