Archive for June 2009

CSS grid layout – in one line

Via Nicole Sullivan: Vladimir Carrer‘s 1 line CSS Grid Framework.

Okay, so as he admits, This is just technical demo and I don’t advise you to use it in production, but still, it’s damned clever.

What Not To Do: getpresales.com

I listen to The Stephanie Miller Show, because I like my political talk mixed with a healthy dose of comedy. One of the ads that’s been running a lot on the show’s Internet stream is for getpresales.com, a site that alerts you to concert presale information.

You’d think that any site advertising on a syndicated show reaching a million or so listeners would have a solid business presentation. I should have suspected something, though, based on the mediocre quality of the audio in the ad, which sounds more like “podcaster with a USB mike” than a professional studio. So, too, did the announcer lack that verbal “pop” you expect from a professional voiceover artist.

Indeed, the quality of the site is commensurate with that of its radio ads. Seriously, go have a look. I expected the tickets to be for Hootie & the Blowfish, since hey, the site looks like it wandered here out of 1996.

Then look under the hood at the source code. Aiy. font tags! Repeated <br />! And then there’s this little gobbet of joy from the homepage:

<span style="color: #000000"><span style="color: #ff0000; font-family: verdana"><span style="color: #000000; font-family: georgia"><span><span class="newscontent" style="font-size: 130%; color: #fa1212"><span style="color: #0a0a0a"><span style="font-size: 16px; color: #0e0e0e; font-family: georgia"><span style="color: #ff0000"><font color="#0b0a0a"><font color="#4f08f3" size="5"><span style="color: #ff0000"><font color="#fc0101"><font color="#060606"><font size="2"><font color="#0c0c0c"><font color="#060606"><font color="#000000"><span style="color: #000000"><span style="color: #000000"><span style="color: #000000"><span style="color: #000000"><font color="#0d0d0d"><font color="#000000"><font color="#e60814"><span style="color: #ff0000"><br />
</span></font></font></font></span></span></span></span></font></font></font></font></font></font></span></font></font></span></span></span></span></span></span></span></span><span style="color: #000000"><span style="color: #ff0000; font-family: verdana"><span style="color: #000000; font-family: georgia"><span><span class="newscontent" style="font-size: 130%; color: #fa1212"><span style="color: #0a0a0a"><span style="font-size: 16px; color: #0e0e0e; font-family: georgia"><span style="color: #ff0000"><font color="#0b0a0a"><font color="#4f08f3" size="5"><span style="color: #ff0000"><font color="#fc0101"><font color="#060606"><font size="2"><font color="#0c0c0c"><font color="#060606"><font color="#000000"><span style="color: #000000"><span style="color: #000000"><span style="color: #000000"><span style="color: #000000"><font color="#0d0d0d"><font color="#000000"><font color="#e60814"><span style="color: #ff0000"><span style="color: #ff0000">

I don’t mean to come off like a design snob here. I recognize that not everyone has the talents or budget to present a bleeding-edge, sexy site. If I’m looking at “Bettie’s Homemade Jams & Jellies” on an AOL homepage, hey, an amateur design is totally fine. However, if you’re doing national advertising on the radio, it seems like the least you could do is drop $100 to that kid you know who does Web sites. (Everyone knows a kid like that.)

So hey, getpresales? You know your radio spot says your site is “well-organized and easy to navigate”, right? Before you drop some more dough on ads directing people to your site, consider getting said site out of the “I made my GeoCities page with HoTMetaL” era.

Round, round, get a round, I get a round

Inayaili de Leon writes in Smashing Magazine that we should start using CSS3 features. The article’s been reposted lots of places, including MetaFilter. I think my attitude can be best summarized by this MeFi comment from “rokusan”:

Any amateur web developer’s response: Cooooooooool!

Any professional web developer’s response: Yeah, yeah, yeah. Later.

I mean, hell, I’d love to use column-count, but even de Leon concedes its biggest flaw:

Browsers that don’t support these properties render the content as simple text, as if there were no columns.

Those browsers amount to about 70% of the market. Try to imagine a site that wouldn’t look horrible if you pinned its layout to column-count and then fired up IE7, the browser currently holding about a 50% share.

The biggest exception, of course, is border-radius, the key to image-free rounded corners. To quote de Leon:

Currently, it is probably the most widely used CSS3 property for the simple reason that rounded corners are just nice to have and aren’t critical to design or usability.

Indeed, I’ve used it here – and by that, I mean, “I’ve used it here, all over the place.” I’d never do so at work, not when 70% of our users are on IE, but this site has a target audience not known for its love nor extensive use of IE. Besides, IE users just get chunky, square corners, which is not a big lose.

Still, I look forward to the day when IE9 (which, fingers crossed, will have decent CSS3 support) has a large enough share. Rounded corners are something that visual designers just love love love, and drawing them with images is both clunky and a waste of bandwidth. I can’t tell you what a delight it was coding up the CSS for this site, since I’m used to the confines of image-based corners and the associated hacks.

IE, CSS pathnames, and redirects

When a CSS file has pathnames, such as to image URLs, they are supposed to be relative to the URL of the CSS file. That’s why we got utterly baffled at work when our background images looked fine in everything but IE, which didn’t display the images at all. (Here I mean IE7. We stopped giving full support for IE6, and haven’t yet started full support for IE8.)

Here’s what we learned: if the URL of the CSS file has a redirect, IE will use the original URL, the one in the <link> tag, rather than the true, final URL. This remains true even with a 301 on the redirect. This is, well, awful.

Given the project constraints, our best solution was to duplicate the background images from the server with the target URL to the server with the redirecting URL. Thankfully, in a few months time, when the project constraints change, we will no longer need the redirect and can get rid of one set of images.

Still, this bug is so frustrating and so contrary to expectation that when we sent around the solution for internal code review, our front-end system architect needed a lot of convincing since “that couldn’t be it”, and we had to carry him through the same stages of grief we’d just been through.

Word of warning: don’t put a redirect on a .css URL if you have relative pathnames.

MVC separation and our FAQ

I aim to code up my HTML semantically. There are a number of reasons to do so:

  • It’s part of good MVC separation, which is always a win when you reach the inevitable re-design of how the site looks;
  • It’s better for search engine optimization;
  • It makes your page more forwards-compatible, since Web devices that haven’t yet been invented will reliably display your page with some semblance of accuracy;
  • It’s simply the Right Thing to do.

For similar reasons, my workplace espouses unobtrusive JavaScript, again for good MVC reasons.

All of this came to mind when I recently built a new FAQ page for work. There’s nothing about this page that’s particularly revolutionary or awe-inspiring, but it did occur to me that this was a great example of how my own coding principles have improved over time.

Take a look at the page. The designers wanted a list of questions, each a clickable link, with an arrowhead next to each question. Click on a question and the answer would “pop open” below, with the arrowhead now pointing downward to indicate the “open” state. Click the question again and it closes.

Here’s how I would have done this five years ago: each question and answer would be a <div>, with ids with similar names, e.g. question2 and answer2. The questions would have hyperlinks in them, with an inline onclick handler like
<a href="#" onclick="javascript:toggleAnswer('2');">
That handler would take the argument and append it to the word “question” or “answer”, then use that result as the document ID to set style.display to "display" or "none". It would also change the src on the arrowhead image.

Yuck.

Instead, I did it the right way. First off, I recognized that this FAQ is a bullet list, so I coded it as a <ul>, using CSS to hide the standard bullets and instead use the arrowhead image. Each list entry has two elements inside it, with classes “q” and “a”; by default, “a” is hidden with display:none. Class “q” has CSS to make it blue and underlined so that it looks like a hyperlink. (Since it’s not actually a link, just a clickable element, I avoid the <a> tag here.)

Then I made a CSS class, li.open. That class uses the other arrowhead instead, and furthermore has
li.open .a {display:block}
Now we have a class that, when set on a list entry, puts it into its “open” state, with the proper arrowhead and with the answer visible.

Finally, we add the click handlers dynamically, using a JS library (in our case, Prototype). We take each element with class “q” in the list, and add a click handler that sets or removes class “open” as appropriate:

$$('#faqs .q').each(function(s) {
s.observe('click', function() {
this.parentNode.className = (this.parentNode.className=="open") ? "" : "open";
});
});

And that’s it. Clean HTML, CSS to handle the visuals, dynamically-added handlers to keep M, V and C separate. It’s a thing of beauty, baby.

Greetings, geeks.

At Ajax Experience in 2007, I was talking with Stuart Halloway about the Prototype library, and he said if I found any good test suites for it, I should blog about it. “Blog about it?” I thought. “I don’t put tech-geek stuff on my blog.” My friends and family have about as much interest in reading about CSS3 support as Web professionals do in reading about what I had for dinner and what I did last weekend. Besides, I hide my personal blog from search engines to keep out the spammers and other unwanteds. Over the last year and a half, though, I’ve found myself increasingly wanting to engage in public conversations about tech topics.

The solution, obviously: a tech-only blog. You’re reading it.

For those who don’t know me, my name is Jeff Yaus, and I’m a front-end Web developer by trade. I started writing HTML professionally thirteen years ago, and began working full-time as a Web developer a year later. Herein, find my thoughts, questions and grumblings about Web development affairs.