California Motorcycle Adventures have been my client since 2007 and since that time, I’ve completely rebuilt their website several times. This latest rebuild involved porting the site to WordPress, a significant undertaking since all the custom reservation system coding (see original post about this site) had to be integrated seamlessly across several software platforms.

The move to WordPress garnered many benefits however, including the ease of laying out a responsive web design and moving all the motorcycle listings from an HTML table structure (as in all previous versions of the site) to a custom post database structure inside WordPress (which made updating or adding new motorcycles to the fleet a quick, simple process, easy for the client.)

Since California Motorcycle Adventures advertises and rents to motorcycle riders from all around the world (who would have to travel to the San Francisco Bay Area business location) the first task of the home page is to establish that the business is located in the San Francisco Bay Area. (Placing the geographic location names prominently at the top of the page is, even more importantly, a significant search engine ranking factor for people doing location specific searches.)

At the heart of the homepage are four (simultaneous) slideshows, which cycle through the motorcycles in each of the four rental categories and from which site visitors can jump quickly to a page listing the rentals in that category. On wide screens, the four slideshows are side-by-side in a horizontal row. On tablet devices, the slideshows switch to a 2×2 grid and on phones, there are no slideshows, just buttons that link to the corresponding pages.

With the conversion to WordPress, every motorcycle in the rental fleet has its own page, filled in with photos, descriptions, rental rates, specifications taken from the corresponding record (custom post) in the WordPress database.

Motorcycles in the rental fleet, displayed as a list, as viewed on the various devices.

In the original HTML implementation of the website, details about each motorcycle (make, model, color, pricing, etc.) were hard-coded into various arrays and tables duplicated throughout the site. I wrote a number of pre-processing scripts that generated the coding semi-automatically, but the resulting code blocks still had to  be inserted in each web page with a text editor, a somewhat tedious and error-prone process.

With the move to WordPress, a Content Management System (CMS) built on databases, it was natural to use a database to manage the motorcycles. With WordPress, each blog post resides as a record in the database (simplified explanation). Conceptually, each motorcycle could be a “record” in the database, with fields for make, model, engine type, rental rates, discounts, etc. I created a custom post type for “motorcycle” and defined custom fields (i.e. beyond the standard WordPress fields for title, content, excerpt, image, etc.) for each detail about the motorcycle. Once the data structure was defined, I constructed the editing screens so my clients could update the information as easily as filling out boxes in a form.

This made for a HUGE improvement in usability over the old HTML implementation. Previously, even a single change in pricing for one motorcycle involved a semi-manual recompiling of many pages in the website. With the new implementation, it only takes a moment to make any change and it is instantly reflected in every part of the website.

Every presentation of the information, whether it be on an individual motorcycle’s detail page, or on any of the different fleet listing pages, or on the pricing estimate or reservations page, they all get their data from the single corresponding database record.

When I built the first website for California Motorcycle Adventures, they had one testimonial. It was pretty good, so I said, “Let’s feature it on the home page,” which we did. Over time, more testimonials came in, uniformly positive, so I created a page just to list them. I realized that posting customer stories gave us a fresh stream of keyword-rich content, e.g. “Harley-Davidson Road King Tours Yosemite National Park,” that we could leverage for better search ranking.

What I didn’t realize was how much people related to these stories. Riders loved sending in stories, with photos (which we also could SEO leverage by assigning keyword-rich file names, alt tags, etc.) of their motorcycling vacations. Some renters even submitted magazine-length travelogues, with dozens of photos.

I added a forms page where customers could easily submit reviews and upload photos, because, besides being great for SEO, this growing collection of positive reviews made for impressive “social proof.” New customers frequently mentioned that reading the testimonials is what encouraged them to contact the rental office.

In the HTML versions of the website, new testimonials were appended to the page, with minimal formatting and separated by a horizontal line from previous entries. However, those magazine-style stories each required their own web page, with better layout and individual titles (and menu list items). After a few years, it got really messy, so testimonials were grouped by year, each year with its own web page.

Once again, the move to WordPress provided a natural solution: each testimonial, whether magazine-length or just two sentences long, would get its own web page. I created a custom post type, “testimonial,” with additional custom fields for bike model, year, etc.

Once every testimonial became an item in the database, it was straightforward to present groupings of testimonials in various views.

The screenshot above shows how a testimonial appears in list view, with the title of the review, a photo thumbnail (if available) and a short excerpt or summary. 

The reviews listing section, shown in the screenshot below, displays a list of the testimonials grouped by the year or the motorcycle model that the visitor selects.

The screenshot below shows the full page view of the testimonial with a magazine-style layout for customer supplied photos and text.

Testimonial list views are also used on home and landing pages, where a random selection of three testimonials is displayed at the bottom (re-randomized when the page is reloaded)

Because the testimonials are indexed by motorcycle model, every individual motorcycle details page can query the database and display a grid (thumbnails and titles only) of reviews that pertain to that model of motorcycle. Screenshot below of motorcycle details page showing customer reviews for that model.

The Facebook Page is used for announcements: new motorcycles, special promotions and discounts, but much more commonly, the page is used to repost testimonials from the website, as they come in.

The website generates Twitter Cards and Facebook Open Graph tags in every webpage. When someone posts the page URL (link) to a social media account, the post will display the web page title, the “Featured Image” (almost all the pages have images that represent the page content) and a short excerpt or summary.

This increases engagement, people who see the post can instantly ascertain what it’s about and whether they want to read further.

umans as well as contain keywords for search engines.

• Here’s the link for the testimonials I’ve used in these examples: https://californiamotorcycleadventures.com/testimonial/excellent-personal-service/
• Here’s another: https://californiamotorcycleadventures.com/motorcycle-rental-insurance/

It’s simply good practice to design URLs that way and on this site it was practiced that way since the very first version, years ago, was optimized for “discoverability.”

Motorcycle riders from around the world love to tour the scenic California back roads and highways. Since they can’t pack their motorcycles in their luggage, they have to rent them once they arrive in California. That means they have to find this motorcycle rental company, which does minimal print advertising, via a search engine.

Near the top of the home page, four side-by-side slideshows display the models from each rental category morphing one into the next. That’s meant to capture the human visitors’ attention. Similarly, we want to direct the attention of search engines to certain phrases used by customers to to find this site. That’s why the phrase “Motorcycles for Rent” above the slideshow, is encoded as an HTML Heading tag, which signifies its importance to the search algorithms.

I built the first version of this site over several months in 2007, working extremely closely (weekly face-to-face meetings) with the business owners to understand the industry, the competition and the mindset of their customers. We then spent about 18 months developing and refining search engine strategies and optimizing the website as well as a number of Google AdWords campaigns so the site would rank highly and PPC (Pay-Per-Click) ads would display prominently against much better funded national chains.

Search engine optimization was crucial to this small “mom and pop” business’ survival. Not only have they survived, but in the first year of operation of this website, they doubled their gross receipts over the previous year, when they were struggling with a franchise agency website that crashed so much it nearly killed their business.

Notice how, in the first homepage pictured here, all the variations on search phrases that prospective customers might use are prominently (i.e. in headings, bold, or link anchor text) featured: Motorcycle Rental, We Rent Motorcycles, easy for you to rent a motorcycle, Four Classes of Motorcycles for Rent, makes renting a motorcycle easy and fast, etc.

However, those wouldn’t be the terms used in other (non “American”) English speaking countries, hence a second home page with variations on the terms “Motorbike Hire” which is used as the landing page for similarly worded PPC ads geographically targeted to those countries and also serving as the landing page for organic searches for those terms.

I authored just about every line of text content for this website. Early on, when I asked the owner what he wanted to say on the various pages of his site, he responded in his trademark direct style, “You go ahead and write it, that’s what I’m #@%&! paying you for.”

I subsequently authored seven “overview” articles  to make the website more attractive to search engines. I wrote the articles incorporating keywords and phrases that we had determined potential customers would be typing into search engines. While these articles do contain numerous embedded keyphrases (for search engines), they are written to be engaging to human readers as well as inclusive of all pertinent details.

The heart of this website is the online reservation system which presents, as simply as possible, a 4-step reservation process: choose your bike, choose your dates, choose your options, submit personal and credit card information. Even with simplification, there are so many options and required legal notices, that the screenshot of the page had to be cut into thirds to be displayed here:

This page features a 100% custom designed rental estimate calculator with the owner’s unique and complex business rules for special discounts depending on vehicle, rental duration, high/low season, insurance and equipment options, etc. These business rules are modeled and tested in a Microsoft Excel spreadsheet whose calculations are then converted to JavaScript and inserted to the page code. The program logic prevents meaningless choices (such as returning a bike before picking it up). All of the required form input fields have field-specific error messages if they are not properly filled out.

The reservation forms output is formatted to feed directly into the rental office accounting software systems transmitted over industry standard HTTPS/SSL secure channels (with an additional second layer of custom encryption for credit card details.)

The “Quick Quote” rental cost estimator  is coded for dynamic recalculation, so that the person filling the form can change dates, options and even the motorcycle they want at any point in the process and have all the numeric fields recalculated instantly.

To facilitate selection of different motorcycles, a custom overlay menu was designed that lists the make, model, color, seasonal and daily rates with a pop up thumbnail photo of the bike in each row/menu item.

Navigation throughout the website is provided by a standard menu bar with two levels of drop-down sub-menus. My first design used rectangular sections of the horizontal menu bar as buttons, similarly to many of the top sites of the day (in 2007).

However, my client absolutely hated them. He told me: “How are people gonna know they’re buttons? Make them rounded, so they look like buttons! I want people to know they are buttons. Make ’em burst into flame when you click them!” (Verbatim quote) I responded, “Sure thing, Scott, I’ll give you menu buttons that burst into flame,” then figured out how to animate the effect he wanted. Here’s an enlarged (about 250%) sample button below so you can see one in action:

Click or tap to simulate hover (button up/down state)