Artefact 6 Screenshots

Below are the screenshots of the mobile site in action and how the site would look when saved to the home screen of an iPhone or iPod touch. The app icon was created by myself and code is entered to make it appear as the default home screen icon.

Artefact 6

My final artefact is complete! It can be found at http://www.georgewood.me/artefact6 and is best viewed on an iPhone/iPod Touch as it is a mobile site.
______________________________________________________________

My sixth and final artefact was a mobile version of the site I created for my fifth artefact. Combined these sites take ideas from feedback gained throughout the process of evaluating my previous artefacts in order to make a music website which contains everything people want from a music website. Mobile browsing is already hugely popular and the amount of people who use this method is constantly growing, therefore it would be important for a company to have a site that is tailored specifically for the mobile device.

I am very happy with the overall design and it is clear that it links in with my fifth artefact. It was an interesting process to take the ideas and designs from the previous version and to alter them to work aesthetically on the mobile screen.

I am very happy with the process I chose and I feel that this artefact is a nice conclusion and my artefacts as a whole have taken a very logical route to the finish.

If I had more time then I would like to extend on the artefact and build in some extra features to make it even more functional. I would also like to find a way of being able to preview songs on the device, similar to the preview on the big-screen version.

I used HTML5 and lots of CSS3 once again in order to make sure I was using the most advanced techniques once again and therefore it was completely adequate.

The site works completely as it is but I would like some way of being able to play the music without navigating off the page, however the time constraints led me to stick to just video in order to get sound, whilst I put in lots of information to make up for the lack of music.

Artefact 5 Evaluation

My fifth artefact is a fully functional HTML5 and CSS3 music website which has been created by taking ideas from feedback gained throughout previous artefacts. It features a preview mp3 button, as well as artist information as well as videos. I have also implemented many CSS3 features to improve the design such as rounded borders and background gradients.

I am very happy with the design and feel I have implemented plenty of CSS3 without over using it and sacrificing the quality of the design. If I had more time I would like to extend the page further and play around with different border radius effects.

The process I chose worked well and I feel I have achieved something that takes ideas from all the feedback gained through previous artefacts meaning that my artefacts have taken a clear path through to my final one.

It was good to learn the new CSS3 values and this proved a helpful experience for me, as I was able to learn different things for the first time. I am now confident I can implement these things in future sites I create.

The two-week period allowed me just enough time to design and build the site from scratch, whilst being able to look back through previous feedback in order to take ideas that I then implemented in the site.

I used the most advanced techniques I could to create the site and I don’t feel there were any other techniques I could have brought in which would have added to the site.

Overall I am very happy with the artefact and have received positive feedback from others throughout the process. There isn’t much I would change and I feel that other than a few possible design tweaks it would be hard to improve.

Artefact 4 Evaluation

My fourth artefact was designed to see whether certain website features which have only been available since the introduction of HTML5 and CSS3 have an effect on which sites people prefer to buy their music from. I mainly used the ability to bring in any font that you desire to alter the looks of the three sites. I asked people to look at the three example web pages and then answer six questions relating to them.

I am very happy with the design of my artefact. I managed to create three mock websites with the same content that looked completely different. I don’t really think there is any way I could change the design of them to improve the set of survey results I gained.

I had sufficient time to design three web pages well and then have 30+ people complete the survey. I feel I had the perfect amount of time to get the most out of this artefact.

For this artefact I just used Photoshop to create the mock websites, after compiling the results next time I will properly create a web page in HTML5 and CSS3 in order to give the user a more realistic feel to the site.

I feel I achieved a good set of results from the survey that will allow me to move forwards with my final two artefacts. People had fairly unanimous views that allowed me to collate my results nicely and gain some good responses. Many of them also said the usage of fonts within the sites affected their decisions on which to choose, this has led me to decide to explore the use of fonts within websites further in my next artefacts. They also said they would rather download songs than listen online, this makes it easier for me to progress with my artefacts.

PHP Problem

I had another problem when creating the contact form for the Bluebell webpage. When data was filled out into the form and the send button was pressed, rather than sending it to the correct address and redirecting to the 'message sent' page, a page with the PHP which sends the message appeared;



I felt it must have been a small problem with the HTML of the contact page as I could see the PHP was all correct. It took me while to find it but I had made a small error in the HTML for the form and had entered an incorrect value for the 'class' section. I corrected it to this;



The contact form now works fine.

Client Problem

One problem I had when creating my clients website was with the width of the footer. It was set to 100% as you can see below;



However, even though the width meant it should go across the whole page, it didn't and left gaps to the side and bottom;



I had a play around with different ideas and eventually worked out that the default setting for Dreamweaver pages was to have a small, 10px gap around the edge of the webpage. I therefore needed to remove this gap through using the CSS 'body' tag. I added this section of code;



And after doing that the border has been removed and it now displays correctly;

Artefact 4 Results

My fourth artefact was designed to see if certain HTML5 and CSS3 elements, such as being able to use any font, effected peoples decisions on where they would rather buy from. I made a page featuring three different website designs and asked people to look at them and then answer 6 questions, here are the results;

1. Would you rather buy from site 1, 2, or 3, and why?

3, it looks the most stylish and cool.

3 because it is very clear to use.

3 More professional looking

3 - 1 is too dark and boring and doesn't necessarily convey what the website is trying to do. 2 is too amateur and childlike, the 3rd is much more professional and easier to navigate. Nice use of graphics with the 'pause, play' etc.

I would rather buy from site number 1 because it tells you exactly what the website is for unlike site 3 and the font is easier to read than the 2nd site.

3. Font is the sickest. Colour scheme is nice. It just generally looks quality.

3. Is clearer and text is easier to read.

3. Plain and simple

Site 3 I like the buy now function and the description next to the number one

3. Nicest layout and prefer the font.

3 best layout. 1. looks like it has the stylings of a marijuana paraphanalia website 2. looks like a chewing gum packet 3. looks smart and is the best

3 - I think in looks a lot more professional and modern

3 - It looks more professional and more aesthetically pleasing. The fonts are easier to read. I feel it uses space more effectively that the others.

3 clear font, looks more interactive and provides more information.

2, easy to read and looks easy to use

3 - Looks more official which i believe is down to the neutral colours used.

3 - its looks more professional and the text is easy to read. The font used on 1 and 2 was hard to read.

Site 3 as it is clear and has the simple colouring of black text on grey with a clear buy now button like you would see on itunes!

3 - looks more professional and gives more information.

2. Given the choice, would you rather be able to save songs as favourites so you can listen many times online, or download a song so you could have it on a personal music player to listen to whenever?



3. If the pictures were really fully functioning web pages, which do you think would be the most user friendly?



4. Briefly, if you had the chance to create your own music download site, what features would you include?

Create my own playlists to listen to each time I visit

play online download mp3 download the video favourite

artist profiles and background info see gigs they are doing

A feature similar to Itunes genius - recommended music related to whatever the person has downloaded so far. Also the option to browse by genre.

a top 10 chart and the prices of the songs

To be honest I can't really think of anything that isn't featured on these sites. Maybe a free album artwork updater?

Recommendations

'Trending' type feature split into genre's to highlight album tracks that are listened to a lot that might be missed due to lack of commercial promotion

lyrics, song recommendation

Have a genre filter and a new music recommended to you section

A listen before you buy option, some artist info including some art work and also suggested artists relating to your previous purchases. Basically Itunes.

images, songs, artist description

recommendations , facebook link, high quality MP3 format, large music catalog.

Song previews, videos, artist biographies, charts, playlists

a suggestions app to analyze your previous purchases and recommend new music. A social element where you can add friends and see their purchases and favourites.

send music to your phone create playlist of most popular music

Youtube clips of the songs/ Videos, A member log in, Paypal/ Payment options, Blogs, News Feeds, Clubs, Quick downloads.

Previews of videos/songs.

smart playlists giving you songs similar to your own choices. Ready made playlists for specialised genres.

free single of the week like iTunes. suggestions of music in the same genre you may like to download.

5. Would you be happy to use and download from all three of the sites?



6. Did the usage of different fonts within the pages affect your decision on which was your favourite?

Inspiration

I stumbled across the website for the restaurant chain 'Giraffe' and found it quite inspiring. It gave me ideas for different elements which I would like to include in the Bluebell site. I like how they have integrated the Twitter feed in an interesting way at the top of the page, I feel I have achieved something similar with my site and feel it is as exciting to look at. The website can be seen below;


Giraffe

I have also implemented a similar slideshow on my homepage, however they haven't used actual pictures, just offers. Since seeing this I have now decided to include a slideshow on the menu page which features offers rather than pictures of the restaurant.

They also have a nice feature on their menu page where a tooltip appears with a picture of the particular food you hover over on the menu, I will be implementing a similar thing on the Bluebell website.



They have also included lots of different image changes on hover, this really adds interactivity to the website without becoming too complex, I will try an incorporate many of these within the Bluebell site.

Alignment Problem

Another problem I had when creating my website was on the Location page. I have a large map which is embedded from Google Maps, to the right of this is a box with the address and a link to the website of the sister pub.

When I first embedded the the map it moved the box on the right down for no apparent reason, it looked like this;



I played around with different bits of code to try and align it correctly again, as well as putting it into a container div box. I knew that the margin property was used to move that particular element away from one surrounding it from either/all of the top, left, right, or bottom. I wasn't however aware that by using '-' you could move the div closer to another div. This is done with;



Having found the correct amount of pixels to move the div up by, I have now aligned it properly. Simply using 'margin-bottom' would not work for this as it would leave empty space below and extend the page. It now looks like this;

Active Navigation State

The navigation for my client site contains a different 'state' for whichever page is currently selected. As far as I could see there are two ways of doing this, one with CSS, and one with different images. The different 'state' looks like this;



The first, and more complex, way of achieving this look would be with CSS. To attempt this way I followed a tutorial online which states 'CSS Sprites' would have to be used. This is where one image would contain the three states of each navigation item, these are default, hover, and active. It would look something like this;



Using this with some clever CSS;

/*--CSS Sprites - Default State--*/
ul#topnav a {
float: left;
display: block;
height: 58px; /*--NAVIGATION HEIGHT--*/
text-indent: -99999px; /*--MOVES THE TEXT OFF THE PAGE--*/
background-position: left top;
}

/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left -58px;
}

It gives the effect that the image is changing, when infact it is just moving up and down allowing different bits of the image to be shown.

The second way is alot more simple and just contains HTML and two separate images. One image of the default state, and one of the hover/active state. The HTML is as follows;



This just states on mouse over the image changes to the hover state, then when the mouse moves away again it goes back to the original image. It is then possible to create the appearance of the CSS method by just putting the hover state as the default image.

Client Twitter Integration

In order to keep up with the latest web trends I thought it was important that my client has good links with social networks. I wanted to incorporate a Twitter feed into their website, but in a more interesting way than just featuring 'tweets' at the side of the page in a big row. I came up with the idea of having a ribbon across the top of the page, above the navigation. I feel this breaks up the page nicely and looks really cool;



To call in the correct Twitter feed JavaScript is referenced at the bottom of each HTML page the feed is required on;



Where it says "/user_timeline/thebluebellinn.json" is where the Twitter username is referenced, this code can be applied to any Twitter feed and and in any HTML page. To stop multiple posts appearing the code "twitterCallback2&count=1" is used, where '1' can be changed to whichever number you choose.

The CSS for the feed is as follows;



It is very easy to customise and it wasn't too difficult for me to correctly align the text in the ribbon to make it look good. After this I have also used the same JavaScript to create a Twitter feed on my own website; http://www.georgewood.me and as you can see there is a massive difference in the way I have displayed the information, showing how customisable this bit of JavaScript is.

Artefact 4 Design 2

Artefact 4

My fourth artefact will be focusing on the layout of a site to see what effects that has. I will try and incorporate different elements which are only available with HTML5 and CSS3, this includes things like rounded borders, external fonts, and text with inside shadows.

This is my first design;


I will now make two more designs and then put these online with a survey to see peoples opinions.

Artefact 3 Evaluation

My third artefact set out to see whether people preferred interactive image adverts to video adverts. I set out a webpage with links to two separate pages that looked the same, one containing video, one with interactive images. I then got approximately 50 people to visit each page and then choose which one they would prefer to buy from. They were then taken to a short survey that helped me understand why they chose that particular site.

Opinions were split almost 50-50 between the two sites and people generally would be prepared to buy from either site. Some people said the videos helped them as they could try before they buy, whilst others said that videos made the site look overcrowded and tacky.

I was personally happy with the design of both sites and I feel I moved away well from the design of my second artefact. The whole idea was to make the sites look the same but the fact people were prepared to buy from either means I could draw no real conclusions from it.

I got all the videos from YouTube and embedded them using their embed code, changing the height and width properties accordingly so it fit in with my design. There isn’t really another way of doing this so the techniques I used for my solution seem adequate. I feel I utilised the time period set for this artefact well.

If I were to do the same again I think I would try and make the differences between the sites more distinguishable so that there would be more reasons for people to choose one site over the other. This may lead me more towards the layout side of things to see whether how a webpage is set out affects people’s choices.

Artefact 3 Results

1.

2.Briefly, why did you choose the site you did over the other?

People who chose the image site;
"The video site looked too cluttered and dodgy."
"images site looked more professional website. videos looked like someones myspace page"
"I found the video had to much going on and if I wanted to watch the video I would have gone to YouTube. When buying a feel an imagine is suitable"
"Watching videos is too time consuming."
"I prefer graphic design adverts to video."
"I personally like album cover art."
"Video site was too busy and overcrowded"
"videos take too long to watch, if i'm buying its a quick process dont wanna sit around n watch a video."
"The site i chose was simple and clear and easily allowed me too choose the selected item."
"video looked like youtube so why would i buy you tube?"
"personal preferance is the images and slide show with the song in the back ground, not watching the full performance."
"The image leaves something to the imagination. I wouldn't be inclined to buy from the video if i could watch it in full on the web site."


People who chose the video site;
"Like the mini videos"
"because watching visuals and moving videos is more of an attraction and will keep the consumer hooked for longer"
"you could preview the songs, it was more interactive"
"More entertaining, listen first, know what I am buying"
"less hectic"
"more visual and interesting to look at"
"Image site was too plain and boring."
"Because I could try the song out before I'd hypothetically buy it."
"It was more informative"
"More interesting to watch"
"Able to see / hear more of the artist"
"more interesting, informative and loved the set up"
"As you could hear the song in full before choosing."
"i liked the idea of being able to watch the video first"
"I enjoy music videos"
"more detail & better to see this"


3.

4.

5.

6.

Transparent Text Box Client

The first problem I have encountered whilst creating my clients website is with the transparent text box on the homepage. I have put in a temporary solution where I have literally used an image of the semi transparent box with the wooden flooring behind it, but I would like to find a way to have a properly transparent box.

It currently looks like this;


You can see that is isn't correctly aligned. Most people when browsing the site would not notice it, and would probably be distracted by the text. I searched around online and found this tutorial; http://www.w3schools.com/Css/css_image_transparency.asp. It shows how to alter the opacity of an image to make it transparent, but the same principles can be applied to a div box. I had a go at implementing a similar code for div's and came up with this;


Now when I look at this div on a page in Chrome it comes out as below and you can see there are no longer problems with alignment of the background. I suspect however that there would be problems when this is viewed in IE.

Artefact 2 Evaluation

My second artefact was two websites comparing peoples views of a music download site. One of the sites featured completely still images, whilst the other had interactive imagery, such as a slideshow and different effects when images were hovered over.

I wanted to design it so it almost looked familiar when people first visited, so I took inspiration from the iTunes layout and am very happy with how it turned out. I got people to visit the two sites and then choose which one they would prefer to download from. I then asked for their reasoning behind their decisions.

I am happy with the design and I don’t think I would change much if I had the chance. I would add in more films and songs however in order to bulk out the website and make it look more filled. I felt having not much content on there made it less realistic, but with the time constraints I think I did well.

I managed to get a good amount of people visiting the site and filling out my questionnaires, which helped me gain a decent amount of statistical evidence to back up my claims.

Further on in my artefact process I would like to develop on the websites I made for this artefact and add in some HTML5 and CSS3 to see what, if any, effects this has on the results.

When designing the site I wanted to make it feel calm and as if there was lots of space for the user to operate in, I feel this is one of the ways iTunes has been so successful and I think I managed to make a site which isn’t too cluttered but allows the user to see enough functionality to give me a good idea of which adverts work best.

Client Phone Call

I recently spoke to my client and they said they urgently needed something putting online as they have been questioned numerous times by customers about the Bluebell website. Therefore I decided to scan in some of their advertisements and upload these to the homepage. I saw this as an opportunity to get across the feel I would be hoping to achieve when my website is complete and therefore I used the same background as I am using in the proper site. This way people will remember the site next time they visit and it will link in well.

The current homepage can be found here.

Bluebell Slideshow

For the slideshow on the homepage of my website I needed something which looked smooth and ran well allowing the website to look trendy without having lots of flashy gimmicks. I chose to use the jQuery Panel Gallery slideshow within my Bluebell website.

The slideshow can be found here and I chose to use this slideshow for a number of reasons. The slideshow has many different slide effects which can either run randomly or can be edited within the JavaScript so it is just one effect. I will discuss the effects with my client at our next meeting to see whether he would rather keep it random or have a specific one, this may make it more professional.

Below are some screenshots of various parts of the JavaScript where it can be edited to change what it does;





I also spoke to my client and uploaded an example of the slideshow working within their website so I could find out what they thought. It can be seen here.

PRP Artefact Three

My third artefact is online now and I need as many responses as possible, so if you could go to http://www.georgewood.me/artefact3 and follow the instructions it would be a big help.

Why I'm Using Cushy CMS

I have decided to implement Cushy CMS within my website for the Bluebell. It is probably the easiest CMS to implement and use I have come across and makes it very easy for my client to log in and change any details they wish to on their website.

The first thing I had to do was tell Cushy the FTP details to the site and then enter these, then by simply using the "div class" function and then using the class "cushycms" it automatically finds these areas and makes them editable. With Cushy you can also do the same for photos and these will be replaced and resized automatically. This makes the whole process less time consuming for my client.

When editing text there is a plain text box, which allows my chosen 'editors' to enter any text they want making it bold, italic, or underlined as they desire.

Below is a screenshot of my Cushy CMS homepage, you can see several sites which I have already uploaded, as well as the editors at the bottom. I have the ability to decide which websites they can edit, and which pages within these sites.

I have used this site throughout many previous websites I have made whilst freelancing and have always found it very reliable and user friendly.

Event Display For Client

I have been trying to think of a way to display the list of events my client requires on their website. I don't want to do just a normal boring list but I want the information to still be easy to see straight away. I have found two possibilities which display the information nicely, but I don't think it would be that easy for my client to go in and update it.

Idea 1;

This is called an Accordion and it displays the information in tabs in a vertical navigation style. This way would be good as it uses a minimal amount of space and still looks good. It also allows for quite a bit of information to be input into each event, and there is space for a picture.

Idea 2;


This way is slightly more advanced. It works by displaying the information in two different ways, one as just images, and then one with images and some text. This way looks cool but may not work aswell if there are lots of events as it would lead to the page being very long.

Tutorials for these two functions can be found here and here.

Client Update

I am slightly behind with my client project, due to the SPP3 deadline being pushed back. This meant I had to re-do my rationale and that teamed with PRP meant that my client project was pushed aside. My gantt chart states that I should be adding JQuery to the site now, which I am actually doing and some has been added, therefore I cannot be too far behind schedule.

By the end of this month I hope to have the site finished and will attend my third meeting with my client to check if they are happy and see if any changes need to be made. So far each page of the website has been created and basic elements, such as the homepage slideshow, have been put into place. I am now looking at new and exciting ways of displaying information to make the site stand out amongst other pub/restaurant sites.

PRP Interactive Image Site Results

Below are the results to the questionnaires answered by people who chose to purchase from the interactive site.

1.
2.
3.
4.

Here are a selection of the most interesting answers for question 5.

5.Briefly, what were your main reasons behind choosing the interactive website to download from as opposed to the still image?
"it felt more professional and real"

"For some reason the interactivity made the website feel more professional and trustworthy to me, maybe because it requires more effort and therefore perhaps money"

"i felt that more work had gone into the interactive page. This made it feel more reputable and trustworthy. It was also easier to see what was on offer with the changing graphics at the top. That is all.."

"very little, i could have chose either. luck of the draw"

"every time the image changes it catches your and therefore keeps you interested"

"Feels more professional"

"More exciting and eye catching"

Essentially these answers are what I would have expected. The fact that I got a pretty much overwhelming response in favour of still image for my first survey has confused me a little as now its almost 100% for interactive images when people can actually see content.

PRP Still Image Site Results

Overall just 6% of people preferred the still image site over the interactive image site, this does not link in with my previous responses.

I have collected responses from my still image site.

The first question established for me that 100% of people who answered could tell the difference between the sites.

2.
3.
4.

There weren't many responses for the final question, but the most interesting response was;

5. Briefly, what were your main reasons behind choosing the still image website to download from as opposed to the interactive?
I feel the interactive website looks more like one of those pop-up junk adverts, which put me off.