Editing Responsive Web Design

== Typography ==

=== Viewport tag ===

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

<syntaxhighlight lang="html">
<meta name="viewport" content="width=device-width, initial-scale=1">
</syntaxhighlight>

<blockquote>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.<ref>[https://medium.com/@sikirus81/how-to-scale-fonts-responsively-with-css-for-different-screen-sizes-4107f233988b How to Scale Fonts Responsively with CSS for Different Screen Sizes] - sikiru on Medium.com</ref></blockquote>

=== 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.<ref>[https://matthewjamestaylor.com/responsive-font-size Responsive Font Size (Optimal Text at Every Breakpoint)] - Matthew James Taylor</ref>

<syntaxhighlight lang="css">
body {
    font-size: calc(15px + 0.390625vw);
}
</syntaxhighlight>

=== Responsive website font size guidelines ===

[https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html Guideline for website font sizes] - Learn UI Design<ref>[https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html Guideline for website font sizes] - Learn UI Design</ref>

== 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.<ref>[https://dandreifort.com/2020/08/16/hamburger-menu-breakpoint-best-practices/ Hamburger Menu Breakpoint Best Practices] - dandreifort.com</ref>

=== Using an SVG asset as the menu icon ===

See [[Icons_With_SVG_Sprites|Working With SVG Sprites]]

== Navigation menu ==

=== Best Practices ===

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

Wrap the navigation menu in a <nowiki><nav></nowiki> element to improve SEO and accessibility.<ref>[https://www.sitepoint.com/look-html5-nav-element/ Frequently Asked Questions About HTML5 Nav Element] - SitePoint</ref>

=== Flyout menu ===

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

<syntaxhighlight lang="javascript">
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');
});
</syntaxhighlight>

== Images ==

Use `srcset` and `sizes` attributes of the `img` tag to specify alternate images to display at various breakpoints.<er>[https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images Responsive Images] - MDN Web Docs</ref>

<syntaxhighlight lang="html">
<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" />
</syntaxhighlight>

== Reference ==

=== See also ===

* [https://getbootstrap.com/docs/5.2/components/navbar/ Bootstrap's sample of its navigation menu] - Bootstrap
* [https://medium.com/@msaqib_9803/a-responsive-navigation-bar-75497b760698 A sample responsive navigation bar] - Medium, Oct 21,2023

=== Sources ===
<references />

[[Category:Web Development]]