Mike’s 2005-2006 Project Archives

On this page you will find a collection of my personal and professional creative projects — one and all a labor of love.

2006-02: Drive Traffic Template
View: Drive Traffic Template Image »

View image of Drive Traffic Template

I was asked to make a website template designed by someone else. Using a rendered composition as a guide. I thought at first that this was an unusual request, but later learned that a CSS-controlled, standards compliant site was wanted, but the site’s designer wasn’t up on that aspect of development. Once I saw the comps I realized why: It was pretty complex. I literally groaned, knowing it was going to be a big challenge making it accessible and to make it resize well. I think I succeeded.

This site template is made up of two XHTML 1.0 Strict pages: An index or main page — which is the most complex of the two due to its four “boxes” just above the footer — and an “inner” page. This inner page will be used for content of all pages on the site-to-be, which is now in the hands of the owner. I managed to allow for some excellent flexibility, even on the index page. I defined styles in advance for a lot of the possible site-to-be’s elements so it should grow into a site nicely and easily. I also incorporated come color-hidden jump links, made the template allow for two full text enlargements and really went through it to ensure decent semantics, great use of headings, content positioning, decent accessibility, and good usability. The automated checks pass it to AA so, while inaccurate, it’s a good start. All-in-all I’m pretty happy with it. So is the client I gladly report.

Update: A variation of this template has been made (index only) upon the client’s request. They wanted to swap it out now and then.

[ Top | Nav ]

2006-01: Dante’s Pasta & Vino
View: Dante’s Pasta & Vino Image »

View image of Dante’s Pasta & Vino

When I was asked to create a website for Adagio Spa & Salon, I knew the owners also owned a restaurant. I had, after all, taken my family out to have dinner there — the food is great, by the way. I had visions at the time of a great website design for their restaurant, even though I was supposed to be thinking about the spa. I got on track and made the site I was contracted to. I did mention my thinking to them, though. Food for thought (no pun intended). Well, as luck would have it, they were so impressed with the spa and salon website, they immediately told me I was going to be building the site for their restaurant site as soon as they compiled the necessary content. I’m very pleased to be able to make my idea their reality.

The task at hand was to make a richly-colored site which embodies warmth, romance, good food, and the comfort of Italian food. The palette was drawn from the colors of the food and the wine. The look was successful.

The Dante’s Pasta & Vino site is built using XHTML 1.0 Strict mark-up and CSS for styles and positioning. It is also an extremely accessible site meeting the requirements up to priority 2, AA. The site features menu management scripting, a style changer, custom error pages, the works, really. Buon Appetite!

[ Top | Nav ]

2006-01: Thompson/Center Assn
View: Thompson/Center Assn Image »

View image of Thompson/Center Assn

I was hired to create a website for the Thompson/Center Association, publisher of the “One Good Shot” quarterly magazine for its member-group of hunters and Thompson/Center Arms gun collectors. The request was simple: Make a simple-to-use, easy to manage, nice looking website slated for quarterly updates. My point of contact told me he likes Earth tones. I took it from there running with the project. I ended up going a little above and beyond the call of duty in the areas of design, function, accessibility, and level of underlying detail, including custom error pages. But I did it this way because this is how I want to make all my websites, and since I wasn’t given clear instructions to make it inaccessible, I took this approach. As it turns out, the client, upon seeing this creation, was aboslutely stunned. In a good way, delighted.

As is the case of most of my designs, this PHP site is built to the XHTML 1.0 Strict mark-up specification and uses CSS for styles and positioning. In addition to this, it also clocks in with a AAA accessibility rating on the automated checks. (The form pages rank in at AA only, but this is because the old guidelines are being checked and the AA failure trigger will be allowable under the new requirements.) This site also features two forms and a PHP style changer. The latter offering two additional style choices for dial-up users or anyone preferring less imagery.

[ Top | Nav ]

2006-01: Upward Dog Yoga Blog
View: Upward Dog Yoga Blog Image »

View image of Upward Dog Yoga Blog

This was a commisioned project, which is why a screen shot is all that’s offered. I was asked to take the imagery and colors from their existing site and apply them to a WordPress web log — a custom theme. But not just that, as requested, I made the web log more like a website with what looks like a normal navigation — still controlled by the application but on all pages — no comments box, and no references to “comments” anywhere on the site (except the footer RSS link, missed it). The client, I was told, doesn’t want to use it for that in any way, shape, or form, but with WordPress being so easy to use, that was their application of choice.

It’s a straight-up site with an original theme, matching nicely their previous site’s style and colors. It’s right out-of-the-box WordPress so it’s only Transitional XHTML, but it is valid. My role in the project was the theme layout and styling only. Being a WordPress application, it’s CSS-powered for styles and positioning and fairly accessible.

[ Top | Nav ]

2006-01: Accessites.org v1 Site
View: Accessites.org v1 Site Image »

View image of Accessites.org v1 Site

Accessites.org is a project site belonging to myself and a number of other people from parts far and near. Team Access we call ourselves. In a nutshell, our goal is to evaluate, award, and showcase web sites that go above and beyond the call of duty in areas of accessibility, usability, standards-compliance, build aspects, and design. To prove to the world that accessible need not be boring. To make it go mainstream.

Being that this site is central to a team of those grading other sites, I went to even greater lengths when building it to ensure its compliance and accessibility. It’s not a perfect site. I’m afraid I haven’t seen one of those yet. It is, however, built to a very high standard and meant to be exemplary of what we preach. It’s built to the XHTML 1.0 Strict document type, and of course CSS is used for styles and positioning. It is a hack free site and semantically constructed. It reaches AAA accessibility on both automated and manual checks — with exception to the form, but I have solid justification — and it reads nicely on a screen reader as I took great care in limiting unnecessary text redundancies. It was a fun and challenging creation. I tried several things I hadn’t tried before, but will do again. Nothing new there, though, I’m always applying what I learn from the last project to the next. It is how I advance.

Update: I created another style sheet for this site which I’m calling “Apple Crisp” — it’s light, airy, it’s crisp.

[ Top | Nav ]

2005-11: Access Granted
Launch: Access Granted Live Site »

Visit Access Granted

I’ve been putting it off for quite a while, but finally I have created and submitted a design to the CSS Zen Garden. Will it become an “official” design? Maybe, it’s really hard to tell. I doubt it’ll make it on looks alone. It’s not the flashiest website out there, especially when compared to some of the great selections archived at MezzoBlue.com, but due to all of the web accessibility features I employed through CSS alone, it hopefully has a fair chance.

The site’s features include an elastic layout — meaning the whole site resizes with the text, like GBHXonline.com. Moreover, the text is resizable, even in Internet Explorer. I also employed full visual focus on links. Additionally, the CSS property display:none was not used to ensure screen reader access, even the banner has image replacement employed for the benefit of those who surf with images off, but CSS on. The style is clean and very easy to read and will be a sure hit with some people. It all depends now on the powers-that-be.

Use the link (or image) above to access and view the submission workspace on my server. If you wish, however, you can use this link to launch the live site by loading my style sheet onto the actual CSS Zen Garden HTML page.

[ Top | Nav ]

2005-10: Tolero Development
View: Tolero Development Image »

View image of Tolero Development

The partners at Tolero Development, LLC. wanted a website they could easily update with occasional general news releases and the like, and they also needed to present, maintain, and archive their projects — at the rate of roughly three to four jobs per year. And they needed something easy to work with. There is an expression: “Ask an ye shall receive.” Well, it applies here. I am very proud to release this site to this client. It represents a milestone for me on several technical fronts.

This site is built — hand-coded as usual — to the XHTML 1.0 Strict standard and uses CSS for styles and positioning. It is an extensively integrated and scripted PHP site using the GreenBeast CMS as its management interface (discontinued). It also features the brand new RSS “Newsmaker” plug-in for the CMS. The RSS Newsmaker is XML outputted to the Home page and automatically paginates, creates permalinks, and has a smart archive. Choose a heading, decide how many items are displayed per page, choose a couple of other simple one-time settings, and the rest works for itself. It’s a very cool feature.

This site will be accessed heavily by US Military members and their families in all likelihood — given the relationship Tolero Development has with Military Home Link which is one of their projects. Being that this is the case, web accessibility was a priority. The unofficial requirement for this site was to comply with the US Government’s Section 508 Web Accessibility standards. I succeed on this front; actually exceeding that standard by quite a bit.

[ Top | Nav ]

2005-10: JamesEdmonds.com Blog
View: JamesEdmonds.com Blog Image »

View image of JamesEdmonds.com Blog

This is yet another project which resulted from the original announcment of my Beast Blog Theme. Since demand is high, I created a public release of the WordPress theme.

JamesEdmonds wanted that clean simplicity for his weblog so that’s what he got. James had great graphics from the start (though I ended up making a really big pocket protector). It was a pleasure to work with the imagery and apply to the Beast-Blog theme-based design. I got the job done quickly and the client is happy I gladly report.

In addtion to the theme design work, I also upgraded the application to XHTML 1.0 Strict, applied my own modified CSS (all in the theme download), created the images, and worked on a couple of script features to make it all complete. The result: An accessible, usable web log with a striking appearance.

[ Top | Nav ]

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.