Sunday 29 April 2007

When CSS goes bad

If you do a lot of CSS work you'll have seen particular bugs time after time and how to deal with them, however when things do go wrong [and they will trust me] finding bug related information can be a nightmare.

For instance, today I was doing some work on a site and it has had a bug for a few days now in IE. The typical peekaboo bug - if you haven't seen it, it is typically an IE6 thing whereby you rollover a link or element set to have a :hover state and then as well as the effect you want [bgcolor changing for example] something else happens too.

In my case I was rolling over a navigation item which then duly changed colour and then chopped off the page at the bottom of the screen. Even more interestingly it only did it when I had my secondary [nested] navigation up. If it was only the primary it didn't do it. More interesting again was that when I had the two navs up, mousing over the primary one caused the page to disappear and mousing over the secondary caused the page to reappear... argh.

Needless to say with a bug and change list spanning a couple sheets of A4 this was just left for a while.

A quick google for peekaboo bug didn't net much that was useful. Same with position is everything - and this is the problem - nomeclature of bugs and their effects can be so difficult to find in CSS as you have a mix of designers, researchers and techies all calling things different things. Typically my best bet has always been to try and describe the effect in as many different ways as possible on the basis of matching someone elses exact phrasing - as you can imagine this is like trying to hit a dart board on the moon from Earth with your eyes closed.

Perhaps someone will sit down and come up with an accurate way of dealing with web browser bugs that classifies them much like we have with CERT [Computer Emergency Response Team] who classify vulnerabilities in OSes and Software. This would make life a lot easier when a bug was found, especially when it is a variation on an existing one like the peekaboo one I had this morning.

In the end the document which helped me out was this one - http://www.satzansatz.de/cssd/onhavinglayout.html although it did take some trial and error to work out which element needed to have it applied. It works fine now though and my bug / change list is down under a page which is even better....

Tuesday 24 April 2007

The things we take for granted

I had one of those amazing moments as a techie last night where you get so gobsmacked by something that you think about it even a day or so later.

I was doing something on a mate's computer. Fair enough he isn't the most computer literate person in the world but he gets by - he's online and uses the web, email etc to get things done - he's even bought things online too. So he falls firmly in the "average user" category - certainly into the definition of the average use we use when we spec out systems and I'd say anyone that works at a software house or digital agency would look at Dean in the same way.

So what gobsmacked me?

The scroll wheel on his mouse... I was editing a large file for him and scrolling quickly up and down using either the scroll wheel to flick me around the document or doing that windows thing where you depress the button and flick the mouse and you start scanning the document up or down at various speeds.

Dean was sitting there amazed and just said "I had no idea you could do that". Initially I thought he was talking about the editing in the config file I was hacking but it turns out he didn't even realise there was a little wheel in there - as far as he was concerned it was a place to rest his finger and was part of the design of the mouse.

This got me thinking about all these things we as techies take for granted - not the big things like being able to get your email on your mobile phone or being able to mashup 10 different data sources to produce something new and novel or even build a website from scratch using nothign but a text editor.

I'm talking about things like people not knowing their mice can do different things, that your phone probably can browse the web as well as make calls. My wife still can't even write a text message. I come across people even now who don't have internet connections and plenty who are still on dialup.

As our industry grows, how does this moving "average user" impact on the people who are below average? Do we create a digital divide not necessarily based on the "haves and have nots" but on the basis of "cans and cannots"?

Seeing things like this has made me wonder again about people's perception and their interaction with their computing environment. I remember sitting in on a user testing session way back and seeing someone have one of those moments where they "got" the way the web worked - you could tell because she said "That's why that text has a line under it - I always wondered about that".

Anyone who's got a relli who is a timid computer user knows that they don't do things with it because they are afraid they'll break it. Trying to get them to do anything outside their comfort zone is really difficult.

With computers getting cheaper and cheaper and the next influx of users coming on board, we that build systems and interfaces must be sure to remember that the "average user" isn't getting smarter or more stupid - they will initially be less experienced and turning away these less experienced users may result in less traffic / sales whatever further down the line if someone else comes along that will hold their hand and guide them through the process.

In 10-15 years this won't be an issue - but it is now.

Monday 23 April 2007

Why is CSS such a painful tool

Looking at the title above you'd be expecting to see a rant covering the lines of CSS is rubbish, it doesn't work properly and why can't we go back to the days of nested tables and lots of little shim images.

I love CSS though, I love the fact that I don't need an editor to edit code any more [trying to do complex layouts in the past it was mandatory to use Dreamweaver to get any degree of speed], I adore that my code is more or less semantically correct and that it searches well. Being a techie and advising people on hosting I also love the fact that all that bandwidth isn't being wasted on buffer code in HTML to do trivial layouts that isn't then cached.

We all know CSS has it's quirks, particularly in IE but the one thing that gets on my goat more than anything else with CSS is that it is a layout language developed by a bunch of people that aren't programmers or designers. They are wannabe web typographists who happen to have the time to come up with and enhance a spec that the rest of us are then forced to use.

This gripe raises its head with me every once in a while but really badly today. This is because we're developing a site that is really thematic in terms of look and feel and the various sections really have their own colour coding. The overall behaviour is the same from one section to another in order to maintain consistency but things like backgrounds, titles and link colours shift to the new pallette.

The really painful thing with this is the inevitable rehashing of styles down the page - particularly if it is a really stylised design with a lot of lines in it etc.

You find yourself constantly typing the same border: 1px solid #123456 or color: #abcdef over and over again. Then when you are in a new section all these items have to be re-instantiated.

What I would give for some variables - say in php format so I can do this:

$red := #ff0000;
$blue := #0000ff;

$borderstyle := 1px solid $blue;
$linkstyle := $red;

Then in my CSS I could generate a selector and then apply the relevant style variable. I wouldn't even need any conditional logic to be happy just a quick and dirty token replacement function to make it work.

Admittedly I could set this up by just making a CSS file a PHP file instead and returning text/css instead of text/html etc but what happens if I'm using ASP or I have to do something that is just quick and dirty HTML for a couple of pages... or what about the performance hit if my site is serving up 1000 page views a minute [or more]. As a CSS advocate I tell people that it is faster to dish pages with CSS as it is cached, but then this method will kill most caching strategies.

We're now at the point where even if this was something that was deemed as being useful by the W3C powers that be we won't see it incorporated until at least the CSS 3.0 spec - which should be coming to a web browser near you some time about 2011/12 and probably won't have wide support until about 2015 - if NASA have their way they'll almost have landed a man on the moon again by then!

So please, W3C - we are in this mire because of a lack of consulation of developers who are implementing the standards you set out. Perhaps getting a development edition of a browser that incorporates these standards at an early stage so they can be played with would be a good direction of resources for the next phase of growth...

busy busy busy

Damn time flies - and it's not always when you are having fun.

Too many projects going on over a variety of different activities. New clients coming on to our XML Infinity system as well as some natty IT projects for me to ply around with.

I'm going to try and be a bit more regular with my posting by going little and often.

So my Nokia N73 woes continue, even with some new firmware my phone is still crashtastic so I"m counting down the days until a new one arrives. On the plus side though my N700 Internet Tablet is being used for Sat Nav as I drive around the country and although you get the occasional crash when the mobile signal cuts out from my phone, it certainly gets you from A-B with no drama.

More coming on Fuzzy Logic, a chance meeting with someone who is into Social Networking in a BIG way and some other tech rants - this time on CSS.