specializing in digital media technologies

I’m constantly running across different useful sites when it comes to choosing a Web page’s HTML, formatting, CSS, fonts, layout, and so forth. Here are a couple of notable ones:

FontTester, as you might expect, lets you play with different CSS and HTML options to adjust what fonts you use and how they are formatted. The page starts with up to three columns of sample text at the top. Then you can edit the properties of the individual columns to compare and contrast different effects. Once you have the look you like, including color, line height, indentation, and more, you can copy the corresponding CSS.

Similarly, there’s the htmlPlayground, for manipulating HTML elements. There’s a list of tags, and for each one, you’ll be provided with a definition and an example (both the code and the rendered result). You can then manipulate the HTML to see how the output is affected. This is as much of a reference as anything, but good references are always welcome.

If you’re new to CSS, you might want to check out CSS Basics. I think it’s a fairly straightforward, easy to understand introduction to Cascading Style Sheets. Once you’ve grasped CSS fundamentals, and found yourself wanting more, check out the exhaustive 84 Amazingly Useful CSS Tips & Resources. There are links to LOTS of good content there; just give yourself time to kill and don’t forget to take good notes!

Once you’ve got a site fairly well developed, you ought to do the professional thing and check its accessibility. This is a pretty easy step to skip, especially if you don’t have personal experience in accessing sites using non-standard tools. Sitepoint put together an article worth reading called 12 Tools To Check Your Site’s Accessibility. Some are software plug-ins that work with Dreamweaver, Eclipse, Firefox, or Opera; other tools are Web based, just like those used to validate a site’s HTML. Besides increasing the potential number of viewers for your site, making it universally accessible may even be something that’s mandated by the client. For example, I do a lot of work for educational institutions and the federal government, both of which insist on sites being accessible.

A valuable Flex resource, in case you’re not familiar with it, is Adobe’s Tour de Flex. If you’re doing any kind of Flex development, this really is a “must have”. Besides showing off what you can do using Flex (and Adobe AIR), the Tour de Flex provides a single, simple interface for referencing:

• Flex components (UI, containers, effects, validators, etc.)
• Services (data and network interactions)
• Cloud APIs (Amazon, eBay, Flickr, Google, Twitter, etc.)
• Mapping (Google, Mapquest, Yahoo!)
• Third-party tools

Most categories also have a “techniques” section, giving specifics for how to accomplish common tasks. There’s tons of sample code that are also visible in action, so you can easily understand how the code works in practice. And, of course, the related language reference is included.

Tour de Flex is available in both an online and desktop version (thanks to Adobe AIR for the latter).

I came across a product called Alkaline the other day, put out by Litmus. Alkaline is a Mac application that allows you to test a Web site on up to 17 different Windows browsers. It’s much like a Windows-specific version of BrowserShots, but guaranteed to always return quick results and with a few bonus features such as plug-ins that work with common text editors and IDE’s like TextMate or Coda. For more, check out this screencast. You should also check out BrowserShots, if you haven’t already. For the occassional browser test, BrowserShots is fantastic. For more frequent and reliable Windows tests, you may find that Alkaline is worth the money (they have a free version, a day pass, or different subscription rates).

Litmus also makes an application for testing how a newsletter will look in different email clients.