Website Research By Sophie Hiscock

Fan Marvel Website You know this website is Marvel because of the characters from the comics are in the body, which adds to the website as it is quite plain and the characters make it more interesting. This background was probably made in Photoshop, cropped to size, saved for web then placed in the body under the wrapper so that the characters are seen and not behind the wrapper, not repeating it so the page loads quickly. You know this website is Marvel because they have used the logo but they had to add database at the end as it is a fan website. This would have been made in Photoshop then cropped to the size of the div, saved for web before placing the image into the div so it is all in the right place and would not interfere with anything else. They have a tweet board, which shows if people tag the site into a tweet or if the website tweet something. This engages the audience and keeps them up to date with how many people are interested in the website and the topics most people are talking about. This is placed to the right because of a CSS style called float right. This is an automated slide show, which changes every few seconds but if you want to see one particular story by looking at the small previews at the bottom all you have to do is click the preview picture. This keeps the audience up to date and they will not have to wait for the slideshow to go through if they want to go to one particular page. This would have been done in Java Script and just placed in a div so that it is in the center of the page. These are hyperlinks that go to another page of the website that explains the character you click on. They would have made the hyperlink by highlighting the word then changing the target to the correct page, which will be a html file. The pictures would be high resolution, cropped to size in Photoshop, saved for web and depending on the file size the quality can be changed so the picture will load much faster in web view, then inserted into the div (CSS) made. This is a Navigation bar which takes you to all of the different pages in the website, they would have done this by making a separate wrapper for the Navigation bar, which is called the nav tag, made by creating a CSS rule then you type in all of the words, making sure they are in an unordered list then targeting them to the correct html files. Adding a hover on CSS rule will allow the word being hovered over to change colour and each word will be an IL tag. This navigation bar is made in the same way as the main navigation bar but it does not change the page it only changes the wrapper so it is a Java Script image swap so all of the information changes but you stay on the same page, which is great so the loading time is cut down by half. This header serves as a search bar for the whole website, not just the marvel fan page and a login section. This is helpful so people do not have to come out of the website and go to the main homepage to find what they need and they can stay on the desired page.

Fan Marvel Website continued This is a poll, it encourage the audience to get involved with the website and it may make them spend more time on it looking at what the other options are if they do not know what it is. Some polls are made in PHP, which collect the information people put in and change it to be shown. To do this in HTML I would have to make a form instead of a poll and manually collect the data and publish it myself. The colour scheme of this website is quite plain just being blue and white but effective as people will be more interested on the information on it rather than looking at he colours on the website. As the website does not have a tiled background it does not take long to load and this is key to a great website. This website scrolls, in my opinion scrolling is better than having many different pages as it is easy to see all of the information and if you want to know more then you can click on a hyper link to a more informed page. Scrolling is also a great feature as many people can not be bothered to click and will come out of a website that has to load for every new page and see what is on it. This website does not have many videos but it has many other interactive features like a forum where you can comment and talk to people, polls as well as many pictures to gain the audiences attention. Personally I think that a website should have all of these features to make people recommend it to others as well as spending a lot of time interacting with the website. This website has many different ways to navigate around the site, with different image maps and hyperlinks, which is also a great feature so people who have scrolled all the way to the bottom do not have to scroll all the way to the top they just have to find a relating picture or link.

Kids Marvel Website These two Navigation bars take you to all of the different pages in the website, they would have done this by making a separate wrapper for the Navigation bar, which is called the nav tag, made by creating a CSS rule then you type in all of the words, making sure they are in an unordered list then targeting them to the correct html files. Adding a hover on CSS rule will allow the word being hovered over to change colour and each word will be an IL tag. This is the body of the website, which has a tiled image to be the background. It adds to the website and makes for a great look but for a slow computer or internet connection the website will take a very long time to load or not load at all. You know this website is Marvel because they have used the official Avengers, Spiderman and Marvel Kids logo. This would have been made in Photoshop then cropped to the size of the div, saved for web before placing the image into the div so it is all in the right place and would not interfere with anything else. This is a main content wrapper with a div tag in so that the image could be put in without interfering with anything else, it will be made in Photoshop then cropped to the size of the div, saved for web before placing the image into the div. This is also included in the main content wrapper using a z-index so that the main content squishes and moves into the center of the page. The red and blue background will be a div with the text, images and hyperlinks in. The background image is included in the main content tag but it is put behind the divs above it so that the gaps between divs are not the tiled Avengers image to make the website more interesting however this will make the loading time much longer for slower computers. Each of these ‘GO’ divs are hyperlinks, which goes to a new page and explains the character you clicked on. This is done by highlighting the word then changing the target to the correct page, which will be a html file. This is a slide show that has multiple different hyperlinks on show, which lead to different pages done by targeting the image click to a different html file, but if you would like to see more you have to click the arrow on the right. This will be made in Jarva Script or interactive InDesign.

Kids Marvel Website continued This is the body of the website, which has a tiled image to be the background. It adds to the website and makes for a great look but for a slow computer or internet connection the website will take a very long time to load or not load at all. Each of these ‘GO’ divs are hyperlinks, which goes to a new page that has a downloadable file to complete the activities.. This is done by highlighting the word then changing the target to the correct page, which will be a html file. This Ironman image would have been made in Photoshop, cropped to size of the div, saved for web with a high resolution so the image looks the best it can look on the web. The div will be placed onto the body of the website then made to float left by adding a css rule called #float.left This website has many different ways to navigate around the site, with different image maps and hyperlinks, which is also a great feature so people who have scrolled all the way to the bottom do not have to scroll all the way to the top they just have to find a relating picture or link. This website scrolls, in my opinion scrolling is better than having many different pages as it is easy to see all of the information and if you want to know more then you can click on a hyper link to a more informed page. Scrolling is also a great feature as many people can not be bothered to click and will come out of a website that has to load for every new page and see what is on it. This website is very colourful to attract the target audience as well as keeping them amused with the variety of images and interactivity. Personally I prefer these kinds of websites as you do not get bored of the same colour scheme and there is always something to click on and play to keep the audience on the website for longer. The only issue with this is that slow laptops will not be able to load the website so I would have to compress videos and images, which will effect the quality.

Official Marvel Website This is a Navigation bar which takes you to all of the different pages in the website, they would have done this by making a separate wrapper for the Navigation bar, which is called the nav tag, made by creating a CSS rule then you type in all of the words, making sure they are in an unordered list then targeting them to the correct html files. Adding a hover on CSS rule will allow the word being hovered over to change colour and each word will be an IL tag. This is an automated slide show, which changes every few seconds and has a short part of the article on the right hand side so if you want to read more you can click on the image or the hyperlink to go to the correct page but if you want to see one particular story you can click on the numbers to the right hand side of the slideshow. This keeps the audience up to date and they will not have to wait for the slideshow to go through if they want to go to one particular page. This would have been done in Java Script or edge animate and just placed in a div so that it is in the center of the page. You know this website is Marvel because they have used the official Marvel Logo. This would have been made in Photoshop then cropped to the size of the div, saved for web before placing the image into the div so it is all in the right place and would not interfere with anything else just before the nav tag. This is a slide show that has multiple different hyperlinks on show, which lead to different pages done by targeting the image click to a different html file, but if you would like to see more you have to click the arrow on the right. This will be made in Jarva Script or InDesign. This is the body of the website, has a plain black background so that all of the audiences attention is on the information on the site. This website scrolls, in my opinion scrolling is better than having many different pages as it is easy to see all of the information and if you want to know more then you can click on a hyper link to a more informed page. Scrolling is also a great feature as many people can not be bothered to click and will come out of a website that has to load for every new page and see what is on it, however there is much more to load so some slower computers may not be able to load all images or videos. This website has many different ways to navigate around the site, with different image maps and hyperlinks, which is also a great feature so people who have scrolled all the way to the bottom do not have to scroll all the way to the top they just have to find a relating picture or link.

Official Marvel Website This is the main content wrapper with images in it, the image would be made in Photoshop to the correct size before divs are placed on top of them, which include hyperlinks to other pages done by targeting the text or image to the correct html file. This makes the website look full and there are many different ways to navigate around the site so people will spend more time on the site. This is a video from YouTube, it would be put in by getting the embedded code from the YouTube website, creating a div with a solid light brown boarder around 5px on the right hand side. The code has to be entered in the code view on Dreamweaver inside the div, then change the width and height so the video fits inside the div. Hyperlink to another page on the website, this is done by highlighting the ‘See more’ then targeting the new page to the correct html file. This website has many images and videos but the main colour scheme is simple so that people do not get distracted and read the information given. This is both good and bad as the website will load much faster than the previous kids website but the audience will not spend as much time on the website.