Grids
Over the early half of the year I set off researching various articles and examples of design grid systems. I took a lot of these theories and systems and most of the visual designs produced over the past two years to see what fit into my love for clean design and a body of client selected designs. A clear winner emerged from my research.
I found that the 960 grids systems worked perfectly for my design theory and body of recent work. Using the 960 girds system (down load available from their website) to establish three systems of 960, 900 and 722 pixel widths. For each grid a visual design template was made in JPEG format (for use in both Photoshop and Fireworks). In addition a foundation code set of CSS, image holding jpegs, and tables was also established. The foundation style sets are labeled and pre-located in the master scripts folder.
However, let me say even though I have a penchant for clean, clean, and modern design that does not mean I am stuck in the grid. The grid is just a resourceful building block and I have found it to be just as powerful when you need to design, literally, outside the box. Once you develop and employ a grid for the first time you will find it infinitely flexible as it is ridged and very easy to customize to fit any design.
Tool Box
Over the years everyone sort develops a lose set of often used code snippets and functions. I use Dreamweaver and a lot of time I use their built in behaviors. This leads to bulky in page scripts being added. One thing I have done is to establish a process and set of snippets in external files to clean up the header code area of pages. The same happen if you use behavior added from Fire Works.
In addition I have various DTHML code function for navigation, images, scrolling, and galleries I often use. We have two different form mail processing codes; one asp based the other php. I also have non- JavaScript functions for slide shows as well as flash plug-in in the tool set.
To better organize all this, I took two steps. One was to add the smaller most common snippets into the standard script folder (were the css was already located). The rest, along with any installation and modification notes, were added into one master resource folder on the team server. This way everyone can access them. The tool box is not established to limit and everyone is encouraged to add new scripts and tools.
Conclusion
The combination of the new css foundation and the grid design set combined with a more organized tool box gives us a huge reduction in production time. Both small and large projects have seen a great boost from the new foundation already. A lot of the browser struggles and css structural layout issues before are removed from the production equation now.
Small sites and micro-site projects especially benefit from a well established code foundation. These often now spend more time in the visual design cycle than production. The visual design phase is also reduced by using image templates of the grid designs and better management of layer in Fire Works.
Next mission: streamlining applications
Resources:
960 Grids ( a must read): http://960.gs/