Register | username: pw: 
Attackpoint - performance and training tools for orienteering athletes

Discussion: Makings of a good O club website?

in: Orienteering; General;

Sep 28, 2016 7:31 PM # 
Suncoast Orienteering is about to enter its second year as a recognized O-USA club and fourth year of staging events in southwest Florida and beyond. We have a Facebook page. We tried a Meet Up page. We had a web page for one event. However we do not yet have a permanent web page, one that will list events, results, explain orienteering and attract newcomers, etc
This is something that was going to stay on our backburner for a long time as while I like to make maps and stage events I am not so good at web communication and publicity in general.
However this year I have been fortunate to secure the help of two college students working on a class project who will develop a website for Suncoast Orienteering. They are currently researching orienteering and our club websites across the country. The good part of this is that they will be able to see what works from the eye of newcomers to orienteering.
But what works for you orienteering veterans? What do you look for in a club's website? What functions in a website appeal to you? Can you give good examples?
Your comments will be forwarded to our two web developers and receive my thanks. Feel free to contact me through my profile's e-mail address.
Sep 28, 2016 7:37 PM # 
MNOC just transitioned to a new site in January. We used Wix for the front end and ZapEvent for registration. Our key needs were that it be easy modifiable without a professional IT asset, minimize effort on volunteers, and look professional. Our site meets that to varying degrees. It is still an item that takes attention, but it can be shared amongst key members.
Sep 28, 2016 7:44 PM # 
I'm seeing some good club websites out there... relatively new to me sites I like include QOC, MNOC (thanks for that), and HVO.

To me, a website is only as strong as its images, and from a design point of view, should showcase them. So, if the pictures are weak, it brings down the whole production. Of course, there can be significant differences of opinion regarding how you want to depict orienteering, but a good starting point, for example, would be photos from Dave Yee.
Sep 28, 2016 7:50 PM # 
Our club's site is built on Wordpress with some customisation. Wordpress with I think a plug-in databases for events does pretty much everything we need and very easily now that it's set up.
Sep 28, 2016 8:37 PM # 
I designed and built a custom Wordpress theme for CascadeOC from scratch, and we use a custom registration system that handles volunteer points that member Peter Golde built.

Before doing any design or writing one line of code, I actually interviewed current and potential users of our site, from newcomer to veteran. My goal was to uncover a) frustrations with the current site, and b) their main goals when visiting the site.

These interviews guided my design decisions for both newcomers and veterans. A lot of people like to just "guess" these things, but I don't recommend it. Don't guess, just ASK.

Anyway... for an example of a design decision, check out an event page:

The content in the blue boxes is helper content aimed at newcomers, and each blue box is relevant to content nearby. So when you read that you have to rent an e-punch and you're like, "what's an e-punch?" the next blue box will tell you.

Meanwhile, veterans quickly learn that they can skip over these boxes when reading event info, so it doesn't really slow them down.

Other things I introduced: a rating system for maps, since newer orienteers were sometimes surprised by a venue's difficulty. Both results and directions to the next meet are accessible from the front page. And of course, it's mobile-friendly!

I've been meaning to start a blog soon to write about all these design decisions. I got married this year and went on a long honeymoon, so I haven't gotten to it. But I hope to start it soon!
Sep 28, 2016 8:48 PM # 
"But what works for you orienteering veterans? What do you look for in a club's website?"

I found that experienced orienteers basically wanted easy access to registration, directions, and results. Mainly those three. Experienced orienteers will spend so little time in the other areas of the site.

Meanwhile, newcomers are trying really hard to figure out what orienteering "is like" and figure out if it'll make them feel dumb, or if it will be fun. (Will people be running? Will I get left behind? Will it be too hard? How do you use the compass?)

Another common Q is "how long will this take?" because people are trying to plan their weekend. The fact that o' courses are a) measured in a straight line, b) measured in kilometers, and c) take longer to complete than running the equivalent distance at a fun run... all these compound to make it quite hard for newcomers to figure out what they're in for.

Check out our Newcomers section for some answers to these types of questions:
Sep 28, 2016 9:04 PM # 
Don't forget to make the web site work well on mobile devices. I almost exclusively use a mobile device to access the Internet nowadays, and I think many others do as well, especially younger people than me.
Sep 28, 2016 9:11 PM # 
Very impressive (Cascade) site, Rebecca! That's a lot of very useful information especially for newcomers. OUSA needs someone like you to do this for other clubs. (I mean that.)

As for other sites mentioned above, MNOC's has a giant photo as the first thing you see (rotating images). I like the smaller image on COC's page.

Photos are all well and good but can overwhelm the page, pushing other pertinent information "below the fold" to use a newspaper term.
Sep 28, 2016 9:24 PM # 
Great point JimBaker: there's only one time I really check my club's website on my phone, and that's when I'm late for an event and trying to find directions. Then I really really want it to work properly on a phone.
Sep 28, 2016 9:32 PM # 
In terms of looking up an event's directions on the road, that might be a reason for limiting photos on some pages, to make loading on rural 2G or 3G networks more feasible, without missing one's start ;-). But maybe that's a Colorado thing, and changing even here...more 4G even in the mountains.
Sep 29, 2016 12:09 AM # 
Fantastic, Rebecca. The boxes down the right hand side are wonderful.

Heck, it's even great on lynx.
Sep 29, 2016 12:46 AM # 
Agree strongly with Run_Bosco, especially the 2nd and 3rd paragraphs. And Jim_Baker's about working well on mobile devices.

As an experienced orienteer, I want to see the schedule, any special event details, directions, and a good location map. Personally I dislike directions that simply link to google maps - half the time, there's no highlight or pin showing the park or event site. And when I'm on the way to the park, I definitely want event info and directions to work on my phone! Oh, and I definitely want the location map and basic info to be easy to print (several O sites have some kind of frame design where half the info gets cut off when printing).

From my perspective, keep the design of that basic when-where-format information as simple as possible - avoid weird frames, scrolling or rotating photos and images, or other complex stuff that takes forever to load when you are on a fading 2-bar cell signal trying to find the park!

Of course for beginners and trying to entice new people, you want cool photos, and an easy to find "what is", "how to" , and "FAQ" areas. Also, for newbies (and some experienced orienteers), giving GPS coordinates and/or a physical street address that can be put into a navigation system is useful for finding our events.

Don't forget to periodically update your event calendar - as it gets late in the year, its a minor annoyance to go to a schedule page and have to scroll through all the "dead" January thru September meet dates to reach the current schedule.

Archive results with an easy to use index.

other pet peeves (of an experienced orienteer):
event start times not listed on event schedule. Having to hunt around for another page to find that "all our events start from X to Y".
event directions / locator map not linked from event listings. Again, having to leave the schedule page to go find "directions" or "locations" page, which often seems generic and hasn't necessarily been updated to be event specific.
Sep 29, 2016 1:19 AM # 
perhaps http://cluburl/eventdate would be a good place to have simple phone instructions and directions. Get lost on the way, type the url in, go directly there. Would need some skillz to get the automatic generation from the club calendar.
Sep 29, 2016 5:12 AM # 
Two college students sounds great but in the long run you'd need to maintain whatever they build. SMOC started using whyjustrun a few years back alongside our regular site and we may switch to that fully this year, with minimal effort you can have something like with no dedicated admin basically.
Sep 29, 2016 1:16 PM # 
@Run_Bosco, I love what you've done with COC's website. That is beautiful, functional, and makes me want to copy all of it.
Sep 29, 2016 1:19 PM # 
Yes--it's great.
Sep 29, 2016 4:19 PM # 
@acjospe, thanks! Since it is a Wordpress theme that I built, I believe that it is technically possible for me to publish the theme for other clubs to download and install onto their own Wordpress site..... but I'm not quite ready to do that yet.

First, there are still some things I need to figure out. The results page, for instance, is not yet paginated, I need to figure out how to get an iCal link auto-generated when an event is created, there's some buttons that I want to fade to a "disabled" status when there is no active link there...

...there's just a variety of small and medium things that I'd like to fix, add, spruce up, before thinking about offering the theme to other people. And, I'd like another year or more under my belt of supporting the site for Cascade, to make sure that I'm up to the task for supporting the theme for a wider audience (I may not be).

That said– it is totally cool for people to just borrow the design ideas and implement them in their own way, on their own platform. No waiting around for me needed. Like how I did the sidebar? Make a similar side bar. Like the blue boxes? I love them, you should make info boxes that integrate with your event pages too.


For anyone that's seriously curious about what posting an event to our website looks like, I've made an instructional video (that accompanies step-by-step written directions) on how to do that for our club:

(**This is what posting to our website looks like. To build it, I literally wrote pages of Php from scratch to achieve the levels of customization I needed for how events, results, series, maps, etc. all interact.)

It is nearly 30 minutes long, so you've got to be like, reallllly curious. ;)

To sum up maybe the most interesting thing about posting events:

When creating a new event, some of the text fields are auto-populated with default content. This ranges from what I call "soft templates" that guide the author on how to format the content (such as, how event distances should be laid out), to straight-up content such as, all the "How are courses measured?" content that appears in the blue box beneath the course information.

The content can be added to, edited, deleted, replaced, as needed. It was important to keep auto-populated content editable and deletable, as that was a problem on our old website: the default content was sometimes inaccurate or just largely ignored/missed.

The other largely automated item is maps. The author selects the competition map from a list, and that one action will populate the map image, map description, link back to the map page, the map RATING (navigational and physical challenge on a scale of 1 to 10), the embedded Google map, turn-by-turn directions (that go TO the venue, but not all the way to the parking lot)... and then parking information is added manually.

The direction link that populates the Events table is actually added manually, to force the author to double-check that the embedded map is correct for the particular event. If the embedded map is not correct, I do have to update it myself (slightly too complicated for a novice web user to do, but it's not actually that complicated). So, that's the slight hiccup in that process stream, but it happens so infrequently, I don't think it's a big deal.


@mikeminium keep the events updated?? You gots to automate that sh*t! Events should update themselves. :)
Sep 30, 2016 7:21 AM # 
Thank you all for this very valuable information and for the time it has taken to assemble it.
I had not ever spent much time looking at any club's website - except of course Ottawa's and FLO's where I go to get my event information. If you are like me you may not be able to answer this question with authority but I will throw it out:
IF your club had to or wanted to adopt a new website structure and content which other club website would you most like yours to copy?

(I did not know this until today but did you know that pretty well all the professional sports leagues in North America -NFL, MLS, NHL, MLB, NBA - have their team website structure looking exactly the same and even those structures are very similar from sport to sport.Same for Aussie Rules Football)
Sep 30, 2016 3:06 PM # 
For results pages, IMO, DVOA's is the gold standard...
Sep 30, 2016 9:33 PM # 
Pink Socks:
Flip it. What makes a bad club website?
Sep 30, 2016 10:36 PM # 
What makes a bad club website?

One with too many photos showing things like people dressed like birders registering (well we know they're registering) at park picnic tables.

Out of date information - e.g. Upcoming Events links that mention 'upcoming' 2014 events.
Sep 30, 2016 10:50 PM # 
Bad sites:

Frames--they're very dated. I know of at least a couple US club websites like this.

Websites with outdated links (USOF => OUSA in 2010...).
Oct 1, 2016 1:46 AM # 
Bad: websites that work on some browsers but not others.
Oct 1, 2016 5:22 AM # 
Bad: Sites that don't work properly on mobile devices.

Bad: Results pages where you have to click on each course individually, rather than just scroll through all of them.
Oct 3, 2016 8:17 PM # 
Bad: Sites with complicated interfaces that are reliant on one club member for updates.

Bad: Sites a 10 y.o. or 70 y.o. don't find intuitive.
Oct 4, 2016 12:28 AM # 
Identifying what's a bad site should be easy.

Basically, outdated = bad. (frames bad, not mobile-friendly bad, old info bad)

The internet, like many things, is constantly changing. So one of the first steps to keeping a good website is the realization that it is not a one-and-done task.
Oct 4, 2016 9:23 AM # 
@Run_Bosco, I really like what you've done with the COC site and plan to engage in some sincere forms of flattery of some of your design elements (i.e., copying). Cookies on me if our paths cross!

For this:
I literally wrote pages of Php from scratch (emphasis mine)
I offer sympathy. Cookies aren't enough.
Oct 4, 2016 11:19 AM # 
A number of people have mentioned frames, others mobile devices
1) In the context of websites what are frames?
2) What features make a website work well on a mobile device?
Oct 4, 2016 12:01 PM # 
Frames are a way to embed one web page inside another web page. This can quickly get very messy. Modern web sites should be built with HTML5 which deprecates things like frames and Flash.
Oct 4, 2016 12:01 PM # 
1) Frames are a way of dividing up a website into a sections. See this example. They were sort of useful once upon a time but never really liked by users. Now it's relatively easy to have things like menu bars or info boxes on your webpage, as well as to update sections of the page without having to refresh the whole thing. The 'frame' tag is deprecated in the latest version of HTML but you'll still find some sites out there using it.

2) The page needs to look good and work properly at a range of different sizes. This means that, for example, a menu bar across the top of the screen that's visible on your MacBook turns into a hamburger button when viewed on the much smaller iPhone screen. Or the three columns of text turn into individual blocks stacked vertically that you swipe up and down to see. This is called responsive design and is really important now that so much web traffic is on mobile devices. There are a plethora of tools that make it a lot easier to do this.
Oct 6, 2016 6:52 AM # 
Our club and several others use WhyJustRun which you can read about and see some club pages and try for yourself to see if it does what you need:

It works on mobile devices well enough that I can find out where the start is for every event, and seems easy enough to use (we use it for more than 60 events per year just for our one club, so it has to be pretty simple).

It makes it easy to keep things updated and active so you don't end up with a stale looking website as the first thing new people see and you can connect it with Facebook and other things.

I would say it's more aimed at veterans because it was developed by people that are very into orienteering, but I think it's flexible enough that you could address beginner needs as well with some of the great points Rebecca has provided.

The results are basic compared to DVOA, but Winsplits, routegadget, and attackpoint already existed so a basic results function that can be used by new people and for training events is provided.

Good luck!

Please login to add a message.