A new site design
Today I opened the beta of the new CtS site design to the public. I started work on it last saturday, so all in all it took less than 6 days to write, more or less from scratch. That included learning some new (for me) stuff like AJAX.
This new design is the technically most advanced webcomic site that I know off, and probably amongst the most advanced on the entire internet. Actually, feature-wise even the old CtS site was ahead of any other webcomic that I know off. Let's take a look at what's new and what's old.
New: compact design
Despite a large comic taking up a lot of space (1000x640), the new site is compact enough to be entirely above the fold at resolutions of 1280x1024 (or at 1280x960 when browsing full screen). This is despite the wealth of extra information (comments, news, cast, archive browser, ....) that's available.
New: AJAX based navigation frame
In the bottom-left of each comic page you now find the archive frame. This can be used to navigate through the entire archive to find a strip, without leaving the page.
Simply click on a comic thumbnail to go to a strip. You can use the arrows to move backwards and forwards in the archive and hover over the thumbnails to identify strips. By clicking on the chapter or storyline icon you can select a different chapter and/or storyline (also with handy hints)). On top of that you can double-click either the chapter or storyline icon to go to the first strip of respectively that chapter or that storyline.
Thanks to AJAX, the data for this archive is loaded only when you need it.
New: Overlayed navigation
If you hover over the left or right 200 pixels of the comic image itself, an arrow will appear after about a second. If you click in this area (even before the arrow appears), you will go to the previous or next strip. No more looking for small navigation buttons, just click on the right part of the strip itself!
New: Comments/News/Etc tabs
Comments, News and some other things are wrapped together into the new comments panel. The news is loaded only when needed (again with AJAX) to reduce loading time. You can click either the expand button or the open tab to enlarge this area so it's easier to read.
New: Update Status
The countdown timer was already there on the old design of course, but now if you hover over it the hint window will tell you exactly what stage the next update is in: Not Started / Scripted / Framed / Sketched / Inked / Colored / Shaded / Done.
Old: 'You missed X strips'
One of our most popular features is still here: provided you have cookies on and use the same browser, teh site will keep track of how many updates you miss. So if you don't come for a few weeks, you'll be greeted with a message saying something like "You've missed 8 strips. Click here to go to the last one you've read."
Old: Also appearing in this strip
Just like the old site, the new one has a question mark on it. Hover over it and you get a menu of all characters that appear in this strip with links to their cast pages. From there you can go to any storyline they appeared in. No more wondering "who was that again?".
Of course, I'm still working on it. This is only a beta. So far it's been tested with IE 6, Firefox 1.5 and Opera 9.x. The latter two both on windows and linux. We've noticed some problems with the AJAX in Safari, but will try to get that sorted somehow (I don't have a mac myself) and I'll be trying to get my hands on an IE7 machine soon too.
Want to bet we still don't get nominated for best web design on the CCA's ? :P
Update:
Current status on different browsers:
- Firefox 1.5: 98% operational (no cursor in add comment field).
- Firefox 2.0: 98% operational (no cursor in add comment field).
- Opera 9: 98% operational (comic title does not appear on the right line)
- Internet Explorer 7: 98% operational (expand button does not display right on first load)
- Internet Explorer 6: 95% operational (expand button does not display right on first load, huge annoying blink when displaying overlay navigation arrows)
Planned changes after user feedback:
- Add option to turn off hint windows
Comments