A site I have recently done some design work on has been launched by Ollie Parsley this week. FootyTweets allow you to follow your favourite football team and get tweets of news and goal updates as they happen.

Ollie has also been working on a Rugby and Cricket version and I think there are plans for a Motorsport version too.

I thought the project was a really good idea, and so volunteered my services to produce a quick PhotoShop mockup and XHTML design, from which Ollie could base the sites on. I initially based the site around a 12 column grid design, with each team crest taking up column and used a template from the extremely useful 960.gs site.

I used the CSS3 border-radius property in this project, and with this, you can create rounded corners without the need for additional divs, images or JavaScript. I would be cautious of using this on a client’s site, but I thought that a site like this could benefit from a little bit of progressive enhancement. For browsers which don’t support this property, the div just shows square edges.

To use the same effect, just add this code to the div:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

The site design had to be flexible enough to work for multiple sports: football, rugby and cricket, and with the future plans of motorsports too, the design had to be versatile enough to work for all of these. So the design was left simple to edit, with a repeatable background and a feature image which is controlled by another CSS file.