Unintentionally Blank

Lists are semantic, tables are bad, right?

What seems to be the view of some in web development is now finally coming under scrutiny as mistakes are made. Put it this way, tables aren’t always bad and lists aren’t always semantic, context is important. The examples that have brought this to my attention have been quite surprising because of the amount of effort it has taken to create them.

CSS Calendars

First, a week ago Rob Glazebrook posted a list based CSS calendar at CSS Newbie and that was followed up by Chris Coyier and Tim Wright’s elastic, list based CSS calendar at CSS Tricks. Hacks and unsolved problems aside my belief is that their solutions are taking both the creators and the readers of the respective blogs down the wrong path (though thankfully Tim and Chris did finish with a disclaimer it was perhaps a little bit too far into the small print for the first few commenters who thought it was a great idea).

While I don’t disagree that a month is a ordered list of days I don’t think the markup chosen is as semantic as it can be for the presentation Rob, Tim and Chris were aiming for. As it happens there are physical calendars that are set out in a vertical list and it is perfectly reasonable to set things out as a list of days. However, grid based calendars are, well, a grid. A grid where the columns relate to days of the week as well, so why not take advantage of that.

Use the right tool for the job

I won’t say any more for now, just show some examples that I thought I’d come up with to illustrate the point. Here is a calendar using Rob’s list markup (minus the invalid clearing div as a child of the ordered list) followed by the same calendar created using a table. As you can see, with no CSS, the table is already part of the way towards the layout the list based calendars were aiming for and, because I added days of the week at the top as <th> with a scope of col a screen reader will read out the day of the week for each cell in the table it reads adding to the accessibility. To show why using the correct tool for the job makes life a lot easier, I even tidied up the table based calendar with just 4 CSS rules.

When you are creating a list of days in a month, a list is perfect, when you are creating a grid of columns of days a table suits the job. Just because you can use something else doesn’t mean you have to, the right tool for the right job not only makes your life easier but makes more sense on the page too. Have a look at my examples and decide for yourself.

Just over a week and a half ago the BBC launched a new home page and I just wanted to say how impressed I was with all of it! Not only is it a huge departure, in my opinion, from the previous homepage, incorporating web 2.0 style drag and drop and customisation, it is also a magnificent piece of coding.

Why?

Well, please don’t call me an asshole, but the page validates as XHTML (even the Flash clock in the top right hand side, more on that in a later post). Not only that, it also, unlike some big websites, works without JavaScript enabled (though it makes excellent use of my current favourite library, jQuery and the effects plugin Interface). With accessibility in mind, the two features above are a good start, also all images had relevant alt attributes, form inputs have relevant labels, there are links for accessibility help for the whole site and display options to change the colour scheme and size of the text. I even visited the site on my mobile, using Opera Mini, and everything worked very nicely.

I Am Impressed

Back in 2003, Molly Holzschlag rubished the BBC for their site’s conformance to standards after reporter Andrew Sinclair claimed “Some get it right: the BBC website is considered to be one of the best for people with disabilities”. It has been a long time and I don’t know what version of the site she looked at then, but the new home page should change her mind now.

The BBC has changed up its home page, the main page and flagship of their whole site, and they have done it very nicely. The rest of the site is still the same, but I would like to think that, after launching the front page, there is a lot of work going on in the background to bring the rest of the site in line. For web standards this is pretty huge, I am sure a lot of sites look up to the BBC for guidance and inspiration. To see such an important, highly trafficked and well respected site come out with a valid, accessible home page shows everyone that it can be done.

What do you think of the new BBC home page?

A bit of fun for a Saturday, how many HTML 4 elements can you name in 5 minutes?

I made some silly mistakes, forgot some essential elements and only guessed a couple out of sheer luck, when the pressure is on everything flies out of your head!

I got 56 out of 91, let me know how you do.

(Found via Webomatica)

Warning: if you really enjoy the test and want to use the badge they make available for your site/blog, watch out for the advertising link. I was quite disappointed to see it, but enjoyed the challenge enough to mention it anyway.

It’s all very well following my tips on keeping a blog or website valid, but checking that you are doing it right can be a pain. The W3C’s HTML Validator is the best way to check, but there must be something easier and quicker.

Continue reading “The Easiest Way To Check Your Site’s Validity” »

Making your blog look good and work well is a major consideration of anyone who wants to do well in the blogosphere. Making sure your blog is valid and adheres to the standards of the W3C will ensure that your theme will look good in all browsers, even those yet to be released, be more accessible, easier to maintain and easier for search engines to crawl. So how do you go about making sure your site sticks within the guidelines?

Continue reading “Top 5 Ways To Keep Your WordPress Blog Valid (And Why It Matters)” »