HPMC 4008

Communication and the New Media

Lecture 4

Globalization and new media: Website

2
Question
•What should a good website have?

3
‘Good’ depends…

4
Website checklist
A. Emotional connection:
i. I feel related to the type of people who are [X]’s
customers.
ii. I believe [X] cares about me.
iii. I believe that [X] understands me.

B. Online experience:
i. [X]’s website provides easy-to-follow search paths.
ii. I never feel lost when navigating through [X]’s
website.
iii. I was able to obtain the information I wanted
without any delay.

5
Website checklist
C. Responsive service nature
i. [X] is willing and ready to respond to customer needs.
ii. [X]’s website allows visitors to ‘talk back’ to [X].
D. Trust
i. I trust [X] to keep my personal information safe.
ii. I feel safe in my transactions with [X].
E. Fulfilment
i. I got what I ordered from [X]’s website.
ii. The product was delivered on time, as promised by [X].
6
Website design
K.I.S.S. Rule

7
Blueprint of a website

8
Anatomy of a Commercial Website
Homepage
The body of a commercial website is usually
long, with different sections.

9
Above the Fold
Above the Fold is the portion of a webpage
that is visible to a user without needing to
scroll down.

This area gives a solid first impression and

10
Example

11
Elements within “Above the Fold”
1. A Logo on the Header
2. The Header
3. Navigation Menu
4. Hero Section

12
Hero Section

Headline (H1)

Visual
Element
Paragraph
/ Sub-headline

Call to Action (CTA) e.g. “Learn More” 13

14
Anatomy of a Commercial Website
Homepage: Social Proof
•Social Proof demonstrates a company’s
popularity and trustworthiness by
showcasing others’ approval and actions.

•Psychologically, people tend to follow the

15
Example of social proof

16
Anatomy of a Commercial Website
Homepage: CTA
•Call to Action (CTA): A button with a link that
directs visitors to take a specific action, such
as signing up for a newsletter, making a
purchase, or learning more about a service.

17
Example

18
Anatomy of a Commercial Website
Homepage: Footer
Footer contains links to
1. About us
2. Contact information
3. Privacy policy
4. Terms of use
5. Site map
6. Social media links…

19
Exercise
Analyze the website anatomy for one of the
following website:

https://www.7-eleven.com.hk/

https://mordicus.hk/

20
Responsive Web Design (RWD)
•Responsive web design (RWD) enables a single
version of the site and content to be maintained,
which adapts to different resolutions.
•The three most common devices are
(a) Desktop (Including Notebook computer)
(b) Tablet
(c) Mobile
• In short, no matter what devices customers use,
the viewing experience shall not be negatively
affected.
21
Responsive Web Design (RWD)

22
Discuss
https://www.pizzabox.com.hk/#/ only offers
mobile version, how would you improve the
RWD of this site?

Draft an anatomy of website homepage for

23
 Website Builder: Sites.Google.com

1. Free.
2. Easy to use.
3. But not sophisticated. 24
 Website Builder: https://carrd.co

1. Great for one-page site.

26
Website Builder: WordPress.org

27
Website Builder: durable.co

28
Demonstration

29
More A.I. website builder
•Wix
•Hostinger
•Jimdo
•Framer
•GoDaddy
•Squarespace
•Elementor
•Duda
•SITE123
•Landingi
30
Spying on competitors’ websites
Why Spy on Competitors?
•Gain insights into industry trends.
•Understand competitors’ strengths and weaknesses.
•Improve your website’s performance by
benchmarking against competitors.
•Identify opportunities for differentiation.

31
How? Here is an example

32
Easy with SimilarWeb.com

33
Easy with SimilarWeb.com

34
Easy with SimilarWeb.com

35
Easy with SimilarWeb.com

36
Easy with Ubersuggest

37
Easy with Ubersuggest

38
Easy with Ubersuggest

39
Easy with Ubersuggest

40
Easy with Archive.org

Showing the
changes on the
website by day
41
Easy with Archive.org

Go back to
29.04.2019

42
Discuss
Choose a website and try the spying websites
above, tell the class on which one you found
most useful.

43
Videos recommended
• How to Properly Layout A Website (For Beginners)
• The Best Homepage Layout In Web Design (UX)
• The 5 Design Principles (But in Web Design)
• Text Alignment in Web Design (Stop doing it wrong)
• Everything About Above The Folds
• Everything About Website Navigations
• Everything About: Footers In Web Design
• 50 Website Design Mistakes (And Why)

44
Web analytics
• Web analytics is the measurement,
collection, analysis and reporting of
Internet data for understanding and
optimising Web usage.

45
15 Ways to Get Web analytics
1. Number of Users and Sessions: Measures the number of
unique visitors and total visits to the website.
2. Bounce Rate: Indicates the percentage of single-page visits
where the user exits the site from the landing page.
3. Average Session Duration: Showcases the average time
users spend on the website during a session.
4. The Ratio of New to Returning Visitors/Percentage of
New Sessions: The ratio of new visitors to returning visitors
to the website.

46
 15 Ways to Get Web analytics
5. Pages Per Session: Estimates the average number of pages
visited during a session.
6. Pageviews & Pageviews by Page: Measures the total number of
pages viewed on the website and the number of views for each
page.
7. Average Time on Page: The time users spend on a specific page.
8. Top Queries in Site Search: Visitors use top search queries on
the website's internal search engine.
9. Top Landing Pages: The pages where users first enter the
website.
47
 15 Ways to Get Web analytics
10. Channel-Wise Sessions/Sources of Traffic: The
sources of traffic to the website, such as organic
search, social media, or direct visits.
11. Google Ads Analytics: Metrics specific to tracking
the performance of Google Ad campaigns.
12. Device Metrics: The device visitors use to access the
website, such as desktop, mobile, or tablet.
13. Cost Per Conversion/Referral: The cost per
conversion or referral from a specific traffic source.

48
 15 Ways to Get Web analytics
14. Exit Pages: The pages where visitors leave the
website.

15. Goal Completions and Goal Conversion Rate: The

49
50