Archive for ‘simplequiz’ category

Web Standards Solutions, Special Edition

It’s been a long five years since it was orginally published, but last month month a new Web Standards Solutions, Special Edition was released by Friends of ED.
book coverLate last year, I gave the manuscript a little freshening up, mostly reviewing things in the crop of browsers that have been released since the initial version. I’ll stress that this was not a large overhaul of the book (hence Special Edition rather than Second Edition), so if you’ve already read the original, or own it, you’re better off spending your dime on another book.
But while it wasn’t a giant update, it was nice to give it some extra attention, and pass it through through tech editing, copy editing, compositing and proofreading cycles once again. In the end, I’m really happy it just made the book that much more solid for folks that haven’t read it—and hopefully still a good introduction for those getting started with semantic markup and CSS.
In other book news, I’ve been toiling away on something brand new, and look forward to sharing much more about that very soon.

SimpleQuiz › Part XVII: Conclusion

In looking over the comments on the latest SimpleQuiz (after 17 of these, I do wish I had named it something different), it seems the original goal has been skewed a bit.

Instead of focusing on why certain methods are better than others, a majority of opinons focus on the fact that certain methods are outright wrong and you should be ashamed for even thinking about them.

The hard work of the W3C can sometimes be vague regarding certain elements (perhaps they have reasons) and certainly the use of some elements can be interpreted in a variety of ways. This can be frustrating for those seeking a “correct” way to handle x, y, and z. But really, through these quizzes, we’re just trying to get an opinion on why you’d prefer one method over the other–what are the consequences?

So with that, I offer a bonus question:

Q: Which response is more beneficial?

  1. ____, ____, and ____ are wrong.
  2. Your method is useless.
  3. I hate markup.
  4. Let me tell you why I prefer _____ over ____, ____ and _____.

SimpleQuiz › Part XVII: Addresses

It’s been quite a while since the last SimpleQuiz–but Dave Shea has ended the drought with a question on marking up addresses.

And I quote (essentially verbatim from Dave):

Snail mail addresses are a series of details, most of which require a physical break between each line. This is very much presentational, but important presentation to reflect even in the unstyled view. What is the best way to represent an address in this format:

ABC Widgets, Inc.
100 – 1234 West Main Street
Anytown, State
Ph: 555-555-1234
Fax: 555-555-1234

  1. <address>
      ABC Widgets, Inc.<br />
      100 - 1234 West Main Street<br />
      Anytown, State<br />
      Zip<br />
      Ph: 555-555-1234<br />
      Fax: 555-555-1234<br />

  2. <div class="address">
      <p>ABC Widgets, Inc.</p>
      <p>100 - 1234 West Main Street</p>
      <p>Anytown, State</p>
      <p>Ph: 555-555-1234</p>
      <p>Fax: 555-555-1234</p>

  3. <dl class="address">
      <dt>ABC Widgets, Inc.</dt>
      <dd>100 - 1234 West Main Street</dd>
      <dd>Anytown, State</dd>
      <dd>Ph: 555-555-1234</dd>
      <dd>Fax: 555-555-1234</dd>
  4. None of the above, or a combination of the above.

SimpleQuiz › Part XVI › Conclusion

Amidst all my travelling and whatnot, I realized I hadn’t written a wrap-up for the latest SimpleQuiz, Launching Windows.
The camps were rather divided on this one — with roughly half voting for a Javascript pop-up solution, and the other half voting for using XHTML 1.0 Transitional, which allows for the target attribute without incident.
The argument I found interesting, was “you should never launch links in new windows”. While there may be moral opposition to triggering unwanted events for the user, in reality, designers and developers alike will no doubt find themselves in a situation with an employer or client where this is a requirement.
So often, it’s not a moral decision, but a business one. A sometimes unfortunate reality. In a perfect world (perhaps one’s personal web site) it’s easy to stick to ideals. But in the real world it’s not. Decisions are made that may or may not involve the web designer, and the requirements must then be dealt with. Sometimes you have to make the best out of what you’ve got.

SimpleQuiz › Part XVI: Launching Windows

This question comes in from Keith Robinson — and it’s a good one. Recently, Keith had been working on a project using the XHTML 1.0 Strict doctype — but ran into a dilemma when he needed to launch certain links into a new window.

No worries, the target attribute is all we’ll need here:

<a href="somewhere.html" target="_blank">link</a>

But sadly, the target is deprecated and unallowed in XHTML 1.0 Strict (probably lumped in with the demise of frames). So we have a few options. We could stick with Strict and use any number of JavaScript methods to pop the new window. Or we could be rebels and use the target attribute, ignoring validation errors. Or lastly, we could switch to the XHTML 1.0 Transitional doctype and use target, staying completely valid.

Q: When using the XHTML 1.0 Strict doctype, how would you launch windows in a new window?

  1. Strict doctype + JavaScript pop-up solution
  2. Strict doctype + target="new" + Ignore validation error
  3. Switch to XHTML 1.0 Transitional doctype + target="new"

SimpleQuiz › Part XV: Conclusion

For the first time, the last SimpleQuiz had over 100 comments. Wow. And once again, “lists” prove that they are the most easily debated when talking about semantic markup.

Not because it was the first comment — but because it was the first comment to suggest a method that many others agreed with, the free T-shirt goes to compuwhiz7, with this comment:

For example, you could have done this:

    <h2>First Step Title</h2>
    <p>First step description goes here.</p>

Many agreed that using <hn>s and paragraphs would be a nice way of showing the relationship between the step title and step description, while still using an ordered list. Another variation that seemed popular was the nesting of a single definition list within each list item:

      <dt>First Step Title</dt>
      <dd>First step description goes here.</dd>

While it may seem a bit weird to have a series of one-item lists — I’m never one to argue that a list can’t contain just one item.

If I could afford it, T-shirts would’ve also been handed out to (among others) Tantek, for his organized analysis that I could’ve copied verbatim as the conclusion — and also to Chris Schreib (1,2,3) for perhaps the longest comment in the history of long comments :-).

Thanks to all that commented on this one, and for (as usual) providing a fascinating discussion.

All SimpleQuiz questions and conclusions can also be viewed on one page.

SimpleQuiz › Part XV: Numbered List Pairs

This quiz is certainly one of those grey areas — a comparison that may have some begging that there must be a better way to spend one’s time.

Figure 1
Figure 1

Still with me? Good. Last December, we sort of touched on this topic, with a question on Multi-Paragraph List Items. But for this question specifically, take a look at Figure 1. The goal: to present a numbered list, with each list item containing a bold title, followed by a description on the next line.

Seems like an ordered list (<ol>) would be the best choice, but how to handle the description on the next line is the head scratcher.

I’ve run into this dilemma several times in the past few months, asking myself which is better. Again, each method may be splitting hairs, but I’m curious what you, the esteemed readers of SimpleBits thinks.

As added incentive, and to reward at least one person that, like me, actually enjoys ruminating about the subtleties of hand-crafted markup — I’m giving away one (1) free official SimpleBits T-shirt, hand-drawn by yours truly at pixeltees. Since there is no correct answer, I’ll be selecting one comment to feature in the Conclusion of this particular quiz. If your comment is chosen (for whatever reason) — you get the free shirt.

Q: Which of the following methods would you choose for marking up a numbered list of titles and descriptions?

  1. <ol>
      <li>First Step Title<br />
      First step description goes here.</li>
      <li>Second Step Title<br />
      Second step description goes here.</li>

  2. <dl>
      <dt>1. First Step Title</dt>
      <dd>First step description goes here.</dd>
      <dt>2. Second Step Title</dt>
      <dd>Second step description goes here.</dd>

  3. <ol>
      <li>First Step Title
      <p>First step description goes here.</p></li>
      <li>Second Step Title
      <p>Second step description goes here.</p></li>

SimpleQuiz › Part XIV: Hex Challenge

This one is purely for fun. There was going to be a prize for this quiz, however I realize I have no way of knowing whether you cheat or not. But it’s worth giving it shot without viewing source or firing up and image editor.

If you’re like me, you start to know colors by their hex code, picking them out on TV, billboards, album covers, etc. Is Oprah’s dress in #360? No, it’s more of a #690… yes, definitely in the sixes.

Match each color swatch to it’s web-safe hex code:

    1. #333366
    2. #069
    3. #369
    1. #630
    2. #993333
    3. #363
    1. #ccc
    2. #999
    3. #333
    1. #999966
    2. #9c6
    3. #693
    1. #963
    2. #c60
    3. #fc6

SimpleQuiz › Part XIII › Empholdics › Conclusion

This last SimpleQuiz stirred up some great opinions. A few asked when you would ever need to emphasize, embolden and italicize test all at once. But isn’t that giving up too easily?

I think Patrick Griffiths comment sums it up nicely. And although “banana” is perhaps no better than “italic”, he brings up a good point — to stray from presentational class names whenever possible.

Just Emphasis

Remember, while <strong> and <em> oftentimes render text in bold and italics respectively, it’s not a good idea to rely on this. By default, most browsers will alter text wrapped in these elements — but if you are merely using <strong> and <em> for presentational purposes, it may be time to rethink using them.

To quote the W3C:

Indicates emphasis.
Indicates stronger emphasis.

Notice there is no mention of “bold” or “italics” here — that is intended to be taken care of with CSS. It’s all about emphasis — giving more priority to text than the rest that surrounds it. Do this first — then worry about style afterwards.

SimpleQuiz › Part XIII › Empholdics

Emphasis, bold, italics. What if you needed to handle all three at once? (bogus method used for the preceding example ;-)

Here are three options (plus any additional
scenarios you can think of). Note that the <strong> element could be swapped for the <em> element in these examples (the reverse), depending on what level of emphasis you were trying to convey.

The idea: choose <em> or <strong> to convey the correct level of emphasis, then apply the additional style that’s desired, whether that be italics or bold.

Q: Which method would you choose for handling emphasis, bold, and italics — at the same time?

  1. <strong><em>Empholdics</em></strong>

  2. <strong><i>Empholdics</i></strong>

  3. <strong><span>Empholdics</span></strong>


    strong span {
      font-style: italic;

  4. <strong class="italic">Empholdics</strong>


    .italic {
      font-style: italic;