Building the site

I used the foundation framework to build the site to be fully responsive. Below are all the different code that I used.

artist-page

home

images

index

Robots

tickets

foundation

style

footer-artist

head

header

I found that the code worked well and I developed my skills with the time I spent working on the project

Advertisements

FOURTH POLYMER PROJECT TEST

This test was a really important stage because it stopped me from doing what I planned to do. I wanted to use the grid system for the homepage which looked really nice and had fluid animations between the different screens. You can see a working model of the example I was working on here.

It looked really good, inital testing showed that should be a reasonably simple example to work with. The only issue I had encountered so far was the mobile version would need to be completely different as it looks so compacted when in the mobile version as can be seen here;

Screen Shot 2016-03-22 at 18.28.51.png

Then I tried to work with the code itself. While I had read an entire book ( JAVASCRIPT & JQUERY written by Jon Duckett) on reading and writing javascript code, it still managed to beat me. I believe that though using online forums etc to double check my code it was in fact correct but unfortunately the javascript I wanted to use clashed with the Polymer project and returned the user a blank screen.

TEST-4.png

I tried to create a div with a set id of #test2, then I created a string connected to the div using ;

 document.getElementById("test2");

This would pull the information from the div through the javascript. Therefore, it appears  through trail and error and online feedback that this just wouldnt work in this scenario.

References;

https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages&view=demo:demo/index.html

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;

Schermata 2016-01-17 alle 20.38.07.png

javascript;

Schermata 2016-01-17 alle 20.38.33.png

Schermata 2016-01-17 alle 20.39.12.png

Schermata 2016-01-17 alle 20.39.27.png

The Result;

Schermata 2016-01-17 alle 20.41.09.png

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

Schermata 2016-01-17 alle 20.45.45.png

and the final result;

Schermata 2016-01-17 alle 20.47.08.png

Google Analytics;

Schermata 2016-01-17 alle 20.49.23.png

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

1.png

NEGATIVES

2-12-32-22-4

POSTIVES

3-13-23-33-43-5

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

Schermata 2016-01-17 alle 19.25.38.png

I reduced the amount of errors;

Schermata 2016-01-17 alle 19.26.57.png

giving me a new overall rating;

Schermata 2016-01-17 alle 19.27.56.png

References;

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

SEO – Search Engine Optimisation

Understanding how meta data was something I made an effort to learn, since I had changed my design based upon the fact it is not SEO appropriate. I found that meta data is the content that is not visible by the browser but only search engines only. I needed to apply the basic searching techniques from Google into my design.

Search engines like google use “crawlers”, a web bot that follow links on the internet for the specific aim of creating an index of all the sites on the web worldwide.

I learnt that having multiple internal and external links to the site helps the website get a higher ranking, but this is along with the other parts of the how the search engine makes sure your page is most relevant to what the user is looking for.

Making sure that the hierarchy of content is obvious to search engines is essential as it means you get the relevant pages listed, you can do this by creating a sitemap. A sitemap lists all the pages connected to a webpage so that the crawler can easily list them. You also need to have a robots.txt, to make sure that the crawler knows it has access to the page and is meant to list this page.

Adaptive, Fluid, Responsive or Static?

Responsive or Adaptive?

Responsive web design allows you to create a website that will adjust itself to fit the size of the browser regardless of the size of the screen. It means you code it once and it will flow more like a grid with images that will rescale themselves to fit the screen.

Adaptive web design is where you make lots of different versions of the same website so that it fits the different screen resolutions perfectly, while effectively gaining more control of the specific user experiences, it is time consuming. Adaptive design uses breakpoints that mean once you reach a predefined point, the layout will change to fit the screen again.

Something to take note of when making adaptive or responsive sites, is that they all use the same information but use styling to change the information. For example, an image is required at a large size, then the browser will resize it depending on the screen size. Therefore, when possible, it is important to use vectors. It is equally important to remember that you should always design for the desktop and then work smaller down to mobile rather than starting at mobile size.

So overall, fixed websites, the ones I am currently learning how to build have set widths and no media queries (allows the size to understand the size of the device it’s being used on). Fluid websites are a little different, they rely on percentages for relative widths to the browser itself, therefore they don’t need to you use media queries either. Adaptive are built to certain resolutions, then require media queries to determine the device or resolution, these usually rely on set or relative widths. Responsive seems to be a lot more focused on the actual resizing of the display as it is actually designed at multiple levels using again media queries and relative widths.

I found the utility http://www.liquidapsive.com/ which has the same design but allows you to change the way it is coded so you can see for yourself fluid, static, adaptive etc. This allowed me to find the negatives of using every type design. My first finding, one that I was already experiencing when designing my site was when you try to reduce the size of a static site;

1

Adaptive is time consuming and works well for smaller devices but as you can see there are white borders on each side of the design once you reach a certain size.

2

Liquid, because it uses percentages of the width works really well at larger sizes but starts to become illegible when you start to minimise it to a smaller level;

3

Finally, responsive seems to be the go to style as it works when the browser is both really large and really small.

Having understood the different types I thought it would be important to have a look at current responsive sites, as it was the best option from the four above.

Meti Design is a really nice responsive site complete with animation, smooth transitions and a nice 3D animation using frame loads like I noted previously in Sony’s Be Moved Campaign (https://akbrodie.wordpress.com/2014/10/15/website-analysis-4-dangersoffracking-com/). This makes the website look very professional and I found myself wanting one of the products they produce, whether that’s because of the website or not, I am unsure.Below you can see the different screen sizes effecting the page, and how similar the experience looks.

4 5

Skinny ties also have created very good responsive site that promotes the ties they sell. It works just like a responsive site should but has thew addition of a feature that I haven’t seen anywhere else. This feature being the fact that the rollover still works regardless of the screen size, I am unsure if this is pointless or not as when the screen sizes are smaller they generally are touch screen but it turns out that when used on a mobile, the rollover menus come up when the menu items are clicked on. Below you can see the images of the screen sizes and then the different sizes with the rollover menus.

6  8 7
9

Mry is probably my favourite out of the lot though, doing what my research said about starting with desktop and working your way down removing parts bit by bit. The desktop version is complete with zooming circles with flat colours and images in the background while the mobile version has none of this and turns into a box style, therefore creating to completely different experiences for the user depending on how they view the site. You can see this here;

10  11

12

References;

http://mry.com/

http://skinnyties.com/
http://www.metidesign.com/#

Brainstorming

Brainstorm Image

As you can see from my brainstorm there are a few areas in which I need to cover in initial research before I can start considering the technical requirements. A lot of the elements in the brainstorm I have already covered in my blog such as typography.

Something I found interesting was the flow of content, from a sales background I recognise there five major steps to closing a sale with a customer. I understand that it is different on the web as you can’t hear what they’re saying and you can’t talk to them, but you can still apply the same principles. The five steps to closing a sale are:

1 – Making sure you understand your customers needs, and making your service relevant to them. This is done by understanding your target audience which I have already done in my research.

2 – Come across as confident and trustworthy, as they will only put trust in you if you trust in yourself. In normal situations you would build rapport with the customer so that you become friendly and someone they can trust. As I can’t do this through the web, I will have to use other resources that available such as using colour, typography, content and design to create such an experience.

3 – Pitch your service/product to the customer, and as we don’t know anything about the specific customer I have to be very broad in how we approach this. This has to relate to everything single customer, essentially we are pitching blind, with umbrella phrases and statements that will relate to vast amount of people visit the site.

4 – Objection handling is usually where the customer would present their reasons for not wanting the service/product and you turn round and use hard facts to win them around. Again this is not possible on the web, so we have to consider alternative methods such as a FAQ page which is easily relatable and maybe a testimonial page.

5 – Closing the sale is the most important of all steps but also relies on the previous steps being completed properly. You sum up all relevant information, relate to the customer with the information you know about them all while making them feel like your doing them a favour, they are getting something valuable.

Using this approach you could turn a casual visit to the site into a lead for the company, and potentially a sale. Once completing all five steps you provide the customer with the telephone number so they can call the company.

So, explaining how the flow of the page works, I also need to work out the actual content of the site. Firstly the most important thing is the homepage with the contact detail, secondly the portfolio of work for the customer to be able to look at and see the quality of the service provided, this should have rollover images with before and after shots with feedback from the customer. Lastly there should be an about us page for the customer to read a bit about the company so they can decide themselves if they like the sound of the company. The about page should contain details the company, how many staff they employ, what year they were founded, their values and vision.

In line with certain sales techniques that I am aware of from a previous job, offering a guaranteed better rate than any competition is a good way to win over customers, also offering free incentives will mean the customer will feel like they are getting a better service.

Design elements that I need to consider are colours and typography, I need to make sure they are relevant to the client needs and appeal to it’s audience.