Testing & Correcting the code

Testing the site for improvements can be done really easily, sites like nibbler offer services for free to check your website and give it an overall rating based on modern website requirements.

When testing the exhibition website, it gave some really interesting feedback. Below are the results of the test, they mean that the site is lacking in quite a few areas. It is great to know that I succeeded in 5/9 areas in which I was tested

MY OVERALL RATING

NEGATIVES

POSTIVES

I went back and tried to correct my errors, this is the results of the test after I had fixed the problems to the best of my ability.

I improved the meta tags

I reduced the amount of errors;

giving me a new overall rating;

References;

http://nibbler.silktide.com/en_US/reports/www.scottlewis.eu

Advertisement

Basics of Zurb Framework

Building this website was an important stage in learning foundation, the font-end framework. First stage was to download a custom version of the Zurb foundation, the only difference between this one and the main Zurb foundation was the guttering being reset to 0 REM from 1.875.

The next step was learning how the layout worked properly. I learnt that divs should have various class names that relate to the stylesheet that comes with Zurb. These are the most commonly used classes from site and what they meant;

“row”

Row is an important div that contains all of the column divs

“large”

This class displays the content of that div on small – large sized screens

“medium”

This class displays the content of that div on small – medium sized screens

“small”

This class displays the content of that div on small sized screens only

The previous size classes are used in conjunction with width numbers to select the width of the div in columns. For example “large-12 column” would be a full width div while a “large-6 column” would only be half width of the page.

“show-for-small-only

This class would show the contents of that div only on a small screen, the same works for medium and large.

“hide-for-small-only

This class would hide the contents of that div only on a small screen, the same works for medium and large.

“float-center”

This class floats everything contained in the div to the centre.

It was also important for me to connect my own css file to style elements of the page without me touching the css that cam bundled with Zurb. Therefore I created a custom.css file into my css folder to add styles to my html files. It is worth noting sometimes I needed to use an !important tag in my css to override the code shown elsewhere.

Browser Testing

You will note below from the screen shots that the website works across all browsers, with the exception of the font in internet explorer being the only difference. This is a massive part of the marketing because it means my entire market can view the website without an issue on the desktop computer.

INTERNET EXPLORER

CHROME

FIREFOX

SAFARI

Mobile Testing

An important side of the marketability of this website is the amount of users that can access it. This means, that the website must be accessible by multiple devices. Therefore I have tested three of the screens on the website to check if they would work, below are the results.

It is worth noticing that the site looks good and works well on most of the screens but it is important to also note that some of the design stops working on the smaller screens and that the devices are unable to show the site as they have been designed. The best way to get round this is to build a separate design for landscape mobile. Another issue is the fonts, and whether they display correctly, as you can see there is a mixed result from across the different devices. The mobile optimization has worked to a satisfactory level, but has suffered a few issues on smaller screens.

SEO for Marketing

Part off SEO is making sure that your site is found when searched for, therefore it is vital that it can be found easily. Google Keywords Planner is a great service that tells you how many times a word is searched for, and which are the best keywords to use. I have found entered the sites details into the keyword planner, and have made two discoveries.

Firstly, people only search for a specific type of exhibition if at all, therefore they must know the name through the marketing for them to search it, otherwise there are no keywords that can help get the site seen, you can see this here with really vague keyword suggestions like “museum exhibits”;

Secondly, the most popular museum related searched are the names themselves, this means that the best way to create a successful exhibition, is to make it travel between really popular museums, and make the website appear at the top of the search for these museums. You can see this would be really successful by the following information;