The John Carroll School

8 comments | Posted: 29 December 05 in Featured, by Nathan Smith

URL: johncarroll.org

At the risk of looking like I’m trying to rip off Stylegala, I have decided to feature this site. It’s not everyday that you see such a nicely designed site for an educational institution, let alone a high school! The site was designed by Silverpoint, whom Shaun Inman worked with before striking out on his own.

What I like about this site are the clean lines, good use of color, and tasteful inclusion of Flash. They have even provided a fall-back image when JavaScript is disabled, since their Flash loader is JS dependent. The animation adds to the ambiance of the site instead of detracting from it. They also have a very thorough calendar system, with viewing by day, week or month. It can also be customized to suit your needs.

Even though I am normally not a big fan of drop-down menus, these are done stylishly. There is careful attention to detail evident by the right two categories expanding towards the left, allowing for them to be visible without touching the edge of the browser window at 800×600 resolution.

I am also very impressed that the drop-down menus work even with JavaScript disabled. This is something that is often overlooked in site design, that of fall-back scenarios when implimenting technology that is either unavailable or disabled purposely. With CSS switched off, it is nice to see that the menu lists are where they should be, towards the top of the page.

A popular and over-used method of doing drop-downs relies on putting the menus at the bottom of the HTML. By being later in the code, they are higher in the z-index, allowing them to be placed on top of the rest of the site design. For a good bad example of this being done, check out the Billy Graham website.

Silverpoint has employed no such dirty tricks, and has gone the extra mile to ensure accessibility. Perfect XHTML and CSS, with tasteful bits of Flash and sIFR, make an impressive site. While it may look simple on the surface, a lot of work has gone into it behind the scenes to ensure a pleasant user experience.

Discuss This Topic

  1. 1 Yannick

    Couldn’t agree with you more Nathan. It is a really well re-designed website. I like that they are using Google Maps for directions to the school. That’s pretty cool.

     
  2. 2 Ryan Heneise

    The only thing that kind of bothered me was that I kept wanting to click on the big logo to get to the home page.

    At first glance I wasn’t a huge fan of this site, but the more I looked at it the more it grew on me. Now I think this is really one of the nicest looking school sites I have ever seen. And it’s well-constructed too! Amazing!

     
  3. 3 Justin Thorp

    Wow, it is pretty nice. It has a good clean look. Nice design and use of color. They do a good job of harnessing web standards and style sheets.

    There are some accessibility issues. None of them seem like they would be hard to fix.

    The skip navigation should be the very first thing on the page. If I was a visual user who used the keyboard to navigate, I wouldn’t easily be able to find the skip navigation.

    They use a fixed width layout. When you increase the font size, it destroys the layout. The design seems like it would lend itself to more of a fluid layout.

    There should also be a pause button on that home page animation or it should stop after a number of iterations.

     
  4. 4 Yannick

    Justin: I’m not sure if a pause button or stopping the animation after a number of iterations is really necessary. It would be a nice feature, but I don’t know how many people will be on the homepage for that long at anyone visit before clicking on a link to go elsewhere on the site. So it probably wouldn’t really bother them that it’s still animating.

     
  5. 5 Justin Thorp

    It’s in the W3C’s Web Content Accessibility Guidelines 1.0. Guideline #7 says,
    “Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped.

    Some people with cognitive or visual disabilities are unable to read moving text quickly enough or at all. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. Screen readers are unable to read moving text. People with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects. ”
    http://www.w3.org/TR/WCAG/#gl-movement

     
  6. 6 Yannick

    Ah I see. Thanks for pointing that out Justin.

     
  7. 7 Bobby

    When I view this page in Safari, the drop down menus that drop down over the flash flicker. Specifically “About John Carrol” and about 1/3rd, the part that hangs over the flash, of “Admissions”.

     
  8. 8 Matt Thomas

    Thanks for the comments, all, and for the well-thought-out and fair review.

    I’ve been lurking here since the review was posted, and while I can’t really respond to everything, the dropdowns in Safari issue is one I wrestled with quite a bit. It seems to be caused by a bug in the Flash plug-in in Safari. CSS dropdown menus just go a bit wonky in that browser when they appear over Flash elements (the animation on the home page, or sIFR headlines). Similar behavior was a problem in earlier versions of Firefox on the Mac, but was rectified as of 1.5 if memory serves.

    At the end of the day, the decision came down to turning off the dropdowns altogether for Mac users (including Firefox users) or make them available to everyone, albeit in a somewhat hindered state for Safari users. While the flicker annoys me as much as anyone (believe me!) we decided that since it didn’t significantly hinder usability, we should run with it.

    This is to say that I am absolutely looking forward to this bug being fixed so I can finally deliver dropdowns across platforms, with Flash elements, without hesitation. :)

    MT

     

Comments closed after 2 weeks.