arkitrave :: log

This might be more common knowledge than I realize, but the last time it came up on the CSS-discuss list, the results were inconclusive. I’ve been trying for some time now to style name-value pairs using definition list markup, with the two parts of the pair arranged next to each other. This is mainly for product information markup on the Fisher-Price site. I have been hacking around the problem for months, unable to get around IE’s inability to float and clear something at the same time. I hit upon an inline-block solution, until it blew up in Safari. Finally, I found the solution. I had been hung up on trying to float both parts and clear each dt. Turns out the trick is not floating the dd at all.

Given markup like the following:

<dt>Price:</dt>
<dd>$10.00&lt/dd>
<dt>Ages:</dt>
<dd>3 - 6 months</dt>

Simply write the following CSS:

dt {
float: left;
clear: both;
position: relative;
padding: 0 .5em 0 .3em;
}
dd {
float: none;
position: relative;
}

Simple. Really simple. But hey, it might be helpful. You can see it in all its glory at Fun 2 Learn, a new Fisher-Price brand site.

It recently came to my attention that the geniuses who programmed Internet Explorer for Windows handheld devices thought it would be no big deal for said browser to parse both screen and handheld stylesheets.

It doesn’t take an MIT grad to figure out that the entire reason for media types is that devices are different. A screen browser reading a braille stylesheet is obviously worthless, but a handheld reading a screen stylesheet is just as bad. In fact, it will often cause the handheld browser to crash. A site we just launched, which I’ll write about later, crashed the IE mobile browser with one CSS declaration of width: 590px;.

After two hours of debugging, I finally discovered that simply referencing the media type of the stylesheet as “Screen” rather than “screen” prevented the handheld IE from parsing the stylesheet. No other browsers appear to choke on “Screen”, so unless anyone has any better ideas, I’m declaring my styles as media="Screen,projection".

CSS is Worthless isn’t exactly about CSS being worthless, but it is an excellent summary of what I’ve been working on at my job for the past year.

When I was hired, I was known as a CSS designer. When I was asked to give a presentation to the company, it was supposed to be about CSS. I talked about HTML instead, only touching on CSS at the end.

HTML is the foundation of everything we do on the web. If the underlying markup isn’t pristine, no amount of window-dressing is going to compensate for it. Developers tend to go out of the frying pan and into the fire when they learn CSS, substituting non-semantic nested divs for non-semantic nested tables.

I’m pleased to say we’ve made great strides in the past year. Active Gear is a small site, but uses not only mostly standards-compliant code, but semantic HTML which (I hope) does a reasonably good job of marking up the content.

This wouldn’t have been possible without some great developers, who were willing to work with me to modify some server-side code to generate better markup. For example, there’s a server control which generates the thumbnail images and names. The old version of this control is table-based and completely non-semantic; the new version uses definition lists to communicate the meaning of the data. Bottom line - the site looks good naked as well as fully-clothed.

This is also the first site to use a new javascript class I have been working on for standardizing product and thumbnail page behaviors. Good markup makes scripting a lot easier as well!

If you think you need to learn more about CSS, go retro and learn more about HTML first. (Or unlearn what you learned in web design school.) Start thinking about semantics first, style second. HTML is the new CSS.

All restaurants cut corners. Even the good ones. That’s OK; it’s how they stay in business.

Choosing which corners to cut makes the difference in whether or not I’ll return for another meal. My wife and I recently ate at Vado Pazzo (3112 Main St), and the food was quite good. The service was mediocre (for example, the waitress asked me if I needed a plate to share my wife’s gnocci, I said “no,” and she brought one anyway. Then she told me “I know you said no, but I brought you one anyway.”)

I really did enjoy my food; I had a modified-caprese salad with seared scallops. I love scallops, and these were perfectly carmelized and very tasty with the fresh mozzerella on the salad.

But what really killed me was the bread. At first I was impressed - it was warm. Then I got to the middle of a piece, and the core was still frozen.

If you’re going to cut corners and thaw bread, at least don’t let me find out about it.

This day ended with a lengthy bowling party at UT Austin, and it’s really freaking late. I got to bowl on a team with Mike Davidson of Newsvine, Bryan Veloso of Facebook, Jenni Verduzco, Steve Smith of Notre Dame, and Mark Boulton of the BBC. Despite all this immense talent on one team, we didn’t make it past the first round. But it was the best after-hours event of SXSW so far.

The panels were great too, but I’m not going to go into too much detail, as it’s very late.

Web Standards and SEO

This was mostly confirmation of what I already know: write good semantic markup, geared toward users, and you will (mostly) be rewarded by search engines. Designing for accessibility parallels good SEO practices, so you get to do the right thing for disabled users and be rewarded by good search engine results at the same time. This parallel nature is not directly proportional, however.

Don’t hide content from search engines. Don’t practice black hat SEO.

The front page is important; make sure you have high-quality links. Also, if you have control over what people use when they link to you, try to ensure that the text within the <a> element is descriptive. “Click here” is terrible link text; search engines use that text to determine what the targeted page is about and give it relevance.

Microformats

Best. Panel. Ever.

This is a great subject. It’s something that gets me really excited about the web. Check out the Microformats site for information about microformats.

The power of microformats, combined with an API and search capabilities, is stunning.

• Principles keep things micro
• Process keeps things real
• Community minimizes duplicates

Process for developing a microformat:

1. Pick a specific problem and define it
2. Research and document current web publishing behavior
3. Document existing formats in the problem area
4. Brainstorm with implied schema
5. Iterate within the community

An example to highlight the amazing possibilities of microformats: the page was created by taking the published schedule of SXSW evening events, placing them into a microformat, mashing it with Google Maps, and placing it all on one page. Also, using iCal’s API, these events can be downloaded to your desktop calendar.

All this is done through using standardized markup adding semantics to standard HTML elements through the use of class names.

Now, the Flock browser has built-in support for microformats, and can aggregate information from all the sites you visit and organize it.

Great stuff.

Content Distribution to the Mobile Web

Not much of interest here. Basically an excuse for a couple of mobile providers to hawk their company’s wares.

The only point of interest is that European companies are doing much better at letting go, and allowing third-party content to come into their sites. This is user-centered. Much of what American companies do is to try to keep people on their site, and keep them using proprietary systems. Well, people are just going to leave the site anyway if it sucks (even if you don’t have any outbound links) and people will just stop using the propietary system and start using flickr (for example).

WaSP

Accessibility is about empowering people.

Acid2 test - according to Molly, it was developed by Opera to shame Microsoft into supporting standards in IE. Using a vendor to make this kind of test is probably a mistake, and the next test will be developed by a cross-vendor panel.

JavaScript should be unobtrusive.

None of this is revolutionary, as I already follow the web standards movement and know what they’re up to. Still, it was interesting to see all these people in the same room.

Chris Wilson from Microsoft talked about IE7 a bit; they really have done a much better job than in the past, and I’m looking forward to seeing what the browser ends up looking like. I’m not holding my breath, but development should be a lot easier even if we don’t see the basic CSS2 features that really should be in the browser by now.

Design Eye for the List Guy

A panel of amazingly talented guys redesigned craigslist. It looks good. They talked about their process. The new craigslist home page and new listings page…clean, well-organized, really sort of a, well, a realignment. Check it out.

That’s all for now. Over and out.

Design and Social Responsibility

This was a good panel, though a little dry in the presentation. I tend to prefer more conversational, interactive panels to those in which each panelist presents their little 10-15 minute package with separate powerpoint files. But, the information was good. The portion on accessible Flash was thought-provoking; I’ve been thinking a lot lately about alternate content as a replacement, and this is just another extension of that idea.

What are our responsibilities?
Basically, the web is about people, not technology. We can’t accept the way things are. We exercise humane principles in other areas of life; why not the web?

Examples of technological difficulties: Microsoft Word predicting what you want, Flickr (try sharing photos with Mom…), things I don’t actually want from Amazon, despite their algorithms, difficult checkout processes, and forms with “clear” buttons. Nobody needs clear buttons; they just typed in the information!

The good news is that we can do grassroots activism and effect change gradually and incrementally. More usable technologies are always more accessible, but not necessarily vice versa (accesskeys screw up the browser controls).

Think like your users. Step away from the visuals. Start with the usability/content/text, then move into graphics afterward.

Remember, Google is deaf and blind.

What should technology look like?
Technology should serve people and improve their lives. It should adapt to people. 1) Tech is a utility, like electricity. 2) Tech should be simple. Feature lists should shrink, not bulge. MS Word has too many features. 3) Tech should be ubiquitous. 4) Tech should be contextual. 5) Tech should integrate into our lives. Solve needs first.

Technology is not the solution; it’s the utility that supports the solution.

Accessible Flash
96% of the 6.2 million US disabled students are in the mainstream after 1997 legislation. Thea showed an example of an accessible Flash game. The experience for a blind user is different, but they can still play the game. They complete sentences that are read to them instead of positioning the tiles on the screen. This doesn’t take too much extra effort if it’s planned from the beginning of a project. Her firm has done many accessible Flash games for kids.

Clients say “The web and Flash are visual tools.” These accessible Flash games work for non-sighted people. The web isn’t just visual. For disabled kids, tech is everything. They have and depend on many gadgets. Tech levels their playing field.

Cleints say “We’ll have to sacrifice interactivity and fun.” The truth is that accessibility in Flash often means more usability (exposed states, control over sound, etc). These are things that improve the user experience for everyone, not just the disabled.

Clients say “It’s too time-consuming and expensive.” But, it’s a lot easier to incorporate from the start. You show social maturity, do the right thing, and set the example for everyone to follow, instead of closing the door on part of your constituents.

Conclusions
We need to learn how to sell this stuff to Marketing. There are benefits outside of just disabled people. Don’t focus on the technique. Everything is expensive if you don’t plan for it.

Tagging 2.0

Not a bad overview. This was more well-done than yesterday’s panel on Tag Clouds for Grandma. It highlighted issues and problems with tags as well as the reasons why tags are around to stay. Still, there was duplicate information presented, and much of the thoughts were things we already know (who has used delicious and not run into the problem of delimiters…?)

Uses for tags: re-finding information, personal metadata, new command line, tags as verbs? (buy/sell/print). Helps with focusing on the user’s view, not the system itself, links users by interest, helps people learn about things they don’t have the jargon/vocabulary to research in other ways. Issues: Tag Spamming. Implicit tagging is good and bad…our interests change and we get smarter over time. A huge issue with tagging is the interface; how do we make it interesting and fun to tag, as well as really easy?

Tagging looks messy to others - tag clouds aren’t understood by the masses.

Six dirty secrets of tagging: 1) It’s the content, stupid. 2) Ordinary people don’t get tags. 3) It’s the UX, stupid. If tags work, it’s because lots of attention has been paid to the UX. 4) Tags don’t play well with others. Delimiters are a problem. Character sets are a problem. Singular/plural. Shades of meaning. 5) Rich functionality requires rich metadata. We don’t want to hunt terrorists with tags. 6) Nobody wants REAL tags. We want “tagginess.” People are experimenting with hierarchical tagging, which flies in the face of the whole idea of tags by creating folder structures.

Reasons for tagging - mainly, categorization is hard. Trying to put things into category boxes doesn’t work all that well, and tagging gets around that problem by allowing many words to be used. She talked a little about the wisdom of crowds; groups can be wise under the right circumstances, and she feels tagging is one of those. Tags are good because they support cognative diversity, decentralization, independence, and easy aggreagation.

Tips for use: 1) Serve individual’s motives. 2) Does the individual understand and support the goal? 3) Social vs. personal. 4) Too easy to mimic the tags of others - try to keep autonomy of the tagger. 5) ? 6) Enable discovery. 7) Let users do what comes naturally. 8 ) Ensure good findability.

Lunch

Twelve of us went to lunch at a mediocre Thai restaurant with glacial service. It took so long to get out of there that we missed the Mobile Web panel completely. Here’s me at lunch.

Web 2.1: Making Web 2.0 Accessible

This was an excellent panel. Derek Featherstone kind of stole the show, and the moderation kind of made me feel like I was in gradeschool, but there was lots of content.

Components of web accessibility include author tools, evaluation tools (validators etc), developers, users, user agents (browsers), assistive technology, and content.

A good amount of time was spent discussing the new WCAG guidelines. Basically, this new version is technology independent, rather than just focusing on HTML. The guidelines are also testable, rather than nonspecific (5:1 lumosity ratio, rather than “sufficient color contrast”). She recommends that you read Understanding WCAG 2.0 instead, as the actual guidelines are pretty technical.

We have a myth that things need to work with JavaScript on and off. What about a screenreader running on top of IE6 with JavaScript turned on?

Derek talked about issues: we need lots of testing. Tabbing through documents needs to work (CSS image map example was used). JavaScript libraries should build in accessibility. Go Test With Users.

It’s not just about people who are blind, either. There are many different types of disabilities.

Matt works for Bank of America. When he started, the web group was controlled by Marketing, and couldn’t do accessibility. Now, the group is called the “User Experience Group” or something like that, and it has veto power over Marketing.

How to fix things today: Keep it simple. Go back to basics. Do JavaScript, but degrade, and keep your HTML pristine and semantic. Flash does remote scripting better than Ajax in many cases; it’s had a lot more practice.

We need to make accessibility cool.

Holistic Web Design

The idea was 5 people. 5 cities. 5 skillsets. Create a website redesign working together as a team. Jason Santa Maria (graphics), Carl Sieber (HTML and CSS), Garrett Dimon (usability and project management), Eris Stassi (information architecture), and Shaun Inman (JavaScript).

The site was plazes.com, a social map-mash site to find your friends around town. The site, as you can see, has some problems. But this posse fixed all of them.

We have a myth of separation in design - really, all our parts integrate with each other. Involve everyone in the group. Share. Communicate. Educate. Respect Everyone. Compromise. Remember the Big Picture.

Interaction Design: Eris used two forms. First, a page which asked the Intention, Goal, and Question of each main page on the site. This helps to get rid of things users don’t need or won’t use, and leaves things open for the graphic designer to create, rather than force-feeding him wireframes. It’s goal-oriented rather than layout-prescriptive. Second, she used page description diagrams to lay out priorities for each page. No layout or design yet.

Graphic Design: Stan used his sketchbook, started with the logo. He passed around the sketches to everyone on the team, not just finished comps. This brought everyone into the project and allowed them to give feedback. He works from sketches to gray boxes (no color, just layout) to finished comps with color.

Markup: Nothing revolutionary here, and the snippet of code he showed wasn’t so hot; it should have been a definition list instead of a name/value pair separated by a <br> tag. He made validity and no hacks a priority. Putting in hooks for Shaun to script with was easy. He used sIFR for type, sliding doors for a couple page controls, and faux columns to keep columns looking equal height. Remember, the <form> element is a block container; you don’t need a div around it. Use comments to close div tags to keep track of your code better. [note: comments after closing div tags when boxes are floated can lead to ugly IE problems]

Scripting: The site used Google Maps and it’s API. He used modular code so that there would never be conflicts with any other script. He tried to minimize touch points with the HTML and maximize flexibility of the code. He built a better buddy list - you don’t need everyone in the world showing up; just the people in your area.

Accessibility: This actually seemed to be more of an afterthought than it should have been. Derek was consulted, but they didn’t implement many accessibility features.

Some notes from the demo of the site, in no order: “Everything on a page should beg to be there.” Hierarchy of the page is important - everything can’t be the most important thing on the page. Whitespace should be there, but not trapped in the middle of the page. Pay attention to templates with multiple states; some of these states may have whitespace problems.

This was a great example-based panel, after a day of theoretical academic exercise. Their parting thought was especially vital for working with multi-disciplinary teams: Everyone should know and be able to talk about everyone else’s part in the project. People work so much better with each other when they respect and understand each other’s roles. Take a developer out to lunch. Educate each other. This makes for effective teams.

This was an amazingly talented group, and they all have a mutual respect for each other. But, these ideas are portable. I’ve found in my own work for Fisher-Price that I have a couple developers I’ve spent a lot of time talking to and demonstrating things. These developers work with me, not against me, when I hand something off to them. We end up with a really good product, because we each know what the other’s job is, and we respect each other. It sounds basic, but it’s vital to an effective working relationship. Front-end people who despise developers and developers who think front-end people aren’t real coders can’t get anything done in teams. Get educated about what the other people in your workflow do.

A Dinner Panel

There were nine at Chang’s for dinner. A much more pleasant experience than lunch, and great conversation. I met the guys from Godbit and CSS Beauty, and Nathan Smith and Dave Seah got into it over the legitimacy of being part of a network of sites (not that I’m going to name which network they may have been talking about…)

This turned into a couple-hour conversation that was as good as some of the panels I’ve been to. Too bad nobody was recording it, so there will be no podcast.

It’s late again. Tomorrow looks to be a great series of panels; I’m having a hard time deciding what to attend, and there’s one time slot that I really want to be in four places at once.

Today was traveling and getting to know my way around Austin. I hung out with Erik, Dave Seah, and Jonathan Snook. We picked up our bags of swag and caught dinner at Daddy’s bar, with 22 beers on tap. Walking around Austin, we said hello to Jon and his friend Alan, and Robert Nyman and Daniel H of Sweden. We talked with Carl Camera in the Hilton lobby. And we waited in line to get into the Ginger Man for a way-too-crowded party, where we met Molly and Andy Clarke. Now it’s (way past) time to get some sleep. I’ve chosen the panels I’m going to attend tomorrow, and I’ll try to write a bit about each of them.

I just read an article that ended with: “Illegal downloading costs the movie industry 5.4 billion dollars a year.”

I don’t know about anyone else, but I’m sick and tired of these idiotic assessments from the movie and music industries. These overinflated numbers are based on the MPAA’s (and RIAA’s) moronic assumption that everything downloaded would be purchased if it weren’t downloaded.

If a twelve-year-old downloads $500 worth of movies, that is NOT lost revenue for the movie industry. The twelve-year-old had only $10 from his allowance money, and would not have bought the movies if he hadn’t downloaded them.

I know plenty of people who have downloaded a CD from a p2p network and then gone out and purchased that CD. That is not lost revenue either.

Other people download music and decide they don’t like it. They wouldn’t have sprung for the CD if it cost $18 at the store, just to see if they liked it. That is not lost revenue.

Basic supply and demand suggests a tension between what I want to have and what I can afford to have. If music is a free good (p2p downloads), it stands to reason that I’ll “buy” a lot more than if music is expensive. So, the idea that a consumer’s purchasing actions are identical when a good is free and when a good is expensive flies in the face of basic economic principles (not to mention common sense).

I’m sure there is some lost revenue from downloaded music and movies. But to use overinflated numbers for shock value is reprehensible. And shame on the press for reporting this so irresponsibly - the media should not regurgitate the numbers the RIAA gives them; they should check things out for themselves and report as accurately as possible.

So, I’m printing about 100 sheets of a letterhead. And 30 sheets into the job, I get an error that the black ink cartridge is out. My only option is to change the cartridge or cancel the job.

I would prefer that the printer try to print, and let me judge when the quality reaches a point that I can’t tolerate. So, I open the printer, remove the cartridge, and re-insert it. The error message pops up instantly again. No black ink. I can delete the job, stop the job, or stop all jobs. These choices are slightly less than satisfying.

Interestingly enough, I have the old ink cartridge that did run low and start to produce low-quality prints. I forgot to return it to the mother ship for recycling after it ran out. I hold both of the cartridges in my hands. The one that is supposedly “out of ink” is noticably heavier than the one that actually ran out of ink weeks ago. Curious, I insert the nearly empty cartridge in place of the one that I know is nearly full. Like magic, I’m back in business and printing up a storm.

With a little research, I found this article on a lawsuit against HP. Seems that they have been doing some programming on the sly, and setting dates for the cartridges to keel over and die even if they aren’t out of ink. It seems that this is to nail those who, God forbid, refill their ink cartriges. The horror.

The problem with this kind of 1984 tactics is obvious. I feel ripped off, having spent $25 on an ink cartridge from which I only got $5 of ink. In a world where half the cost of a new printer is the included ink, I’m really inclined to trade in my HP for a company that doesn’t engage in these kinds of dirty tricks.

Don’t look over your shoulder, but they’re watching you.

Last week I began a full-time position at Aurora New Media (the website still has the old name and logo). Aurora is a full-service software and web development company about 15 miles from Buffalo in East Aurora, New York. It’s a great company to work for, and I’ve enjoyed my first week. Their largest client is Fisher-Price, and they are also responsible for the Buffalo News’ online presence. Incidentally, the’re looking to fill several positions, including developers, network engineers and graphic designers, if anyone’s interested.

I am working as a graphic designer in the Fisher-Price group. It’s a great team of designers, and a laid-back casual work atmosphere with toys everywhere. Did you know there was a Chicken Dance Elmo? (warning: turn your sound down…) I have one on my desk. The work involves graphics and coding both HTML and CSS. It also involves an ASP.NET backend that generates lots of table markup. I have so far escaped coding any tables, but it’s going to be interesting as I try to figure out how to interact with the backend. I’m currently researching how to dynamically generate CSS using XML files and asp, if anyone has any experience or tips on this.

Obviously, discussion of work is controversial, and I will not be writing a lot about my job in this log. I am still available on a very limited basis for freelance work, provided it does not conflict with the interests of Aurora. I am disappointed to be finishing what will be my last project for Nepo Strategies; I’ve enjoyed working with Rob and his team over the past year.

Oh, and it was my birthday on the 14th. Happy birthday to me.