Web site Constancy – Jim Nielsen’s Weblog
Kyle Simpson has a chat titled “FOUC, and the Death of Progressive Enhancement” whereby he suggests the thought of constructing web sites in layers of constancy as an alternative of layers of know-how.
He argues that constructing web sites shouldn’t be about clinging to an excellent just like the separation of considerations: markup separate from types separate from scripts. As an alternative, it’s in regards to the people — about constructing know-how options that may defer to consumer preferences. What we people need and wish varies from one second to the subsequent, from one human to the subsequent, and we’d like know-how that accommodates that.
As a easy instance, many information websites provide separate, trimmed-down variations of their websites:
These are nice as a result of they acknowledge the one-size-fits-all strategy to offering an internet site doesn’t cater to the huge wants and preferences of customers.
Not solely do demographics differ wildly, however inside and throughout demographics wants are at all times altering and contextual to attributes of a consumer’s present state like atmosphere, machine, or functionality. For instance, NPR notes the aim (certainly one of many, I’m certain) of their text-only web site:
We have now a text-only model of our web site for anybody who wants to remain up-to-date on Hurricane Florence information and maintain their battery and information utilization to a minimal
Someone visiting textual content.npr.org to protect battery and reduce bandwidth as a result of they’re in a Hurricane catastrophe zone in all probability wants a lite model for each web site they go to, not simply NPR.
What Kyle suggests is a world the place you don’t want bear in mind separate domains primarily based on the expertise you need. Relatively, you go to the identical domains you at all times go to, however with the power to specific a desire for the constancy of expertise you need/want in any given second.
Kyle provides an instance of how this might work: a browser-level management to point the “constancy” of the expertise you need, e.g. how a lot bandwidth, CPU, and battery are required to load and work together with the web page (be aware the slider on the high the place the URL bar is).
In different phrases, moderately than going to textual content.npr.org if you need a lean expertise, you at all times go to npr.org however you set your “constancy desire” to “low”. In concept, this sends a header to NPR indicating you need a “low constancy” model of the web site, e.g. text-only.
From there, it’s as much as the positioning homeowners to determine how that consumer desire maps to an accessible model of the positioning. Kyle illustrates this with an instance routing configuration.
Granted, there must be some form of tough consensus about what this spectrum of constancy means. For instance, “0” means HTML solely: no types or scripts (inline or exterior) and even inline photos. From there, you construct up.
A web site might deliberately present a constancy that, on the generalized scale might solely be a “0.4” however is the very best constancy provided. That’s an excellent factor, it means their web site might be quick by default, even when the consumer’s most popular setting throughout websites is “0.8”.
The factor is, we don’t have to attend for browsers to undertake this. As Kyle suggests, we are able to begin now.
Granted, a browser-level characteristic can be the perfect right here, as it could enable a persistent expertise of constancy throughout websites. Think about going from CNN to NPR to PBS and sustaining a (roughly) comparable expertise of constancy throughout web sites!
A Fast Apart on CSS
Experiencing varied appearances of an internet site — i.e. maintain the identical markup however solely change the stylesheet — is cool, like CSS Zen Garden.
However that’s not what I’m making an attempt to get at right here. I’m not speaking about various types primarily based on consumer desire. I’m speaking about various experiences primarily based on consumer desire. The types change, however so too does the HTML and the JavaScript.
Whereas I really like the thought of a media characteristic like @prefers-reduced-data, the actual fact is: if somebody actually needs a leaner expertise of your web site, you want to know that at request time. That’s a desire that, in my view, transcends CSS. A desire for decreased information means much less assets, together with HTML, CSS, and JavaScript. How do you management a desire for decreased information in CSS alone?
For instance, one finish of constancy is 0. To me, that is pure HTML with no embedded or inlined useful resource dependencies. No types. No JavaScript. Not even an <img> tag. We’re speaking essentially the most lean expertise you possibly can present. In the event you opened the console, you’d solely see one request: the .html file.
How would you deal with <img> then? Hyperlink it! As an alternative of:
<img src="elephant.jpg" alt="A picture of an elephant." />
You do:
<a href="elephant.jpg">[An image of an elephant.]</a>
You’ll be able to’t do this with @prefers-reduced-data. That’s why the thought of constancy as a desire in a request header appears essential. Not simply customizeable themes, however customizeable experiences.
My Implementation
Given all of the above, I wished to do that out as a site-level desire on my weblog. I carried out it as three separate preferences: Default, Minimal, and Textual content-Solely.
The controls for this constancy desire differ, primarily based on which model of the positioning you’re .
“Default” is the expertise you get when you’ve got no desire set (how the online works in the present day). “Minimal” is ready across the core expertise of studying the positioning: no JavaScript and only a few fundamental types. Textual content-only is my theoretical “constancy 0”: no types, no JavaScript, no inline photos, as small a web site as might be.
As a result of I wished this characteristic to work with out JavaScript — that’s, in spite of everything, a part of the essence of the characteristic — it really works by setting a cookie which persists throughout requests. Selecting a desire units a cookie and the server is aware of which model of the positioning to serve primarily based on the presence of a given cookie (a browser-level request header sooner or later can be good, one thing that’s current upon each shopper request).
Technical Particulars
In my case, I’m utilizing Netlify and a static web site generator to serve my weblog, so I wished to attempt undertaking this characteristic with these constraints.
In essence, it really works by having three variations of my web site. The primary model (the “Default” model) is within the root folder whereas the opposite two variations are nested in named folders. Instance:
.
├── index.html
├── _fidelity/
├── low/
│ └── index.html
└── med/
└── index.html
Utilizing Netlify’s redirects, I route requests to the suitable model of the positioning primarily based on the presence of a cookie.
[[redirects]]
from = "/*"
to = "/_fidelity/low/:splat"
standing = 200
power = true
circumstances = { Cookie = ["fidelity-low"] }
[[redirects]]
from = "/*"
to = "/_fidelity/med/:splat"
standing = 200
power = true
circumstances = { Cookie = ["fidelity-med"] }
It is a little convoluted, however once more, working inside the constraints I’ve I feel it really works. (Thankfully, my web site is fairly fundamental.)
As for the completely different “fidelities” of the positioning, I completed this utilizing a type of backwards progressive enhancement: I generate the “Default” model of my web site after which strip options out in phases to decrease the constancy. (Thank goodness I constructed my weblog in a progressively-enhanced means, or I couldn’t have completed this with out breaking the positioning!)
For instance, to generate the “Minimal” model of the positioning, I take the “Default” model, strip out tags like <script>, <type>, <hyperlink rel=stylesheet>, and so on., and inject a separate “basic” stylesheet (~25 traces of CSS, impressed by Robin Rendle and Frank Chimero).
To generate the “Textual content-Solely” model, I take the “Minimal” model, strip out the remaining types, and swap out inline photos for inline hyperlinks.
This leaves me with three experiences of my web site, which I might summarize as:
- Default: All of the bells and whistles (but nonetheless lean and imply). Customized theme choice, styled motifs, and any extras — together with JavaScript.
- Minimal: Primary enhancements to the core studying expertise, together with inline photos and a base stylesheet for improved structure, however in any other case nothing else (no JavaScript).
- Textual content-Solely: Leanest expertise potential. No types, interactivity, or inline photos. Saves bandwidth, CPU, and battery.
I’m utilizing Metalsmith as my static web site generator, so you possibly can peak at the code if you want. The above strategy leads to a slower construct that I would like as I accomplish producing every model of the positioning by creating every web page as a JSDOM doc and utilizing .querySelector to strip stuff out.
Sooner or later, I’ll in all probability generate the positioning by working my templating move three distinct instances with a configuration worth like constancy=(low|med|default) and, primarily based on the presence of that worth, render issues appropriately. Instance:
<head>
${constancy === 'default' &&
`<hyperlink
rel=stylesheet
href=http://weblog.jim-nielsen.com/types/default.css
/>`
}
${constancy === 'med' &&
`<hyperlink
rel=stylesheet
href=http://weblog.jim-nielsen.com/types/fundamental.css
/>`
}
<!-- No types if constancy === 'low' -->
</head>
Admittedly, this might be easier if I used to be utilizing a server to generate pages at request time. Maybe I’ll go that path sometime – within the meantime, I’m working with what I’ve got in static file internet hosting.
There’s much more I might write about this, however perhaps I’ll cut up these out into completely different posts. In the event you resolve to do that out in your web site, hit me up with a hyperlink!