DesignDivine Project Blog

Final Truck Mock-up

We just wrapped up the photo shoot for the new precision van graphic.

Precision Plumbing Van Graphic - Weightlifter Pose

Precision Plumbing - Concept Sketches New Van Graphic

We are now  done with the project, and awaiting the final product from the prineters.

1. concept sketches
2. mock-ups
3. photography
4. layout design
5. prep for press

We worked with DotFotDot photography to get this shot, and sent the files to Summit Graphics for printing.

There are no great solutions to any of these problems/limitations yet, just a series of hacks and work arounds …

CSS issues

• Multi-column layouts in CSS
• Vertically-centered content in CSS
• Active Links tag

Cross-browser compatibility issues

• Rounded corners
• Embedded fonts
• Rotated text
• PNG image files
• CSS Vertical Collapsing Margins
• Table Rowspan alignment
• ALT/title tags

Search Engine Readability Issues

• Ajax / Spry content
• Flash content
• Dynamic page URL naming

Designer Task Issues

• Hghlight current link/page in navigation
• Converting HTML table-layout site to CSS-layout site
• Thumnail galleries – cropping/aspect ratio matching
• Sub-domain RSS/XML security restrictions

Wish List

• Rounded corners!!!
• CSS/HTML dropshadow effect
• Simple fade effect for hover state
• Clean way to separate template from style from content

From Adobe

• Dreamweaver CS4 – awesome package
• InContext CMS – great way to upgrade static sites to allow for basics client CMS
• Spry Datasets – fast way to create a mini-database.  tragically, not readable by search engines
• Flash FLV player – quickly stream most media

From others

• WordPress – fast, simple, powerful tool
• Web Developers Toolbar for Firefox – great way to see how other sites are built
• Lightbox & Shadowbox – fast, simple, beautiful script for linking to and displaying images/media from thumbnails
• Google Analytics – nearly perfect web stats application. (still needs some improvements on heatmaps and click counts.)
• Browsershots.org – Great tool for generating screenshots for an array of opperating systems and internet browsers

CSS AND Table Website Layout Hybrid Design

As most web designers know, there is a debate raging over the use of HTML Tables (ie. table, tr, td, etc.) in the construction of web page layouts.

The main issue is that CSS offers no simple (and supported) solution for the creation of basic, vertically flexible, columns. In fact, it offers no grid structure to work with whatsoever (yet). As an old school designer, I am used to doing full table layouts, but CSS offers some masterful improvements — just not in this area.

So my short term solution has been to use a table superstructure to establish the layout grid, and use CSS for everything else.

The screenshot above is an example of a site layout containing just one table. The red lines show the table-based superstructure of the page. This solves the column issue without bogging down the code too much, and it requires no CSS “hacks” to create the layout.

A more conservative use of tables might make sense, like the New York Times website:

NY Times Website - Sparring Use of Tables in Layout

One thing is certain, however, 100% table-based layouts are out. Oddly google is a bit behind (see below). I am sure they have their reasons though.

Google News - Odd Overuse of Tables in Layout