Thursday, 3 March 2016

Accessibilty

For this exercise we had to check if the website we chose (in my case www.imdb.com) has accessibilities, so user with any disabilities could use it also, and even if something goes wrong in the actual content of the website, the user still will be ale to know what he is supposed to see or watch.

To do so we used the WebAIM Checklist which included several guidelines which helped us determine whether or not the website we chose is accessible or not.

Here I'm going to talk about some of the guidelines listed, starting with the first guideline; "Text Alternatives: Provide text alternatives for any non-text content". The imdb website has no text alternatives and this could been noticed when the images were disabled no text replaced them to show what's supposed to be there.

Images Visible

Images Disabled

Another guideline is; "Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure". The imdb website is adaptable as everything is sectioned and titled, and that makes it easier to read the content, even if the layout would be a subject to change.

Another guideline that I found this website has, is; "Distinguishable: Make it easier for users to see and hear content including separating foreground from background". Regarding colour only black is used for the text, blue for the links and all of this is set on a light grey background, making it easy for the user to read.



Another guideline is; "Keyboard Accessible: Make all functionality available from a keyboard". Although it is a bit complicated and takes some time to be done, this guideline is also covered by this website.

Above I mentioned some of the few guidelines the imdb website has or not, that makes it accessible; all this could be done thanks to the WebAIM Checklist which can be found here: http://webaim.org/standards/wcag/checklist

Frameworks

The website I'm working with (www.imdb.com) has one of the simplest framework one can use; and that is the 960 Grid System. Basically this type of framework uses a grid system based on a width of 960 pixels, and all the information will be put in that area. With this method the content won't be responsive to the window, that means if the size of the window is changed the content will stay in the same place, it won't move regardless the size of the window.

Probably this kind of framework is used because of the kind of content the website has; videos, images, lists, and text, so all these won't change its place, because it might not make sense.

A framework that I found is the CodeIgniter Rocks. It is a framework that when the size of the window is changed, the content of the website will change its position in a way that the website still looks elegant.


This type of framework may be applied to the IMDB website because as I said before when the size of the window is changed the content still be kept in an elegant position.

Wednesday, 24 February 2016

Draw a Webpage

For the first part of this exercise we had to draw the homepage of the desktop version of Facebook's website from memory without looking at the website before or while we are drawing. Here is the result:


For the second part of the exercise we had to draw the homepage of the Times of Malta website after we look at it for about 2 minutes, to memorize it. Here is the result:


For the first drawing, I left some things out and its not because it was difficult to remember them in the way they are but because usually I don't notice how those things are, I just use the website. Also it was from my memory and consider that, I didn't left much, infect the other one that first I could see it and then draw it, I draw everything from it.
Therefore for me both websites are designed good and in a way that is good to remember. 

Wednesday, 17 February 2016

Changes in Design of a Website





The website I chose to check for changes in its design is www.imdb.com.

Since the first time it was launched till now this website had a drastics changes in its design.

The first thing I noticed is, that the logo had a very minimal changes to it, infect the only changes I noticed are the border and by time they made it more visible by making it a bit larger then before.




In 2000 the website was basically full of text (information about the movie) with the poster of that particular movie small on the side.



By time the website starting to transform itself in how it is today. In 2010 the website main colours were changed and the structure was changed also with the text is kept to the minimum and the images were given more importance.



In today's website it is basically the other way round as it was in the beginning when it was launched, where the posters of the movies/images are the main thing you see as they are large and the text is put in minimal way, not as it was before, everything in each other and confusing.