Post Archive

› September 28, 2005

Web Essentials is happening

For those on the other side of the world who are currently wishing they were in Sydney right now, you can get your Web Essentials fix via Flickr images and if all goes well, WE podcasts.

Even more HTMLstamps

Just a quick note, HTMLstamps have been added for a somewhat obscure OS X layout app called Create (thanks Joe Chellman), as well as two versions of the stamps for OmniGraffle (thanks Marc Nothrup).

Find these free goodies at the bottom of the same URL as before.

› September 27, 2005

Consultancies

Like some sort of chemical process, renowned web dev bloggers are finding one another and coalescing into consultancies. Witness:

› September 26, 2005

Maintainable CSS

Simon Willison put a call out for advice on creating maintainable CSS. Here are some collected thoughts on the matter, please keep in mind that quite a bit of this is just personal preference.

  • Use as little CSS as possible, remove styles and parts of styles not being used or that were experimented with in the design process.
  • Use unique IDs as much as possible, these of course should only be used once per page.
  • Only use classes on elements that have any chance of being repeated on a page and in different locations, if the element is going to exist in a predictable location, target a sibling element of an ID'ed container instead - at least whenever possible.
  • Use as few browser hacks as possible, and document them with comments
  • Introduce your stylesheets with comments and explanation of how the particular sheet fits in with other sheets and with the site.
  • I am a proponent of multiple stylesheets for large and complexly styled sites, however keep in mind that in some environments the extra http calls will not be appreciated.
  • When considering multiple stylesheets, first make sure its really worth while - a single long CSS file can at least be searched easily ("find all instances of h2")
  • When using multiple stylesheets, I like to think of them as an extension of the cascade. A base styles file contains CSS rules that can be applied on every page, then create more specific sheets perhaps based on section.
  • Use a predictable format, some like grouped attributes, or specific orders. Personally, I like each attribute on it's own line, but as long as the format is consistent.
  • Group your styles with short and precise labels via comments
  • If you choose to wipe out default browser styles and start with a clean slate (see Eric and Tantek), document this somehow. I've found this to be very powerful in many ways (cross browser consistency for example), but it can be disorienting if you're adding to a style sheet setup this way

I'm going to consider this post open, and will add more to the list above if I think of other tips. Since this list is riddled with personal preferences, I won't be adding suggestions to it, but please feel free to add comments to the post, or maybe better at Simon's post or at the wiki page.

› September 20, 2005

HTMLstamps, new formats available

Our HTMLstamps were a hit. I think folks liked the idea of taking a web page design mockup and drag n' dropping markup icons onto it for reference. We received several emails asking for the stamps in different formats, some even offered to supply them.

So if you like the whole HTMLstamps concept, bookmark our new post on the subject. You'll find HTMLstamps for Adobe Illustrator CS1 and CS2, Photoshop CS1 and CS2, InDesign CS2, Macromedia Fireworks, and Microsoft Visio.

If you have a hankering to make other versions, hit me with an email, we'll list your file with a credit link at the new HTMLstamps post. Special thanks to Penston, Webb and Brown for the versions they supplied.

› September 18, 2005

Typetester - compare screen type

Early this year I built a little mini-app for the sole purpose of comparing web fonts on-screen in multiple environments. It was a bit crude, but very useful for the project at hand. I intended to add some features and release it as a free resource, but as a complete coincidence, Marko Dugonjić was cooking a very simillar tool over in Croatia - and he's had the time to add a lot of useful functionality, detail and polish. Bookmark Typetester, it's a really slick way to compare screen type for your web designs.

Believe it or not, I think there's still room for another screen type tool, although when I have time to work on it again, I'd concentrate on the features and aspects that differ from typetester, so as to not duplicate what's already available here in Marko's work. (link via a little bird)

› September 15, 2005

Launch of Web Accessibility Tool Consortium

Today organisations representing four continents announced the official launch of the Web Accessibility Tool Consortium - WAT-C. The new consortium is developing a series of browser-based web accessibility analysis tools under a general public license agreement.

view rest of article

› September 8, 2005

A Web Page Layout Tool

I keep having this thought running through my head, maybe posting about it will help. The thought goes something like this: Couldn't we have a web page layout design tool that is visual in nature (WYSIWYG) and yet completely directed towards those interested in semantic and well-formed HTML? I keep thinking that such a tool would not try to be like Photoshop or Illustrator or Fireworks, it wouldn't let you just draw boxes anywhere on the page and make a table out of it, or use absolute positioning to render it. The tool I'm imagining would be very much like Adobe InDesign.

Adobe InDesign, like other document layout tools, have structural components that could be converted to tie-in directly with the document object model. It has "Styles" that you can apply to many elements. Change a style once, and all the instances that use that style are updated - sound familiar? Now add in a grouping mechanism (divs), with unique identifiers (IDs) and allow these groups of content to have styles too. Add in style customization options that match up with what's available via CSS (padding, margins, floats), and you've got something.

I think this would be a really powerful tool, especially if the interface were such that it allowed rapid layout design and customization. One could establish a document-wide (site-wide) base style and then apply more and more specific styles for sections, pages and portions of pages. This would allow a 1 to 1 transition into HTML and CSS that is valid, clean, and more importantly - semantically meaningful.

There, now the thought is really stuck in my head.

CSS Syntax Checker for BBEdit and TextWrangler

Do you write CSS? Yes. Do you use BBEdit or TextWrangler? Yes. Go get Gruber's script made just for you. After a super easy install, just load up your CSS and choose the tool from the scripts menu - bingo, all the syntax problems are nicely reported to you in a way that makes it easy to track and fix.

addEvent recoding contest

Just a quick post to flag that the Dom Scripting Task Force has launched an addEvent() recording contest. As Peter-Paul Koch mentions: the prize will consist of eternal and undying fame. Sounds good isn't it? I believe that the three judges will make the right choice. Keep up the good work!

› September 6, 2005

CSS Gradient Demo

Chris Hester writes: "Until CSS gives us gradients we have to rely on background images - or do we? Here's a demo using no images whatsoever, just pure CSS."

WestCiv logo effect

Maxine Sherrin has a detailed explanation of how she created the Westciv website logo effect.

› September 5, 2005

Another tally in the Mint parade

If you somehow haven't heard about Shaun Inman's Mint, it's a reasonably priced application you can easily install on your web server that will automatically track the traffic going to your site. If you're using a blog system like Wordpress or MT or Textpattern, just add one line of code to your templates and all your pages will be tracked for you.

There are many traffic tracking apps out there, free and non-free, that allow you to track what's going on, but none that I've used are quite as well put together as Mint. Showing the right amount of information, in the most helpful ways - it's definitely had a lot of thought put into it.