website codes and conventions

WebsitesCodes and Conventions

As with all media products it is important to identify two key elements when looking at any website:

WEBSITES - Codes and conventions

- The purpose of the product- The target audience

As with all media products it is important to identify two key elements when looking at any website:


- The purpose of the product- The target audience

Consider the purpose and target audience for the following websites:

In order to analyse the effectiveness of a website, it is important to deconstruct the website and identify how it conforms to the codes and conventions that we expect.



Not all websites will feature all of the codes and conventions listed here, and in some circumstances their omission may be as noteworthy as their inclusion.



Not all websites will feature all of the codes and conventions listed here, and in some circumstances their omission may be as noteworthy as their inclusion.


It is not enough to simply identify the inclusion of the following codes and conventions. They must also be analysed in order to identify how they contribute to the effect of the website as a whole.


URL - uniform resource locator

The URL, also known as the ‘web address’ is how users will find and access the website.

In almost all circumstances the URL is short, and clearly represents the content of the site, whether that be through a name or a factual description.


HOME PAGEThe home page is simply the main page for the website.

When typing in the URL into a web browser, you will be taken to the website’s home page.


HOME PAGEThe home page is simply the main page for the website.

When typing in the URL into a web browser, you will be taken to the website’s home page.

The content of the home page can vary dramatically depending on the site itself, however it is usual to find information about the site itself to make it clear to the audience as to the purpose of the site, as well as to find navigation elements to direct users around.


MastheadThe website’s name and/or logo. It may not have changed for many years so it is the easiest way to identify a website. A very important element of website branding.


MastheadThe website’s name and/or logo. It may not have changed for many years so it is the easiest way to identify a website. A very important element of website branding.

The decisions made in the choice of font, colours, size, style etc. can tell us a lot about the website and it’s content and target audience.

When clicking on the masthead the user would expect to be taken back to the website home page.


House styleA house style is a set of rules which state how all documents and written communication for a business/individual should be formatted. In the case of websites, how each page on the site should be formatted. It will cover:


House styleA house style is a set of rules which state how all documents and written communication for a business/individual should be formatted. In the case of websites, how each page on the site should be formatted. It will cover:

- the colours to be used

- the font style and size

- where the logo should appear

- whether text should be right, centre or fully justified

- the ratio of images to copy


NavigationThe navigation covers all of the links that move the user around within the website itself. Moving from page to page but not leaving the site as a whole.



Anything that moves a user can fall into the category of navigation, however it is a common convention to have a specific navigation bar that easily allows the user to move around the site.



Anything that moves a user can fall into the category of navigation, however it is a common convention to have a specific navigation bar that easily allows the user to move around the site.

Navigation elements can be very simple, using simple text, or much more complicated, using images and animations that change as the mouse moves over the top.


COPY‘Copy’ is the technical term for text in a media product.



On a website the copy could be large blocks of text, for example a news story on a particular news website.

Or a small amount of text accompanying an image or multimedia element.



On a website the copy could be large blocks of text, for example a news story on a particular news website.

Or a small amount of text accompanying an image or multimedia element.

The language used and the amount of copy can tell you a lot about the type of website, as well as the target audience.


main imageThe main image is found on the homepage of the website and can be analysed in the same way as we look at other visual media elements, by looking at:



- The camera shot- The lighting used- Any special effects- The composition of the image



- The camera shot- The lighting used- Any special effects- The composition of the image

The choice of image used immediately tells the user a lot about the website and what to expect moving forward.


Multimedia elementsModern websites make full use of all multimedia elements including:

- Animations- Video Clips- Music- Image slideshows




The use of these elements allows a website developer to more easily share content with the website’s users.




The use of these elements allows a website developer to more easily share content with the website’s users.

All of these elements have a purpose of their own, and can be analysed individually as well as within the context of the website as a whole.


External linksExternal links are like navigation elements, however upon clicking on the link, the user will be redirected away from the website that they are on to a completely different site.



It is very common for external links to open the new page in a fresh window or tab.



It is very common for external links to open the new page in a fresh window or tab.

By opening the link in a new tab, the original site is still open. It is undesirable for a website developer to move a user away from their site without giving them any way to return.


Social media linksSocial media links are very specific external links that redirect the user to an associated page on another website that relates to the page they are on. For example a band website will link to that band’s Facebook page, their Myspace page etc.


Social media linksSocial media links are very specific external links that redirect the user to an associated page on another website that relates to the page they are on. For example a band website will link to that band’s Facebook page, their Myspace page etc.

Again it is very common for these social media links to open in a fresh window or tab.


banner advert

A banner advert is an image/animation embedded into the web page somewhere that is advertising something external to the website that you are on. The content of a banner advert is not always controlled by the website developer.


banner advert

A banner advert is an image/animation embedded into the web page somewhere that is advertising something external to the website that you are on. The content of a banner advert is not always controlled by the website developer.

Upon clicking on the banner advert it acts like an external link, taking the user away from the website that they are currently on to the new one. Banner adverts are designed to distract and get users to click on them.


pop-up advertA pop-up advert has the same purpose as a banner advert, in that it is attempting to get a user to leave the website that they are currently on to look at what is being advertised. However the pop-up advert is much more intrusive, rather than being embedded into the website, it appears in front of the site itself.



By appearing in front of the content that the user has visited the site to see, the pop-up advert is forcing the user to interact with it in order to proceed.



By appearing in front of the content that the user has visited the site to see, the pop-up advert is forcing the user to interact with it in order to proceed.

The most intrusive pop-up adverts trigger another pop-up advert upon being closed, essentially attempting to force the user to interact with the advert in the way in which they want them to.


White spaceThe use of white space is very important when analysing websites.


White spaceThe use of white space is very important when analysing websites. Too much white space and a site could appear amateur or unfinished.


White spaceThe use of white space is very important when analysing websites. Too much white space and a site could appear amateur or unfinished. Too little white space and the site may look cramped and unprofessional.


White spaceThe use of white space is very important when analysing websites. Too much white space and a site could appear amateur or unfinished. Too little white space and the site may look cramped and unprofessional.

The position and amount of white space used can again tell you a lot about the websites purpose and target audience. A more mature and sophisticated user may appreciate the white space more than a younger more interactive user who may wish to have as much content available as possible.


‘above the fold’ content‘Above the fold’ is a phrase used to describe what can be seen by a user on any page without having to scroll down.



Some websites are designed specifically so that all content is above the fold in order to ensure that the user does not miss any content.



Some websites are designed specifically so that all content is above the fold in order to ensure that the user does not miss any content.

A website that has content ‘below the fold’ will often use one of the previously mentioned elements in order to direct users further down the webpage.


For the website screenshots, identify and analyse all of the codes and conventions that you can see within the webpage.

MastheadHouse StyleNavigation

CopyMain Image

Multimedia ElementsExternal Links

Social Media LinksBanner AdvertsPop-up AdvertsWhite Space

Above/Below The Fold Content

Write four extended PEE paragraphs

Each should look at a different element used in website production and explicitly explain the effect that it has and/or it’s use within the webpage.

You should cover both why the creator of the website has used the particular element, as well as what the effect is on the audience.

website codes and conventions

Education

websites codes

following websites

following codes

websites home page

target audienceconsider

target audienceas

media products

key elements