About heidicool.com
This site was launched in 2009 to serve as a central repository for my thoughts and explorations regarding Web development, content, marketing, social media, photography and writing.
It is meant to showcase my work and Web philosophy and to provide an educational resource to those involved in marketing and Web development. The site shows a copyright date of 2005-2009 to reflect that it incorporates both new and previously existing content.
While the focus is primarily that of Web strategy and development, I included photography and writing because these are core elements of Web content and my words and pictures often make their way—when applicable—onto the sites I create.
Site Organization
The site was divided into 4 primary sections, so users wouldn't be overwhelmed with choices. Each section repeats the primary menu and includes a secondary section menu so that visitors landing on any give page can easily find their way around the site.
The Web Development Blog, which has the most content, includes additional navigational aids such as links to "previous" and "next entries, an alphabetical index, date archive and a category archive.
Site Design
These icicles formed the background for the header and footer graphics.
The site design was kept simple to provide an unobtrusive visual framework for the main content. I chose green as the primary highlight color, and used a left hand secondary menu to offer a sense of familiarity to readers of the original Web Development Blog.
Having chosen to incorporate the site title, section titles and section subheads in the banner, I needed to use a banner image that wouldn't compete with the type. The abstract header and footer graphics were created in photoshop from this photograph of icicles taken earlier this winter.
The About Me, Web Portfolio and Web Development Blog sections feature a black header, green footer, and use black type against a white background of fixed width to allow for easy readability.
The Photography sections feature a green header, black footer, and uses white type against a black background of fixed width to let the photographs stand out more prominently.
Typically, a designer would maintain the same color scheme on all sections, or color code each section uniquely. Considering that, my choice to reverse the color scheme on the photography section is something of an experiment, but I do prefer the way the pictures look against the darker background.
Technical Specifications
The About Me, Photography, and Web Portfolio pages were built in XHTML 1.0 in conjunction with PHP using the XHTML Strict DTD. Presentational layout is handled with CSS level 2.1. Each page has been designed to adhere to W3C Web standards and, as of this writing, has passed W3C XHTML validation and W3C CSS validation.
The Web Development Blog section was built in WordPress 2.7. The WordPress templates were created in XHTML 1.0 in conjunction with PHP using the XHTML Strict DTD. Presentational layout is handled with CSS level 2.1. Each page has been designed to adhere to W3C Web standards and, as of this writing most pages have passed W3C XHTML and CSS validation. Originally this section used the transitional doctype to accommodate older entries and some WordPress plug-ins. I've changed this to the strict doctype to prevent Safari from rendering in quirks mode, however some pages have minor validation errors. As time allows I'll check and clean-up any older blog entries and troubleshoot the relevant plug-ins, to resolve these issues.
| 
Pages have been tested in multiple browsers including recent versions of Firefox, Safari, Opera and Internet Explorer 6-8, as well as through browser simulators such as Browsershots that allowed me to see how the site might look in browsers I don't have on my Macbook Pro. The XHTML and CSS were designed to be cross-browser compatible with minimal browser hacks and stylesheets.
RSS feeds have been included on certain pages, such as My Social Media Profiles, using the MagpieRSS XML-based RSS parser in PHP.
The Photography section uses the SimpleViewer application to display photographs using Flash in conjunction with XML.
Tools
The following tools and services were used in the construction of the site, and in projects mentioned or included on the Web Development Blog:
- 15" Apple MacBook Pro
- Various Windows laptops: Thanks to friends who were gracious enough to bring their laptops to social gatherings so I could do quick browser tests.
- Adobe Dreamweaver CS3: I edit in code mode but find the color coding to be helpful.
- Adobe Photoshop CS3 Extended: for editing photographs and producing rasterized images.
- Adobe (formerly Macromedia) Freehand MX: vector-based illustration program for drawing images used in print, Flash or to be converted to .jpg for Web.
- Adobe Flash: Vector based animation software also useful for slideshows.
- Web Developer Add-On for Firefox: Features handy tools for checking sites such as screen rulers, validators, easy on-off for javascript, css etc.
- Apple iWork Keynote: Presentation program (imagine PowerPoint on steroids with more intuitive features).
- iShowU: Video screen recording software handy for making demonstrate videos.
- Audacity: Audio editing and recording program.
- Fugu: Open source Macintosh client for secure file transfer (SFTP).
- Bitstrips: Social Media Cartooning - I make cartoons here for use in presentations.
- Canon 40D digital SLR: Primary camera
- Canon SD1000 digital point and shoot: Secondary camera I carry with me for times when I see a good image and don't have the larger camera with me. Also handy for low-res video.
- Dreamhost: Web hosting and domain registration provider. Disclaimer: If you sign up for hosting with this link, I get a referral credit, however their costs and services are very dependable. I've used them for several sites and would recommend them even without the credit.
If you have any comments or questions regarding the site, please feel free to submit them via the Contact Me form.
