1. 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

2. 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)

3. 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

4. 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.

5. 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.

6.  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

7. 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).

8. 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.

9.  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

10. 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

11. 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)

12. click on image
to enlarge
Disney Front Page (below the fold)
click on image
to enlarge
Compare the Market Front Page (above the fold)

13. 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.