Skip to main content
Browse documentation

Fronty documentation

Make a site mobile-friendly, accessible, and fast

Test responsive layouts, complete the main journey with a keyboard, and use measured performance evidence rather than visual assumptions.

Last verified

Availability

Manual verification required

Components include responsive and accessibility foundations, but Fronty does not currently provide a complete browser, axe or Lighthouse certification gate.

Plans
Quality review applies to every published site.
Roles
Editors can improve pages; final release review belongs to the person accountable for the website.
Before you start
Representative content, public or preview URLs, and access to phone, tablet and desktop testing.
On this page
  1. Test the layout, not only the viewport switcher
  2. Complete the primary path without a pointer
  3. Check contrast, zoom, reflow, and motion
  4. Measure performance on the public URL
  5. Release evidence

Test the layout, not only the viewport switcher #

Start at 360 or 390 CSS pixels, then test around 768 and 1440. Also drag through the widths between them; breakage often occurs between presets. Use realistic long titles, validation errors, empty data and open menus.

  • No page-level horizontal scrolling.
  • Navigation, cards, tables and forms remain understandable when stacked.
  • Modals and drawers fit the viewport and can be closed without precision tapping.
  • Important controls have touch targets around 44 by 44 CSS pixels.
  • Images reserve space, preserve meaningful crops and do not carry text that disappears when resized.

Complete the primary path without a pointer #

  1. Start at the address bar and use Tab, Shift+Tab, Enter, Space, arrow keys and Escape.
  2. Confirm focus is always visible and follows the visual order.
  3. Open and close the menu, dropdowns, modal or drawer, form controls, filters and item links.
  4. Confirm focus moves into a modal and returns to the control that opened it.
  5. Inspect headings and landmarks with a screen reader. Labels should describe purpose without relying on position, color or placeholder text.

Fronty's component tests cover several semantic and keyboard behaviors, but only the assembled site can reveal a broken focus order or inaccessible combination.

Check contrast, zoom, reflow, and motion #

  • Use a contrast checker for text, icons and interactive states.
  • Zoom to 200% and increase text size. Content must reflow without clipping or overlap.
  • Do not communicate state only with color. Pair it with text, shape or an icon label.
  • Respect reduced-motion preferences and avoid essential information that exists only during animation.
  • Write useful alt text for informative images; use empty alt text for decoration.

Measure performance on the public URL #

Fronty hosting includes caching, responsive image support and image optimization, but the final score depends on page content, third-party scripts, fonts, image choices, geography and device conditions.

  1. Run Lighthouse or PageSpeed against the public URL on mobile settings.
  2. Inspect Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift rather than only the overall score.
  3. Repeat after the cache is warm and record the date, URL and test conditions.
  4. Use field Web Vitals when traffic is sufficient; lab tests are diagnostic, not a substitute for real-user data.

Release evidence #

A defensible quality review includes screenshots at representative widths, a keyboard-only completion record, an automated accessibility scan plus manual findings, measured Lighthouse/Web Vitals results, and the public URL and date that were tested.

An automated scan can find common failures. It cannot prove WCAG conformance, good writing, correct reading order, a usable mobile workflow or acceptable performance for every visitor.

Capability overviews

For the shorter product explanation, see:

Editor and pages Use the visual editor safely, understand what is selected, update site-wide design, and avoid breaking repeated content or navigation. Forms and submissions Build and validate a form, choose where responses go, and prove that a submission from the published origin reaches the intended destination. Readiness and publishing Understand drafts and releases, resolve the complete readiness checklist, publish safely, and know the current rollback boundary.