Name:
Learner work booklet
Web Criteria A
Understand the principles of website development
Review two websites ‘
Review both websites and identify the target audience of each and reviewing how the website
meets their requirements.
Website 1: Premier league Website 2: Amazon
https://www.premierleague.com/ https://www.amazon.co.uk/
Target audience (Age, Gender, Purpose) Target audience (Age, Gender, Purpose)
The Premiership primarily focuses on football Amazon’s target market has an adaptive nature
enthusiasts, with a major proportion being men due to the natural trends present within media.
between the ages of 15 and 60. The website Therefore, their target market is aiming to be
was made to inform and provide direct accessible to all potential customers. They seek
information across all fixtures within the buyers for all departments, providing efficiency
Premier League, being the directive and primary and easily operable features for buyers. An
source for providing live information, and post- example of this is their implementation of a
game news for the Premier League search bar to view products Amazon provides
Championship. in accordance with what the user searches.
Furthermore, they prioritise the user’s desires
and preferences to provide a personalised
experience by showing products similar to their
likes, this is evidently shown through Amazon’s
Content-based technologies (HTML5, CSS3, use of account preferences, allowing the user
Javascript) to provide a “preference of department” which
will target products from that area to be
Many HTML5 features were incorporated displayed to the user. They also utilise targeted
throughout the Premier League website. One marketing through the use of analytical cookies
example of HTML5 that was incorporated was and their vast availability of stock worldwide.
the navigation bar, through using an unordered Amazon’s mission statement is “to serve
list (ul tag) alongside CSS to remove bullet customers through online and physical stores
points and align content horizontally (list-style- and focus on selection, price, and
type: none;), it creates a simplistic and intuitive convenience”, which is easily envisioned
display that is interactive with the users hover. through their dominance in the markets they
Using a simplistic navigation makes users have provide for.
the ability to direct to any source of information Amazon’s age market is dependent on their
without requiring them to go through the index departments, however, for their service of
page, which can be tedious to skim through the Amazon Prime, it is primarily people aged 30-40
,Name:
content. due to their financial status, availability and
desire for products.
Content-based technologies (HTML5, CSS3,
Javascript)
Amazon utilises all features of dynamic HTML
Through the image above, the background used to create an interactive and intuitively designed
as a feature wall to present information is interface, providing access to products and
implemented using CSS, Cascading Style Sheets. services that Amazon provides.
This strikes a vibrant and direct focus on the
user and attracts them to be attentive to the
main news highlighted. For the Premiership to One example of HTML5 that was incorporated
implement this feature, they utilised the linear- within Amazon’s web pages is the “header” tag,
gradient function in CSS, which with given a semantic field that describes the purpose and
parameters, can create the background effect usage to browsers for compatibility and Web
to present to users (linear- Engine indexing. Within Amazon’s web pages,
gradient(270deg,#05f0ff 30%,#963cff) #963cff;) the “header” tag was used to create their
consistent navigation that is shown across all
This function was implemented within the
their web pages under the domain
“section” tag under the background attribute.
“amazon.com”. Their navigation is further
The “section” tag is a semantic element added
broken down into separate elements such as a
in HTML5, which better separates content for
horizontal unordered list containing each
users to read and operate through.
department, and a profile page that can be
used to authenticate for extra incentives. Using
the “header” tag rather than a non-semantic
The Premier Leagues' main interactive elements
element such as “div” can bring benefits to the
are displayed and implemented through their
user’s experience as Spiderbots will prioritise
service of “Fantasy Football”, which is
content within headers rather than the
incorporated within the website. One example
generalised containers, as a result, provide
of how the website uses Javascript to create
better search results and indexing priority to
responsive elements is through the dropdowns
users through web engines.
within the navigation bar, through using the
event listener “on mouse in”, Javascript can
interpret when the user interacts with the
CSS is also incorporated throughout Amazon to
element, and in return can create the extended
design the layout of their simplistic yet intuitive
dropdown containing topics referring to the
grid design that displays their products. One
main element.
example of their content is their main body
(the featured area containing their main
products) which uses a CSS flex-box to position
each element. The use of a flex-box provides
many options and features to justify-content
positioning and is more beneficial as it is
automatically adaptive to the user’s browser
, Name:
width; therefore, adding another element will
utilise the previous layout and cause no
formatting complications to the web page. Flex-
box also provides a simplistic way to position
each element on rows through the use of “flex-
basis” and therefore can be adapted each row
to display a certain amount of elements,
making Amazon utilise a varied amount of
containers on each row, providing variety to
the user.
One example of Javascript usage on Amazon is
their filtering container for products, utilising
many features to filter with, such as price,
department, prime delivery and more. This
Product or service based would be made by using an “on toggle” event
The Premier League website is a service that is listener on checkboxes, which would review all
provided to football enthusiasts for the latest product container’s attributes which can be
news, live fixtures and history. What they offer pre-defined based on the first queries data, or
is free of charge however the service they run is re-executing a query with the filters applied to
dependent on their sales through merchandise. Amazon’s product database, in return,
Through the Premier League website, they also providing results that fit the criteria of the
offer fantasy football, a virtual game where filter. Incorporating Javascript brings benefits to
users can create their own personalised teams the user as it allows them to interact and
to gain points, which is a main attraction for receive a real-time response, which better
advertisement and sponsorships to gain benefits their experience and creates a sense of
revenue from. Within Fantasy Football, they personalisation as it allows for preference to
also offer incentives to winners such as the user.
merchandise and cash prizes, creating a sense
of involvement and returning activity for the
user to act on. The Premier League offers Product or service based
minimal products apart from merchandise
however they offer quality, reliable information
Amazon provides a variety of products and
retrieved from direct primary sources and
services, however, the main focus towards the
pushed to the community at fast speeds, which
majority of Amazon’s target market is through
is a highlighted feature for the football
the vast departments of products available.
community who cannot experience events in
However, they provide services alongside their
real-time, through this, provides an incentive
products, such as fast and consistent same-day
for users to interact with the website’s
or next-day delivery, ensuring customer
functionality and review through available
satisfaction, and a simplistic checkout process
news.
providing possible options of delivery times to
better benefit the buyer’s availability.
User-friendly
Due to Amazon providing both products and
The Premier League website utilises elements services, there can be confusion and
