All work hosted here dates from 2010 or earlier. Please check out these sites for more recent work samples:
- Pew Pew Laser Blog: Personal blog - handed coded from scratch.
- Stack Overflow: Answers and Questions.
- GitHub: My GitHub repos - including the Mug of Sublime Text, html5-slideshow and other various open source contributions.
I focus on using XHTML and CSS to create robust and flexible web sites that are easy to maintain. Here are the reasons why:
- Extensible: Go ahead and increase the text size on this page. Decrease it. Observe how the page re-sizes nice and tidily. This allows web site visitors to interact with my site at their own text size & screen resolution.
- Accessible: Simple, standardized code means the page is legible and even pleasing on handheld devices, cell phones, old browsers, game consoles and screen readers.
- Maintainable: It's much more efficient to maintain simple HTML that's contains only content. With the presentation separated into CSS, one simple style change can update the whole site.
- Parsable: Web spiders can't interpret the text inside images, but they love textual headers. Happier web spiders means better search rankings.
- Expandable Box: circa 2008
The Expandable Box demonstrates how a flexible and appealing box can be created using 3 images totaling only 10.4K in file size. The box will shrink or stretch to contain small or large amounts of content. All content is actual text overlaid on the images, which enhances the elements accessibility, search engine visibility, and device rendering flexibility.
- Amsterdam Design: circa 2008
Amsterdam Design is a speculation web page design that uses only CSS for layout. Just a few notes about the design:
- The design is completely liquid - shrinking or expanding to fill any available screen width. I've used ems (a unit which is relative to current character size) to specify most of the values in this design; pixels were used when appropriate due to an image or standard ad width.
- A 'master' style is used as a base for all the H3 elements, which is then overriden by the unique style declarations for each div. This means that a new section could easily be added; or existing sections could have their appearance changed.
- The form is both styled and accessible, which I achieved by adding and styling semantically appropriate labels.
- Initially I used a simple method to replace the browsers bullets with an image, however this method offers little fine control over the appearance of the list. I have selected a more complex method that enables tight spacing between between the image and text, and control over the vertical position of the bullet. The simpler 'accessible' style still exists in the style sheet.
- I've added a handheld stylesheet, which hides optional boxes, re-styles the boxes and list for better small-screen performance.
- I am aware that the images have an ugly background when viewed in IE6 or lower. This is because they are .PNGs with alpha transparencies. In a production environment, I would use conditional comments to replaced them with .GIFs with a solid BG color. However, I feel that this is not necessary in a speculation site.
- I encountered some IE rendering bugs related to hasLayout, which I've corrected them by using line-height instead of min-height to force a height on the H3 elements. This solution has the added advantage of a nice vertical centering effect on the H3s.
- Resume v2.0: circa 2006
- In the main navigation bar, the highlighting of the current and active section is controlled by CSS.
- The elastic width of the site prevents horizontal scrollbars when viewed through a very narrow browser window, without allowing the text line lengths to grow too long to be easily readable.
- The style declarations for the :hover link pseudo class are also applied to :focus and :active. This ensures that those visitors who are navigating without a mouse will see the same effects as those with a mouse.
- This site's main stylesheet uses image URLs relative to the domain so that a single stylesheet with no directory changes will work for all the pages in the site.
- This site delivers a different stylesheet to older and newer browsers, depending on their display capabilities. The few IE bug fixes that are necessary are handled via conditional style sheets rather than relying on CSS hacks.
- I've deliberately used a very large single stylesheet, rather than multiple stylesheets split up by function. A visitor's page loading can be slowed down when a browser must make multiple server calls to retrieve multiple distinct files.
- ReFIT Site Redesign: circa 2007
In early 2007, I completed a site redesign to match the rebranding of The Remodeler's Foundation to ReFIT. I created a completely CSS based (table free) design that would enhance the site's usability by making it more accessible to the very people it was trying to reach.
- On main header, I've used image replacement to provide a graphical header to most browsers while still showing a semantically useful header to screen readers and search engines.
- The new design uses completely flexible width, expanding to fill large browser windows.
- The navigation effects are completely text-based, which allows it to be understood at any text size, and even by screen readers.
- The new color scheme and main logo were designed by an outside graphics designer. I melded those new design elements with the those of the old site to create this new one.
- Table Styling Test: circa 2006
The following is an example of some advanced table styling; particularly column groups & a caption. The idea is to show a thicker border for the paired Percent and Rank columns the following table. Column group support varied by browser, so I put together this demonstration of possible effects to see which worked.
July 2006 Cash Variance Refunds Name Percent Rank Percent Rank Gateway 0 1 .428 2 Canyon Rd 0 1 .236 1 Clackamas .894 3 1.05 4 Tanasbourne .629 4 .52 3
Most of the table is styled using an additional stylesheet. However, the following styles are specified using a colgroup inside the structure of the table itself:
- Dashed gray border around the "Name" column.
- Thick left side border on both "Percent" columns.
- Light yellow background color for the middle column.
- Forced 100 pixel width for the last column.