Responsive design

Visitors arrive on phones, tablets, laptops and large monitors, and they zoom in when text is too small. Nausikaä adapts its layouts and components to the width of the screen, so the same HTML works everywhere.

Most of this happens without any work on your side. This page explains the screen widths Nausikaä distinguishes, how the page layout and the components change, and a few things to keep in mind in your own pages.

Viewport

Add the viewport meta tag to the <head> of every page. Without it, phones pretend to be a desktop screen of about 980 pixels wide and shrink the whole page to fit, so the text becomes tiny and the layouts for small screens never apply.

<meta name="viewport" content="width=device-width, initial-scale=1">

Don’t disable zooming: avoid maximum-scale=1 or user-scalable=no in this tag. Many people depend on zooming in to read comfortably.

Breakpoints

Nausikaä distinguishes three widths. The boundaries between them are called breakpoints.

Width	Typical devices	What changes
Up to 666px	Phones	Single column, text at 90% of the base size, navbar collapsed into a menu button, form labels above their fields.
667px to 900px	Tablets, small windows	Single column, text at 95% of the base size, navbar collapsed into a menu button.
901px and wider	Laptops and desktops	Page content on a twelve-column grid, full navbar, optional sidebar next to the content.

A few components have their own breakpoint where their content needs one, such as breadcrumbs (680px) and the date picker, which shows one month instead of two below 768px.

Zooming counts too: breakpoints respond to the width in CSS pixels, not to the physical screen. A visitor who zooms a desktop page to 200% gets the tablet or phone layout, which keeps the text readable without scrolling sideways.

Page layout

On screens of 901px and wider, the <main> element directly inside <body> becomes a centered grid of twelve columns, at most 1150px wide. Add the class sidebar-right or sidebar-left to place an <aside class="sidebar"> next to the content, as on this page. On smaller screens the sidebar moves out of view and opens with a button at the edge of the screen.

<body>
  <header class="navbar">...</header>

  <main class="sidebar-right">
    <article>...</article>
    <aside class="sidebar">...</aside>
  </main>
</body>

Components

Components adapt to the space they get, without extra classes:

Navbar	Below 902px the links fold away behind a menu button.
Forms	In a `basic-form`, labels sit next to their fields on wide screens and above them on phones.
Images	Images never grow wider than their container. Floated images stop floating on phones and are centered instead.
Products	Product cards, lists and detail views rearrange their image, text and buttons for narrower screens.
Breadcrumbs	Steps get less spacing on tablets and are stacked more compactly on phones.
Date picker	Shows one month instead of two on narrow screens.

Tips

Wide tables don’t scroll by themselves. Wrap a table with many columns in an element with overflow-x: auto, so it can scroll sideways on a phone without widening the whole page.
Serve images at the right size with srcset and sizes, so phones don’t download images meant for large screens. See Responsive images.
Leave room for fingers. On touch screens, links and buttons that sit close together are easy to miss. Nausikaä’s buttons and form fields are large enough; keep a similar size for your own controls.
Test on real devices as well as in the browser’s responsive design mode. Also try a phone in landscape orientation, and zoom a desktop page to 200%.

<div style="overflow-x: auto">
  <table>...</table>
</div>