The main point with websites is that they can be deconstructed like any other media form – the basic principles of Print Media (Magazines and Newspapers) apply in that a fundamental audience appeal is constructed from layout and design with the key fact that websites have their own conventions.

The Tabloid (see below) is the closest form of traditional media that compares with the ‘look’ and design of a website including a:

Simplistic and minimalist layout – boxes, vertical columns no more than 60 characters wide and sub headings

High ratio of photography to text, Use of WOB (white on black) Restricted language code Inclusive familiar mode of address (speaks directly to its audience) Evidence of synergy and convergence Designed for scan reading and all about individual relevance

Compare this front page of the printed version of The Sun with the Front Page of their website below – note use of primary colours (red signifying The Sun), use of WOB, vertical columns, high ratio of photography to text, content analysis revealing celebrity obsessions and traditional, mainstream ideology (nationalistic headline and link to story about the sexuality of a sportsman).

Like the website it is simple, clear and easy to read.

Users can seek information and entertainment news immediately recognising the house style and the inclusive, emotive, direct mode of address.

It is intended for a mainstream, working class target audience.

Below is a guide on how to analyse websites, specifically front pages; for a focussed semiotic deconstruction see MediaEdu Teacher Handout on Music Industry Websites under the section Technical and Symbolic codes for a full, detailed analysis.

Simplicity, relevance and clarity are crucial in understanding the layout of web pages. Immediacy is a major difference from print media - users are seeking information or entertainment immediately. Genre expectations dictate that a clicked link will supply that answer or solution.  Users get used to the ways of searching, they like familiarity e.g. vertical lists/columns and house style is important.

The most common way of obtaining information, news and entertainment on the web is still through the global monopoly of Google as a primary search engine rather than typing in a URL address. Typically users now have several windows open at the same time creating further demands on their computer, whether a PC or Apple Mac in terms of bandwidth, RAM, size of Hard Drive and PC Power.

The Sun Front Page (above the fold)

click on image to enlarge

The Sun Front Page (below the fold)

click on image to enlarge

Above the fold is what the eye can see without scrolling down and as a result has more sophisticated design considerations – the Hero Shot (central image) of course changes every day to reflect the changing headline and closely represents the layout of the print newspaper with even a white on red (redtop) Leaderboard similar to the print Masthead. Above the fold

there is always a higher ratio of photography to text - this is a standard convention with Front Pages, below the fold you will find boxes, text and inset pictures/photographs.

Understanding and marketing new media has created a new employment pathway for those wishing to work in the media – in a similar way that Account Planners at Advertising Agencies seek information on the success of a brand’s advertising campaign advertising on the internet requires similar analysis. Like all traditional media forms, websites are reliant on advertising revenue to maintain their existence. SEO (Search Engine Optimisation) for example seeks to crunch data e.g. calculate customer gains, manage the reputation of a brand and practically suggest improvements to the visibility of a website by editing content and using HTML coding.

The phrase Web 2.0 is often discussed – it is a term that has been accused of just being jargon and basically just meaning interactive as in Social Networking sites like Facebook, Twitter, LinkedIn, Flickr, Digg, Foursquare and Tagged and many others. Viral marketing is connected with 2.0 and YouTube plays a pivotal role is this form of brand awareness in sharing information and building connections. In simple terms content is created that attracts the reader’s attention which is then shared within a social network. Web 2.0 is not rocket science and internet jargon often confuses users who are not up to date or confident with technology encoding notions of exclusivity. Most terminology associated with new media is easily demystified and makes sense when explained.

click on image to enlarge

Note how the Facebook front page uses a significant amount of white space – a convention of Web 2.0 compared to the clutter and rich media used on many websites (see The Sun front page). Blue on white is used by both Twitter and Facebook as a less formal, inclusive colour scheme and vertical navigation is simple dictated by buttons, links and icons and a list on the left hand side of the page.

Web Pages need to have clearly defined areas and have a visual hierarchy, like newspapers. The following key terms, in no specific order are explained. Try to apply some of the terms to the Front Page below.

Navigation – key terminology that simply refers to the process of working through a web page or website, thus revealing its content. Primary navigation refers to user interaction with the main section of the site.

Primary Target Audiences – are the main intended users that are measured using detailed demographic and psychographic profiling, just like traditional media. An example of Secondary users would be a Disney page intended for children with a parents’ link to prices of theme park holidays/breaks.

Demographics  - users are targeted using a range of complex criteria including age, attitude, lifestyle, gender, national identity, race and ethnicity, education, sexuality, income, employment, family status, geographical location, interests and hobbies, political affiliations and much more. Direct marketing is a phrase where the user is treated as an individual and this is often achieved through convergence and interactivity.

Psychographic Research – treats the user as a personality type - Mainstreamers (follow the crowd), Succeeders (consider themselves as having ‘made it’ in life), Aspirers (constantly seek to better themselves and are influenced by others), Individualists (like to think of themselves as different and want something to specifically relate to them) and Reformers or Carers (people that work in caring professions – Social Work, Teaching, Youth Work and who seek to change or improve society).

Landing Pages – are where you literally ‘land’ after clicking on a link from the Front Page. Often there are less graphic design considerations on a landing page than a front page.

Front Page / Homepage – simply refers to the main page of the website.

Splash Pages – are a graphic introduction that directs you to the front page, often using Flash animation. Market research suggests some Splash Pages often alienate and frustrate the user in terms of time and the need for simplicity.

Jump Pages – are pages that suddenly appear that have not been requested by the user. The obvious example is a piece of advertising that you have to navigate through or in some circumstances, close the website down to remove.

Domain Name – identifies individual control and authority over a website that has been legally registered. They are simple identification URL labels.

Microsites – cross between landing pages and front pages, often containing their own domain name. They ‘extend’ the user experience and relate indirectly to the front page.

Interstitials – similar to Microsites they are adverts that load between two content pages (a Pop Up is an Interstitial). They draw an above average amount of response and resentment.

Pop Ups – are new web browser windows normally displaying advertisements. Pop Ups often appear after the website is closed but with Pop Up blocker software widely available they are less invasive as they used to be as a form of interruption marketing.

Banner – a long, horizontal, online advert usually found running across the top of a page in a fixed placement.

Skyscraper – a long, vertical online advert (resembling a Skyscraper) usually found running down the side of a page in a fixed placement.

Button – about the size of a stamp or the start button on a computer, usually used for a logo. They are ways of clicking through links to a landing page and are not to be confused with the back button.

Back button – is the most regularly used feature of web browsers returning the user to Front Pages or Landing Pages.

MPU (Multiple Purpose Unit) – a small square embedded in a web page in a fixed placement. It is called multiple placement as it is a flexible, shaped blank canvas in which you can generate flat (static) or interactive content.

Overlayz – a quirky graphic design that takes over the whole page when clicked on.

click on image to enlarge

The Skyscraper can run down either side of the page and will contain more image content than text. The Leaderboard will normally be found on the Front Page and closely represents the traditional Masthead of a print newspaper or magazine and will also often have small adverts inside it.

Flash Animation – a non fixed placement moving image that is not interactive but invasive, e.g. a car speeding across a screen. It is often created using Adobe Flash software. Film animators use this and other software to make cartoons.

Rich Media – where as many interactive and audio-visual elements are used to give richer content and a richer experience for the user e.g. watch a film, play a game, listen to audio. It is a form of convergence.

Viral Marketing / Digital Marketing - is where online communication and social networking sites are used to create brand awareness. In 2007 Warner Brothers released an extensive viral campaign leading up to the release of The Dark Knight including e mails sent slowly revealing the face of the Joker and a Scavenger Hunt on the film’s website.

click on image to enlarge

The Compare the Market advertising campaign uses a range of multimedia, but also utilises viral marketing opportunities. There are in fact two URL addresses, www.comparethemarket.com and www.comparethemeerkat.com with the Meerkat website questioning users as to whether they are in the right place once they land of this Front Page.

In addition to this there are links to social networking sites and a spoof profile of the ‘central character’, Alexsandr Orlov on Twitter, designed of course ultimately for users to obtain a quotation on your car or home insurance (conversion action link).

The competition, in the guise of www.gocompare.com also uses similar ‘hero’ representations with Gio Compario, a fictional Welsh-Italian tenor who also has his own Facebook and Twitter site.

B2B – refers to websites that are created by businesses intended for other businesses.

B2C – refers to websites that are created by businesses intended for consumers. All business online is described as E-Commerce.

Lead Generation – when users interact with a website by handing over their personal details or credit card. This is sometimes referred to as a conversion action link.

Eyetracking – is where marketers study the way the eyes of users scan and consume the content of a web page. Most users view from top left to bottom right.

Userbility Testing – is where qualitative and quantitative research is used by marketers to determine the impact and success of their website.

Cascading Style Sheets (or CSS) – simply describes the look and formatting of a web page, e.g. style created by HTML. Control is given to formatting, consistency across browsers and also allows for flexibility.

HTML – Hypertext Markup Language is the basic construction building blocks of a web page that allows for the embedding of fixed placement images and text.

DHTML – Dynamic Hypertext Markup Language is a term that describes the ability to embed non fixed placement interactive, moving and animated content.

Javascript – is a programming and scripting language.

PDF – portable document formats that are independent of software or hardware. You can now interact with the latest version from Adobe.

Prominence – the header will advise users on the content of that particular page whether it is the latest Harry Potter film, Disney website or BBC Sports Page. A newspaper’s masthead will play the same role.

Grouping – convergence and follow on pages with similar content will be evidenced by links that the target audience will identify with. In depth qualitative and quantitative research is undertaken into users to determine what relevant grouping and nesting to use.

Nesting – connected areas will be nested together to allow the user to gain further clarification of news story or piece of information from another source on the front page. The British Medical Association for example claim that 40% of patients have researched any symptom and conditions they may have on-line before they present to their GP, the same news about a specific celebrity is often gained from clicking on several ‘sources’ and sports news again is obtained in much the same way again from a number of advertised links.

Use of fonts – users like similar conventions and like Tabloids websites rarely deviate into an elaborate typeface. Bold, sans serif, 10-12 size, clear text directs the user to content or a specific link. Many websites use familiar typefaces like Arial and Verdana as they are easier to read. White on black (WOB) is a common convention, also as in Tabloids.

Short and Long Copy – refers to either a restrictive or elaborated language code (elaborated more unusual on web pages).

Body Copy – refers to the main text on a website or web page.

Interactive design interfaces (what happens next) are created by Graphic Designers that require simplicity in relation to users. The organisation of content is referred to as information architecture.

The Fold – is the point on a web page below which scrolling is required to view. Often large images are included in the fold to encourage users to see the whole page.

The Hero Shot – is an iconic, grounding image of the product, brand or item that is being marketed. Hero Shots can include books, people or random objects related directly to the website and are often clickable in a separate window leaving the existing window open.

click on image to enlarge

Note how this particular Hero Shot illustrates eBay’s content with aspirational products specifically addressing the male target audience as the primary user of ebay – footballs, skateboards, video games, consoles and racing cars all buy into the cultural stereotype of traditional, young masculinity and evidence synergy with inset advertising for men’s shoes and Sky television.

click on image to enlarge

AA’s Hero Shot again references hegemonic cultural stereotypes – a smiling, relieved female driver is rescued by a male AA mechanic. Framing ensures that he is dominant and she is almost helpless. The word rescue has a number of connotations and is also used on the front page in conjunction with further evidence of synergy in relation to availability of the new iPhone app.

Genre and Web Pages - can be easily identified by genre including Sport, E-Commerce, Academic, Entertainment, Social Networking, Vanity Pages and Company Intranet Sites as not even close to an exhaustive list.

Use of Colour – simple primary colours are often used, conventions include links to sections on a coloured background down the left hand side of a page. Amazon uses vivid, saturated colours.

White Space – web pages tend to be more cluttered with rich media rather than minimalist, white space is more of a convention associated with 2.0 and Social Networking sites.

Breadcrumbs / Cookies – are ‘you are here’ navigation aids. It allows users to keep track of their locations within programmes – they are pieces of text stored on a user’s computer. Users can delete cookies for privacy reasons to avoid direct marketing.

Breadcrumbs

click on image to enlarge

Cookies

Wikipedia Article on HTTP Cookies

Compare and deconstruct the Disney Front Page below (above and below the fold) – note key differences in design and layout with both and use of rich media.

Now apply the same skills of deconstruction using learnt terminology and media language to the Compare The Market Front Page (above and below the fold) – see how simplicity, relevance and clarity underpin layout and design.

Disney Front Page (above the fold)

click on image to enlarge

Disney Front Page (below the fold)

click on image to enlarge

Compare the Market Front Page (above the fold)

click on image to enlarge

Compare the Market Front Page (below the fold)

click on image to enlarge

When you are deconstructing web pages you will of course not be referring to all of the above terminology but it will allow you to learn how to confidently analyse how they construct meaning in relation to target audience.