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 my markup? Simply thinking through your process before starting each project will save you headaches as the site grows.
1. The client's 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:
- Navigation (vertical or horizontal)
- Main Content
- Secondary Content (sidebar-two or supplemental content)
- Promotional Items (ads or internal promos)
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"); <style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style>*
*Notice the capitalization in the media attribute. Capitalizing “Screen” will save you headaches with IE on Windows Mobile 5. Currently, I use a Plam Treo to access all my mobile online content. (Yes, I will be switching to an iPhone when available.) The Treo's OS is Windows Media 5. The browser is IE. Are you thinking the same thing as me? Yes, another IE browser to work with and eventually hack. And this one also has bugs. The biggest rendering problem is the mergence of presentational and handheld style sheets. You can imagine the disaster that creates. But their is a fix. If you capitalize the “S” in screen IE will skip the presentational CSS documents and render only the desired handheld mobile style sheet.
8. Organize your alt CSS documents
What about devices that do not rely on CSS style sheets? Since your structural markup is already organized the visitor should have a pleasant experience with the site. On any device with style sheets or not.
Alternative documents such as arual, print and handheld can be grouped together in a alternative directory. As you can see I place these alternative style sheets in a directory called “alt”.
Use the link tag for other style sheets as so:
<link rel="stylesheet" type="text/css" media="print and (min-width: 25cm)" href="css/alt/print.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="css/alt/handheld.css" /> <link rel="stylesheet" type="text/css" media="aural" href="css/alt/aural.css" />
Do the exact with IE bugs style sheets. Organize them in to an “iebugs” directory.
Use conditional comments to include your IE bugs CSS:
<!--[if lte IE 6 ]> <code><link rel="stylesheet" type="text/css" href="css/iebugs/ie6.css" /> <![endif]--> <!--[if IE 7 ]> <link rel="stylesheet" type="text/css" href="css/iebugs/ie7.css" /> <![endif]-->
9. Hook, line, and sinker
Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.
10. Body tag ID
In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. This also will cut down the amount templatatization (is that a word?). Not only will you be able to organize your sections you will be able to create multiple CSS presentations with out changing your markup from template to template or page to page.
For example if a 3 column layout requires being reordered from page to page. Such as columns switching places. This is easily achievable with the power of specificity and the CSS cascade. Simply adding an ID to the body will allow you to change anything inside and outside the document flow. This is increasingly useful when dealing with pages in CMS systems such as Wordpress.
That's it. There is so much more to cover, but these simple techniques will get you off to a great start. Until then…