from:http://www.72dpiintheshade.com/
I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into the markup. Simply thinking through your process before starting each project will save you headaches as the site grows.
1. The clients brand is important.
To exemplify the brand with visual queues is key. Keeping the logo whole is an example. Now that traditional table based slicing and dicing is gone, we can keep the integrity of our presentational inline images.
2. Keep content images whole.
Images that reside in the content flow should be allowed stability in that structure. This includes the logo or any supporting images in the document. I really enjoy right clicking an image, especially a logo, and receiving a nice whole transparent PNG. Deciding up front is detrimental to keeping the integrity of the design and brand. Even the markup. This may not matter to your client but it matters to your colleges or future employees who might edit your documents.
How is this done. Take advantage of transparent PNG’s. Since the birth of IE 7 and it’s fluent injection in the industry, currently 25% of the market, we can now take full advantage of transparent PNG’s*.
*What about IE 6? Their are many techniques to relieve IE6 of it’s transparency bug.
Think of your composition as Photoshop layers. Keeping your images whole allow you to layer your images using z-indexing. Don’t forget that the Trident engine(IE) thinks the the stacking order starts at 0. The Gecko engine starts at 1. Carefully organizing your stacking order allows you to keep track of elemental layering.
3. Go with the flow.
A designer knows what’s best for the client and the user and will make specific decisions about where structure shall live, where the logo will be, where the primary call to action will live, etc. If the logo rests in the top left corner of the comp, it should also live in the top of the markup. Before starting, review the composition and decide what images will rest in the presentational CSS and what images will rest in the inline with in the document. Obviously if the composition shows the logo at the bottom it should still rest at the top of the document. Try and keep it close to what the designer or project team intended.
4. Complex layouts are made of simple sections.
Consider the value of each section of the site when dealing with complex layouts. For example when presented with a 3 column comp, determine the value of each section. Should navigation rest underneath the logo? Does content take reign over all other elements? Taking time before you start will save you a lot of headaches down the road. Here is an example of sectional ordering with three column layout:
- Logo/Branding
- Navigation (vertical or horizontal)
- Main Content
- Secondary Content (sidebar-two or supplemental content)
- Promotional Items (ads or internal promos)
- Footer/Copyright
5. Keep containers to a minimum.
Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.
6. Use the @import rule to organize your CSS.
Not only will the @import rule save you from an undesired effect with legacy browsers such as IE4, IE5 MAC and Netscape 4 (a few still exist!) it is easier to maintain. Since you carefully organized your document you will not be ashamed of your un-styled markup.
7. Organizing your CSS helps with future maintainability of the site.
Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css(if needed) and structure.css and on occasion a typography style sheet.
Here is an example of a “master” style sheet and how it is embedded in the document:
-
@import url("reset.css"); -
@import url("global.css"); -
@import url("flash.css"); -
@import url("structure.css");