"HTML-first" / "no-JavaScript first" photo page feasibility study

Goals to be achieved

• the page must be usable without activated JavaScript in the web browser
• follow the design principle KISS - Keep It Simple and Smart (see quotes below)
• use default capabilities of the web browser and count on web standards
• prefer semantic HTML elements
• photo types to be displayed: <img>, <video> and 360° panorama
• a direct deep link to every <img>, <video> and 360° panorama via URL must be available
• navigation via the keyboard only must be possible
• out of scope: HTML   <form> (e.g. used for contact)

Challenges and design decisions

• the implemented solution is based on CSS pseudo-class <:target> for the photo viewer and a <popover> for the hamburger menu
• hamburger menu:
  • before popover version: implementation with HTML<input> (type=checkbox) and <label>
  • based on <popover> which saves some JavaScript code and reduces non-simple CSS selectors (compared to the old checkbox based version)
  • only one character (no SVG or 3 line span)
• there is no native HTML element for a panorama viewer! So "only" a wide image is shown in case of disabled JavaScript and a <button> to open a <popover> with the <iframe> panorama inside
• close-, next-, prev-navigation can't be HTML  <button> elements, as JavaScript would be needed for the action
• navigation item (close / next / prev) padding size is difficult to calculate, as nativ <video> element has its own navigation with the risk of overlapping
• before popover menu version: some JavaScript is only needed, because of no-JavaScript first design (e.g. EventHandler for menu close on item click)
• there is no "standard" implementation of swipe events in JavaScript, most existing libraries are outdated, over-functional or heavyweight, so a self developed solution is used
• support for modern HTML (which is the HTML Living Standard!) browser standards
• implementation decisions to follow KISS:
  • NO usage of Fullscreen API, as this is standard web browser functionality and would result in unclear UX
  • NO scrollbar styling via CSS, as this is OS / device dependent
  • NO web browser history API manipulation (which is anyhow tricky with URL fragment #)
  • respect browser configuration like prefers-reduced-motion

Conclusion

• no swipe for touch devices
• no keyboard navigation like arrow keys and ESC (but tab works!)
• no 360° panorama viewer
• does not scale for large amount of photos (~200 are ok for good loading performance)

quotes related to KISS (Keep It Simple and Smart)

• Everything should be made as simple as possible, but not simpler. ― Albert Einstein
• Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains. ― Steve Jobs (interview 1998)

Remark: tooling

Reference implementation (no JavaScript)

• venice
• faroeislands
• oesterreich
• suedbahnhotel
• irelandblackandwhite
• indonesiablackandwhite
• myweltreiseblackandwhite
• photos