To prove our architectural skills, we pushed to do a design that followed the motto of “content is king.” Under the hood, HTML is a big long text document of code and content. When a web browser builds a page, the instructions from the code dictate the final look. Still, it’s output in a linear way from the perspective of search engine spiders. We worked to have as little material in the way of the content of each page. Most of our links are in the foot of the page with the key navigation up top.
“Content is king” is a rule followed by search engines. If your site is properly indexed, all of its pages will be in the major search engines. Web surfing is not a linear process. People end up on your site, but they may well start from Google and parachute into the depths of your site without going through the rest of your navigation. If you make your content easy to index, it’s easy to be found and the parachuting dynamic can be beneficial.
Our top banner of links is used on the front page and the inner pages, so the image can reside in the browser cache. It’s a transparent PNG, so it offers a lot flexibility as to where we want to put it. Also, while we like CSS sprites and have used them to great effect, we went old school: we’re using an image map. We added two more images for the sake of layout. Put in a short list of supporting CSS and script files and you have a nice low minimum of files to download to get one of our pages to appear. The CSS and scripts are compressed with a Performance feature available in Drupal. Drupal will add a CSS and a script file for each module. If you go on a shopping spree and download a lot modules, you could get stuck waiting forever for a Drupal page to load. There are two ways to address this: be frugal in your list of modules; and use “Compress CSS” / “Compress scripts” to get these numbers down.
Taking the layout and cutting it up gave us another opportunity: we looked for ways to replace graphics with CSS. Cascading Stylesheets is capable of replicating many effects that used to be solely in the domain of images. Rounded corners, drop shadows, faded transparencies, angled text: these are simple parlour trips for CSS.
We had to apply these design decisions to something-- I took the Basic theme (co-maintained by Steve Krueger from TheJibe) and ran with it. There is stuff we need and stuff we don’t need. We took the Basic theme and made a variant theme. We hardwired some elements into the design. I also took out features in the code that I did not want to ever use. The Basic theme is great and general purpose. I took its great baseline and specified it to our needs.
Drupal is locked in a case of split personality these days, so much so that we are prone to offer Wordpress as a viable content management approach to our clients. One of the core concepts of CMS products is that the site can be administered via a web interface. Any developer can dig into the code and make changes. Many modules offer their best functionality through the command line (Drush); or they move configs around (Features) through exported and imported files that are exported via the UI but imported via FTP or similar file moving; or they use code changes within files used by modules. The era of good user interfaces is waning. Some developers crow about how everything is editable from the UI at the same time they rely on these previously mentioned modules and tools. I made the decision that some elements on the page are going to be fixtures for the lifespan of the design, so there was no reason to put the complexity into the database when it was always going to be added to the presentation.
The end result of this rebranding is a site that is clean, flexible and fast to load. The design look ties into related marketing material like business cards and advertising. Heck, we may even rig up the TDC to a spotlight a la the Bat Signal. See: you can take the comic book out of the design, but you can’t take it out of the designer.