Hunter Can Help Info Page

Hunter Can Help Info Page

I took out a new domain name to help promote my web services. My idea is simple. Hunter can help with your website. It has the virtue of being true. I can use your existing business cards, brochures, letterhead, photos, and other marketing materials to produce custom web pages that show up in the search engines, display properly on all current browsers, and make your business more competitive. The page features a php contact form and image replacement techniques. Hunter Can Help

Laystrom Logo and Card

Laystrom Logo and Card

I designed a logo and business card for Laystrom_Buescher Hardware. The company provides metal doors and hardware such as hinges, locks, and handles for commercial buildings. The logo and card show what happens when client and designer successfully collaborate on a project.

The Door Store Page

Door Store Glenview

I designed this information page for The Door Store , Inc. It is a calling card that includes the company's business name, address, a Mapquest link, supplier links, and key information about the company.

A page like this is a great place to start promoting your business on the web. People often want a large site, but that requires a mountain of content. That means more time, more resources, and too frequently, a site that never gets done. It's better to start small, put the bottom line up front and develop content over time.

A page like this is affordable and most businesses already have what I need to assemble it. If you have a logo that I can convert for the web, some photos of your business or products, and the sort of information you would want in a Yellow Pages or newspaper ad, you have enough for me to put together an attractive information page. I can even help you get started with a domain name and a reputable web host. The Door Store Page

Badger Basket

Badger Basket is a multi-million dollar company. The Badger Basket site is a fully-operational commercial shopping site with an online catalog, cart, contact forms and more. I am in the process of updating and redesigning the front end. The code was originally written in 2003, so the old layout is all tables with inline formatting. Deprecated and obsolete tags abound, but it was state-of-the-art for the time. Also, it is an ASP site with some JavaScript and Visual Basic code. I am rescuing the site's content from table hell. Everything I do has to work with the older pages, and the new pages must still display dynamic data. Most of the heavy lifting is done, but I still have some work to do. Badger Basket Site

James Koehnline's site is a sprawling mass of materials spread over more than one server. He has galleries with work dating back more than 20 years, numerous interfaces for earlier incarnations of his site, animations, and other content. His site needed an update, but completely retooling his entire ouevre was out of the question. We decided to revamp the primary navigation pages, giving better access to his content. He chose the initial color scheme and designed his site logo. I modified the logo to give it some snap and created site graphics from work he had already done. I think it takes an artist to understand artists, and I am available to help build artist websites. Visit

CSS Hoverbox Gallery Viewers

CSS Hoverbox Gallery Viewer

I spent considerable time and effort developing effective CSS hoverbox gallery viewers. These are not so unusual. Stu Nicholls posted a bunch of them on his CSSPlay site. I studied his work, but my viewers are mostly built on ideas presented in Eric Meyer's Pure CSS Popups. Eric wrote simple, effective gadgets for making text or graphics appear at a desired location when the user positions the cursor over a link. I combined his techniques to make both text and graphics appear whenever the mouse hovers or rolls over a specified link. CSSPlay site Pure CSS Popups Part 1 Pure CSS Popups Part 2

Unfortunately, Meyer's code only allows one to see the text and images while the mouse is hovering. I really wanted to let the user press the button and have that lock the image on the screen. I did that with CSS :focus behavior. That works well in Firefox, but neither IE6 nor IE7 supports the :focus pseudoclass. What to do, what to do? As it turns out, IE sort of supports the :active pseudoclass. That is, when the user clicks a link with a style for the :active state, the link stays :active until the user clicks somewhere else. This is identical to :focus behavior, so I exploited that to make my hoverboxes work properly in IE. I also added rules to control the z-index of images and text. That solved the last of the truly annoying functional problems with the viewers. I've posted a page containing two well-behaved hoverbox gallery viewers. My Hoverbox Demo

I've stretched the notion of page styling well into the realm of page behavior, but I still have one more trick up my sleeve. When we talk about web pages, galleries, and the like, we focus on vertical scrolling. It's probably a conditioned response. The vast bulk of web pages are designed to scroll vertically; but my friend, Tim King, showed me a site that uses a horizontal scrolling gallery. I looked at it and immediately knew that I could duplicate the behavior using the :hover, :focus, and :active behaviors discussed above. So, I am writing a horizontal-scrolling CSS Hoverbox. I will post it as soon as it is ready.

The Mondrian Tribute Page

Mondrian Grid Experiment

I wanted to experiment more with the CSS box model, fonts, and format capabilities, so I wrote a page based on the grid structure of Mondrian's abstract compositions from the 1920s. When you hover over the blocks with the cursor, the blocks light up. Many of them also reveal tidbits of information about Piet Mondrian. This page is formatted and styled with CSS and only CSS. I used no images, JavaScript, or dependent files other than the linked style sheet. If you shut off the style sheet, the page boils down to a single column of unadorned text statements. That's pretty cool, actually.

The page works in Firefox, IE7, and other standards-compliant browsers. It does not work in IE6. I think I have a fix for it, but no time to work with it. I specified a font from the Lithograph or Lithos family. It's a fairly common font based on Greek lettering. If you don't have it, you can probably find the font online. I would have used @font-face, but it's still not fully implemented on any current browser. It's now part of Safari's WebKit, but it's definitely not in Firefox. The Mondrian Tribute Page

Web Design

Here are some of my web interfaces and CSS experiments. I write tableless, standards-compliant CSS and HTML code.

I have been declaring my pages either HTML 4.01 or XHTML 1.0 with the Strict doc type. I recently began using XHTML 1.1, which is similar to XHTML 1.0 Strict. I know my way around the CSS Box Model, and I've got a few tricks to keep Internet Explorer happy.

I handcode my pages and test them in IE6, IE7, Firefox 2, and Opera 9 on a PC. I use Firefox's developer bar to troubleshoot everything.

Font Weight Test

It's no secret. Many components of the W3C standards for CSS and HTML are unevenly or poorly implemented in current browsers. There is hope for better performance with the next generation of browsers such as Firefox3 and IE8, but font weights do not work correctly in IE6, IE7, Firefox2, and other browsers. This page tsts your browser's ability to display font weights. View Demo