Unintentionally Blank

Tables Or Lists - The HTML Calendar Debate

Phil — Wed, 25 Jun 2008 06:40:25 +0000

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 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.

JavaScript - Don’t Try To Be Too Clever

Phil — Mon, 23 Jun 2008 21:23:09 +0000

You know who’s waiting to spoil the day, Internet Explorer. A couple of people reported that my font sizing script was not working in IE7 or 6 and I’ve finally got around to checking out why. When I rewrote the code to add class names to each of the sizing elements, I tweaked a couple of things to make it work better, make the file size smaller and make it more standards compliant code. My mistake? Standards compliance.

Internet Explorer does not understand setAttribute when used with style. There are a few lines in which I changed from using element.style.size = xx to element.setAttribute('style','size:xx'); and this broke the script in IE. Don’t try to be too clever, and more importantly for me, check whenever you make any change, no matter how small it may be.

Thank you to those who pointed it out, the issue is solved and the script has been tested in Firefox 2, Safari 3, Opera 9.5, IE6 and 7 and it works. Please download it and use it and check out the working demo with the updated script.

Using the Script

To use the script, download it using the link above and save with a suitable name (fontsizer.js is a good example). Upload it to your site and add the following code to the of the page you want to use it on:

Then you need to include an element, a

for example, with the id fontControls. The script uses that element to append the font size controllers to when the page loads.

Then, load up your page and it should work. If you need any more help, please get in touch and I will do my best to help you out.

What’s Been Going On?

Phil — Thu, 05 Jun 2008 22:15:05 +0000

Wow! I haven’t written here for ages! It’s not like I don’t have anything to say either, I have some views and thoughts on reset style sheets, accessibility for the hearing impaired, microformats and the length of time it takes to load a site, but I just haven’t had the time to update!

What have I been doing then? Well, my job has been keeping me busy and recently we have launched two new sites, River Island’s Style Insider and Big Brother’s Big Ears. Both were hard work and took a lot of effort from the whole team, but also include some of my first bits of Ruby on Rails. I’m quite proud of being part of the team that has set both these sites up.

I almost lost my iMac the other week too, ended up re-installing OS X and crossing my fingers hoping that I didn’t lose all my data. Thankfully, it’s all still here, but that was a heart attack I didn’t need.

So what now? Well, I’m going to start posting again, starting with an update to my style sheet switcher. Why? Firstly, it’s very old code, back from when I knew hardly anything about javascript (though it works, can’t take that away)! Also, Smashing Magazine are having a style sheet switcher competition and I fancy entering that too, who wouldn’t want the prize on offer? There’s two weeks to enter, so I better get cracking.

In the meantime, if you do fancy keeping up with me off of the blog, I am on Twitter, so follow me!

Bye for now.

The Nationwide Takes A Step Forward

Phil — Tue, 22 Apr 2008 22:50:00 +0000

It seems like a long time since I wrote about the importance of making websites work without JavaScript, a post that uncovered the Nationwide building society locking customers without JavaScript enabled out of their site with nothing but a blank page to look at. The post elicited a response from Ian Lloyd from the Nationwide web team, saying that they would look into the issue.

While it has been a long time before I noticed any difference, an online banking site can’t be changed up that quickly, in the last month or so I did notice a difference to the site. Jumping immediately to my “disable JavaScript” button I proceeded to try to sign on to the online banking section. I was met with a message:

Nationwide’s Internet Banking requires JavaScript and cookies to be enabled. It appears that your browser does not support JavaScript, or you have disabled it. Please re-enable JavaScript or try accessing this site using a different browser.

The Nationwide have taken the first step towards accessibility for those without JavaScript enabled, a