Responsive Design, SEO, Navigation, Accessibility and Hosting – Website Development with AI (Senior 6 ICT) | Ganzaa

Website Development with AI

Lessons

Senior 6 · ICT

Website Development with AI

5 lessons

Lesson 5 of 5

Responsive Design, SEO, Navigation, Accessibility and Hosting

25 min

Finished is not the same as ready

The cooperative site works on the laptop it was built on. Before it goes public, four questions remain. Does it work on a small phone, where most of its visitors are? Can a buyer who is blind, or who uses only a keyboard, place an order? Will a coffee importer searching for "washed coffee Lake Kivu" ever find it? And where will it live, so that anyone in the world can open it? This lesson answers all four: responsive design, accessibility, search engine optimisation, and hosting.

Definition

Responsive design: designing a page so that its layout adapts to the width of the screen, from a small phone to a wide monitor, using flexible layouts, flexible images and CSS media queries.

Web accessibility: designing sites so that people with disabilities can perceive, understand, navigate and use them. The international standard is the W3C's Web Content Accessibility Guidelines (WCAG); version 2.2 was published in 2023.

Search engine optimisation (SEO): making a site easy for search engines to read, understand and rank for the searches it deserves to appear in.

Web hosting: renting space on a server that is always connected to the internet, so that a site can be reached at any time.

Responsive design

Three ingredients make a page responsive. First, the viewport tag in the <head>, <meta name="viewport" content="width=device-width, initial-scale=1">, tells a phone to use its real width instead of pretending to be a desktop. Second, layouts and images measured in flexible units rather than fixed pixels. Third, media queries, which apply CSS rules only above or below a chosen width, called a breakpoint.

/* Mobile first: the default rules are for small screens */
img { max-width: 100%; height: auto; }          /* images never overflow */
nav ul { display: flex; flex-direction: column; gap: 0.5rem; }
main { padding: 1rem; }

/* From 700 px wide upwards, change the layout */
@media (min-width: 700px) {
  nav ul { flex-direction: row; gap: 1.5rem; }
  main { max-width: 60rem; margin: 0 auto; padding: 2rem; }
}

This style sheet is mobile first: the plain rules are for phones, and the media query adds the wide-screen layout. On a 360-pixel phone the menu items stack in a column; from 700 pixels wide they sit in a row. Test it by narrowing the browser window, or with the browser's device toolbar (press F12, then the phone icon). WordPress block themes are already responsive, but anything you add in Custom HTML must be checked the same way.

Navigation

Keep the main menu short: about five to seven items, each a clear noun (Coffee, Our farmers, News, Contact).
Put it in the same place on every page, and make the logo a link to the home page.
On phones, a menu button that opens the list is normal; make sure it can be opened with the keyboard too.
Every page should be reachable in a few clicks; a footer with key links and a search box helps.

Accessibility: the POUR principles

Principle	Meaning	Examples of what to do
Perceivable	Everyone can see or hear the content in some form	Alt text; captions for video; enough colour contrast; information not given by colour alone
Operable	Everyone can use the controls	Everything works with a keyboard (Tab, Enter); visible focus; no time limits that cannot be extended
Understandable	Content and controls make sense	`lang` attribute; labels on form fields; clear error messages; consistent menus
Robust	Works with browsers and assistive technology	Valid, semantic HTML: real `<button>`, `<nav>`, headings in order

Contrast is the one rule you can compute. WCAG level AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. For two colours with relative luminances $L_1 \ge L_2$ :

$\text{contrast ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$

Relative luminance weights the red, green and blue channels by how bright they look to the eye, after converting each from the 0 to 255 scale into linear light:

$L = 0.2126\,R + 0.7152\,G + 0.0722\,B$

This program does the whole calculation. It was run with node, and its output is shown underneath.

function lum(hex) {
  const c = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255)
    .map(v => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
}
function ratio(a, b) { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); }
for (const fg of ["#9a9a9a", "#767676", "#222222"]) console.log(fg, ratio(fg, "#ffffff").toFixed(2));

#9a9a9a 2.81
#767676 4.54
#222222 15.91

Grey #767676 is about the lightest grey that still passes 4.5 to 1 on white.

Worked example 1: does the cooperative's green pass?

The cooperative wants text in green #2f7d3a on white. Compute the contrast ratio.

Channels: $2\mathrm{f} = 47,\; 7\mathrm{d} = 125,\; 3\mathrm{a} = 58$ . Divide by 255: $0.1843,\; 0.4902,\; 0.2275$ .
Convert each to linear light with the program's formula: $R = 0.0284,\; G = 0.2051,\; B = 0.0423$ .
$L = 0.2126 \times 0.0284 + 0.7152 \times 0.2051 + 0.0722 \times 0.0423 \approx 0.1558$ .
White has $L = 1$ . Ratio: $\frac{1 + 0.05}{0.1558 + 0.05} = \frac{1.05}{0.2058} \approx 5.10$ .

5.10 is at least 4.5, so the green passes for body text. A bright yellow such as #f2c200 on white gives only about 1.68 and fails even for large text.

Search engine optimisation

Search engines send programs called crawlers to read pages, store them in an index, and rank them for each search. Good SEO is mostly good, honest structure:

Title and description. Each page has a unique <title> (about 60 characters) and a meta description (about 150 characters) that a searcher would want to click: "Washed Arabica from Lake Kivu | Kivu Hills Coffee".
Headings and words. One h1 per page that says what it is about, using the words people actually search for.
Readable addresses. /coffee/washed-arabica/ rather than /?p=123 (WordPress: Settings → Permalinks → Post name).
Alt text and speed. Both help search engines and visitors.
A sitemap. WordPress automatically publishes a list of the site's pages at /wp-sitemap.xml; submit it in Google Search Console.
Real links. Links from respected sites, such as a cooperative federation or a buyer, are worth more than any trick.

Stuffing keywords, hiding text or buying links breaks search engines' rules and can get a site removed from results.

Hosting and uploading

A site is reached by its domain name, such as kivuhills.rw. The Domain Name System (DNS) turns that name into the IP address of the server that hosts the site.

Kind of hosting	What you get	Suits
Static hosting (GitHub Pages, Hugging Face Spaces and others)	Serves HTML, CSS and JavaScript files only; often free	Hand-coded or AI-generated static sites
Shared hosting	A share of a server with PHP and MySQL; cheap	Small WordPress sites
Managed WordPress hosting	Hosting tuned for WordPress, with updates and backups done for you	Organisations with no technical staff
VPS or cloud server	Your own virtual server; you manage everything	Larger sites, or people with server skills

Domains ending in .rw are Rwanda's country-code domain, managed by RICTA (Rwanda Internet Community and Technology Alliance) and sold through accredited registrars.

Uploading a static site: copy the files to the host with the host's file manager, with an SFTP program such as FileZilla, or by pushing them to a Git repository that the host publishes. The home page must be called index.html.

Moving a WordPress site from your computer to a host means moving two things: the files (above all wp-content, which holds themes, plugins and uploads) and the database. A migration plugin packages both into one file; the manual way is to copy the files by SFTP, export the database from phpMyAdmin, import it on the host, update wp-config.php, and change the site address from localhost to the real domain.

Finally, switch on HTTPS. Most hosts offer free certificates from Let's Encrypt; without one, browsers mark the site "Not secure" and anything typed into its forms travels unencrypted.

Kevin Powell: A practical guide to responsive web design. Watch how flexible widths, images and a few media queries make one layout work from phone to desktop, and compare it with the mobile-first style sheet above.

Worked example 2: will the cheapest plan cope?

A shared hosting plan allows 50 GB of data transfer a month. The cooperative expects about 3,000 visits a month, and an average visit downloads 1.5 MB. Will the plan cope, and what if a news article goes viral with ten times the traffic?

Normal month: $3000 \times 1.5\,\text{MB} = 4500\,\text{MB} = 4.5\,\text{GB}$ , well inside 50 GB.
Viral month: $10 \times 4.5 = 45\,\text{GB}$ , just inside the limit, with little margin.
Shrinking the images (lesson 2) to cut a visit to 0.5 MB would make the viral month $30\,000 \times 0.5 = 15\,000\,\text{MB} = 15\,\text{GB}$ .

Optimising media is often cheaper than upgrading the plan.

Warning

Back up before you move or update anything. A failed upload or update can break a live site. Keep at least one recent copy of both the files and the database somewhere other than the server itself, and test that you can restore it.

Tip

The keyboard test. Put the mouse away and press Tab through your page. If you cannot see where you are, cannot open the menu, or cannot submit the form, the page fails for many users, and you found it in two minutes.

✦

Hands-on: make it ready, then publish

Test your cooperative or club site at 360, 768 and 1280 pixels wide. Fix anything that overflows or becomes unreadable.
Run the keyboard test and the contrast program on your main text and link colours. Fix every failure.
Give every page a unique title and a meta description (in WordPress, with an SEO plugin or the theme's settings).
Publish a static version (for example your DeepSite page from lesson 4) on a free static host such as GitHub Pages or a Hugging Face Space. For WordPress, write the steps you would follow to move the site to a host.
Open the published site on a phone using mobile data, and time how long the home page takes to appear.

Check: the site is reachable from any phone, passes the keyboard and contrast tests, and every page has its own title.

Practice

What does the viewport meta tag do, and what happens on a phone without it?
Write a media query that makes .cards a 3-column grid from 900 px wide, with one column below that.
Name the four POUR principles and give one practical action for each.
A text colour has relative luminance 0.20 and the background is white. Calculate the contrast ratio. Does it pass for normal text?
Give three things that improve a page's SEO honestly, and one practice that can get a site removed from search results.
Explain what DNS does when you type kivuhills.rw.
A school wants its WordPress site moved from a teacher's laptop to a host. List the steps, and evaluate whether a migration plugin or the manual method is better for a teacher with little experience.

Show answersHide answers

It tells the phone to lay out the page at the device's real width and normal zoom. Without it, the phone pretends to be about 980 pixels wide and shrinks the whole page, so the text is tiny.
.cards { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
Perceivable: alt text or captions. Operable: everything works by keyboard. Understandable: labels and clear error messages. Robust: valid, semantic HTML.
$\frac{1 + 0.05}{0.20 + 0.05} = \frac{1.05}{0.25} = 4.2$ . It fails: 4.2 is below 4.5 (it would pass for large text, where 3 is enough).
Honest: unique titles and descriptions; clear headings with the words people search for; readable URLs; alt text; a fast site; a sitemap; real links from respected sites. Removal risk: keyword stuffing, hidden text, or bought links.
The browser asks a DNS resolver for the IP address that belongs to that name; the resolver returns it; the browser then connects to the server at that IP address and requests the page.
Back up; buy hosting and a domain; create a database on the host; copy the files (especially wp-content); export and import the database; update wp-config.php; change the site URL; switch on HTTPS; test. A migration plugin is usually better for a beginner: fewer manual steps and fewer chances to break the database or URLs, though large sites may exceed a free plugin's size limit.

1Finished is not the same as ready

2Responsive design

3Navigation

4Accessibility: the POUR principles

5Search engine optimisation

6Hosting and uploading

7Hands-on: make it ready, then publish