I've been talking over the last months about things that interest me: namely ISPs, Cell Phone Technology, my kids, and I've discussed Social Marketing as well as some Social Media related events I've attended. Which, by the way, I'm drafting one about a recent Grand Rapids Social Media Luncheon I participated in. But, this week, I really wanted to touch on some best practices that I've found lacking in sites I've visited lately. There were non-working forms, miss-aligned graphics (most likely due, in part, to bad browser testing), large slow loading images and other issues.
I'm going to start with the large images. There is absolutely no call for giant graphics in websites. As web designers we have asked web tool companies, like Adobe, to add features to decrease image size. This is so, even on slow internet connections, our sites will load quickly. So why, after 14-16 years of some pretty good web design advances, I'm still finding people that are creating background images upwards of 200 KiloBytes?! I don't really care if 50% of your market is using broadband. A 200KB image is still going to take 20+ seconds to download on a DSL connection. Close to 60% of internet users are still on dialup in the US alone. If you want to comment more on this - bottom of page.
Next, there's this new thing called Grid Layout. And by new, I mean from 2007. Essentially, it has to do with using grid systems and column grids for website layouts. We can also apply the theory of a baseline grid with print techniques. On an article on A List Apart (ALA), I found this: "The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page."
I started using this technique while working as a contractor/consultant for a large local international firm. There was a guy there, ahead of his time, that has since moved on to an up-and-coming company on the West Coast – That started using it in a blog that we co-created the code. To me it was like an epiphany.
We've moved from the 3 column layouts down to 2 with best practices, but the theory remains. If you want your lines of text to line up, you have to use the techniques listed on ALA. It does take a little time at the beginning of your CSS creation, but like most of CSS, once it's done, it's done.
Before I discuss more about standards I need to define some terms:
Development layers
- Content and Structure- markup layer – HTML or XHTML
- Presentation Layer – CSS is referenced from the markup
- Behavior Layer – JavaScript elements that enable user events and interactions
- Software and CMS layers – have their own UI layer
- Teams and Processes - To build all of the above
Where to start
Web standards strategy starts at the markup level. It is where the offense of mixing HTML markup with the Presentation and Behavior details are usually committed. A web standards-based approach means creating markup that conforms to the specifications as closely as possible.
There are several reasons why you should be using CSS for your structural markup.
- Makes your pages load faster
- Makes your redesigns more efficient and less expensive and easier to administer
- Helps you maintain visual consistency throughout your sites
- Gets you better search engine results (SEO)
- Makes your sites more accessible to all viewers and user agents
POSH
POSH code (Plain Old Semantic Hypertext) brings meaning to content. It is a fundamental principle of web standards-based markup and will aid in fully reaping the benefits of modern best practices. Use POSH whenever possible in order to convey as much information about the content. By its nature, it also means that all presentation information is outside of the markup. Descendant selectors match any element inside another element having space between the 2 elements.
div p {color: red;}
In this example above, any element from a <div> element will be red. This technique can be used to IDs as well as Classes. Using this simple technique authors can remove the complexity from their CSS.
There is a term going around the coding community called “classitis”, which means putting too many classes in web sites markup and CSS. The term is a funny word for a valid concern. Having dozens of CSS classes to remember and reference is difficult for web authors and business users alike.
A more practical and scalable solution is to use element and descendant CSS selectors. These selectors automatically apply styles to XHTML elements without having to apply classes to every item.
Using the example below notice all of the classes being applied to the markup. This is an example of classitis.
The next example use descendant selectors to get the job done.
By using descendant selectors, we can eliminate redundancy in the code.
Here is the relevant CSS for the above example:
CSS Best Practices
Break style up into multiple style sheets.
Place your CSS rules in an external style sheet, so that they do not need to be downloaded again each time a new page is loaded. Use of Print, Global, Main CSS files helps with load-times as well as ease of browser/print display. Also use of Browser specific CSS files is preferred over hacking a Global Sheet. This means using a separate Style Sheet for IE6, IE7 and previous versions of IE (eg. IE5.5). It is possible to put W3C compliant Mozilla and Webkit styles directly into the Base or Global CSS
Build and test your CSS in the most advanced browser available before testing in others, not after.
If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won’t have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.
Naming Conventions
For naming conventions it is best if you name the ID or Class name to what it does not how it looks. Example: if you create an error class and choose to color the text red. ".errorRed {font-color: red;}" A decision is made to change the color to orange then the naming convention no longer matches the way the class looks, this can cause confusion to anyone besides the author that made the change. It removes from the markup what the element looks like.
ID names are unique in a document; you can only use them once in the markup. IDs are used for an element that does not need to be duplicated such as #nav, #nav-sub etc. Classes can be used multiple times. Classes in the CSS are represented by a "." In front of the name such as ".content", IDs are represented by an "#" as in #nav.
Use functional names for your classes, avoid words that describe how they look.
Applying Styles to HTML
For the most part, styles should always be applied with a CLASS attribute. Only use the ID attribute when absolutely necessary. Applying a style inline with the STYLE attribute should also only be used when necessary - hopefully that means never.
TABLEs are quirky in the various browsers. They are not "appropriate" to use for layout, they don’t to mix well with CSS, and they pose accessibility issues. It is best to use DIVS instead for layout. TABLEs are fine when displaying tabular data, but that is about the extent of their use.
Try to avoid applying padding/borders and a fixed width to an element.
IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it's best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.
Combine selectors.
Keeping your CSS light is important to minimize download times; as much as possible, group selectors, rely on inheritance, and reduce redundancy by using shorthand.
Use and Knowledge of Specificity
Understand the actual specificity of a group of nested selectors and what their calculations are per selector.
Use Web Typography Standards
Pixels and EMs for Font Sizes
Set the BODY to the designated size and allow the rest of the page to utilize calculations of that based on Ems. Ensure that the line height and word spacing follow the calculations. When you declare a font-family, include at least one semi-ubiquitous option for each major OS (Windows, Mac OS, Unix), and always end with one of the generic font keywords (serif, sans-serif, etc.)
Use the Liquid Layout where you can
The "Stretchy Layout" nicely fills all screen sizes without wasting any space. A floating Box layout could be preferable to allow for more content to fit larger browsers and mini-browsers alike.
Anchors and Images
- Hyperlinks should always be underlined unless they are in a group of clearly-defined navigation links.
- Use :link, :hover and :visited instead of "a" to set link styles.
- Use image replacement methods that are compatible with non-graphical browsers
Don’t use quotation marks around paths/URLs.
When setting a background image, or loading in an imported file, resist the urge to surround the path with quote marks. They’re not necessary, and IE5/Mac will choke.
After the last change, however, Klout's CEO feared (publicly) that he may have made a mistake. I think monetizing people's clout in Social Media was the first mistake, personally. But seriously, did your Klout "score" actually make you want to better engage your audience? Did it change you? Did you tweet more? Did you use Facebook better? Did you actually influence more people?
Comments [3]