Archive for August, 2003

SimpleQuiz › Headings › Conclusion

What seemed like an innocent little question to start off with, eventually become more of a informative discussion. So far so good, and I’m excited to continue on with this series. Note: Through the magic of Movable Type, I’ve set up a permanent spot for the quiz, which will collect all questions and wrap-ups in chronological order.

So what did we learn from Part I: Headings? I’ll go on to pull out some notable comments and then attempt to summarize what people thought would be Good(tm) Markup practices. Remember, one nugget to get out of this is that there is no one right way to do something.

Notable Comments

The majority agreed that B was the more semantically correct choice. Here are some interesting comments that followed.

vlad:

…if the site is being viewed with a device or browser with no css support, the heading will still look like a heading

Sunny:

B is the semantically correct approach although A will be valid mark-up.

And there I think Sunny nailed it, getting right to heart of Jason Kottke’s post.

Paul G.:

Using <p><b>…</b></p>, while perfectly valid, is semantically awful. It conveys no meaning about what is between the tags.

Andre Leistner:

It’s interesting to see a quiz on semantic markup being marked up using non-semantic markup (div and span). You could have used an for the choices.

Heh heh, oops. Absolutely correct, and quickly resolved. :)

The conversation moved briefly over to the topic of where to put the page title — does the site title belong in an <h1> or does the page title make more sense?

Bob:

I try to approach it in this fashion: If viewed completely unstyled, does the page look more or less like an outline, with headings, subheadings, etc.?

Paul G.:

Imagine printing out the document with no styling. The first thing you expect to see … when you look at the page is the document title. It makes sense to look at the page and see “Dancing Habits of the Capybara” or even “Capybaras.net – Dancing Habits of the Capybara”, but if all you see is “Capybaras.net”, you cannot immediately deduce what the document is about or whether it is relevant to what you are looking for…

Really great point here I think.

kirkaracha (easily the best name):

The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site.

It’s hard to argue with that.

Summary

In conclusion — why B?

  • We know that an h1 tag will degrade nicely and look better in all browsers and devices.
  • It describes what’s between it better than the other choices. It’s more meaningful.
  • Search engines will look to h1 for keywords over p, b or span tags. And even more of a reason to put your page title in there.

What goes in an h1: site title or page title?

  • Think of your page as an outline — be conscious of the un-styled structure.
  • Paul Gs test: if someone were to print the document, what should show up as the largest top heading? I’ll say page title.

Stay tuned for the next question.

SimpleQuiz › Part I: Headings

In response to Jason Kottke’s post on semantics and markup, I thought I’d try out a new series here called SimpleQuiz (I know… but it’s better than “Markup Quiz” or “Web Standards Quiz”). The objective is to ask some questions about markup and generate some discussion about preferred methods.

I may very well become either too busy or bored to continue these on a regular basis, but we won’t know until we begin. The hope is that these questions and answers would become useful little bits of information. I also won’t pretend to be the authority on any of these subjects. I may very well be asking the question because I’d like to hear how others would handle it as well.
So here goes… the first one is a doozy. Sure it’s incredibly obvious — but we have to start somewhere, and should probably make no assumptions.

Q: Which of the following is more semantically correct? (For the title of a document)

  1. <span class="title">This is a Title</span>
  2. <h1>This is a Title</h1>
  3. <p><b>This is a Title</b></p>

This Validates!

… The charge a designer gets when running a site through the W3C’s validation tool. Great, now this site is squeaky clean and there’s not a thing wrong with it! This is probably never true.
Jason Kottke has written up some very interesting thoughts on web standards and semantically rich documents. He has many valid points (sorry). But seriously, it’s a problem.
When designers see using valid XHTML as a religious activity, there’s bound to be little or no semantic structure to the document. That said, I can agree with Doug that creating pure semantic structure while at the same time making it look great is a challange that’s nearly impossible. Given the current state of CSS support anyhow.
But that’s where the balance comes in, and I’m reminded of Tantek’s A Touch of Class post from way back when. I’ve found that one of the biggest problems with newly authored XHTML is the overuse of the class attribute. The document might validate just fine, but there’s a class assigned to just about every element in there. Not to mention the possibility of table and font tags for presentation that Jason rightly points out will still validate despite the fact that they may be littering the code all over the place. I also attempted to comment on the subject back in April.
The validator is dumb (literally), and unfortunately is sometimes used to validate the designer first and the code second. We don’t have a semantic validator and probably never will, but the smarter we get about structure, the closer we’ll get to seeing improvements.
Like Dave, the best thing I could recommend to any designer/developer looking to really understand that balance is to pick up a copy of Jeffrey Zeldman’s new book Designing With Web Standards. Read it. Live it. The guy knows what he’s talking about.

Still Chewing

My (sugarless) Bazooka gum lost its flavor approximately 2.5 hours ago — yet I’m still chewing it.
Remember the bubblegum that came with Topps baseball cards? I loved that stuff. Hard as a roof tile, chalky as hell, but somehow delicious. It also would get wax all over it from the wrapper, which may or may not have added to the flavor. Unfortunately I’m told they no longer package the cards with gum like this any more. Those were the days…
Coincidentally, I’ve found that Bazooka gum is made by Topps. So there you have it. The next best thing I suppose.

CSS Photo Zoom

After reading Pixy’s clever Fast rollovers, no preload needed method for using a single background image for multiple hover states, it got me thinking. What if the concept was used to offer a zoomed view of a thumbnail image, right inline on the page, again using a single image?
Here’s the example, where I’ve created a single JPG image that contains both the thumbnail and zoomed photo below it. I then use Pixy’s idea of changing the background-position as well as the width and height for the :hover state to hide the thumbnail, but reveal the larger zoomed photo.
I’m not entirely sure that this is even a practical application of the concept — but it seems like it could work pretty well in certain circumstances, so I thought I’d throw the idea out there.
What to do with un-styled viewers? I thought that making a “View image” link that points directly to the thumbnail/zoomed photo would be acceptable, then hiding the link text with recently discovered text-indent: -1000em; trick. I’m sure there are other, more elegant things to do with a non-styled view, but this seemed the easiest, without creating an additional separate image.
I’ve only tested this on Mac: Camino, IE5.2 and Safari.

Sort of Unplugged

Click to view larger photoI’m on vacation this week and have just returned from a few days in Nantucket. Already, I’m missing the island lifestyle. We had an excellent time biking, kayaking, swimming, eating and drinking courtesy of my parents who were staying on the island for the week. I thought nothing of web design while I was there and it’s always good for the mind to take a break.
Now that I’m back though, I’m starting to think about things I’d like to write more about — here and elsewhere. I enjoy providing little tidbits that could potentially be of value to others, but I’d also like to tackle something a bit larger regarding the FC and Inc. redesigns. It can certainly wait till after vacation though…

Mini-Tab Shapes

And you thought that there was nothing more to be said about CSS tabs… In exploring navigation ideas for a new project, I wanted a mini-tab effect, but something different than the default, border-bottom that the method utilizes.

See the codeThe nice thing about the original mini-tabs is that the border will always be the exact width of the text above it — but you are stuck with a square tab. I started thinking of ways that I could simplistically style the tab portion differently. So I came up with Mini-Tab Shapes. Each style uses a single, small GIF for hovering and active tabs. The answer to my width dillemma (the fact that the width would change depending on the length of the word) was to make the tab image small enough and then center it using:

background: url(tab_rounded.gif) no-repeat bottom center;

Now, if your navigation only contains a few items, you could easily create the tab graphics to fit the entire width of the word — however if you’d like the text to be resizable, the effect would break. The possibilities for shapes go far beyond the four examples, and I’m sure would work well in a vertical list as well. Update: They do.

Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7

The Spoon Trick

I am about to share with you the greatest gift you may ever receive. It was passed down to me by my wife’s friend’s husband — Patrick. It is called “The Spoon Trick”, and it may save your life.
The trick is best revealed at a dinner gathering or reception. Any time you’re seated at a round table with people you only half know. There are usually awkward pauses in conversation at such events — but The Spoon Trick will break ice as thick as Alaska.
The key here is delivery. Casually pick up a spoon that’s in front of you at the table. If there aren’t any spoons, then you’ll have to request one. I find ordering soup or pudding for dessert makes the request less out-of-the-ordinary. The bigger the spoon, the better and if you’re lucky enough to find a soup spoon with a large, rounded head — you are golden.
View QuickTime movie (4.5MB)With one hand, hold the spoon with the handle standing upright and the back of the spoon facing you. Carefully align your middle finger and ring finger knuckles against the back of the spoon. Next, wiggle your pinky and first finger in an up and down motion. Do this a few times — only to yourself as a warmup, making sure your alignment is correct. Click on the thumbnail to view a QuickTime (4.5MB) movie which demonstates the correct actions.
Quietly lean over to your neighbor and say “hey.. check it out.” Then proceed to show them the “wiggle”, turning the back of the spoon toward them, while keeping your knuckles aligned so that they can see the reflection.
The next line is “what does it look like”. They will look extremely puzzled and shocked at this point. Do not stop. The important thing to remember here is that they’ll be laughing in a few seconds.
Your reply is “it’s a guy in the shower as viewed from behind and he is washing his feet.”
Laughter ensues… the rest of the table gets curious. The trick spreads. Everyone has something to talk about for the rest of the dinner. The night belongs to you.
Pass it on. You’re welcome.

Dot Dot Dash

I was just checking something in Internet Explorer 6 for the Microsoft Windows XP Home Operating System. Something I often forget is the fact that it renders dotted borders as dashed. I’m aware of the hack that was revealed not too long ago — and a good hack it is, but what kills me is that it is a bug so obviously noticed.
Wouldn’t that be something that’s easily fixed when going from version 5 to version 6? Maybe there’s a good reason for it. I can understand obscure bugs being replicated from version to version, but man… a dotted border should look different than a dashed one.
My apologies to IE6 users out there — I think my dashed links look horrible, but dashed they will be.

Permalink Progress

After reading the helpful entry Redirection Complete over at Stopdesign, I decided to try and help my old permalinks find their way to at least the correct monthly archive page.

Reading up a little on regular expressions helped me write this solution to my .htaccess file:

RewriteEngine	on
RewriteBase	/
RewriteRule	^2003([0-9][0-9])	archives/2003/$1/	[R]

There’s a similar RewriteRule for each year of archives. So now any old-style permalink pointing to something like /YYYYMM#123456789 will redirect to /archives/YYYY/MM/ which is that month’s archive. Not perfect yet, but at least a heck of a lot better.

There are also some additional links to helpful MT link conversion methods in the comments to the previous post — for those having to deal with the same scenario.