Applecore Portfolio
Avalon Dental
Screen shots
Two column layout
Rounded corners
Different menu designs for each menu
Current page indicators and hover indicators, too
Content images pulled outside their container with negative margins
The stretching faded vertical bar
See it shrink/stretch without breaking?
Accessible contact form with focus styles set.
The form error messages appear nicely a the side of the input
Look no style - semtantic HTML readable by humans and machines
Challenges / Solutions
Avalon Dental was my fourth design implementation at Applecore. I was really beginning to push very strict coding standards on myself and this project was my first attempt at CSS modularization. I wanted a global style sheet that handled the general text that I could re-use for future projects. The layout and the beautiful design effects would come through after the global styles were applied, overiding where necessary. I succeeded in my modularization and started to take modularization further in my next projects.
One big challenge for this design was the faded vertical bar that had to stretch with changing content length - no problem in modern standards-compliant browsers, but a pain in the neck for IE6. I got it in the end, though I had to use gif images instead of png images. There were other challenges, too, as I tried to maximize the use of text and minimize the use of in-line images. In the end, it is not perfect, but the designers had their way and got all the rounded corners and pretty buttons. I made sure it was valid code, standards-compliant, had "active page indicators" and was as accessible as I knew how to do at the time. Avalon Dental was the most accessible website built by Applecore when the site launched.
Turn off the site's style sheet and you see that there are no design images in the content - only content related images and structured text.
Credits:
- All content, design and development by Applecore Interactive
- See it for yourself at avalondental.ca