Entries Tagged 'web design' ↓

New BBC homepage

Found via Simon Dicksons blog

The BBC have redesigned their homepage and now have an advert on the current homepage asking you to try out the beta version.

It’s a AJAX, web 2.0, netvibes, google homepage fest.

I really like parts of it but I’m not completely sold on it yet.

Things I like about the new BBC homepage

  • I like how the colour scheme changes to match the large image in the main feature area.
  • The analogue clock is also nice and reminds me of the old BBC clock from my childhood.
  • It’s good to see the localisation is a feature on the homepage. I have the BBC news website set up to give me local news and use it everyday.
  • I like that they have gone for a 1024 browser width. Hopefully that will help lead the way to more websites leaving 800 by 600 behind. The site I work on still has around 10% viewing it in 800 by 600 so I’m not sure we’ll be leaving it just yet. Although we’ll have to sooner or later. The BBC should add more weight to the making the move.
  • The simple design

Thing I dont like about the new BBC homepage

  • I’m still not convinced by homepages that you can move sections around. Yes it gives users control over the layout giving them the power to place items that interest them most in more prominent areas of the page. However, if the website wants to promote sections of the website that the user may not have explored before I think it puts the content developers at a disadvantage.
  • The look is just a bit too web 2.0. I dont think it will age well.

New BBC iplayer

Theres also a new beta of the BBC iplayer which works on my macbook, yay. I briefly tried the BBC iplayer a few months ago on my PC. I never really used it because watching TV on my PC in the cold spare room isnt really as nice as sitting on my sofa in front of the big TV. Hopefully, I’ll get more use from this version. I’m quite looking forward to having a proper play with it.

If you want to read an indepth blog about the redesign have a look at “A lick of paint for the BBC homepage” by the Acting Head of User Experience, Richard Titus.

Accessible ways to open a new browser window

Personally, I’m not keen on forcing a new browser window to open on the user. It takes away user control. Users should have the right to decide if they open a new window or not.

Most people now, especially with the rising popularity of Firefox and Internet Explorer 7, are familiar with tabbed browsing. If they want a new window or tab they’ll right click and open a new window or tab.

So what’s the problem?

Well, sometimes it is necessary to force the opening of a new window. For example, a third party application that “integrates” with your website may need a new window to be opened in order to preserve the user experience and aesthetic appeal.

This is a scenario local government websites and probably many legacy website face. A third party application is brought in and rolled out that looks nothing like the main website except the company logo that is placed in the header.

That’s the fully integrated web application as promised by your supplier.

This is a case where you would want to force a new window to open.

How to open a new window

Be nice, warn users that a new window is going to open.

It is only polite.

Using text such as “Opens in a new window” in the link text tells the user exactly what is going to happen.


This does look very good though, does it?

Well, you could put “Opens in a new window” in the title attribute. However, this will not help visual users who use the keyboard to “tab” around the website. No modern browser displays the text in the title attribute as a user tabs through web page content with a keyboard.

HTML 4 doctype

If you are still using a HTML 4 doctype you could use the target attribute of the anchor tag.


Bish, bash, bosh and you’re done. No JavaScript needed. Perfectly valid for your doctype.

XHTML doctype

Most people now, I like to think, are using an XHTML doctype. The target attribute is no longer an option if you want your page to validate to W3C standards.

Using JavaScript to open a new browser window

There are several blog posts and forum discussions about using non-obtrusive JavaScript to open a new browser window.

These can be found at:

Reading through the various posts and discussions I favour Roger Johanssons method.

He shares a similar view about opening new browser windows.

“Opening new windows should almost always be avoided. There are very few exceptions to that rule. However, sometimes it is beyond your control as a Web developer to enforce that. You can normally choose which DOCTYPE to use though. I prefer using a strict DOCTYPE, which does not allow the target attribute. And that is why I created this script. It can also be argued that opening new windows is behaviour, and as such should be moved to the behaviour layer (JavaScript) anyway.” - Roger Johansson

It’s a piece of non-obtrusive JavaScript that kicks in when you specify


on the anchor tag.

It adds text “opens in a new window” to the link text.

Then, not surprisingly, it opens the link in a new window.

What if JavaScript is not enabled?

If JavaScript is not enabled it just displays the standard link text and opens normally without opening the new window.

You might think that


is better as it doesn’t need JavaScript to work but it now deprecated, gone, left the building, dead.

In the words of Andy Clarke, “No one dies”.

Again, here is the link you’ll need

Opening new windows with JavaScript, version 1.2

Jon Hicks launches a custom skin for Google Reader

Found via a Flickr post it looks like Jon Hicks has launched a skin for Google Reader.

I’ve used his bloglines skin before but since Bloglines has been playing up for me, (maybe the new internet filters at work have something to do with it), I’ve been using Google Reader.

Go get it for yourself - Download the gskin css file

Installation - Taken from http://www.hicksdesign.co.uk/journal/os-x-skin-for-bloglines which I’m guessing can be applied much the same to the Google Reader skin

To use in Camino or Firefox, copy the contents of the mozilla version into your userContent.css file. Alternatively, place it in the same chrome directory and add an import link to it from userContent.css at the very top, like so:

@import url(bloglines-moz.css); 

Or, if you’re using the Stylish extension for Firefox, just copy and paste the rules into a new rule window.

To use in Safari (with SafariStand installed), place the css file in your /Library/Safari/Stand/UserStyleSheets folder. Then when you next visit bloglines, choose ‘site alteration’ from the Stand preferences, click add to add a rule for bloglines, and then select the css file from the ‘Alter UserStyleSheet location’. Make sure you tick the box next to alter as well.

To use in Omniweb 5.5, place the file wherever you like, and select if from the site preferences when you visit Bloglines. Nice and easy!

As for Opera, I’m not sure if it can load CSS per site. Can any Opera users enlighten me on this?

I think the most simple way to implement this has to the Stylish extension for Firefox.


Jon has an official post about this on his blog

April Foolbits

How to build a Web 2.0 website in 66.5 hours

On Mingle2, a new web 2.0 dating website, theres an interesting post about the development of the site from the creator, Boyd.

He talks about how he went about developing the site from the initial idea to the final launch version and how he managed to fit it around his full time 9-5 job. Sites like SiteAmount.com rely on a team of coder and designers to keep sites up and running. They are the same creators who brought the site HotPaprs.com online which has grown like wild fire in the 4 months it has been online.

The website is completely free as well. Maybe Boyd should invest in some Google Adsense adverts. They might spoil the look of the website a bit but the website might stay running longer with the extra renvue for hosting and the like.

You never know Boyd could be the next web dating guy to earn 1 million dollars from the Google Adsense program like Markus Frind.

I found the website via CSS import.

Simplebits v LogoMaid

Browsing through my flickr account yesterday I noticed something developing that was quite interesting…

Dan has recently redesigned his logo for Simplebits and it appears that LogoMaid (one of those logo template websites) have put a very similar version of it up for sale on their website.

For your viewing pleasure here is the relevant linkage:

original discussion over at Flickr is continuing, a bit silly in places, but still very interesting.

Other have also noticed the post in Flickr:

Update - 26/03/2007

More people have noticed this and have posted about it, including;

CSS creme of the month

This is a nice little post over at roScripts I found via digg. It links to some good resources such as fancy css navigation, 10 things to know about CSS and CSS Fly which lets you edit your CSS on the, erm, fly.

I’d like to add my own link here as well to Yahoo’s CSS Grid Builder which seems pretty cool. I haven’t used it for an projects yet just been having a little play about with it.

Also Smashing Magazine aslo has some good CSS links for you to have a look at.

SXSW Round Up

I’d love to go to the SXSW festival one day. It looks brillaint with the music, film and interactive elements. I was thinking of suggesting it as a “conference” to attend with work. The interactive part of the festival would be work related. However I think the fact it’s held in Texas would mean it would never happen.

I guess I’ll just have to get my own arse over there one day.

In the meantime, I’ve been reading blogs about this years event and Cameron Moll has posted up a nice little round up of the interactive part being held this week.

Go and have a look at Camerons Noteworthy, SXSW edition

I’m really liking the Expression Engine and Michigan State University - College of Law redesigns.