Evaluation

Overall i am happy with the final website i created, as well as the unit. I have manged to be able to create different websites in different formats and generate new ideas for my own. By exending my knowledge through individual experimentation i think that i have shown a good understanding of website technology and design.

I think that my website is a good starting point for an online portfolio for myself. I will admit that it needs some work and i would not be hapy to make it an officail website because i would wish to develop some areas more.

One way which i am pleased is that way i have encororated some small elements of interactivity into it. For example i think the way i have created the buttons is good. By creating a simple rollover image i think that it makes the design better. It is visually nicce when the button lights up when you are over it. I have seen this on many websites and think that it is a good idea to know when you have highlighted the button. I also like the way that i have linked the website to others. For example the twitter youtueb and facebook links, i think, make it look slighlty more serious and professtional which is what i am going for.

Things whic i would add or change include some sort of notification to know what page you are on. One way which i would do this woud be to keep the button highlighted when you are on that page. I have seen this on other websites when doing research and think it would be a good addition. Another way which i would improve the website is to shrink the size of the content. I was thinking that if i decreased the scale of my content i could fit more on there. Also i think this idea would compliment the design making it look more professtional. I would need to change parts of the photos page aswell. The thumbnails are not all the same size making it look a bit un finished. Also i want to take the border out of the table that they are in and add more additional information about the drawings/photos in the pop up windows.

Overall i am happy with the outcome of my website and this unti. I feel that i have worked hard and have expanded greatly in some areas. However, if there was more time for me to spend on things like, experimentation and the final website, i would go ahead and make the changes that i have stated above.

Main Website

This is my main website. This is th home page or index page. This just gives a brief overview of my website stating that it is a prototype for my online portfolio. I thought it was important to have a banner on my website becasue it is consistant throught my research on other websites. I have also provided links to other websites that are assoiated with me for example facbook and twitter and also YouTube which is on the videos page. I thought i would put these links on becasue it seemsto be that other digital artists have the same thing. This may be to broaden there online presene and hopefully become more famous in their proffesstion.

 This si the photo section of my website and consist of some of my favourite digital art. I have encorporated a behaviour in all of the photos that allows you to click on them and see a full size image of the same photo in a new window. The reason that i have done this is because you cannot appretiate the full quality of the picture in the thmbnail. It also allow for better quailty downloads, if anyone wishes to download my work.

This is just an example of the pop up window that displays my image at full resolutuion.

 This is the video tab where i have uploaded my favorite videos. One is if a short animation i created and the other is of a speed painting that i have produced. I thought that i would need more to jsut having two videos on website so i went through different options of what i could do. I thought maybe of getting a video player, but that takes up a lot of memory and makes the loading time longer. I thought about maybe haveing a serperate page again like the photos page, but there was not a layout that i like when i tried it. So in the end i thought of doing the same sort of thing with the facebook and twitter link. I have provided a small PNG of YouTube's logo and when clicked it will bring you straight to my channel where all my videos are available in high quality. 

This is my contact page which allows the users of my website to send me an email on any questions o queries that they might have. By using a simple form, the user must enter a name and email in order to send a message, This can all be pre defined in all of the coding.

Creating A Form

Here we inserted a form into our contact page. To do this we used the same insert window that we used to create the spry. By clicking on the form section we were able to create several buttons that can store information. we created a name button, a email button and a comments button, a submit button, and a reset button.

You can customize these buttons to store certain information and also not to submit if information is missing. On the settings of the email button i ticked email address which means that the coding will look for the "@" sign before yu can submit it. I also but that this infmoration was mandatory and so is the name. The comments section as well as the name section can have any letters in them, however the comments section is not mandatory.

Mobile Website Experimentation

This here is some individual experimentation that i did. I focused on experiemnting on a mobile device but still used dreamweaver to create the pages and such.

I added a simple header or banner which is my own image. I also added a spry table so that it makes the website more interactive which i think is important because you have to compensate for the lack of space with interactivity to keep interest and it makes for faster loading times.

Here i found an addon that can support the iPhone IOS which allows you to customize the content of teh buttons and menus while keeping to the same iPhone design. I have seen this on only a few websites online. I think this is not a very popular style of mobile web apps because there may either be an issue with copyright or the fact it is quite simplistic.

After playing around with a few other add ons that i downlaoded i managed to get a really cool slideshow of some of my graphics. This caused a few problems though as for some reason the coding restricts the accsess of you being able to use source images that you have in your project folder. This could be due to the way the add on animates the images together because it does iot through a private server so your images have to be online. A simple way past this was to upload to sizes of the images to this blog, one large one thumbnail, and then embed the code into the add on.

Another simple add on that i incorporated was to have a map. This is as simple as dragging and dropping the addon in to a box that you have created. But before you do that you have to customize the settigns in the preferences tab of the add on. This is vital because you need to change the dimensions  of the map to fit in your box, else it will be on a huge scale and wont operate properly.

I also added a YouTube video by simply embedding the code into the java script. But before i did that i had to make sure that the code had the right height and width. There is an option of having a Youtube player, but i was wondering if certain devices ould be able to handle it because it requires flash.

Images for mobile site

Mobile Web App

This is my website that i created on Dreamweaver. By importing it in a new folder into Titanium Studio  I was able to run it on the ios version of an apple device. 

This is the home screen of my website. The first obvious thing to notice is that the website is clearly designed for desktop. The buttons are too big, and the background needs to be modified to either fit the screen or change all together. 

 

Even the vidoes that i emeded from youtube worked on the iPhone device.

Here is the image that you can click on off of the table. As you can see the image is way to big to fit on the mobile screen.

Titanium Studio

This is Titanium Studio and is used to create mobile apps. Here we began buy learning some basics about how it works and the different operating systems. We started by using code snippets provided to set up a simple background colour and heading with text. The snippets consisted of variables which we had to call to the programme so that they would be displayed.

Here I customised the text and added a picture to the web app. I also edited the text to match the picture. This is the start of a very basic mobile web app.

This is the source image. I made it smaller to reduce the file size so the web app would load faster.

File Size

PNG

Here I saved the logo as a website image and set it to PNG settings. This enables the image to preserve its transparentcy. It also reduces the file size Dramatically because the PNG format focuses on the block colour and enables the transparent background, making there less pixels to generate.



JPEG

This is a JPEG image set at 300 dpi. It is a large image size and not really fit for mobile browsing. However, by using this web saing tool you can change some of the settings on the image and therefore compress the image. One of the ways you can do this is to choose a preset. These are low, medium and high JPEG presets and are the simplest way to go. The higher quality image however, the bigger the size of the image.



GIF

Here is a GIF image and is good for compressing simple images such as logos. For example one option here is to change how many colours there area in the image. So to make a smaller file size while keeping the block colour you just simply turn down how many colours the image produces. At first i chose 4 because it is red white and yellow. However when i did this the edge became grainy and pixelated. I then increased the number of colours to 8 and that sorted the problem and decreased the file size.  

HTML Demo

This is the demo that we did on the basics on creating a website using Dreamweaver. First of all we created a folder somewhere that we could use as our project folder. We called this site and this is where we would store everything that we make to put onto the website. This is because this is where the website will find all of the information to display. 

This is where i saved my "site" file.

We then started to look at the layout of Dreamweaver. Here we looked at the various tools and windows. Alos we looked at the coding side of the page and the design side. Then we set out to make some simple links and colours.

Here we made the page colours different by using the page properties page. This is so we could distinguish which page is which and also when the page changes when you click the link. The text was made so we could view the different pages. It works kind of like a hyperlink and we use a pickwhip system to get the link to send information to Dreamweaver so that it changes page.  

Here I imported a picture and used the same technique as linking the page together. Instead this time i linked the picture to a website. 

Here we created a new page and created a table. I also looked at the code side of the page so i could input text and visuals.

Then by importing small PNG images into the table i was able to link them to another page by adding behaviours. So what happens is, when you click the glasses another window appears with a larger JPEG image with some text information.

This is the website with the glasses page open in an internet browser.

Mobile Tables

 

 

 

Timeline

This is the timeline I created to show my personal opinion in the most significant advances in technology in communication.   I think that one of the greatest advances is the invention and improvement of the internet. For example, the APARNET which was produced and developed by the US military was the first the world would ever see of the internet. This system would allow the sending of information through coding on a simple early computer. Since then companies like Microsoft and Apple have made improvements to make it more accessible to the world. Now, we can see that the internet has become one of the vital tools that the world needs and cant live without. It allows anyone in the world to retrieve any information form anywhere through computers or android devices. Websites like Facebook make it simple for the third of the population of the planet to instantly chat, share and play with each other. Making it a vital asset to the population.

Research and Analysis

Facbook


Facebook is the most popular website in the world, with about 6.27% of internet users visiting every day (according to a 2010 study). Getting millions of hits a day, it has became the new way forward in how the internet has worked. This means that it has to be controlled, consistent and easy to use. The style of the website has changed over the life of Facebook, by introducing things like "Timeline" Facebook has continued to become more and more popular, this is due to the feedback that you can give.

This is the main home page of any Facebook user. The most important part of the webpage is of course the centre. This is where all of the news feeds are viewed and also where you can update your status. The layout of the website is simple and effective for its purpose. On the right hand side we have the chat window where you can chat to friends. On the other side of the page we see the menu bar. This works as a navigation system. And up the top we have links to your own profile and also the search bar where you can search for everything from friends to celebrities.

The way that the webpage is layed out suggest a long stay. For example the amount that is available to you in one page is great. You can check your mail, friends, update your status, chat, play games and more. And all of this is available without reloading the whole webpage. It is almost like the website is designed to be up on your desktop constantly. Allowing you to go off and do other things on the internet but always returning to check the constantly updating news feed.

This is the sign in/sign up page. The tag line "Facebook lets you connect and share with people in your life" speaks to the audience, making them feel like this is a personal experience. This also would make them feel more at home and at ease. Further implying that this is a home desktop website and not a mobile appropriate webpage. Also the sign up part of the page suggest that you need to sit down and do it. You would sit down and sign up at home rather than on the go because it takes time to do so.

This is the mobile version of the Facebook log in page, there are other versions as well for example the apps for blackberry and iPhone, however this is the browser version for all devices. The first thing that you notice is the difference in size. This is primarily to fit the resolutions of mobile phones. Also the fact that the only thing that you really do from first look is to sign in. This is because if you are mobile you just want to get straight into Facebook rather than look at the pretty homepage. The buttons are a lot simpler. For example, the only button is a large log in button and it is right in the centre of the screen. This further points to the fact that it is used for speed and not for casual browsing. According to a 2010 study 49.2% of mobile internet users will use a social networking site. A big number, however more people will use weather and news apps. Compared to the desktop version which is the most popular website in the world.

This is the mobile version of the news feed page of Facebook. Here you can view all of the news feeds that you would be able to on the desktop version. However the different thing here is that the only thing on the main part of the screen is the news feeds themselves. Apart from that there are a few buttons at the top which you can select in order to view friend requests, messages and notifications. These pop up in a separate window, allowing you to stay on the main page. There are also 3 buttons that allow you to input your status, upload a photo and broadcast your location. This emphasises the point that when you are mobile you want to give and receive quick information however you can still share in the same way as the desktop version, by uploading a video and tagging people in it whilst tagging where about you took it. One difference you will notice on the mobile version is there is no advertising. I assume it is to conserve space on the phone screen or perhaps Facebook decided it might frustrate users due to pop up ads.

This is the side menu of the mobile version of the website. You can access this by touching or clicking the button in the top left of the screen. Here you can get to all the different sections of the website like on the menu bar of the desktop version. I think that this was mainly created to conserve space as well as to make it more user friendly. This is a very easy app to use and all the links are easy to get to and load fast. This is a very important concept when designing any website but especially for mobile as you need to be able to access the information you want quickly.







In conclusion to the research that i have gathered, there are some crucial differences in the way that you would use this website on mobile and desktop. The differences are not just in the way that the website looks but how it operates. For example, having a mobile phone has a perk that the desktop doesn't. Most modern day mobile phones have a camera and by using Facebook you can upload photos from where ever you are. This is a huge selling point to there targeted market because people like to update their friends. Also it helps that it is visual. There is only so much text that people can read, so to see a photo that has just been taken makes it a more personal experience and you will remember, you would also be able to share it to other people rather than get them to read it. Also by comparing the target audiences in users we can determine how the mobile website is designed and structured. For example, 17% used their mobile phones for social networking. Among adults, 11% said they had accessed a social network via mobile. Therefore Facebook may want to meet more needs of the adult users. It is becoming more and more clear that mobile social networking websites are becoming more important as we as a nation spend a lot of time on them. According to a 2009 study, the UK in one month raked up 2.1 billion minutes on Facebook. Almost ten times as much as the closest rival, Google. Having said this there is more than one reason to create a mobile version of the website. For example, the mobile version shows no adds and it is free to look at or download. So the mobile version maybe just a marketing strategy to keep the website going. By fuelling the fire it makes people come back to the desktop version. Making it almost addictive.

Resources:  -Book 1
                   -Book 2


YouTube

YouTube is a massive video sharing website in which users can sign up for free and upload videos to their channel. This website has now become one of the internet's biggest websites and rivals others such as Facebook and Google. On average, UK adults consumed 8 hours and 48 minutes of online and offline media per day in 2010, according to Ofcom’s analysis. This makes it essential for the design layout and purpose of the website to be intended for its target audience. Users can watch upload share and comment on each others videos, however on some videos there is some advertising that you can skip but it becomes irritating due to the fact that they have only just introduced it.

This is the home page of YouTube. The first major thing that you notice is the huge adversing banner at the top. Advertisings one of the many ways that YouTube makes its money. Being the most popular video sharing website in the world they get offered advertising space. In this case it is McDonalds. I think of this page as a huge billboard or like Time Square. this is where millions of people pass through everyday and they will see this advert. Its also a very good thing to put on the desktop website as people are more inclined to see it, they relax more and casually browse. The user interface is similar to Facebook. You don't have to reload the page to view things. For example you can look at your subscriptions and browse videos on the home page. The search bar is used to search for videos with the same tags as the search. Its at the top of the screen and stays there throughout the website. On a desktop website it is important to have the same housetyle through out so that people can easily identify where everything is. Recommended videos and subscriptions are on the website making it more personal to the user.

This is the part of the website that you view videos on. by searching or clicking a video, the flash player will play the video. the purpose of the website is to share your videos, and on this particualr page it allows you to share other peoples videos by sending them by email or you can embed them onto a website. They have also brung in a kind of network to the website as well. For example you can subscribe to particular users so you cna view a feed on what videos they like and if they upload new ones. This is where the desktop version of the website is helpful. You can browse through somes channel with ease however i dont think it is as easy on the mobile version. The mobile version maybe for veiwing videos to show your friends or to see videos that have been shared or emailed to you.

This is the mobile version of the YouTube website. Some of the first things that you notice is the option to change to the desktop version. I think that they have done this to drag people back on to the desktop website because that were they get most of their traffic and therefore get more people going through things like adverts and such. This is mainly how YouTube produces their income. Also another thing that you notice is the lack of choice compared to the desktop version. For example, the desktop version has things like, subscriptions, most viewed and trends. Instead there are just little headings with a few videos under them. This layout is very simple and not as complex as the desktop website. This maybe implying that the desktop site is the one that they are concentrating on making people use. Perhaps the website is built for desktop use because of the all the features that come with it and the mobile version is an extension. It also seems like the website was designed for desktop use because of its purpose which is to upload videos. Now even though you can do this on the mobile site, a lot of the bigger YouTube users who have millions of subscribers tend to edit there videos and make them look very professional and you cannot do this using your phone. So you would have to edit them on your computer. Therefore you would not use your mobile to upload them. However another example of videos that get uploaded from mobiles is Toby Turners VLogs. These are short videos shot from his camera phone and are basically just updates. He doesn't need to edit the, so he can just upload them straight from mobile.

This is the video selection screen. It is very basic in the way that it is displayed. One of the first things that you can notice is that at the top there is an option for mobile and desktop. This could mean that they are trying to push people on the desktop site. There could be a couple reasons for this. One could be they are simply trying to push more people onto the desktop version. Another could be that the compatibility with some mobile devices isn't in the same format as the mobile version. So the desktop is an alternative option if you are having some problems.










eBay

eBay is a online website that allows users to buy and sell items. It has become one of the biggest online shopping websites and has a unique strategy which allows anyone to sell items at their desired price. By bidding or buying and selling people can sell items and post them to the buyer. Using the pay-pal system, users can buy items from other users, and also, once sold and delivered, receive payment through a pay-pal account.

This is the desktop version of the eBay website. The first thing that i can notice is the giant ad banner filling the page. The desktop version allows you to fill space with advertising and content. This differs from the mobile website which doesn't have as much space to put these sorts of things. Making the mobile website need to have very specific content which the user needs right away. The ad banner on the webpage stands out because of the way that it is laid out. Rather than have a simple horizontal banner at the top of the page. This style gives it a nice billboard type of view and makes it more interesting to look at. Other differences such as the layout regarding the categories. They're drop down or rather drop out boxes giving it an interactive feel. It seem that the house style is kept the same throughout the website. By keeping the account management and basket of items in the top right hand page it draws attention to the main aspect of the website as well as making it easy to navigate.

The target audience for eBay would have to be in my opinion, ages 18-65. 18 because you have to be 18 or older to have a pay pal account, and you need to have one in order to set up an account with eBay. And 65 because there has to be a cut off point were an older generation doesn't use the technology to access the website. Other factors come into the equation though. For example, there may well be people  aged 65 and over that use eBay but from what i can gather they may use only one type of technology. They may only use the desktop website because of many reasons. Some may be:
-it is easier to use
-it's on a desktop computer which only some older people may own
-it is mainly accessed at home
-they may not own an android phone capable of displaying mobile internet
-they may be used to using a desktop and don't want to switch technology
This can be different from a younger generation. For example, 18-25 year olds are most likely to own a smart phone and are most likely have access to a laptop or computer. This means they will be able to use both sites and utilise them accordingly. For example they may want to use the mobile app/website for all of these things when they're away form their home computer:
-track orders
-keep up to date with bids
-check paid/sold items
-upload photos and create new auctions.

The android app is very good. You can do all the things you can do on the mobile site. This makes it very appealing for all of those with smart phones because you can take photos of items you want to sell and then start an auction all from your mobile device. For people who are comfortable with android and smart phones and how they work they may even favour the mobile because there is no restraint to the app.

This is the page that displays all of the information you need to know about the item you have searched for. Again the house style is consistent with the home page. Along with a small thumbnail of the product, in this case a video game, there is an option to enlarge the image and to look at more. This is useful if you are buying an item like a table. So you can see around the table and look for any damage ect. This is very different to the mobile app and also the web app. The layout for the desktop site seems more detailed and the design is a lot simpler. There is also a lot of space with nothing in it. A reason for this could be the resolution of a computer screen. For example this screen shot was taken on a mac, and the website would adjust its size to the size of the browser window. A small resolution screen and smaller browser window would make the website more compact.


Below we have the eBay mobile website. I have taken screen shots of the web app and also the android app because the web app is in beta testing and is not fully usable. By caparison there are some substantial differences to the two different websites. For starters you can notice the lack of an advertising banner on both of the mobile sites. A number of other things are missing like recommended items and account help. Instead the mobile app has incorporated a series of lists and menus that you can access that will lead you to many of the features that are available on the desktop website. The key point to notice is that they are making it very user friendly to their target audience. For example, making it easy for people who are not as confident at using android or smart phones, but also making it easier for the familiar users to access parts of the website that they would have known how to get to on the desktop website. This is a good technique and is achieved through various ways. One would be to make the same parts of both websites the same color and house style. Meaning the same text and logo are in proportionate places.

Other differences that we can see are graphically. most of the graphics are simple buttons on the mobile website and have very little colour. They are almost in a grey scale. They also are stationary and don't move. This is most likely due to file size which is always important to keep in mind when designing a website for both mobile and desktop. By making the buttons relativley the same size and colour it makes faster loading times for lower bandwidths. This widens the audience of mobile users and makes it easier to access for people away from a wi-fi spot.

Sky News

Sky News is a global news service that it exclusive to sky TV customers. However, it had been developed into an online website that claims to be the most current and up to date news station and website, with live feeds, video and audio, it acts as a hub for al of the worlds news. According to a 2010 study, the 4th biggest category in internet sites is news generating a 78% reach in that year. This can lead us to assume that the most popular news sites such as CNN and Sky News have to operate efficiently and effectively. 

On the home page of the desktop website we can see that the type of news that you want to look at is the priority of what the user has to do. The list of categories gives you the opportunity to get more detailed stories and information about that category. This is a helpful tool and idea to all of the users can easily access the information they want. This leads us to ask the question who is this targeted at? And who is the target audience?  

The purpose of the website is to communicate news to the general public and to give live feeds to developing situations around the globe. It is fair to say that news itself has a huge target audience among young adults, all the way up to old age pensioners. However the way that the website is set up means that it will be trying to help people use it who are not familiar with website technology. For example, the easy to use interface can appeal to an older generation. However a fact to counter this argument is that 60% of people over the age of 65 and 22% of people don't use the internet according to a ONS survey in 2010. These reasons included that they did not want it or they just simply could not afford it. So we could assume that the reason is not to make the user interface easier to use, but to allow people to get to the information they want quicker.

Another counter fact that suggest something different is that the majority of internet users are aged 35-49. This is an age that you could associate alot with things like business and lifestyle making categories a good choice to make the main menu. We can also see that in a close second, 25% of internet users are aged 50-64. Compared to the majority which is 28% it's not that large f a gap. This could lead us to assume that the news websites around the world are developed for an older audience as they would have the most interest in it.

Here we have selected the technology page. Like the home page it displays the main body of the information in  clever banner/interactive window. From here you can select stories that have been published about technology. Some of the stories come with video and others just text, it depends on the gravity of the news i guess.

Another thing that you can notice on this webpage is that the house style is consistent with the homeage. More importantly is the fact that the catagories are in the same place. As i previously mentioned i think that the catagory bar is a very important aspect. Other things that help keep the same house style is that the same advert banner is at the top, as well as the log in buttons and such. Also the logo "sky news HD" is in the same place. Also the fact that the page is layed out almost exactly the same. I think that the reason for this is to make it more user friensdly. So no matter what catagory you are on, you can find all the same information just as easily. 

 

This is the mobile version of the website which is the webb app version. There is an andriod version as well as ios version. The image on top is the web app and the one below is the iPhone app.

Clearly simplicity is the desgin style that sky have gone for here. One thing i notice is tha lack of colour and gradients. When we were doing file size research we learnt that gradients make files larger. Perhaps sky has chosen a simple black and white with few other colours to save on file size. The buttons as well as catagories are simply layed out. Unlike the desktop version of the website there is a lack of interactivity and animation in the buttons. What we can say is that it kind of follows the style of an iPhone. For example teh way that the menus are set out. This is simular to the app store version however that one seems to be more athstetically pleasing.

We can see that the app version is very much based on the iPhone layout. This is to sat in style with the whole iPhone look. The layout has been proven to work and works here to. The scroller up the top is a cool interactive way of displaying the catagories. It saves space and that is vital when converting to desktop to mobile. The house style is consistant to the desktop website in the way that the header of the website is the same. The one thing that i have notices that is consitant throughout the entire webpages, desktop and mobile,  is that the logo is usually in the same place, and is exactly the same.