supersonic feet

Carsonified has been adding the videos of all the Future of Web Design talks to Vimeo and they’ve finally added my favourite of the day: Daniel Burka on iterative design.

As I can’t waste my free time on my Xbox for the foreseeable future, I might as well catch up on some stuff I should’ve written about recently…

Goodbye Gottabet, hello bragster

A couple of weeks ago, we relaunched Gottabet as bragster. The result of five weeks’ development (pretty quick for re-branding a whole website!), the site has been re-focussed on the bragging/glory side of things. There were some new features added, a change in the navigation layout and some changes to stuff like browsing bets/dares and member profiles.

There’s still plenty more to come from bragster, with some pretty cool new stuff lined up before the end of the year and more to come in 2008. With the new feeds we added just before the re-launch and the changes to the navigation and layout in the re-launch itself, it’s hopefully now easier to get to the interesting stuff quickly.

A new addition to the team

I mentioned back in early August that we were hiring at Gottabet (now bragster).

Well, for pretty much the entirety of the Gotabet-bragster re-brand I was also reading CVs, conducting basic HTML/CSS tests and interviewing people to hire a new front-end developer. We set ourselves quite a high bar for hiring someone as we needed someone who could slip into the team pretty much seamlessly and get working on making our site more awesome.

As a result, the search took a while but in the end we had two great guys come along pretty much at the same time (the old ‘waiting for a bus’ thing) and I’m now pleased to welcome Andy Dust into our team. Andy only actually graduated this year, but has already hit a pretty high level with standards-based web design so we’re looking forward to his input at bragster. The first thing you’ll see from Andy is a new Flash-based widget for sharing your bragster bets/dares with others that he’s already been working on in this, his first week with us.

Tabasco shots, skating on a treadmill and sailing the Tyne in a dinghy

A few of my friends from back home in Newcastle have been getting into the bragster spirit recently with some mad dares…

A while back, there was a ‘tabasco challenge‘ on Gottabet, in which ChiefChimpanzee reckoned he could down 10 shots (25ml each!) of tabasco sauce in 10 minutes. He got oh-so-close at 9 shots. We then set up a challenge for our members, offering a prize if anyone could do the ten shots. Krishna came down to London one weekend and tried (even using the gorilla suit like ChiefChimp), but failed at 6 shots. Sent packing back to the North East, another of our friends, Neill took up the challenge.

He did it in 1 minute 10 seconds.

Check out the tabasco challenge page for the Video of Triumph.

On another visit to London, Krishna (bish) and I came to discussing whether it would be possible to get to level 10 (whatever that might mean) on a treadmill with a skateboard. We ran out of time to do it while he was still in London, but a visit home to his parents’ house and a quick use of his Dad’s treadmill later, the challenge was complete!

Follow the link and watch the video as, while he managed level 10, the whole ‘getting off the treadmill’ thing was a bit harder than bish had planned.

And finally, to the latest mad-cap adventure: Neill has declared that he’ll ’sail’ the Tyne river from Newburn to Tynemouth (where the Tyne enters the North Sea). In a rubber dinghy.

Backed up in his quest by Richy (warbastard on bragster), the pair will have to travel around 10 miles down-river watching out for, among other things, large sea ferries leaving Tynemouth for the likes of Amsterdam.

Rumour is they’ll be dressed like pirates for their voyage as well, so it should make for a good video no matter what.

Following a recent trend for ‘live re-designs’, I’ve rashly (it’s 1.15am) decided to start re-designing this website in its live state.

What that means for tonight is that I’ve replaced the stylesheet with a super-basic one, including the reset.css and typography.css files from the Blueprint CSS framework for a quick-start on the whole vertical rhythm thing. I couldn’t quite bare to quite leave it at that though, so I’ve quickly made sure the flickr ‘badge’ at least displays back up at the top of the page where it was along with the main links. Totally untested in anything but Firefox 2 for now though.

The idea (or at least part of it) is that by having your live website showing all the progress (or lack thereof) while re-designing encourages you to get a move on and get something done.

We’ll see

At Gottabet we’re looking for a ‘web application designer’ to join the team. The job entails a range of web dev, from helping design various sections/features of the website to implementing them in HTML and CSS.

There’s a full job spec on the website, so if you’re a developer who’s big on web standards looking for an exciting, fast-paced job working on a big social website, check out the job spec and get in touch with Wim and Bertrand (email addresses on the linked page).

Just spotted (via Simon Willison’s blog) that Yahoo! has released an extension for Firebug, called YSlow.

The extension adds more performance data to Firebug, grading various speed issues A-F like a school exam. It seems rather cool on a brief test, though one bit did immediately stand out as potentially bad advice: YSlow suggests you should move as much Javascript as possible to the bottom of your document (to stop it slowing down your page load times).

This is good advice looking purely from the angle of increasing page load times, but goes against the web standards approach of trying to keep JS out of your body code (the whole unobtrusive Javascript thing).

It’s not a major thing to have JS include tags in the body of your document compared to actual inline JS, but it might have been nice to see a note somewhere providing the other angle to just speed.

At Gottabet, we’ve started to migrate the website to a cleaner, wider layout that I’ve been working on for the past few months. We started by launching a new homepage and a couple of weeks ago we trialled a new signup page (via A/B test) and then rolled that out for everyone. Yesterday we launched our new Bet Detail Page. This week I’m working on getting a number of the ‘basic’ pages ported over and after a great start hit one of the most frustrating IE6 bugs for some time.

On Gottabet we often absolutely position a ‘Bet on it!’ button over a bet image in listing pages - so it sits on a corner of the image. Most of the time this works absolutely fine - you have a div containing the bet image and the ‘bet on it’ link. The div is styled with position:relative and the ‘bet on it’ link is position:absolute, with the necessary top, left, right or bottom spacings for wherever it needs to sit compared to the image.

For the one page I was working on today though, it all went wrong. Very, irritatingly, wrong.

The problem: relatively-positioned elements on the page would move from their correct (effectively inline) position in IE6 and shift down a hundred pixels or so and right a bit. To confound matters further, I found that it depended on whether I refreshed the page while looking at the top or the bottom of the page in the browser. When scrolled to the top, the relative elements moved down on refresh. If scrolling to the bottom of the page and hitting refresh, on reload they’d be too high.

After searching for known issues with IE6 and position:relative, I found a couple of common problems that didn’t seem to apply to me: the peek-a-boo bug and hasLayout.

The hasLayout issue seemed close, but the div with position:relative was already triggering hasLayout thanks to having a specified width and float:left. The symptoms also didn’t quite match up (mine seemed much weirder). In the end, I resorted to what I should have done much earlier and set up a test page with an extremely stripped-down verson of the page content - only the bare minimum of the grid layout with no header/footer and only the CSS relevant to the part of the page that was breaking.

It worked fine. This was a good sign, because it at least meant there was definitely something causing the problem, so I started adding code (and the relevant styling) back in until it broke. Turns out a containing div had position:relative on its own, with nothing to trigger hasLayout in Internet Explorer. It didn’t affect the case where it was being used, but by the time it filtered down to the next relatively-positioned block things were going crazy.

After 3 hours (most of them going round in circles before I started the stripped-down HTML version - there’s a lesson), all it took was adding a width to that containing div to trigger hasLayout in IE and all was well once more.

So be warned: the hasLayout bug gets nastier when you have nested blocks using position:relative!

With the hype over Web 2.0, it’s funny how many online advertisers are still using the same crass techniques of the web’s earlier years. Within a minute of each other, I just got hit by three of the most annoying advert types while checking two websites.

I loaded up an article on the Sky Sports website along with Blue’s News in separate tabs. Looking at Blue’s News first, there was an irritating buzzing noise.

“Oh look, it’s a Flash advert in the top right corner inviting me to zap a bug and win a laptop”. It’s at this point I could no longer care less about what gaming news goodness Blue might have to offer me and went to close the tab - as I do, a pop-under sneaks its way open. Marvellous. So they’ve irritated me enough with one ad that I’m closing the window without ever getting to the content of the site and now as I leave they find another way to motivate me in looking for a better site to read about upcoming computer games.

The pop-unders have actually been on Blue’s News for a while and I generally work around them, but today’s double-whammy just about does it.

OK, so that was an annoying website that stopped me in my tracks. Back to Sky Sports…

“Goodie, a floating Flash advert obscuring the article content” I think to myself (or is that just what the advertisers and webmasters expect us to think?). I was lucky this time and the ‘close’ link actually did get rid of the ad, but so often with these absolutely-positioned Flash ads the close link doesn’t work properly and you either have to reload the page in the hope the ad won’t show next time or just give up.

Given that both of these sites are driven by their content, why are they allowing adverts to hinder me in getting at that content so much? The Sky Sports one is the only that actually does prevent me reading the text, but the two on Blue’s News do just as good a job in making me leave as fast as possible. When it’s accepted (I’m pretty sure there’s actually proof, but can’t point to it now so I’ll not go that far) that people are much more likely to click on relevant text ads, why are we as site visitors still suffering with obtrusive, irritating advertising? Is there some mad majority of the population that actually responds favourably to having the content they’re trying to read obscured by an advert that they’ll actually change tack (from trying to read the content) to clicking the ad and then buying whatever it sells?

The top-secret project I’ve been working on since moving down to London at the end of October had a still-quite-secret launch late last week and now we’re ready to tell a few more people.

Without further ado, I present Gottabet.com!

Gottabet.com is a social networking site where people exchange challenges and bets on any event they can think of, from “I bet it’ll be a white Christmas this year” to “Nobody can catch a pigeon” (thanks to my brother, Christian for posting those two).
I say a ’still-quite-secret’ launch last week, but only in as much as it was limited to a small number of people. The launch itself was far from secret, held in a pub where we got drunk people to take part in silly bets and dares. The result was a set of photos that I’ve added to flickr under a new Gottabet-specific account. There are some pretty funny pictures (especially the two people racing to fit the most Maltesers in their mouth), so check ‘em out.
On a more techy note of possible interest, the site has been developed entirely in Ruby on Rails by a team of 5 developers (including me, though I’ve worked much more on the HTML/CSS side of things). The site was built in around 6 months, which is even more impressive when you find out that for the first few months there was only one developer (Peter) working on it. The other three (Rich, Ken and Phil) joined within a few weeks of each other around September time and I joined at the very end of October.

The team is completed by (and indeed started with) two Belgians: the founders Wim Vernaeve and Bertrand Bodson. They came up with the idea around a year ago and have gone from simple idea to launched website in that time. There’s a team photo on the ‘about Gottabet.com‘ page. Mini-profiles of each of us will be added soon too.

To get you started, have a look at my latest bet: I bet at least one of the presents I’ve ordered won’t arrive in time. It’s just for peanuts, no money needed

The most useful developer tool for Firefox has just hit it’s first version 1.0 beta and has added some great new features.

Firebug gives you all kinds of javascript and CSS debugging tools that help you track down where errors are coming from. For example, you can inspect a single HTML element and see the CSS that’s being applied to it, as well as where that CSS is coming from (filename and line number). With 1.0 beta it even shows you any CSS that would have been applied, but is getting overridden by other style definitions.

If you develop websites, you need this plugin.

Vitamin does link to some good stuff. Latest in the list is an article on Digital Web Magazine by Aaron Gustafson about the poor, neglected button form element. I have to admit I am one who’d seen the dodgy uses years ago and ended up ignoring it well before I got into standards and CSS, so the article is a mini-revelation in terms of form styling.

Basically, if you can think of an instance (and I can think of many) when you wish submit buttons weren’t so bloody hard to style (or differentiate from other inputs without adding classes), read the article.