Navigation
Categories
Latest posts
Latest posts in Chasing the Sunset

A new site design

Created Fri 27 Oct 06 - 1:42 by Mithandir in category Chasing the Sunset

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:

Planned changes after user feedback:

Comments

LeeI've got IE7 and the new design seems to work just fine.
Dark DragonAckk... This new site seems to be less Dark Dragon friendly than the old format.... looks nice, but the pop up menus are annoying/obnoxious....
DragonessVery nice site, but it's a good thing it's still under construction. I clicked on the 'enlarge comments' button, and it never went back down. *pouts*
LadyPhoenixWorks fine for me in FireFox 1.5 and IE7. Great job!
EbethVery nice. I like the greenness. Whee...
Aerinelf*gasp* That's awesome! Actually, I like the pop up blurbs, but...
SkreyolaThe project looks great. Thank you SO MUCH for testing with Opera and Linux! You guys are awesome, and I love your comic. :)
saharabearaThe new site design looks more clean and compact. However, I think you should offer a 600x800 version for people with low-resolution screens. The bigger version should be default because the bigger comic is just so much cooler. :)
FireBallVery nice site (and it works well in Firefox and Opera, too!). I like the new icons at the top, although they still lead to the old version of the site (presumably because you haven't yet fully implemented the new version )
Bobthumbs up
espademiait is great to read the comic that way but, harder to read all the comments
ZelaIt looks spectacular!
Nickname:
Site: