Responsive Web Design

Typography

Viewport tag

The viewport meta tag prevents mobile devices from displaying pages as if they were at desktop resolutions.

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

Setting the viewport width to the device width and the initial zoom level to 1 allows the page to match the screen’s dimensions and scale the content appropriately. Without this, mobile browsers may render pages at a desktop screen width then shrink it down, leading to an overly small text size.

Responsive text

Set the font size as 15px plus 0.0039065% of the screen width. This should yield optimal font sizes at every breakpoint, e.g. 16px @ 320px width, 20px at 1280px width, etc.

body {
    font-size: calc(15px + 0.390625vw);
}

Responsive website font size guidelines

Guideline for website font sizes - Learn UI Design

Hamburger menu

Best practices

It obfuscates links to main pages, so don't use it unless it's absolutely necessary. Number 1 UX rule: Don't frustrate people.

Take into consideration edge cases, like users who split windows to half their screen.

Consider using the word "menu" instead of the 3 bar hamburger icon for the menu.

Breakpoint values

934 pixels on 1080p screens, or 1154 pixels on 1440p screens.

Using an SVG asset as the menu icon

See Working With SVG Sprites

Navigation menu

Best Practices

Place the navigation menu options in <li> elements that are part of an <ul> element.

Wrap the navigation menu in a <nav> element to improve SEO and accessibility.

Flyout menu

Use JavaScript to implement a hamburger menu with a fly-out navigation menu on mobile.

const hb = document.querySelector('.hamburger-menu');
const nav_menu = document.querySelector('.nav-menu');
['mouseenter', 'click', 'touchstart'].forEach((evt) => {
    hb.addEventListener(evt, () => {
        nav_menu.classList.toggle('active');
    }, false)
});
nav_menu.addEventListener('mouseout', () => {
    nav_menu.classList.toggle('active');
});

Images

Use srcset and sizes attributes of the img tag to specify alternate images to display at various breakpoints.<er>Responsive Images - MDN Web Docs</ref>

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Reference

See also

• Bootstrap's sample of its navigation menu - Bootstrap
• A sample responsive navigation bar - Medium, Oct 21,2023