Website Redesign: Eastham Windmill Weekend
Adding color, fun and visual interest to an older website
Need a website makeover? Wondering how to put a little life and interest into your website? Here’s a good example of a website makeover, done for a popular Eastham public event. We’ve included some screenshots of the original site, so you can do some comparing.
The Eastham Windmill Weekend is a once-a-year community event held over a 3-day period. There are lots of things to do and see, including a parade, entertainment by a whole slew of groups, a road race, tons of things for kids… you get the idea.
What was needed for the website makeover
This was originally a “can you update the site for us?” kind of project, but after doing a little analysis, some larger concerns popped up, and it became an “older website makeover” (a website redesign):
- The black & white color scheme didn’t seem to fit the purpose of the site
- Improve site navigation: make things easier to find
- Improve readability & usability
- Add mobile-friendliness
The black/white/gray color scheme of the theme in use (“Autozone” by SM Themes) seemed a bit dreary for a fun family weekend of festivities, so one of our first goals was to brighten it up, to make it more “fun,” like the event itself. We would be changing the color scheme, the layout, the spacing of the various elements, and a lot of the content.
Here’s a quick before/after peek at one section of the home page.
Before: black & white
After: colors!
The header
The top of the page is repeated throughout the site, and offered a couple of opportunities.
Click to enlarge
The large black/dark section was replaced with a light background. The logo was positioned to be shown entirely in this area (not half in, half out); next to the logo we added the name of the site/event.
The new header is actually wider, and the type size is larger, too, and we added a section to the very top, including a quick description and event dates.
Improving Readability
The image carousel
Below the header, repeated on every page, was a set of three images in what’s called an image “slider” or “carousel,” where one image is shown at a time, in this case for about 3 seconds each.
The slider occupied critically important space: the top of the page. In print media it’s called “above the fold,” and that’s where people expect to quickly find key information. Research has shown that sliders are often ignored completely, so their use has declined. (If you’d like more information on them, read this article, “Alternatives to Using a Slider for Better Home Page Conversions.”)
While we’re not totally opposed to sliders (just mostly opposed), they should never ever appear on every page – especially if it’s the same slider on every page.
The menu in the sidebar
Always use contrast to make your text easy to read. A dark color surrounded by another a dark color makes it hard to distinguish the words.
If your site is relatively small, it’s a good idea to put all your items into one menu at the top of the page, which is a good location because it’s predictable (i.e. people are used to looking there) and it provides quick, easy access to information.
Moving that menu also frees up valuable space.
Since Cape Cod is a huge vacation destination, lots of potential Windmill Weekend attendees might not know the location – so we added a clickable map that could be used to get directions, and the event dates.
The organization behind the Windmill Weekend is an all-volunteer, not-for-profit, so anywhere we could introduce that information, and ask for contributions, would be a plus.
The new sidebar adds brighter, happier colors, some good visual information, and offers a chance to donate to the non-profit.
This is the old sidebar
This is the new sidebar
Page Content
The content on many of the pages was within PDF documents; to read it you had to open the PDF. Unable to simply skim the content, this method makes it much harder for people to read (and nearly impossible for smartphone users).
One of the great benefits of using WordPress is the ease of adding/editing content. Changes can be made in minutes! Not so with the PDF format – many people have no idea how to edit that format, and the process is much, much harder than doing so in WordPress.
Content on other pages was minimal, often just a few sentences. For the new design, the volunteers behind the event did some writing, to provide information and generate some excitement. All of that content was put into regular pages. We increased the size of the text by almost 25%, and made sure to include fun images and lots of white space for quick reading.
Event-specific pages got event-specific content. The Windmill Weekend Road Race page, for example, got complete route descriptions, including maps, and provided for registration online.
Speaking of events, we used a free version of the excellent plugin “The Events Calendar” to add a professional look to the 3 days of Windmill Weekend event listings.
The Weekend has people and businesses sign up for a number of other things, too, so we added forms for each of those. No more need to download, print out, fill out, address an envelope, and mail in applications!
This was an interesting project. We had very little content to start, so we went with just one page for a few months. Since it’s all done by volunteers, we had no idea how much more we’d get (or not!), which made planning kind of a challenge, but part of the beauty of WordPress is the ease with which new content can be added.
Visit their site, and find them here, on Facebook.
Resources used on the site
The theme is Beaver Builder
Plugins include:
- Beaver Builder
- Ninja Forms (free version)
- PayPal Donations (free version)
- Scriptless Social Sharing (free version)
- The Events Calendar (free version)
- Ultimate Addons for Beaver Builder
- UpdraftPlus (free version)
