Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

I recently finished a relatively large site involving 12 different page templates. When I was finished, I sent off all the templates to my client for production, along with one enormously long style sheet. The client was very pleased with the site, but wanted me to make things more “modular” – the production team was a large one and they needed for multiple people to be able to work on various sections of the site at once, using a version control software to keep track of changes. I had already marked up each page-specific area on the style sheet with comments, but apparently when my client’s production team tried to pull these sections out and deliver them only to their intended templates things were breaking all over the place.

In the second installment of my Energy Muse Case Study Series I will discuss how I accomplished this layout in a semantic way. The challenge was to connect each text lable with its corresponding image while maintaining the unique positioning of each and the visual of a line running between them. I also wanted the text to have a hover effect when its corresponding image was moused over.

When the Faux Columns Article on A List Apart first came out in 2004 it was pretty sweet information for a lot of us. Finally we were able to make our two- and three- column layouts look like those columns actually extended the entire height of the page, no matter what the height of their actual content.

Now I want to show you how to take that a bit further. Inspired by my work (in progress) of redesigning/recoding the Zend.com site, I will show you how I accomplished rounded, stacked columns (six of them in this case) with “more” links that all sit in the same spot relative to the bottom of their columns, as in this layout.

I recently finished developing all the xhtml and css for the Energy Muse site redesign. This gorgeous site was designed by my good friend Hong Vo at Namaste Interactive. Isn’t she amazing, folks? I mean, really, this design is so beautiful - it just kills me that I didn’t do it myself!

Building this site was a great experience for me. It posed many challenges and solving these challenges was fun and rewarding. It occurred to me that the solutions I came up with would be great to share with my fellow web-standards-minded web designers. In fact, the desire to share the story of this site was what finally pushed me to start blogging.

Please Note These “tutorials” are aimed at experienced designers with a solid foundation in xhtml and css. I am not going to cover any of the basic layout techniques I used in this site, only those techniques that I think might be of help in expanding the toolbox of other experienced web developers.

In this first entry I will discuss the development of the index page which, in olden times, would most likely have been a gigantic image map. But I wanted to mark it up semantically so that it was accessible to search engines, hand-held devices, people with disabilities, or those myth-like people I’ve heard about … those that have images and/or styles disabled for some crazy reason (do they really still exist … has anyone met one of them?).