New TFL website
Home / News & Resources / New TFL website
It seems Transport for London has redesigned
http://www.tfl.gov.uk/
I find this interesting (from their accessibility statement):
| Quote: |
| Access Keys
Access Keys are keyboard shortcuts to common pages on a website. This website does not use Access Keys because evidence suggests that they interfere with the keyboard controls of many browsers and screen readers. |
Another reason to consider whether accesskeys are dead
Share: 
I think this is definitely an unfailed (i.e. successful) redesign:- First thing which really stands out (in every sense) is how strong the a:focus styling is. I hadn't considered using such a strong change but it does make sense.
- Interestingly, their skip link comes after a link to their homepage. The link to the homepage is present even when you are at the homepage. The image in the link has a non-empty alt attribute even though the link also has text; this will result in the link being spoken as "Transport for London Logo Transport for London".
I think it would be better if they used alt="" here and had the skip link before it.
- A hyperlinked image of two people taking a picture in front of Tower Bridge is using an alt attribute whose value exactly matches a regular text link which points to the same location ("Get where you want to be"). That's nice attention to detail.
- It doesn't respond particularly well to text resizing. In particular, the "Service updates" section on the homepage becomes mis-aligned.
- The <title> is unique to each page and is front-loaded. It uses a vertical bar (|) to separate the page title from the website name; both are present on all pages. Looks like someone's been reading blogs about best practise.
- From the accessibility page:
| Transport for London wrote: |
| Use a 'plain' layout
Many browsers allow you to strip a web page of all layout and styling by turning off the website 'style sheets'. If your browser supports this setting you will most likely find it in the 'View' menu. |
Again, they seem to be very up-to-date as they provide instructions for users to get the most from their setup rather than duplicating functionality with widgets on the website.
Would probably be a good idea to make all tags lowercase and quote all attributes to make the markup more consistent, easing maintenance.
When used for dictionary definitions, only one description logically applies to the term at the same time (alternative). Although HTML4 relaxed the use of <dl> for things other than dictionary definitions, it didn't say whether <dd>s are accumulative or alternative. So, I guess it's still alternative (zcorpan also thought this last time I talked to him about it).
As such, having a navigation parent item as a <dt> which then has a navigation child item in each of several <dd>s probaby isn't quite correct. Only one of these child items is semantically linked with the parent item at a time which doesn't reflect the navigation structure. Also, it's arguable whether these child items are actually describing the parent.
The use the same thing in several other places, where it also doesn't seem quite right. I think <p> and <ul> would be more appropriate for this, or perhaps a twin layer nested <ul>?From a standards compliance and best practise standpoint, I'm pretty impressed with this. I wonder if they did user testing to see if the theory improved usability?
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.
Share:
It is quite nice
As you said it doesn't resize too good and the light blue links look like they are missing contrast
Didn't see the A:focus. You're right that is very nice. Almost reminds me of keyboard controlled computer games
I wonder if they did the site in house?
Share:
Hi there,
We designed the site in collaboration with a company called Detica, the template design and coding was done in-house though.
Thanks for your feedback, both positive and negative - it's all valuable. We put the site through some thorough user testing prior to launch, including users with various visual and other disabilities. In fact, it was watching people trying to use the site with a keyboard that prompted us to implement the 'focus' styles.
Your point about the semantics of definition lists is very interesting. It hadn't occured to me before that when you have multiple <dl>'s it might be interpreted that only one of them actually applies to the preceding <dt>.
Hopefully (one day) HTML 5 will give us a few more tools and we won't have to 'bend' the meaning of things like definition lists to suit our purposes.
Incidentally, we also implemented alternate style sheets (hi-contrast and large-text), for browsers that support these (try 'View -> Page style' in Firefox).
Tim Paul
Lead Interaction Designer
Transport for London
Share:
I think the site needs real world testing...
I am not sure if <dl> for such a critical area of the site is appropriate as they may not be supported by older devices such as versions of JAWS.
| Code: |
| <a href="/gettingaround/1123.aspx" class="left" title="Timetables"><img src="/assets/images/landscape/bus-stop-display.jpg" alt="Timetables" width="246" height="145" class="border" /></a>
<div> <h1><a href="/gettingaround/1123.aspx">Timetables</a></h1> |
This main picture and title would be annoying for screen reader users having to read the link again. I would remove the <a> from the picture and leave the alt attribute blank OR use only 1 <a> making the title and link clickable again with no alt text.
Again the title attribute simply servers to annoy.
Very good job overall... down to the way a PDF icon appears via CSS in the search results.
_________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Last edited by Johan007 on 10 Apr 2007 12:54 pm; edited 4 times in total
Share:
Hi Tim
Nice work! It most have been a massive project. Are you planning on turning it into a case study to talk about the learnings you've made etc ?
Share:
Overall, the design is very nice. I do rather miss the prominant links to the different modes of transport that used to be across the top. It's much harder to see where to go from the front page if you want to know about the tube for example.
And I find the structuring a bit odd and hard to follow compared with the previous "one main section per mode of transport". For example the sifferent categories under http://www.tfl.gov.uk/... are different types of categorisations (eg some are modes of transport, but not all modes are present).
The URL scheme could probably be improved somewhat, though presumably it's somewhat impared by the structure behind it...
Share:
Thanks Chaos,
we thought very hard before switching to a task focussed IA from the old 'mode'-focussed one. The user testing, stats analysis and other evidence repeatedly bore out that, for most people, a task focussed site structure would help them find information more quickly - and the general feedback post-lauch seems to confirm this.
A failing of the old 'modal' structure was that it encouraged repetition - every modal section (Tube, buses, rail etc) would contain slightly different versions of the same content - a sure sign that something is wrong with the structure.
The transport-modal perspective is obviously what some people want though, which is why we've provided 'modal' landing pages available from the homepage.
Fransgaard - we have no plans currently to produce a case-study (no time, unfortunately!) - but did you have anywhere specific in mind where such a study would be published or made available?
Share:
Page 1 of 1
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum