header { background: yellow; }
Featured Website 01: Hill Billys

Featured Website 01: Hill Billys

Summary

In the competitive tourism industry, website design has to be first class, particularly in the area of usability. Visitors have to be presented with a comprehensive amount of information of information on the home page without cramming.

Our Website Design Client

HillBillys is three small self catering cottages set on a working farm in the Champagne Valley of the central Drakensberg. There is also a small farm shop that is open every afternoon and at which both local residents and hotel chefs shop for fresh vegetables. After completing the site,  HillBillys took advantage of our website hosting maintenance plan which offers both hosting, search optimization, online promotion and site maintenance for a fixed monthly fee.

Website Design Requirements

I love this type of website design because it is so much more visual than lists of products. Many website designers create websites that suffer from poor usability – again with the contact details and accreditation hidden away. I find, where there is a variety of self catering accommodation, it is difficult to distinguish one from another.

Because nearly everyone uses the Internet to book accommodation, the hospitality trade, (including Durban) and their websites are very competitive worldwide. Search engine considerations aside, the usability can be considered to be:

  1. The ease of access to contact details.
    We put phone numbers, email addresses and where  necessary, physical/postal addresses on every page either in the header or a side panel usually by means of a php include.
  2. Rating
    It is amazing how many website designers get this wrong. The TGCSA logo consists of a single star and many establishments display this large star, misleading visitors into thinking that this is a one-star establishment. Even when the correct number of stars is displayed they are either too small or hidden away at the bottom of the page. We believe that the grading is a major determinant in whether the hotel is contacted so the TGCSA grading is prominently displayed on every page, often close to the contact details.
  3. Accommodation
    Photos of the accommodation, both the common areas like lounges and the bedrooms are exceedingly important and must be of good quality. Unfortunately many small operations do not employ professional photographers so the results are poorly composed. with poor lighting, distorted perspective and of insufficient resolution to yield adequate processing.
    Most current tourism websites now include a slider with samples of the accommodation. Of importance to the ladies, although not necessarily appearing on the slider is the bathroom. Where there is a wide choice of accommodation, it is worth putting in an extra slider on the Accommodation page.
  4. Facilities and Services
    Such things as WiFi, the pool, extra meals, onward booking, local tours and laundry should be stated in brief on the website home page such as on St. Lucia Wetlands Guest House.
  5. Activities
    These are what visitors come to the area for, not just to stay at your accommodation. While they will have done their research, it is useful to state what is available  and include some aspects that do not appear on the usual references. Things like specialist trips – historical, children, birding etc. can be included. The general idea here is to offer a sufficient number and type of activity to persuade the visitor to stay a day or two longer.
  6. Responsiveness
    Booking accommodation is increasingly done via mobile devices so the CSS architecture is responsive and will accommodate small phones. Also, the main contact number on the page header is ‘tappable’ so a a tap on a cellphone screen will automatically dial the number.
    However, on a visually complex website, responsiveness is complicated particularly with headers. Text wraps as the screen reduces in size and that will cause things like the all important contact details to be hidden behind the slider. On the HillBilly website, a 840px breakpoint removes (display:none)  the slider and the main title. The strapline is not removed but hidden (visibility: hidden) at 800px so that the contact details below do not move upwards out of sight.
    As can be seen from the code below, the sidebar, footer and certain images also disappear at 840px.
@media screen and (max-width: 840px) {
/* applies only if the screen is narrower than 840px */
 #layerslider, .slider, .sidebar, .footer, .three, .header h1, img.body
 {
 display: none;
 }
}
@media screen and (max-width: 800px) {
/* applies only if the screen is narrower than 800px */
 .header h3
 {
 visibility: hidden;
 }
}

Greater than 840px

hillbilly7

800px800px

 

Less than 550px550px

 

 The Website Design

Where there are several different but similar accommodation types (such as the Kruger) it is worth allocating a single page to each. In the case of HillyBillys, the three cottages are very different and accommodate 2, 4 or 6 visitors so a separate page is not needed.

However, the home page slider has a triptych of the three cottages with animated layers describing each. Again, on the slider, images of the accommodation are overlaid with the particular cottage. The home page should contain enough information for the visitor not to have to go to any of the other pages. Photos of the accommodation, both general and specific, contact details, services and nearby attractions should all be on the home page.  Second, an accordion with fuller descriptions and thirdly, a tabbed gallery of the three cottages.

Similar to Tudor House Inn, I included a Location page and CSS3 Contact page. There are several other examples on our web design portfolio page another self catering accommodation in St. Lucia website.

Single page websites are becoming more common however in my experience they are so well endowed with whitespace that the content suffers. It would seem that the design of the website and not the content should be sufficient for the visitor to make a decision. I am also under the impression that such a paucity of textual information might impact on the Google rank – unless possibly it is a well established domain.

The Header Slider

We do not believe in slapping some clipart on with a couple of trite lines of text. The slider should not only be informative but should tell a story.

Slide One: An evocative image of one of the cottages with the Drakensberg backdrop.

hillbilly5

 

Slide Two: A triptych of each of the accommodation cottages with animated layers describing the accommodation offered by each cottage.

hillbilly6

 

Other Slides: Images of the accommodation together with an animated layer describing the photograph by cottage type and the number of people it can sleep.

hillbilly4

The Accordion

Accordions are useful ways of including necessary information within a limited space. Tabs are another way which compress the space further but are limited in that the tab headings are small whilst accordion headings occupy the full width of the accordion.

Accordion slider used to display accommodation types

The Tabbed Gallery

This is from that veritable humongous CSS resource CSS Play and works very nicely. It will accommodate images of differing sizes too.

Featured website design tabbed gallery

 

Web Design Resources and Software

  1. The CSS Grid – Skeleton
  2. The slider – Layer Slider
  3. The Accordion Slider – CodeCanyon
  4. The tabbed gallery from CSS Play
  5. The Location Finder – CodeCanyon
  6. The Contact form
  7. Font Awesome icons
  8. Basic font: Quattrocento
  9. Warthog Web Design
  10. Durban Website Designers
  11. CSS Play

Some Similar Websites from Durban Website Designers

  1. Wendys BnB guesthouse in Mtubatuba
  2. African Ambience Guest House in St. Lucia
  3. African Dreamz BnB guesthouse
  4. Tudor House Inn, Durban
  5. St. Lucia Wilds, self catering St. Lucia
Summary
Article Name
Featured Website Design: Hill Billys
Description
With HillBillys website , I used several devices to do this. First, the home page slider has a triptych of the three cottages with animated layers describing each. Again, on the slider, images of the accommodation are overlaid with a short description. Second, an accordion with descriptions and thirdly, a tabbed gallery of the three cottages.
Author

Leave a Reply

Your email address will not be published. Required fields are marked *

*