Evaluation & Future Considerations

In this brief, I was given a reasonably free reign on my work provided it was about the four elements. I chose to be slightly different in my approach and tackled the four elements within alchemy. I wanted at the same time as accomplishing my brief to try something different and take the theory of mobile first to a new level. While I learnt a lot about mobile first and techniques it used, I also learnt the reason why so many people leave the mobile experience on the mobile is because it simply doesn’t work on the desktop. This means that the overall design isn’t as good as it possibly could have been.

Learning Zurb Frameworks was another milestone within this assignment as it meant I had to learn and use the entire package from scratch, I am happy to say that now I know my way around foundation and it means I am a lot more confident with using it, something I couldn’t say 6 months ago. At the same time it meant I could also input extra code and ideas based on other frameworks and learn even more.

The marketing strategy was an important element of the brief and something I completed sucessfully, the research allowed me to understand that offline and online are closely tied and should seamlessly integrate with each other, something that mean’t I have to try and get across in my marketing. Somewhere I felt I wasn’t doing so well was in the area of implementing the social media marketing within the website itself, as it how no links to the Facebook or twitter. This would be a failure within the marketing online but instead something I would need to consider if I were to spend more time improving this project. I would need a much greater integration of the marketing and what the exhibition is about within the actual website to convince people to attend the museum itself.

Implementation of Google Analytics was an interesting pillar of the marketing strategy as it meant I was able to check the amount of people visiting the website, details of their demographics and details as to why they weren’t purchasing tickets. This would mean i’d be able to create a more successful website which drives more sales as I could change the website to suit the needs of the user based on analytics.

It seems that the bottom navigation on the desktop version of the website doesn’t make sense and confused the user quite a lot when navigating it. It would be inappropriate for users to leave the page simply because they could not navigate it as it would impact the sales.

The styling of the content managed system is another negative side in this project and I have failed to make the word central aligned while also making the font illegibly small. I have left the word on the site as evidence that I am capable installing and using couch cms, but i consider this an area that would require further research.

The form on the website is something I have tried to implement from a pre-built experience. The reason for this was the fact that the labels float inside the box making more a much more enjoyable experience, however in the way I have created my form, it is first uncompleted as limits on time restricted me from finishing it, but it also looks unprofessional.

If I was able to do this assignment again, I would be able to learn from the mistakes I have made. Simply being able to further what I already have created I would firstly make the desktop navigation sit at the top since this is where most users are most comfortable with the navigation being positioned. From my user testing, when people went on the ingredients and instructions pages they tried to click on elements on the page which I had not made clickable, therefore, something I would do is allow them to learn more by simply clicking one the ingredient or instruction. Mainly though, if I was offered the opportunity to spend longer on this assignment, I would choose to fully integrate the marketing with the website, by including social networking elements into the site, including but not limited to links to the pages, feeds of statuses and images taken at the exhibition.

There were many good and bad things that have come out of the work I have completed, but all of them have taught me invaluable lessons about the way I work, what I am capable of achieving, my strengths and weaknesses and finally what I do and do not enjoy doing with regards to my work. This means that I can work more efficient and and achieve greater results next time I am given a brief.

Advertisement

Setting up Couch CMS

Couch content management system is a compelling option to making a website enabled with little php knowledge. First stage is to create a database through cPanel of the hosting company.

First, create a database;

Next create a username;

It is important to use the password generator to create a secure password;

Once you have the database prepared, go to the couch cms website and download the package;

Once you have the folder downloaded, rename the config.example.php to config.php

Next you need to open it in a code editor, and add your database name, username & password;

Save the folder, and upload it to the root folder on your domain;

setup is almost complete, you should go to your domain and access the couch folder, this can be done by going to http://www.example.co.uk/couch. Once there set your username and password up and store it in a safe place. You will be greeted with the backend.

To make a .hmtl file editable through the couch cms it is done really easily, firstly change the file to become a .php file. Next you need to add the code before DOCTYPE;

<?php require_once( ‘couch/cms.php’ ); ?>

<cms:template title=’tester’ />

and the following code after </html>;
<?php COUCH::invoke(); ?>

Then all you need to do is add the following code to add something you want to edit;

<cms:editable name=’text_content’ type=’text’ label=’Text’
desc=’Enter Test Here’>
</cms:editable>

This sound then look something like this;

you can then go into the backend and edit what should appear in this place, you can see an example of this here;

Which appears on my own website at http://scottlewis.eu/exhibition/exhibition.php which you can see here under the back button in the top left (A mistake I am currently unable to fix);

 

Four Elements Presentation

You can look at my final presentation about this assignment here;

https://www.icloud.com/keynote/000KgjRQ3AfOtU1HiyftH5qDQ#Four_Elements

Specific Code

Contact page used float labels as seen here;

https://dribbble.com/shots/1254439–GIF-Float-Label-Form-Interaction

You can see in my code I have tried to implement float labels in my design;

html;

javascript;

The Result;

The hover on the homescreen has an fade animation on it for the different elements, this is there relevant code;

and the final result;

Google Analytics;

Marketing Strategy

Online Marketing

There are many ways to market online, but from my research I found that the best methods are using the mainstream services that people use everyday, as this also allows me to track their success a lot easier. The three stand out ways from my research would be to use YouTube video ads at the beginning of the video for people in the area of Yorkshire, Facebook advertising and iAds on the iPhone which targets mobile users. in the area

Offline Marketing

It is vital to remember that once this marketing has been produced and published, I would need to analyze the effects it has had on the sales on the website. Obviously within the analytics tracking on the website, I would be able to see where the users are coming from, so if it is from a form of my online marketing I woulds have no trouble being able to determine that. The problem arises in the fact I also have offline marketing set up, so the best way to track the offline sales is to ask the user how thy heard about the exhibition when they are purchasing the tickets.

The timing of the marketing is specific to target the audience at the right time. You can see the breakdown below;

The website should be prepared 5 months before the exhibition is due to go live, this means by the time the 3 months benchmark comes around, the site should be at the top of google for the relevant museum. Bookmarks and lighters are shown here;

should be used to get people talking, they are two items that would distribute themselves in the community and gain free marketing. The next stages would be the facebook advertising, newspaper ads and billboards because they take effect as of immediately. You can see examples of these here;

Apple iAds on the iPhone are a great way to reach the user in an interactive manner, you can see this below;

which are shown on the device like so;

The style of the tickets are very important, based on an authentic look of real money, they give an impression of luxury and sell the experience overall;

Setting up Google Analtics

This is an important stage as it would allow me to check the amount of users on the website and how many were buying tickets. It would allow me to discover problems with the site, and get them fixed so I could generate more sales. The first stage is to get the code from Google themselves, this should be setting up the site through the Google Analytics site;

and then taking the script shown here;

and then placing it just before </head> on each page you would like to track;

then after a few days you would start to get results that look like this;

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

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.