Skip to main content
087 255 2457
JTVC

200 ways this site works

A website for a college is not overhead — it is the front door, the prospectus and the application office. Here is every concrete thing this one does, grouped by the job it does it for. Each one is either in the build or it is not on this list.

Why we rebuilt it The design system

01Finding a programme

20 ways

  1. All 37 programmes sit in one filterable list instead of behind nested menus.
  2. The list filters by free text, by faculty and by NQF level at the same time.
  3. Every filter state is a shareable URL, so a counsellor can send a student one link.
  4. Seven faculty hubs group the programmes the way the college is actually organised.
  5. Each programme card states its level, its credential and its duration before you click.
  6. The programme list says how many results are showing, so an empty filter is never silent.
  7. An empty result offers a way out rather than a blank page.
  8. Site search covers every page, not just programmes.
  9. Search is reachable from any page with one key press.
  10. Search ranks a title match above a description match, so the fees page wins on “fees”.
  11. Search falls back to a full results page when the palette has nothing.
  12. A dedicated search page exists for linking, sharing and readers without JavaScript.
  13. The mega menu shows a one-line summary under every link, so the label is never the only clue.
  14. The menu separates Report 191 from occupational qualifications, which the old site conflated.
  15. A site map lists every page in one place.
  16. Breadcrumbs on every inner page state where you are in the structure.
  17. Related programmes are linked from each programme page.
  18. The what-to-study page answers the question a school leaver actually asks first.
  19. Each faculty page lists its programmes with the same card as the main list.
  20. Programme pages carry the entry requirement in the same place every time.

02Reading it on a phone

12 ways

  1. The layout is built mobile first and tested at 320, 390, 768, 1024 and 1440 pixels.
  2. No page scrolls horizontally at any of those widths.
  3. Every image ships an 800-pixel variant, so a phone is never sent desktop bytes.
  4. Every image carries its intrinsic width and height, so nothing shifts as it loads.
  5. Images are cropped, never stretched — no picture on the site is squashed.
  6. Only the one image at the top of a page loads eagerly; the rest wait.
  7. Touch targets are raised to 44 pixels on coarse pointers, where a finger is the pointer.
  8. The navigation drawer shows the whole site at once instead of an accordion.
  9. Long control labels shrink rather than wrap or overflow.
  10. Tables scroll inside their own box rather than widening the page.
  11. Type sizes are fluid, so nothing needs a separate mobile stylesheet.
  12. The apply action is reachable from the drawer on every screen size.

03Being readable

18 ways

  1. Every text and field pairing is checked against WCAG AAA in both themes at build time.
  2. The check reads the real token values, so it cannot drift from what ships.
  3. Fixed-polarity colours are asserted identical in both themes, so no state inverts.
  4. The focus indicator is two concentric rings of opposite polarity, so one always clears 3:1.
  5. Control borders are checked against 3:1 on every field they can land on.
  6. A link stays readable through its hover, including when the accent fills the box.
  7. Headings never skip a level, on any of the 67 pages.
  8. Every page has exactly one h1.
  9. Every image has alt text, or is explicitly marked decorative.
  10. Every form control has a programmatic name.
  11. Every ARIA reference resolves to an element that exists.
  12. No element carries a positive tabindex.
  13. Landmarks are present on every page, so a screen reader can skip the chrome.
  14. A skip link is the first thing in the tab order.
  15. Motion honours prefers-reduced-motion, including the scroll-spy and the reveal.
  16. The dark theme is a real palette, not an inversion — asserted, not assumed.
  17. Placeholder text is de-emphasised but still clears contrast.
  18. Disabled controls keep a visible border, so they read as unavailable rather than broken.

04Loading fast

11 ways

  1. The whole site is static HTML — no CMS, no database, no server rendering.
  2. One stylesheet covers 67 pages.
  3. The carousel library is a separate chunk, loaded only on pages that carry a rail.
  4. The lightbox is loaded with it, and only there.
  5. Search loads its index the first time someone opens the palette, not on page load.
  6. Fonts use metric-compatible fallbacks, so the swap does not reflow the page.
  7. Per-image and per-page byte budgets are enforced by the test suite.
  8. Nothing referenced is missing, and nothing shipped is unused — both are asserted.
  9. One scroll listener drives every scroll-linked effect on the page.
  10. Scroll work is batched into a frame, so it cannot thrash layout.
  11. The build fails if a chunk dynamically imports the entry chunk, which would deadlock.

05Being findable

10 ways

  1. Every page has its own title and description, written for that page.
  2. Every page declares a canonical URL.
  3. Open Graph and Twitter Card tags give a controlled title, description and image when shared.
  4. CollegeOrUniversity structured data carries the name, address, contact and accreditation.
  5. Programme pages add their own structured data for the qualification.
  6. Semantic headings give a crawler a clear outline of every page.
  7. URLs are readable and stable, with no query strings in the structure.
  8. The site map is an HTML page, not only an XML file.
  9. Internal links are checked at build time, so a dead link cannot ship.
  10. Anchors are checked too, so a table-of-contents link cannot point at nothing.

06Being trusted

10 ways

  1. Accreditation numbers are published exactly as the college registers them.
  2. Each accrediting body is named with its own mark and its own registration number.
  3. The marks are the bodies' own artwork, not redrawn.
  4. Registration and exam-centre numbers appear in the footer of every page.
  5. Content extracted from the old site is carried over verbatim rather than paraphrased.
  6. Every source paragraph over 60 characters is asserted to survive onto the rebuilt page.
  7. Errors found in the source content are documented for the college rather than silently rewritten.
  8. Duplicate and empty source pages are named, and what replaced them is stated.
  9. The application form states plainly that it has no backend until the college sets one.
  10. No testimonial, statistic or partner logo on the site is invented.

07Being maintainable

12 ways

  1. Every page is generated from one layout, so a header change is a one-line change.
  2. The 37 programmes come from a single catalogue file.
  3. Navigation, campuses, contact details and accreditation come from a single facts file.
  4. Every colour, size, radius, shadow and motion curve comes from one token block.
  5. Two radii and a pill are the whole shape system, so no component invents its own.
  6. Interface strings live in one file, in five languages.
  7. Markup escapes by default; raw HTML has to be asked for explicitly.
  8. The generator only deletes files it wrote, identified by a marker.
  9. The test suite runs over the generated HTML, so it tests what ships.
  10. Structural rules — no nested list item, no flow content in a paragraph — are asserted.
  11. The design system page renders the live tokens, so a change can be checked in one place.
  12. A browser audit script drives the real page at five widths and reports overflow and errors.

08Applying

15 ways

  1. The application form is one page, not a wizard that hides how much is left.
  2. It is grouped into numbered sections, so a long form still reads as four short ones.
  3. Every field states whether it is required before you reach it, not after you submit.
  4. Validation messages are written as sentences, not as browser defaults.
  5. An invalid field is announced to a screen reader, not only outlined in red.
  6. The first invalid field takes focus on a failed submit, so nobody hunts for the error.
  7. Optional fields say why they are optional and when they will be needed.
  8. Choosing a programme from its own page carries that choice into the form.
  9. The programme list in the form is grouped by faculty, so 37 options stay navigable.
  10. Until the college sets a handler, the form says plainly that nothing has been sent yet.
  11. It hands the applicant a transcript of their own answers rather than losing them.
  12. It never claims a submission succeeded when it has not left the browser.
  13. The client-side validation is documented as presentation only; the server must validate again.
  14. The form posts nowhere third-party — there is no analytics or marketing tag on any page.
  15. There is a phone number, a WhatsApp number and an email beside the form for anyone who would rather talk.

09How it is checked

33 ways

  1. Seven assertion suites run over the generated HTML on every build.
  2. The pages suite proves metadata, landmarks and one h1 on every page.
  3. It resolves every internal link and every anchor, so a dead link cannot ship.
  4. It fails on an orphan page — anything the navigation cannot reach.
  5. It fails on a placeholder value left in real content.
  6. The markup suite proves structural nesting: no list item outside a list, no nested link.
  7. It proves no flow content sits inside a paragraph, which silently breaks layout.
  8. It proves every element that opens is closed, in order.
  9. The accessibility suite proves alt text and intrinsic dimensions on every image.
  10. It proves a programmatic name on every control.
  11. It proves every ARIA reference resolves to an element that exists.
  12. It proves no heading level is skipped and no positive tabindex is used.
  13. It proves all five locales are complete, so a missing translation cannot ship.
  14. The contrast suite reads the real token values rather than a copy of them.
  15. It checks every text and field pairing the design system actually puts on screen.
  16. It checks the focus ring against every field it can land on, in both themes.
  17. It checks control borders against the 3:1 non-text threshold on every field.
  18. It catches a cascade-layer trap where a component rule tries to recolour a utility and cannot.
  19. The assets suite fails on a referenced image that is missing.
  20. It fails on a shipped image nothing references.
  21. It enforces a per-image and a per-page byte budget.
  22. The content suite proves every source paragraph over sixty characters survives onto the rebuilt page.
  23. It proves every faculty links its programmes.
  24. It proves every source page is either rendered or excluded by name.
  25. The bundle suite runs on built output, not source.
  26. It catches a chunk that dynamically imports the entry chunk — a cycle that deadlocks at runtime.
  27. A browser audit drives all 70 pages at five widths and reports horizontal overflow by element.
  28. It reports any image painted larger than the pixels available to fill it.
  29. It reports any image stretched off its own aspect ratio.
  30. It reports any control label that has wrapped onto a second line.
  31. It reports any bleeding hero picture that covers text in the band below it.
  32. A behaviour audit drives search, the filters, the forms, the lightbox, the menus and the theme.
  33. It exists because a bundling fault once left the search page rendered but inert while every static check passed.

10Reading a programme

13 ways

  1. All 37 programme pages come from one template, so none of them drifts from the others.
  2. Each states its NQF level, its credential, its duration and its campuses in the same place.
  3. Entry requirements are stated before the curriculum, which is the order a reader needs them in.
  4. The awarding body is named on the page, not only in the footer.
  5. Body content is carried over from the college's own words rather than rewritten.
  6. Where the source content was wrong, the page says so rather than repeating it silently.
  7. Long qualification tables scroll inside their own box instead of widening the page.
  8. Each page links its faculty and its sibling programmes.
  9. Each page can be printed as a document, with the destination of every link written out.
  10. The print stylesheet drops the chrome, the carousels and the decorative bands.
  11. Printing opens every accordion and tab panel, so nothing is hidden on paper.
  12. Printed pages force black on white regardless of the theme on screen.
  13. Headings avoid breaking away from the text beneath them on paper.

11Details that are easy to skip

22 ways

  1. Scrollbars are themed rather than left as the operating system default.
  2. The scrollbar thumb takes the accent on hover, so it reads as part of the product.
  3. Text selection uses the brand amber rather than the browser blue.
  4. The scroll-to-top button carries the reading position on its rim.
  5. It appears past 600px and disappears under 200px, so it cannot flicker at a threshold.
  6. The contact strip retracts as reading starts and returns when you scroll back up.
  7. The header retracts on the way down and returns immediately on the way up.
  8. Clicking an item in the on-page navigation holds the header still while it scrolls.
  9. The on-page navigation scrolls the active section into its own centre as you read.
  10. It reserves the width of its own bold state, so the strip does not reflow as you pass a heading.
  11. Section anchors account for the header height, so a heading never lands behind the bar.
  12. The decorative circles behind the headings are marked decorative and never announced.
  13. The favicon is the college crest, at the size a browser actually paints it.
  14. The theme is resolved before first paint, so no page flashes the wrong one.
  15. Fonts declare a metric-matched fallback, so the swap does not move a single line.
  16. Focus is returned to whatever opened a dialog when it closes.
  17. A closed drawer leaves the tab order rather than lurking in it invisibly.
  18. Modals trap the tab ring, so keyboard focus cannot wander behind them.
  19. Every dialog closes on Escape.
  20. The command palette opens on ⌘K and Ctrl+K.
  21. Arrow keys move through search results and Enter opens the highlighted one.
  22. A search with no match hands the query to the full search page instead of doing nothing.

12The shape of the thing

14 ways

  1. Two radii and a pill are the entire shape system, so no component invents its own corner.
  2. Every interactive control shares one height and one radius, so a row of them reads as one row.
  3. Controls are sized by padding rather than a fixed height, so a longer label never clips.
  4. Icons inside a control are sized against the text beside them, not set in pixels.
  5. The eyebrow is set in a monospace at a colour the heading never uses, so a label reads as a label.
  6. Section titles close with the brand dot in place of a full stop.
  7. The header runs wider than the text column, so the chrome frames the page rather than lining up with it.
  8. A hero photograph hangs half its own height past its section, over a rule you can see it cross.
  9. The band below reserves that overhang, so the picture never lands on something you were reading.
  10. Decorative circles are clipped by their own layer, so a band can let a picture out without letting them out.
  11. Third-party marks sit on one light plate rather than each wearing its own white box.
  12. Forms carry a shallow gradient and a brand wash, so a long form is not a flat sheet of paper.
  13. The filter bar stays where the reader left it instead of following them down the page.
  14. Nothing on the site uses a colour, a size, a radius or a motion curve that is not in the token block.

13Reaching more people

10 ways

  1. The interface is available in English, French, Chinese, Portuguese and Spanish.
  2. The language choice persists across pages.
  3. The scope of translation is stated in the switcher, so nobody expects translated tuition.
  4. Every locale is asserted complete at build time — no missing string can ship.
  5. The theme choice persists and is resolved before first paint, so nothing flashes.
  6. The site respects the operating system's colour scheme when no choice has been made.
  7. WhatsApp is offered alongside phone and email, because that is how applicants write.
  8. Contact is broken out by department, so an enquiry reaches the right desk first time.
  9. Programme pages can be printed as a usable document, not a screenshot of a website.
  10. The printed page carries the destination of every link.

See it running.

Every claim above is in the build. The design system page shows the parts on their own.

Open the design system Why we rebuilt it
Apply now