The way forward – HTML5 – RiteFitness Website Design

Embracing Technology- RiteFitness Website Creation

RITE-LOGO-shop-logoWebsite technologies are constantly evolving, and the benefits of this evolution, for both developers and consumers are vast.  Given the rise and increasing popularity of HTML5, more and more website developers are making the transition from previous versions of (X)HTML to the newer, much improved HTML5.  The transition isn’t necessarily that difficult either, considering the fact that HTML5 is compatible with all previous versions of the mark-up language, there are, however, various reasons why one may not want to utilise HTML5 into their development process.

Lack of Browser Support for HTML5

Hesitation from both the developer and client is understandable, especially when you consider that the major browsers don’t currently support all of the features HTML5 has to offer.  Sure, they are playing catch up relatively fast, but when an aesthetically pleasing Website with high end user experience and functionality is created using HTML5, chances are, the percentage of visitors who would be able to view the site as it was intended would be in the minority.    This is indeed a sad fact, but, it is no reason to avoid HTML5 altogether, there are many aspects that are supported and if we wait for full compatibility with browsers we would be waiting for a very long time.

Basically – you CAN’T use all the features it has to offer, because not all browsers work yet, just use the more basic ones. People still use internet explorer 6 & 7.


Backwards compatibility with Internet Explorer

Many Web Developers loathe the Internet Explorer family, or, more specifically, they despise the problems Internet Explorer 6, 7, 8 and on occasion even 9 bring, IE 10 however, is on level with Google Chrome and Mozilla Firefox in regards to HTML5 compatibility.  As we started planning the RiteFitness Website, the lack of support from Internet Explorer 6, 7 and 8 for certain HTML5 semantics and CSS3 attributes was certainly a critical factor we had to consider.  A few of the effects created with HTML5 just wouldn’t work on the outdated IE browsers, and so, we were left with two options:

  • Create a separate implementation for Internet Explorer
  • Remove all code that wasn’t compatible with previous Internet Explorer versions and standardise the website so that it functioned the same in all browsers.

We chose the former, because, why shouldn’t we be able to embrace technology? If certain users can’t be obliged to update their browsers then surely they would be content with a lesser design, a design that their browser of choice can fully support.

Colour Scheme

Sometimes when creating a website for a client, you get specific guidelines you must abide by, RiteFitness was one of those clients, and it’s not necessarily a bad thing.  The colour scheme for the RiteFitness website was predetermined; it had to match the RiteFitness logo, so we were challenged to work with mainly dark colours, These corporate guidelines for brands are the way forward, helping to stand out in a crowded marketplace.

RF-Personal-Training RF-SUPPLEMENTS  379489_260095407390968_325324486_n


Developing using HTML5

We built the RiteFitness Website wanting to utilise HTML5 to the full extent, though, after revising the lack of support for certain features, and discussing it with the client, we decided it would be best to only implement the features which were supported by the major browsers at the time.

Screen shot 2013-04-12 at 10.38.45

The Website itself was created using a basic layout, Header, Navigation, Content, Sidebar and Footer. Well, this is true for all pages except the landing page, which is significantly different from the rest of the website.  Using HTML5 we created a sort of sliding door effect, allowing us to place images of the Fitness Centre as a front, and when they are hovered over, reveal information about the class the image represents.  This was done to for style and, more importantly, interactivity.


This was our first time creating a website with HTML5, and we, as well as the client are happy with the results, and recognise that it was and is the right way to go.  Going forward, we are interested to see what we and other developers can accomplish by using this new technology.  Hopefully more people will accept that this is the way forward, and hasten the change to a better structure, a better standard of creation for the web.

E-Commerce Section

Screen shot 2013-04-12 at 10.51.42As part of the project, an online shop was needed, an E-commerce solution. We looked at other sites and how they worked, we also carried out a survey of the web for competitors and fore-runners &  looked at the main difference between them.

Some sites were stand alone website and shopsite integrated into one, in a way this looked forced or as if it was thought about after the main website was built, an add-on or extension. During our observations it became clear a separate standalone shop system would be needed to maintain a online presence and have a scalable solution with updates from the development community and must be a open source solution.


Comments are closed.