Posts by Tim

Best practices day. Check!

Just wrapped up an all-day meeting about Best Practices, including a little time for discussion about HTML5, CSS3, and support for IE6. Here are today’s major decisions and accomplishments.

  • We’ll use the sprint halfway meeting for BP chats (meet once/sprint instead of once/week as we used to)
  • Deprecated old BP checklist; BPs now served by SAMPLE SITE ADVANCED, wiki, and Campfire chats, with blog posts providing the glue; Best Practices Queue page in Backpack is a good place to toss ideas
  • Component samples: SAMPLE SITE ADVANCED folders (we made two today: Flash, Tabs)
  • Component versioning: in SAMPLE SITE ADVANCED, versions inside a “versions” folder, indexed on component page (just an idea right now)
  • Identified high/low traffic sites for Universal IE6 candidacy, agreed that we’d begin using UIE6 (with a “how to” BP chat next sprint)
  • Could not quite articulate a general strategy for bringing sites up to BP; it depends on a variety of factors, and may change altogether depending on how old we let sites live to be
  • Figured we should wait on HTML5 until there’s more support; useHTML5 for one fairly low-traffic site to gauge impact on older browsers (possibly ColRel Editorial Style Guide, with all of its various content)
  • Agreed to try and share experiences about advanced CSS selectors we had rarely used before, but can now use freely because we will drop visual support for IE6

RSS Cloud

New WordPress Plugin called RSS Cloud lets aggregators receive your posts in real-time. More from Read Write Web:

Supporting feed readers will now be able to request updates from WordPress blog feeds as soon as they become available, instead of polling a server periodically to check for updates.

(Your blog posts typically get picked up by RSS aggregators 15 to 60 minutes after you posted them – this will change that.)

We should abstract our debugging process

Came across this set of Useful Firefox Extensions to Supercharge Firebug (Firebug is that Firefox extension for testing and debugging websites). Some of it might be useful, and some of it we do already via other means (like Charles or Safari’s developer menu). We should make a list of the needs these tools fulfill; then, for each need, list the tools we know about with any applicable opinions.

Some recommended reading

Aside from the folks we routinely discuss (Gruber, Kottke, Zeldman, JSM, etc.), here are a few folks I have enjoyed reading recently. I included some Twitter accounts too.

Andy Clarke
Started following Andy, an iconic web standards pro, about a month ago when he shared very thoughtful posts about web typography. He also posted Universal Internet Explorer 6 CSS, which is pretty cool.

Mandy Brown
I had seen Mandy’s blog once or twice before, but I remembered her because I had seen her in a forum recently and when I revisited A Working Library it had been beautifully redesigned. I read some, and I have continued to read. The blog does look good, but I subscribe for the writing.

Jonathan Christopher
Trying this feed out for a while. His posts are long, but pretty good. He talks about process a lot, and seems to look at everything from the ground up, and that’s an interesting perspective.

Justin Talbott
Trying this feed out for a while. This guy’s posts are more succinct. Sorta bookmarky, and on the technical side. It’s quite good. If he keeps sharing and sharing, that’ll be something.

Webfonts.info from Ralf Hermann
Ralf is very in tune with web typography and aware of bothW3C happenings and opinions on Typophile.

Joshua Porter
Josh Porter is a genius. For me, he’s in a category with folks like Brian Oberkirch, Chris Messina, and Clay Shirky. If you follow him seeking an occasional dose of forward thinking, you will not be disappointed.

WaSP InterAct
“A living, open curriculum based upon web standards and best practices.” Not sure about this yet, but it looked too good not to follow.

SVA Interaction Design
A bunch of web folks in New York are teaching at SVA, starting this fall. Keeping an eye on this program.

Animated CSS rollovers

If you haven’t seen the CSS hover effects at atebitsSimpleBits, orHandcrafted CSS, fire up your copy of Safari and set your mouse a-sniffing for links. This kind of subtle animation adds warmth to the experience, I think. These experiences, anyway. These effects could be made to evoke other feelings.

The first idea that jumps to mind is … suppose some element on the Drama or Powerhouse sites was suddenly bathed in a bright spotlight. What examples can you imagine?

Letting unpredictable content evolve

In today’s web meeting, we discussed a few different ways to handle a specific kind of website: mini-sites. Most of our websites represent a department, program, office, or institutional umbrella, but mini-sites are different. They usually arise out of the need to publicize a particular project or effort that is very time-sensitive and/or hard to get information about. Often, the combination of urgency and last-minute information leads to stressful moments (sometimes full days) devoted to finding a place for all of the new stuff we’ve been given. We can’t predict what will be thrown our way … and yet, it has to be online in an organized fashion.

Our options

So far, we have tackled situations like these in one of three ways:

  1. We create a new website in which to house the information
  2. We create and repeatedly tweak a press release, including related links and photos
  3. We add (or revise) a section in an existing website, where the content makes contextual sense

To these, let’s add a fourth alternative – the idea that arose in our meeting this morning – posting information in chunks, as “more info” secondary pages (announcements) and tagging them in some way so they produce a subnav and thus “see” each other. Kind of like automatically making a mini-site out of related pages, but without the effort (and grace) of crafting a mini-site design or architecture.

Times Topics

This approach reminds me of Times Topics. The Times just writes articles. If there’s more to say, they write more articles. If there are infographics to add, or videos, or slideshows, they each come into existence one by one. When there’s enough stuff, it makes sense to start referencing the appropriate Times Topic from the bottom of each new article or piece of multimedia. Each topic isn’t a new, crafted subsection of the Times; it’s an automatic place where related stuff naturally collects.

Take a look at the items in the Most Popular Topics list. Each varies in the kinds of things that appear in their sidebar areas, suggesting that this system can serve a variety of purposes.

Credit Crisis - News - The New York Times
The Times Topic page on Credit Crisis includes latest developments, an overview, multimedia, links to related topics, and article navigation.

To aggregated topics, there is occasionally static information added to provide an overview. For instance, see the Times Topic on Mergers, Acquisitions, and Divestitures, which is merely a list of articles, and compare with the Times Topic on Swine Flu, which includes latest developments, an overview statement, resources, documents, photos, multimedia, and coverage from elsewhere around the web, in addition to articles.

Might any of our past efforts have been handled in this way? First we post a press release, then another, then an event, then a document, all connected by topic and evolving to form a whole. At first, we might link from the Vassar homepage to the initial press release; but after that, we might link to the topic page that has accumulated the various related stuff. And if that’s not a clear enough message, we write out a short blurb that – if it exists – the topic page is all ready to display. Last, perhaps we add a list of resources and/or related Vassar websites.

What about our recent Swine Flu info? Or the Hardship Fund? OrRoundabouts? Would any of those have benefitted from an approach like this? Can you think of others?

Great article on character encoding

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

“… that meta tag really has to be the very first thing in the <head> section because as soon as the web browser sees this tag it’s going to stop parsing the page and start over after reinterpreting the whole page using the encoding you specified.”