SENG1050 Chap.9 Website Structure, Design Principles and SEO
Website Structure, Design Principles and SEO
This chapter follows the Week 9 lecture on website design and human-computer interaction. It plans a site from goals and audience, compares linear, hierarchical and mixed structures with the limits on depth and breadth, and applies repetition, contrast, proximity and alignment.
It then covers accessibility principles, readable text and colour, load time, layout techniques, media queries and mobile design, and the elements that matter for search engine optimisation. The design lab adds media queries and tests a page with mobile emulation, and the second assignment requires a Lighthouse check.
What this chapter covers
- 01
Marks of a good website
- 02
Planning with HCI
- 03
Linear, hierarchical and mixed structures
- 04
Shallow versus deep hierarchies
- 05
Four visual design principles
- 06
Accessibility principles in markup
- 07
Load time and responsive layout
- 08
SEO elements and paid listings
Worked example · free
Choose a site structure for two different sites
- 1The tutorial has a clearly defined order, so a linear structure fits; an augmented linear version adds a link back to the start on every page.
- 1The shop moves from general categories to specific products, so a hierarchical structure from the home page fits.
- 1The three click rule limits depth: any page should be reachable from any other within three clicks, which caps the hierarchy at about four levels.
Key terms
- Human-computer interaction
- Human-computer interaction is the study of interfaces between people and computers, drawing on design, psychology and communication.
- Breadcrumbs
- Breadcrumbs are a navigation aid showing where a visitor is relative to the home page, with each crumb a link.
- Three click rule
- The three click rule says any page should be reachable from any other within three hyperlinks.
- Media query
- A media query applies CSS rules only when conditions such as a maximum width are met.
- Search engine optimisation
- Search engine optimisation is the work of raising a site's rank in organic, unpaid search listings.
- Paid placement
- Paid placement is a search listing whose position is bought through keyword auctions.
- Authority website
- An authority website is a site trusted by users, industry, other sites and search engines, whose links carry weight.
- Wireframe
- A wireframe is a sketch of a page layout showing where the logo, navigation, content and footer will go.
Website Structure, Design Principles and SEO FAQ
What are the four accessibility principles?
Content must be perceivable, with text equivalents such as alt text; the interface must be operable, including by keyboard and without flashing content; content must be understandable and consistently organised; and the site must be robust enough for current and future user agents, including assistive technology.
What is the difference between SEO and SEM?
Search engine optimisation improves a site so it ranks higher in the organic listings, with no cost per click. Search engine marketing buys paid listings: paid inclusion guarantees a place in the index without a guaranteed rank, and paid placement buys position through keyword auctions.
Why does page load time matter so much?
The lecture reports that pages taking longer than about three seconds lose an average of half their traffic. Oversized images, render-blocking JavaScript and render-blocking CSS are the three main causes, so resize and compress images, defer scripts and load only essential styles first.
What does a sitemap do?
A sitemap describes a site's pages and files and how they relate, so search engines can crawl it efficiently. The lecture recommends one for large sites or new sites with few external links, while a small, well-linked site can usually be indexed without it.
Which page elements matter most for search ranking?
The lecture names the domain name, a unique and descriptive title on each page, a meta description, keywords occurring naturally in headings and text, alt text on images, and inbound links from trusted sites. Image-only pages, image maps, frames and password-protected pages work against indexing.
Exam move
Take a website you use often and audit it in writing: its structure, how it applies the four visual principles, two accessibility checks and its page title and description. Then do the same for your own assignment site, since exam questions can ask you to apply a principle to it. Write one media query from memory and explain what it does.
Practise naming one accessibility principle and one search element for any page you are shown in under a minute.
Working through Website Structure, Design Principles and SEO in SENG1050? Sia is AskSia’s AI Computer Science tutor — ask any SENG1050 Website Structure, Design Principles and SEO question and get a clear, step-by-step explanation grounded in how SENG1050 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.
