Test-Driven CSS (sorta) at zahnster

When starting this task, I knew that we'd have to come up with an at-a-glance method for our developers to take the newly re-factored CSS and run with it.

This is an idea that I use. I have a file I call the style guide for each of my sites. It contains every CSS style I have coded of the site. The page tends to be long. Variations on ordered lists and unordered lists, definition lists, headers, paragraphs, buttons, and blockquotes. The ideas is twofold. One is to make sure that everything is working and not conflicting in some unexpected way. The other is to leave myself, or any designer who picks up the project, a way to see what currently exists and how to use it. It's not the perfect solution to CSS bloat, but it really helps limit it. If you know what's already in the CSS, you're much less likely to reinvent it when need to add something.

I was putting together a list of resources that I regularly use for someone, and I thought it might be helpful for someone else.

Firefox Resources

• Web Developer -  all purpose testing. Extremely helpful when checking CSS, but also good with images, forms, and other HTML elements.
• Firefox Accessibility Extension - evaluate accessibility on web sites and other HTML documents
• WAVE Toolbar - another good accessibility testing tool
• IE Tabs Plus - open IE within a Firefox tab
• LinkChecker - the name says it all
• MeasureIt - find dimensions of online content or space
• ColorZilla - find the exact color you're seeing in the browser.
• HTML Validator - a great validation tool for testing web pages.
• Fangs Screen Reader Emulator - emulates a screen reader for testing accessibility and other usability factors.
• Split Browser - open two pages in the same window.
• Live HTTP Headers - know what your page is loading, and from where
• FireShot - superb screenshot tool.
• Firebug
• Colour Contrast Analyser
• Multi Links
• Other helpful, extensions
  • All-in-One Gestures - makes browsing easier.
  • Profile Manager and Synchronizer - open multiple Firefox profiles at the same time.
  • Scribefire - designed as a blogging tool, it's also helpful for just collecting links and content in clean HTML.
  • IE View - switch from Firefox to IE in a click. No need to find the page again in IE, just open your current Firefox page in IE.
  • FoxView -open your current IE page in Firefox
  • OperaView - open your current Firefox page in Opera
  • Chrome View - open your current Firefox page in Chrome
  • Safari View - open your current Firefox page in Safari
  • Pencil Wireframing Tool

Resources for Internet Explorer

• Internet Explorer Developer Toolbar - Now built into base browser.
• Web Accessibility Toolbar for IE

Resources for Opera

• Opera Browser - A resource all by itself. If you're not familiar with it, it's another high quality browser that's useful to test pages in.
• Web Accessibility Toolbar for Opera

All Browsers

• xmarks - extensions available for most browsers.
• extension for government video

I'm still using the CSS Menu Writer that I got to evaluate. I have to say it's very slick. I'm working on a WordPress site that I hope to reveal soon, and it came in very handy. I've worked on tabbed navigation with CSS before, but this was relatively painless. A few quick menu adjustments and it gave me a set of beautiful tabbed menus. Of course it's never quite that easy. I had to track down a bit of a z-index glitch in IE6 and 7, but that was hardly the fault of the people at WebAssist.  The menus performed perfectly in my base page in all browsers. It was only when I introduced some additional CSS of my own that I had an issue. Why can't Microsoft come up with a browser that works as well as the new Chrome by Google seems to? If you're looking for a Dreamweaver plugin that takes some of the work out of clean CSS menus, I'd suggest giving CSS Menu Writer a look. Even if you use it like I did, to quickly build a base menu that I further customized, it is an incredible time saver.

If you are a site designer, or a site owner, you will at some point need to evaluate a site. Do the bones of the site stand up, or it is a screaming wreck hidden behind a pretty facade? The first thing I do is look at the source code.  Beautiful code isn't the final answer on site testing, but it's a place to start.  Is it table based, or a CSS layout? A table based layout should put up a warning flag. Table based layouts are outdated... you can do better. You want CSS. It's more adaptable, and more accessible to a wide range of technologies. You can also make significant changes to your entire site by changing just one file. A quick look at the code should be enough to tell the difference. If the source code is filled with <table>,<td>,<font>, and <tr> then you're looking at a table layout. If it looks more like <div id="blah-blah">,<h2> and <ul> then you're likely looking at CSS. Validation is my next step. Just because it validates, doesn't mean the page works, but it does rule out a lot of common errors. If you just want to validation check one or two pages, for to WDG HTML Validator and type in their URL. You will get an immediate evaluation of the page's validation status. Quick, clean, and simple. If you're going to do this often, go get the Web Developer or Html Validator add-on for Firefox. You are using the Firefox web browser aren't you? If you aren't, then download that as well as one of the validation add-ons. They're free, high quality products.The Web Developer add-on is a powerful testing tool. It has all kinds of bells and whistles, so it may be more than you're looking for. If you only want to check validation, then just go with the HTML Validator. It does that one task very well. If your site is CSS based, you can validate your CSS file too. I'd suggest CSSCheck or once again Web Developer. Then we get to links. Any broken links on your site? It's annoying, but sites come and sites go, and invariably you will end up with broken links. Try out the Online Link Checker, or the LinkChecker add-on for Firefox. Accessibility is also important, I'd suggest trying the OCAWA accessibility validator. There are other tools and add-ons around, but that will get you started. If you need more testing options, Web Developer has some accessibility functionality, and there is the Firefox Accessibility Extension as well. Want an overall evaluation of the speed of your site? Try out the Web Page Analyzer. It will let you know how fast your site is running on various bandwidths, and make suggestions for speeding it up. I would suggest sticking with Firefox for most of your testing purposes, because of the wealth of testing tools available. There is however, an Internet Explorer Developer Toolbar. In my experience, it doesn't work as intuitively or as well as Firefox's, but it does work. This isn't everything you need to know to evaluate a site, but I hope it helped get you moving in the right direction. Good tools always make a task go smoother.  Good luck.

The nice people at WebAssist.com are letting me try out their new CSS Menu Writer extension for Dreamweaver. I got a demonstration of it yesterday, and I've been putting it though it's paces this morning. It is exactly what the title would suggest, a CSS menu writer. Working through four tabbed menus, you can easily create fairly complex, and valid CSS menus. I'm very impressed with it so far. The extension works well, and is quite intuitive. The two most significant aspects I see, are that it uses no proprietary coding as far as I can see, and that I can create my own preset templates. This means that any menu I create using this should be editable by anyone with a knowledge of CSS, and that I can adapt the software to my own design style. This has the potential to be a very significant time saver for me. I'll go into greater detail when I've had a few days to try it out.

IE 6 actually had the best CSS support of any browser when it first came out... SEVEN YEARS AGO. - CSS-Tricks

Chris Coyier at CSS Tricks has written a very nice piece on IE6 CSS bugs. Anyone who's dealt with these will appreciate this list. Anyone who's fought with them and didn't know what they were will appreciate them more.

456 Berea Street is linking to a great discussion on accessibility.

But I am going to take this opportunity to re-inforce what I believe is the nature of our professionalism. We should make an effort to create accessible content, because it's part of our job. And frankly, it doesn't take much effort; it's not difficult. - John "brothercake" Edwards

Nicely written, and to the point. Accessibility is the job. A lot of our clients and employers can miss the point. We aren't making these sites for them. They know the content, they don't need the site for that. We're making the site for their clients, for whom accessibility may be an issue. When we worry about accessibility, we aren't being picky, we're doing our job.

The restructuring of the VTTI website is complete. They didn't want a redesign in the traditional sense, they wanted to update and improve what they had. I've updated the colors and textures, as well as improving the quality of HTML and CSS. The end result is a site with a simpler color palette, and improved overall functionality. The load time is down, and the design is now consistent across browsers and platforms. As a side benefit, it's also much easier to maintain and expand.

As you can see, it ended up looking a somewhat like the Alumni Association site, but that's not a big surprise. The goal with VTTI, like the Alumni Association, was to put together a site that met the University's requirements, without using their templates. They both wanted a site that was identifiably Virginia Tech, but was a little unique as well. Variations on a theme, rather than an exact match.

A List Apart has a great article on How to Size Text in CSS

.

In this article, we will reconcile the designer's requirement for accuracy with the user's need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.

How can you ask for anything more than that?

What type of image should I use online, JPG, GIF, or PNG? Simple question, but the obvious reply is another question. How are you going to use the image? One of my favorite quotations is Horatio Greenough's "form follows function". The function of an image should control the image's file type. A few things to consider:

• Is it a large image?
• Is it a photograph, logo, line drawing, or simple graphic?
• Are there file size requirements?
• What color profile is required?
• Do you need to match image colors with any other object on the site?
• Are there subtle gradations of color?
• Are there large blocks of a single solid color
• Is transparency required?

Once these questions are answered, the file type required is much easier to determine. Some tasks can be accomplished by all three common web image file types, others by only one or two. The need for subtle color transitions for instance would rule out GIFs, while the need for transparency would rule out JPG. If you need both of those things together, a PNG file is the only real option. Look at the function required, and use that to control the file type choice. JPG files are the best web solution for photographs, images with subtle variations of color, and images with large blocks of a single solid color. They also compress well, allowing for larger images to still have reasonable load times. They do not however, allow for transparency. This format also uses lossy compression, which means compression of the file causes loss of detail. The more compression, the more loss. GIF files are very good for logos, allow transparency, and use a non-lossy form of compression. They also allow for animation of images. The downside of this is that they only allow for 256 colors, so color matching can be awkward. Due to the color limitations, GIFs also do not reflect subtle gradations of color well. PNG files are a nice compromise between the two. They allow transparency, and can use up to 24-bit color. This allows them to use both the subtle color range of of the JPG, and the transparency of the GIF. In practice, I've actually had more luck with using PNGs for transparency than GIFs. Just as PNGs are better at subtle color gradations than GIFs, they also seem to be better at subtle gradations of transparency. The key here is to look at the purpose of the image. File type follows function.