Hiding content for image replacement

One of the most valuable tools in a web designers arsenal is the ability to replace text with images, of course in a graceful way. That technique is exactly what makes the CSS Zen Garden layouts work. Thanks to NickFitz we now know the right way to do this (and why the wrong way may sometimes be right). Read his excellent article Why “left: -9999px;” is Better For Accessibility Than “display: none;”.

From 4 to 5; a seismic shift in HTML

Further to my thoughts a few months back on the propsed specification for HTML5 (it was even commented on by a genuine web heavyweight). Well, the whole issue isn’t going away so I thought I’d bring my measly mind to bear on this fascinating subject again.

First, a quick explanation. I say “fascinating” because this is potentially one of the biggest shake-ups on the web in (10?) years. While new versions of browsers is noteworty, making large changes to the language that those browsers actually speak natively is a massive shift. Just think, in a couple of years time we could be marking up our documents with “aside”‘s, “dialog”‘s and “figure”‘s. That, dear readers, is a Big Thing.

The reason this has come to the fore again is because Anne Van Kesteren has written an easy-to-understand document outlining the differences between HTML5 and HTML4. As she states, most of the HTML5 specification isn’t about adding new things, but fixing the old things so they can be used in a standard way across user agents.

Still, it’s the new stuff that excites us geeks most of all. Here’s a few of my favourites which I didn’t make a note of last time (and maybe my feelings on this have changed in the last 4 months).

event-source can be used to “catch” server sent events”

Wow, so there’s going to be an actual element specifically for that AJAX stuff? Cool.

output represents some type of output, such as from a calculation done through scripting”

Ditto what I said above. This is good news, as despite my best intentions pages with a lot of JavaScript working on them always end up looking like a dogs dinner. Semanticise and control, I say.

And then this one is, as our American friends would say, a doozy:

The input element’s type attribute now has the following new values:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

Now that would be useful. Inbuilt browser input validation. I’ll raise a glass to that.

Anyway, take a look at the document. What bits are you most interested in?

Safari for Windows

The web world is grinning at the news that Apple’s Safari browser is now available for Windows. It’s long been regarded as one of the better browsers and is considered to have pretty much the best CSS support.

It’s great that there’s now even more choice for people who want to get away from the awfulness that is Internet Explorer 6, or the clunky interface of Internet Explorer 7. Well done Apple, you’ve done a Good Thing.

This ain’t no disco

Andy Budd, one of the Cool Guys of the web design world, recently brought my attention to this. It’s a collection of photos of the offices of design agencies around the world. As you can image, there are some pretty cool places to work.

My home officeIt reminded me that I’d taken a picture of my own creative space to show you all (yes, all three of you). So here it is. I’d like to draw your attention to four things I think you’ll agree every home office, especially one for a world class web dude like me, needs.

  1. Bread bin (green circle). This contains the ends of loaves that no-one wants to finish (generally cheap white bread, yuk) but occasionally yummy treats such as cinnamon and raisin bagels or even lemon cake.
  2. Bananas (yellow circle). What more do I need to say?
  3. Selection of onions and peppers (red circle, middle tray). I could have bigged-up the fruit (top tray) and potatoes (bottom tray) but the onions and peppers have the right kind of spicy kick for a creatve space.
  4. Cat’s dish (blue circle). I’ve accidentally dipped my toes in this more than once, but that’s the price that I pay for my art.

So you see, the right kind of ambiance is vital for ensuring that top-quality work is produced by yours truly. And long may it continue.