A magical thing seems to occur between the moment when a web design is realized as a flat graphical image, and when it is posted live as a structured website. In my years in art school, I met many fantastic designers who could plan and execute the first half of this process but had no real experience with the second.
This post addresses my version of this process, including a few tricks I’ve created to streamline the entire project and save myself time and effort. Please remember that every successful designer has their own particular method. My hope is that, in sharing my process, I can help those just learning the process of web design in creating their own shortcuts and methods for web production.
Step 1: Have the Right Plans
The graphical plan for a functioning website should include far more than boxes to suggest the locations of content and images. It should demonstrate the size and font for specific body copy (shown in web-friendly fonts) it should account for the hierarchy of typographic elements including main navigation, body copy, and headings; and it should establish a system for the display of images that will be easy for an end-user to carry out. Beyond these basic elements of internet functionality, a good web design accounts for practical elements like browser speed and monitor resolution.
Step 2: Know Your Engine
Will this site employ additional functionality like a blog, CMS (Content Management System), or shopping cart either now or in the future? Will users be editing regions of template-generated files themselves in a program like Dreamweaver? These considerations must shape both the graphical sizes of the content and the structure we will eventually develop to display it.
Step 3: Measure the Chassis
After your graphical template is approved by the client, it’s important to understand the specific pixel heights and widths of varying elements. In my provided example, I carefully plotted out the sizes for the banner area, the width of the navigation area, the two columns designed to display main body content, and the intended sizes for body images. You should record these sizes in a text file or on an organized sheet of paper since you’ll be referring to them often and making small alterations for various reasons.
Step 4: Get Your Toolbox
This is a good time to use your measurements to cut out graphics like the page background, body content background, and any graphics that will end up in the header area of the page. I have a prepared folder sitting on my desktop that includes all the folders that will be on my new site: CSS, images, Templates (for Dreamweaver DWT files), scripts (for Javascript and PHP files), and “originals” for all my original layout images as a reference. This folder also contains a text file called “develop.txt” which contains an area to record the various hex colors I assign to different types of content and a few snippets of code that I find myself using on a constant basis. I generally just copy this whole folder into the main folder for the new project and link it to the site manager in Adobe Dreamweaver. This saves me the time of arranging all these folders and gets me ready for the next step.
Step 5: Weld the Frame
It’s important to note at this juncture that my sites are designed with a structure almost entirely created out of CSS Divs. A few years ago it was common to use a shortcut program like Fireworks or its predecessor ImageReady to slice a design into tables containing appropriately sized images. The primary problem with this type of coding is that it is resource-heavy, and interferes with the proper interpretation of your site’s content by the programs that search engines like Google use to index your site. Tables have become increasingly outdated as a design element for several years, and should now only be employed when displaying large blocks of technical data.
My system for building this hotrod of a site avoids tables altogether. Instead, I prefer to use Div windows controlled by an externally linked CSS file. The major advantages here are that any changes to that one CSS file will affect the entire site, and later changes to the design (or full redesigns) will proceed much more smoothly.
I find that when I build a site, it’s best to place all the site content in one empty and unlabeled center-aligned Div. This allows the entire site to float to the center of the browser regardless of the screen resolution, approximating a uniform experience for viewers with different systems.
I then begin to fill this div with a snippet of code I keep in my text file that includes the div id=”” (with empty quotes), two blank comment tags, and the closing div statement. This block of code allows me to cut and paste in the div code, give it any name I’d like (to help me remember the site’s structure), and then comment on the beginning and end of that window so I can clearly track the organization in instances where I will be placing Divs within Divs.
The most difficult part of this process will be understanding when two Divs will need to sit side-by-side inside another Div (for instance, in the body section of the example website) and contain a tiling background. In cases like that, one can specify the width for those Divs but not the height. Remember to insert a blank “clearance” Div (with the CSS property clear: both); after the second internal Div but before the closing of the Div that contains them. This will allow the outer Div to stretch properly to contain both internal windows despite their float left and float right properties.
Step 6: Molding the Body
At this stage, we can begin to insert and add the appropriate graphics as backgrounds or headers for sections of the site. Manipulation of the CSS can create styles for the body content, body links, H1 and H2 headers, unordered lists, and images that will make these elements conform to the overall design. The hex values you recorded in your reference text file will help you to restrict these elements to the appropriate color palette and maintain your system of information hierarchy.
At this point, we’ve finished the major structural components of this particular hot rod. After the CSS is refined to account for indentations of text, various exceptions to the main body styles or the special needs of whatever “engine” will drive the site we’re almost finished with this template.
Please feel free to visit my other blog on how to make this simple HTML structure into the template for a WordPress blog and happy hot-rodding.