The Business
The Riverview B&B is a Bed and Breakfast that also does summer weddings. This is not your average B&B, it features some amenities that set it apart.
For one – it is located on a lookout on the edge of the Sheep river near Okotoks. The hillside has been landscaped and terraces allow people to walk down the hill to an amphitheater-like formation with flower beds and staircases.
The website is used to get people to book guest rooms year round, and also to get bookings for the seasonal wedding venue that they have. You can see the site at Riverviewbnb.ca
Personally, this project is one of the more interesting that I’ve worked on. This is because the original website was actually my first commissioned project while I was still in University. See below to view the homepage of the first version I made all the way back in 2002.
Over the years, the site has been updated and redesigned. I kind of get a kick out of looking at the various versions, just to see how my own skills have progressed. I can also see some of the website design trends that I’ve been influenced by in the last 14 years.
Now while doing a major upgrade in 2016, I can look back at how much the site has changed.
2003
2006
2011
Site Priorities and Top Tasks
With every website there is a short list of things you have to get right. The B&B is located in the country in a rural area, so simply finding the place needed to be made as easy as possible. Weddings are not something you can be late to. The site had to make the Map the easiest thing to find in the navigation. This is a top task that many people use the site for.
In the not so distant past, before everyone had Google Maps on their phone, (hard to remember huh?) there would always be a couple people who got totally lost trying to find the place. Some even having their GPS units take them several miles away.
This happens a lot less now with most people having a smart phone. With the new site, I did the best I could to make it so people can quickly find the place on the Google map. The map is also the second item on the navigation, so you don’t have to look hard to find it.
Going Responsive
One thing that has become much more important for web designers is making sure that the sites you build are responsive. This means the layout resizes whether you are using a phone, tablet or computer.
Most old websites are only designed for a one sized screen, usually a computer. This is not what people use to view websites as often anymore, as mobile traffic has now surpassed desktop for the majority of websites.
Aside from usability and giving the largest segment of your traffic a good browsing experience – it’s helps SEO too. Google rewards the sites that are optimized for the mobile user by making those sites rank higher in search results, all other things being equal.
Making a WordPress website responsive is done through the active Theme. Most layout rules are written in CSS. For this site I used SASS, which allows you to write media queries that give specific rules to each section’s layout according to what the user’s screen size is.
Upgrades to the Photo Gallery
Some of these updates were easy and didn’t require much thinking. Simply updating to a larger size of thumbnail made it a lot easier to see all the photos.
The way that the navigation worked on the old site was a little clunky. When moving from photo to photo – the “next” button would move along with the size of the photo. This meant a lot of moving the mouse to click each time — not that fun to do if you’re trying to show the website to someone who is sitting next to you.
For the new Gallery I used the Magnific Javascript library. It does not have a WordPress plugin yet but I got it to work by using the wp_enqueue_script function in the theme’s functions.php file. This properly imports the required JS files in the right order. The Gallery now has “next” and “previous” buttons that are always in the same place, and you can also navigate the photos with the keyboard.
As a side note, many of these scripts allow the user to navigate using the keyboard arrow buttons. This is not something that most people will try however, so most people will just click on the navigation buttons with their mouse.
Adding a blog and planning some future content
Just about every website that wants traffic has to actively publish new content. This is often done with a blog on the site. The overly simplified idea is that you publish a post, share it, and encourage other people to both share it and link to it from their websites.
Going from a static HTML website to WordPress one meant that getting a blog was one of the main upgrades. For this one I opted for super-simple and mobile optimized. This meant no sidebars and only a 1 column layout.
For a blog strategy (always good to have one) we have a few ideas. We will start with posting some current pictures of the place to show some activities that are going on. Upcoming content will include some helpful resources for people who are planning their wedding, which is who our customers are.
I’ll also be working on some outreach of local photographers and wedding-related vendors. in order to write the guides that will be on the site.