A First Look At The TTC's New Website

newttcwebsite.jpg

Remaining virtually unchanged for about a decade, nobody would argue that the TTC's brutal web site wasn't in need of a total revamp. We even teamed up with Spacing Wire, Reading Toronto, and blogTO to solicit a fantastic amount of useful feedback, which we then forwarded to the Commission with high hopes.

Now the TTC has launched a sneak peek at a beta version of the new design. We're still kicking the tires and will have a more in-depth analysis soon, but here's your first look.

UPDATE (5:00 p.m.): Torontoist's closer look at the new TTC.ca is here.

Email This Entry


Comments (38) [rss]

holy overuse of container div's

I wouldn't go as far to say it's nice (it would have been in 2002) but it is a big improvement.

Anyone know which agency did this?

Clean, fast and efficient, I can easily look up when my next streetcar arrives.

At least when it's supposed to arrive.

It's a huge improvement. The design looks pretty functional, the last thing they needed was a lot of fluff, and it's easy to find what I need.

It's a beta so it's perhaps not worth pointing out the little things, such as the obvious padding/margin errors in FireFox in some places. The coding is ok, it's certainly not 'div soup', and the site does pretty well with standards.

Overall I'm impressed they didn't screw it up.

torontothegreat, I think this was done internally with a lot of consultation but I'm not positive.

I know for a fact it wasn't done internally, I just for the life of me can't remember which agency won the bid.

http://validator.w3.org/check?uri=http%3A%2F%2Fbeta.ttc.ca%2Findex.jsp&charset=%28detect+automatically%29&doctype=Inline&group=0

yikes, doesn't even validate :P

Hopefully they'll focus on some of those things, otherwise accessibility experts will have a heart-attack.

Needs more Flash or other cutting-edge plugins. Works on too many different web browsing devices without hacks or add-ons. Won't get blocked by corporate firewalls. And where the hell is the animated intro? Marketing droids rate this website 1/10.

It may not be revolutionary, but good god at least it's better than the old one. I can actually tell when streetcars run now! Next step: getting them to run on schedule

I think it's great—clean, classy, but not too overdone and relatively easy to find crucial information for residents and tourists alike, like prices and how to get to and from the airport. Well done.

The validation isn't vital and there's nothing there that I wouldn't expect to find in a beta.

Accessibility validation for 508 and WAI is good, failing only on a metadata omission which is easily fixed.

well, speaking as someone who doesn't have a clue what validation is, never mind WAI and Div, I like it. I can look schedules either by name or number which is helpful 'cause I don't always know the number. And it looks "clean" = no unnecessary flashy stuff.

I think it looks awesome! It'll be interesting to see how the trip planner ends up looking. Nice to see they've incorporated RSS in at least a basic way.

Incidentally, if you're criticizing a website for overuse of the DIV tag, you are really reaching for something to complain about.

Joe Clark would know. he's been watching these guys like a hawk.

The main logo is a bit crunchy on my screen but I have to agree, it's 1000x better that what they have.

user-pic

12 of the 15 errors on validation look like simple tag syntax problems, easily fixed.

Prices for monthly/weekly/daily passes are missing. They should be right there with cash fares, but they aren't even on the individual pass pages. Images of monthly/weekly/daily passes would also be nice (student pass is shown).

No maps? Where's the Google Map plugin thing we all clamoured for?

The four links across the top are easy to mistake as column titles.

Otherwise it's a nice clean site.

Devlin is the contractor, as is widely known. Beyond that, I’m not being paid enough to have an opinion, except that the CNIfuckingB had really better not be involved in any accessibility evaluation.

Haha... 4.55 PM, and it has crashed. Glad it's just a beta! First it showed me a tonne of programming code, then a refresh revealed

Service temporary unavailable!

The server is temporarily unable to service your request due to maintenance downtime

I like it, a vast improvement over the old site, looks much cleaner and far easier to navigate.

it's a huge improvement... for once they listened, and this bodes well for next year and the rest of the recommendation list

Meh, I can't complain about anything in particular, as the old site was a horror show. But I am nonetheless left underwhelmed. I am not asking for over-burdening web technology, as it should run on old hardware nicely in order to be useful to the public. I think it is perhaps the graphic design that leaves me flat.

Tuds

I'm wondering if we're all looking at the same website.

Couldn't they have hired a designer? You know, to make a design?

Forget "clean and simple" this this just plain boring. It's just dull. Look at it. And it doesn't have to be.

There are a thousand small design decisions that make it so dull and mediocre, and they all add up to what appears to be, in my eyes, a rather amateurish production. Why would each subway station have a small, unclickable image? Why are all the images so cheesy, for that matter? Why are the links all different colors? Why do some links underline when you roll over them, and some don't? Why are the maps hidden under baby-blue tabs? Why is the font so small? WHAT'S WITH THE ALL CAPS IN SCHEDULES? IT MAKES IT HARD TO READ. What does "See It Your Way" mean and why should I click on that? Why can't I click on any of the maps to get more info on the relevant station? Where's the API so I can remix the data? Why would I want to see what time the train is coming next, when I'm in front of a computer?

I just spent 25 minutes looking for a subway map of the Yonge line. I don't think there is one.

I've been using that Google maps TTC mashup for years. That is still more useful than this, and it was free, made 2 years ago.

Hell, and I live in this city and know what to look for. Imagine a visitor to Toronto who doesn't know anything about where "15 Evans" goes. Is that the bus she needs to take? Who knows?

Sorry for the rant, I just can't believe this site is getting so many positive, or at least lukewarm, reviews here.

If you told me that it was made in-house in 2005, I would have believed you. If you told me that it was made by a high-flying agency in 2008 and cost $400,000 I would tell you that someone really, really got taken to the cleaners.

@19: It does have a "Transit System Map" area, but it's yet to be completed.

Before everybody goes pissing all over this, its quite clearly NOT FINISHED.

There's obvious problems, but its not live to the public yet and the point is to say "Here is where we're going with the new website," and I think they've demonstrated quite well that they've got something good going.

I don't see why it needs a whizbang design (it appears quite clean and functional, a few tweaks would help but overall its effective), and whats with demanding an API to "remix the data"? That's an awful lot of trouble and expense to go to for very little benefit.

I'm particularly impressed by the inclusion of textual descriptions of the routes (verbose, but it really is a textual replacement for the map).

Only thing I really have to say though I hope they do something about the symbols used for various branches in the timetables -- it makes no sense whatsoever right now and a lot of the symbols are show in the timetable but not listed in the legend.

Thanks, bbpsi, you're exactly right. The bottom line is that this BETA is clearly a step in the right direction. The clean design should be very functional (especially for those who may not be too internet-savvy) and compared to the old website, even if this was the final, this is already far better.

Our best bet for now is just to give all the CONSTRUCTIVE FEEDBACK possible to help round the site out to help it serve the needs of its visitors.

I'm with YONGE AND BLOOR. This is simply awful. There are dozens of great web designers in this town.

The TTC is hopeless. Drunk drivers. Horrible subway stations. Filthy third world vehicles. Snarly unpleasant workers. And brutal websites.

The TTC IS completely hopeless. It's time to bring in a new regime.

>Incidentally, if you're criticizing a website for overuse of the DIV tag, you are really reaching for something to complain about.

You obviously are not a developer. I could go on about sementics and accessibility, but I'll just let you believe what you want. I have high standards for my developers, I expect things to be correct not juniorly.

For all those hoping for something better...

//www.tfl.gov.uk/modalpages/2625.aspx

I wish it was half as awesome as this site (and no overuse of div tags!!!!!!!!) which was made many moons ago.

user-pic

I also hate when things are juniorly.

If you could explain what's so terrible about div tags you might convince people that you're right, instead of a sourpuss.

Just off the top of my head:

- It's lazy
- It's exactly the same as table-soup
- It shows me (a Director of Interactive) that you do not understand fully XHTML/HTML/CSS
- It's semantically messy
- It does not properly describe the document
- It makes it much more difficult to seperate logic/content/design
- It leaves a HUGE footprint comparitively speaking (bloated markup is unsemantic)
- Screen readers have a harder time deciphering content from layout.

Further reading (learning).

http://www.apaddedcell.com/div-itis
http://juicystudio.com/article/div-mania.php#intro
http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/
http://www.cps-project.org/static/doc/guidelines-user_interface.html#checkpoints
http://pipwerks.com/journal/2008/02/07/development-standards-for-e-learning-a-starting-point/
http://developer.apple.com/internet/webcontent/bestwebdev.html -- I just noticed a mention of Joe Clark there!
http://fadtastic.net/2007/03/08/accessibility-matters-to/
http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/

>I also hate when things are juniorly.

What I mean by that is the 'style' of markup (div soup) is quite common amongst Junior Developers, until they gain enough understanding and confidence they will wrap EVERYTHING in a div.

Apparently 400k gets you no designer and a Junior Developer...

I'm understand that using Flash is an almost total no-no for people with disabilities as screen-readers and other accessibility tools have huge/total problems with them.

Considering that the TTC wants to move people from WheelTrans to the standard TTC system as more stations, buses and streetcars become accessible this is not a frill, it's a necessity.

I really don’t think multiple DIVs interfere with screen-reader access.

I like where they're going with the site, and can't wait to see what they do with the system map. I've noticed some problems with the "next bus" times, but I assume that's beta-ness, and I like the feature (though I'd probably usually click through to get the next two times, too).

The layout is basically fixed-width tables (even if they're using DIVs instead), and the text is deliberately rather small. And while there's a limited degree to which you can loosen up a page that's dominated by a timetable or route map, so far they're not trying anywhere: they just lock the width at about 800 pixels for everything, and I guess you get to scroll horizontally if your display is narrower than that.

A page that gives a written description of a bus route, for instance, doesn't need to be of fixed width — the column with the content could easily stretch or squeeze without losing information, if it weren't imprisoned in a fixed-width template. You do not want to be scrolling horizontally to read paragraphs of running text.

The markup, probably due to invalidity, breaks on the version of Opera that my Internet tablet runs, so some column headings are misplaced, and vertical spacing is sometimes wrong. On the other hand, they luckily picked a width that fits on my screen. Someone with something like a smart phone or an iPod Touch would be less pleased.

The "baby blue tabs" that flip between eastbound, westbound, and the map aren't bookmarkable — you always get the first tab when you load a route's page.

There is some real work behind this site. In addition to the features already mentioned, they have alternative routes written up for people who need to use elevators that are out of order. I'm not endorsing those routes as practical or convenient, but it's sure not a sign of laziness that someone's worked them out and linked them in.

And as for Yonge And Bloor's complaint that the photos on the station pages are "unclickable" and "cheesy" ... uh, take a pill.

There ARE a lot of great designers in this town, but if you read the original RFP, you'd see why anyone with half a mind would have run far, far away from this project.

$350,00 budget, multiple restrictions/high expectations over operating system accessibility and one tight timeline makes the TTC come across as one of the worst clients ever.

Another Perspective: you could get 4 Bruce Mau logos for the cost of this website.

oops, that's a $350,000 budget.

>I really don’t think multiple DIVs interfere with screen-reader access.

I'm under the assumption that screen readers and overused divs would force the end user to listen to a bunch of redundant information over and over again as he/she traverses the site. Correct?

Out of that entire list of reasons that over-nested DIVs are bad, the only one that maters in the real world is the screen reader one, and as far as I know, it's incorrect.. The rest all come down to maintainability, and since you're not in charge of maintaining it, who cares?


So anyhow.. Last night I actually needed to figure out what time the first streetcar would be rolling by king and sherbourne in the morning, so I hopped on the new site to give it a whirl. I actually had exactly that information within 3 clicks. *golf clap for the ttc*

@torontothegreat

"I'm under the assumption that screen readers and overused divs would force the end user to listen to a bunch of redundant information over and over again as he/she traverses the site. Correct?"

No, most screen readers (for me, i know jaws the best) will not actually read the id attribute when associated with the HTML element "div".

Hope that helps.

Cheers

I have to agree with Torontothegreat and YongeAndBloor that this site, even in Beta, is truly offal. The problems in the beta signal to me the direction they are going in, and there are multiple bad decisions and seemingly misdirected principles.

The final version may be better than the Beta, but it may very well get worse. My first comment above was just to register my disapproval, but let me take a second to give an example. (If TTC wants to pay me part of that $350,000 I can write a complete analysis.)

Someone praised the written description of the route. First of all, who wants a Dickensian description of a bus route? Remember that about 50% of Torontonians are immigrants, and a lot of tourists also do not speak English as a first language. And the writing style is so .... wait, let me just critique one example ....

http://beta.ttc.ca/Routes/22/Routemap.jsp
=============

"The 22 Coxwell bus route operates between Coxwell Station on the Bloor-Danforth Subway, the area of Coxwell Avenue and Queen Street East, and Bingham Loop, generally in a north-south direction. Accessible service is provided on the route."

I LIVED IN Toronto 10 years and took the TTC the whole time, but these descriptions need to be re-read several times to comprehend. Why not use some landmarks as well to orient the reader. ("It runs south from Danforth Village towards Lake Ontario as far as Queen Street. It then has a short run (east/west) to Bingham Loop, wherever the &%$# that is.)

=============

"Two services are operated. The 22 (Coxwell Stn-Queen) is the main branch, and operates during the peak periods and midday, from Monday to Friday only. The 22A (Coxwell Stn-Victoria Park) extended branch operates during the evening from Monday to Friday, and at all times on Saturdays, Sundays and holidays."

How about giving these different services different headings?

WEEKDAYS
22 (Coxwell Stn-Queen): operates 7am to 7pm Monday to Friday only

NIGHTS AND WEEKENDS
22A (Coxwell Stn-Victoria Park): operates 7pm to midnight Monday to Friday, as well as all day on the weekend and holidays; it also extends its route east along Queen Street, through The Beach neighbourhood, and ends at Victoria Park bordering on the City of Scarborough.

=============

"Southbound “22 TO QUEEN” buses operate from Coxwell Station via west on Strathmore Boulevard, south on Coxwell Avenue, east on Queen Street East, and south and west on Eastern Avenue to Coxwell Avenue."

Read that again .... OMFG .... it sounds like the route goes in a circle ... "east on Queen Street East, and south and west on Eastern". Any chance for confusion there? These descriptions need a single purpose map. When I was growing up in London, Ontario in the 70s, each bus route had a small paper pamphlet that had a trip-tik style map of the route. Every one of these awful descriptions should have such a map next to it with a "Print" button.

=============

"Northbound “22 TO COXWELL STN” buses operate from Eastern Avenue and Coxwell Avenue via north on Coxwell Avenue, and east on Strathmore Boulevard to Coxwell Station."

See my comment on Southbound 22 TO QUEEN.

=============

"Southbound “22A TO VICTORIA PARK VIA KINGSTON RD” buses operate from Coxwell Station via west on Strathmore Boulevard, south on Coxwell Avenue, east on Queen Street East, north and east on Kingston Road, north on Victoria Park Avenue, and west through Bingham Loop."

I can't find this mythical Bingham Loop on Google Maps. The TTC should not use "turnarounds" named and only know to staff for a public site.

=============

"Northbound “22A TO COXWELL STN” buses operate from Bingham Loop via south on Bingham Avenue, west and south on Kingston Road, south and west on Eastern Avenue, north on Coxwell Avenue, and east on Strathmore Boulevard to Coxwell Station."

You wouldn't have to describe the whole route 5 or 6 rimes if you just used a friggin trip-tik map.
=============

"All buses on the route serve local bus stops along the route."

I would argue that a logo for Local and a logo for Express would be more readable than a sentence written to describe it.

==============

And finally, what I was hoping for when I first went to this link, was a short description of what is served by this bus route.

AMENITIES
The Coxwell Bus Route serves the neighbourhoods of Danforth Village, Little India, the Upper Beach, and the Beach. It is also adjacent to Leslieville. It serves Monarch Park, Fairmount Park, Moncour Playground, Edgewood Park, and Woodbine Park. It serves, XXXX Public School, XXXX Collegiate, XXXX Catholic High School, and XXXX Public Library.

The 22A extended route further services The Beach neighbourhood and Pantry Park, Kew Gardens, Beaches Park and the beach itself on Lake Ontario.


In closing, let me say that every single page in the Beta needs to be re-worked. Or should I say, the whole paradigm of how to clearly communicate this service to the public needs to be re-worked. We will have to live with the new website perhaps for 10 years. Let's do it right, since web technology is far better now than what it was in 1998.

I know you faithful readers can critique my post above, but remember it is a first draft on the fly. I hope it helps you get the general idea. (I was going to post this on the feedback page at the TTC as well, but the Survey tool is broken, and the comments section asks for 30 words or less Need I say more?.)

Cheers,
Tuds

PS To say something nice, might I add that this page looks richer, and easier to read:
http://beta.ttc.ca/Subway/Stations/Coxwell/station.jsp

TokyoTuds:
I could be wrong, but I'd assume that having written descriptions of routes is an accessibility feature for those who use screen readers. Maps are wonderful things, but not super-useful if you're incapable of seeing them clearly.
That said, the descriptions do seem lacking, and could do with a rewrite.
I'm not really sure how your list of disliked route descriptions supports your conclusion that "every single page in the Beta needs to be re-worked" or shows that "there are multiple bad decisions and seemingly misdirected principles". Any clarifications?


Overall, I like it.

My only real complaint is that being fixed-width is problematic for mobile users/those with tiny screens.
I'm a little uncertain about this, but there seems to be too many menu bars for my liking. You've got "Home/Business/News/Wheel-trans/Accessibility" at the top, then the "Schedules/Fares/Riding/Service Alerts" bar below it, at the bottom "About/Jobs/Public Meetings/Surveys/Contact/Site Map", and finally "Privacy Policy/ToU/Bylaw No. 1/Related Links". These are all useful headings, but I can't help but think that some of them could be consolidated.

It's also all a little plain, but that honestly doesn't really matter. I assume that some of what's there now are just placeholder graphics and the final version will be a little prettier. As someone mentioned earlier, having the station til/text (a bit like Spacing's buttons) in the background/as a banner on the station pages would be cool.

On the definitely good side, the URLs are logical and human-decipherable, service information is extremely easy to find (though not necessarily accurate yet), there's an RSS feed for service alerts, the contrast is nice, and answers to common questions (i.e. how to get to the airport) are available right at the home page.
I'll hold on to my final opinion until it is finished and we see how the service tracking map/trip finder integrate into the site and whether service alerts are actually updated, but for a beta I'm really quite pleased.
Good job TTC!

Hey John,

Yeah, the Route Descriptions for me is just one example. I'd keep the descriptions, but rewrite then heavily. For an accessible website, TTC needs to use several tools, not just one. And a map is a natural tool here.

A different example, if you like, is the first page. Only one font size is used on the whole page, and bold is used only in the temporary section asking for feedback on the website.

The feedback tool also is broken. When I tried to paste my comment above there, the survey continues, then at the end crapped out. Just now I typed short comments, and it seemed to word. Only 30 words! This Torontoist comment is already much longer, and needs to be so as to be useful. I don't think the TTC is truly interested in feedback.

Oh well ...
Tuds

Post a comment (Comment Policy)

TIP US OFF

Tip us off with news, leads, links; anything at all.
Subscribe to get events, weather, contests, and stories in your email inbox—daily.

EMAIL (required)

About Torontoist

Torontoist is about Toronto and everything that happens in it. It's edited by David Topping and Marc Lostracco, and you should totally advertise on us.

More about Torontoist.

Get Involved on Torontoist

-->

Recent Comments

The Tall Poppy Interview

Follow Torontoist...