Running Calendar v4 theme goes live

Posted January 17th, 2012 in Case Studies

One of the websites I own is the New Zealand Running Calendar. I launched the 4th version of its template / theme yesterday and document the changes here with a couple of screenshots from the new version and the previous version, and talk about some of the changes.

Homepage screenshots

The first two screenshots below are of the homepage. All pages that are not in the inline popup effectively look like this with the full header at the top of the page and with advertising in the right side.

The differences between the v3 and v4 theme are to make the navigation more defined and more button / tab like; add social sharing links to the left of the main content area; and move the subscription buttons from above the advertising on the right side to the top right of the header area.

Version 3 Homepage:

Version 4 Homepage:

Popup with event information screenshots

The event page appears in an inline colorbox popup when clicking an event in the calendar lists. This means the user can easily look at an event's information, close the popup and then look at another event in the list without having to go backwards and forwards between pages. (Although see my note below about mobile / touch devices).

This behaviour is the same in both the v3 and v4 templates, but the widh of the popup has been increased slightly to include the social sharing buttons which again are offset to the left of the main content body.

Version 3 inline popup:

Version 4 inline popup:

Header area

The header image has been created in a way that no matter how wide the browser window is it will repeat seamlessly. The same technique was used in both versions of the theme but it was remade for version 4 with more of the runners' bodies shown.

Originally I reduced the height of the header area from 120px to 100px and less of the runners' bodies were showing, but it looked far too cramped at the top of the page so I returned it back to 120px.

The logo originally ran onto multiple lines, but I remade that as well so it would be a single line, allowing the navigation to run the full width of the template.

Navigation

The tabbed navigation is now database driven so I can modify it at any time. The underlying engine will be used to drive both this NZ website and an Australian version of the same website and they won't necessarily always have the same navigation, so it's important I can easily change what's in the nav without having to update hard coded links in a template. This is the same for the footer navigation.

There are no images used in the navigation at all; border-radius and rgba background colours are used for browsers that support them, and CSS3Pie is used for Internet Explorer < 9 which do not.

Social sharing buttons

I've added social sharing icons to the left of the main content area. It's fixed positioned with CSS just under the header area, and uses Javascript to scroll to 5px from the top of the page as the header scrolls off the page.

The icons are positioned with a left margin of -75px and don't affect the layout / centering of the main content. If the browser window is wide enough (it is for 90% of the visitors to the website) they'll see it, if it's not then they won't. For example, using an iPad you won't see the social icons at all.

When the event page appears in an inline Colorbox popup the social icons also show, but again have a margin left of -75px so if the window isn't big enough they won't show.

No colorbox for touch devices

On an iPad in version 3 the popup would fill the whole screen and it wasn't easy to close the window. The site isn't optimized in any way whatsoever for mobile devices but smaller devices will have the same issue, assuming people can be bothered browsing such small content on a small device.

I decided mobile devices shouldn't use colorbox at all to solve this usability issue of not being able to easily close it. The easiest way to do this was to use Modernizer with just touch device detection and not show colorbox for touch enabled devices.

I know this isn't perfect because touch devices can be big (and we'll see more of them in time e.g. Windows 8), but for now it's a good enough way to detect mobile devices as far as I am concerned and I can change it in time. In any case, it doesn't break the site if it doesn't work correctly: event links will simply load as a new page instead of in the inline popup.