Press "Enter" to skip to content

Month: November 2009

Lego Climbing Robot

Published Saturday, November 14, 2009 by John Snyders

Way back in January I watched a Google tech talk video Lego Engineering: from kindergarten to college. The talk stresses the importance of teaching engineering in schools. A few days later at breakfast I started talking with my oldest daughter, Alexandria, about engineering and what it is that engineers do. I said that engineers use what they know about science and how things work to find solutions to challenges. I threw out a challenge as an example: Build the tallest possible tower that fits in our house and then build a robot to climb it. It was just an example but she got really excited about the idea. “Can we build it. Can we. Can we.” she said. I said “sure”.

In March I posted a preview of the robot with a picture and promises of more details to come. Its taken me way to long to finally write it up. The robot has been done since May and has made a dozen or so ascents. Making the video is what caused the delay.

Here is what I remember of the process.

Continue readingLego Climbing Robot
5 Comments

CSS Sprites vs. High Contrast Mode

Published Wednesday, November 4, 2009 by John Snyders

Using positioned background images (a.k.a CSS Sprites) has a number of benefits:

  • Performance. One of the performance recommendations made by Yahoo’s performance team is to reduce HTTP requests. One way to do this is using the CSS Sprite technique — combining many images into a single background image.
  • Skin-ability. With the img tag the image URL is in HTML markup where it is hard to change. With CSS Sprites the image URL is in a CSS file making it more convenient to change. Sure you can change the contents of the original file but there are reasons for changing the URL. It is not as easy to move the images to a different server or group them in different image files when the URL is not in CSS.

However there are drawbacks. The biggest is accessibility, specifically high contrast mode. In high contrast mode all background images and colors are ignored — replaced with high contrast colors such as white on black or black on white. The other issue is that background images are not always printed.

The prevailing accessibility advice is to not use background images for functional images. The underlying problem is that there is no way in HTML/CSS to identify a background image as being functional. They are all considered decorative. It is also true that not all img tag images are functional but again there is no way to distinguish them for the purpose of high contrast mode. So high contrast mode makes a reasonable assumption that background images are decoration to be removed and img images are functional and must be shown. From here on I’ll call functional images icons. They either convey important information or are interactive (like a toolbar button for example).

I have seen recommendations that functional background images should be replaced with text when high contrast mode is detected. This does not seem right to me at all. A desktop app does not change its toolbar button icons to text in high contrast mode. The assumption is that icons are already designed to have reasonable contrast.

It also just feels right to me that the icon URLs should come from CSS.

Since I care about performance and accessibility I’m not happy with this conflict. I want a solution that puts the icon URL in CSS, works in high contrast mode and allows me to combine icons into a single image file. Here is what I came up with.

Continue readingCSS Sprites vs. High Contrast Mode
Comments closed