Minimalist Responsive Web Design

This section of of my web site is dedicated to the notion of ‘Minimalist Responsive Web Design’ which is based on the premise that the best web sites still look good and function properly even with no styling (CSS), or javascript (or other client-side scripting) although they may be optimized for CSS and javascript being operational. This is the flip side of ‘API-first’ design. Having said that, appropriate use of classes and ids, and span level elements should allow an API to work.

My reasons for this approach are:

Technical Considerations:

Compatibility/Graceful degradation: because browser implementations differ, and there are older browsers, and browsers that default to turning off things like Javascript for privacy concerns, or even minimalist browsers that don’t implement Javascript due to speed concerns, or which are not for humans (e.g. spiders) and hence shouldn’t need to care about styling or scripts (i.e. what are supposed to be UX concerns). Likewise those with older browsers or browsers with a minimalist or standards-insistent design should be able to use a website, so sites should have fall back options.

Accessibility: a site should be available for reasonably comfortable use to users with challenges not faced by most people (e.g. blindness), even to those with old devices (like screen readers) that do not render CSS and javascript.

Inconsistent javascript or lack of javascript implementation should not break a site: The ability to operate without javascript should be inherent in a site to avoid compability issues with javascript/DOM implementations, particularly with things like robots that may not use the same interface as regular users and to which the developer may not have access.

Sites should be usable on any reasonably standards-compliant (for HTML/CSS) browser on any device (including those with small screen, high DPI screens, or screenreaders, braille, etc).

Document structure should reflect content not style considerations: automated tools should be able tell what is the structure of the content based on the HTML used.

Speed & Security:

Statically generated sites can served faster and with lower attack surface than those that involve server-side actions. Moving server-side operation to distinct servers, and having a primarily static site therefore reduces your attack surface (including chances of DoS/DDoS), and enhances user perception of your site (e.g. fast is often subconsciouly associated with well-managed, unless there a lot of errors on the site to detract from that impression).

Less client-side javascript reduces the opportunities for browser-based vulnerablity-based attacks.

Sites should not be dependant on users having the latest and greatest technology or software, particularly where payment is required (i.e. accessibility includes, for me, accessibility to resource/income-poor individuals, organizations, etc). (Obviously this is not going to be a consideration the commercial web is likely to buy into).

Archivability: A site which is not dependant on a specific implementation of today’s technology handles being archived for historical purposes better (e.g. by The Wayback Machine) (And this is also a good way to achieve better permalinks, in case you are no longer hosting certain content).

Principles & Practises

1. HTML alone should be enough (ultimate fallback)

The HTML document should be comfortably human-readable when rendered with only HTML markup (no styling, including embedded, or javascript enabled). An example of site following this principle from 2007-2011 can be seen here: Archived The C Shore. Example code followed by rendering without styling:

1<!DOCTYPE html>2<htmllang="en">3<head>4<title>Accessibility Information</title>5<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>6<metaname="license"content="GPLv2"/>7<metaname="copyright"content="Copyright 2007-2009 Daniel Dickinson"/>8<metaname="generator"content="webgen - Webgen::PathHandler::Feed"/>9<linkhref="../stylesheets/default.css"title="Default"10rel="stylesheet"type="text/css"/>11<linkrel="alternate stylesheet"title="High Contrast"12href="../stylesheets/high_contrast.css"type = "text/css"/>13<linkrel="alternate stylesheet"title="Large Print"14href="../stylesheets/large_print.css"type="text/css"/>15<linkrel="alternate stylesheet"title="Large Contrast"16href="../stylesheets/large_contrast.css"type="text/css"/>17<scripttype="text/javascript"src="../javascripts/styling-helper.js"></script>1819<linkrel="icon"type="image/vnd.microsoft.icon"href="../favicon.ico"/>20</head>21<!-- default.template22 template for default html page wrapper23 Copyright (C) 2007-2009,2017 Daniel Dickinson <thecshore@thecshore.com>24-->25<bodyonload="if (self != top) top.location = self.location;">26<divclass="wrapper-parent-box wrapper-body"id="page-body">27<divclass="wrapper-box wrapper-section section-nav-skipto"id="section-nav-skipto-top">28<divclass="utility-nav-skipto-anchor">29<aid="skipto-top"title="Top"class="utility-skipto-anchor">30&nbsp;31</a>32</div>33</div>34<divclass="wrapper-box wrapper-section section-nav-skipto"id="section-nav-skipto-header">35<divclass="utility-nav-skipto-header">36<aid="skipto-header"title="Header"class="utility-skipto-anchor">37&nbsp;38</a>39</div><divclass="utility-nav-skipto-links">40<span>Skip to: </span><a41class="skipto-links"href="#skipto-header">Header</a>: <a42href="#skipto-main"43class="skipto-links">Content</a>: <a44class="skipto-links"href="#skipto-menumain">Navigation Menu</a>: <a45class="skipto-links"href="#skipto-news">News</a>: <a46href="#skipto-breadcrumb"class="skipto-links">Breadcrumb Trail</a>: <a47class="skipto-links"href="#skipto-footer">Footer</a>: <a48href="#skipto-top"class="skipto-links">Top</a></div>4950</div>51<divclass="wrapper-box wrapper-section wrapper-parent-box wrapper-utility"id="section-header">52<divclass ="wrapper-box wrapper-parent-box"id="header-siteid">53<divclass="wrapper-box"id="siteid-logo">54<ahref="../index.html"><imgalt="ASCII Smiley Face"title="Daniel Dickinson's Personal Logo, an ASCII Smiley Face"height="60"width="49"src="../images/face_dark.png"/></a>55</div>56<divclass="wrapper-box"id="siteid-title"><spanid="title-header">The C Shore:</span>57<spanid="title-header-subtitle">Daniel Dickinson&apos;s Website</span></div>58</div>59<divclass="wrapper-box utility-accessibility-links"id="header-accessibility">60<ahref="site_aids.html#stylechooser">Site Aids</a>61 | <ahref="accessibility.html">Accessibility Information</a>62</div>63</div>64<divclass="wrapper-box wrapper-section section-nav-skipto"id="section-nav-skipto-breadcrumb">65<divclass="utility-nav-skipto-anchor">66<aid="skipto-breadcrumb"title="Breadcrumb Trail"class="utility-skipto-anchor">67&nbsp;68</a>69</div><divclass="utility-nav-skipto-links">70<span>Skip to: </span><a71class="skipto-links"href="#skipto-header">Header</a>: <a72href="#skipto-main"73class="skipto-links">Content</a>: <a74class="skipto-links"href="#skipto-menumain">Navigation Menu</a>: <a75class="skipto-links"href="#skipto-news">News</a>: <a76href="#skipto-breadcrumb"class="skipto-links">Breadcrumb Trail</a>: <a77class="skipto-links"href="#skipto-footer">Footer</a>: <a78href="#skipto-top"class="skipto-links">Top</a></div>7980</div>81<divclass="wrapper-box wrapper-section wrapper-utility utility-breadcrumb-trail"id="section-nav-breadcrumb">82<spanclass="utility-breadcrumb-intro">You are here:&nbsp;&nbsp;</span><spanclass="utility-breadcrumb-item"><ahref="../index.html"hreflang="en">Home</a></span><spanclass="utility-breadcrumb-separator"> | </span><spanclass="utility-breadcrumb-item"><ahref="index.html"hreflang="en">Other</a></span><spanclass="utility-breadcrumb-separator"> | </span><spanclass="utility-breadcrumb-item"><ahref="accessibility.html"hreflang="en">Accessibility Information</a></span>83</div>84<divclass="wrapper-box wrapper-section section-nav-skipto"id="section-nav-skipto-main">85<divclass="utility-nav-skipto-anchor">86<aid="skipto-main"title="Main"class="utility-skipto-anchor">87&nbsp;88</a>89</div><divclass="utility-nav-skipto-links">90<span>Skip to: </span><a91class="skipto-links"href="#skipto-header">Header</a>: <a92href="#skipto-main"93class="skipto-links">Content</a>: <a94class="skipto-links"href="#skipto-menumain">Navigation Menu</a>: <a95class="skipto-links"href="#skipto-news">News</a>: <a96href="#skipto-breadcrumb"class="skipto-links">Breadcrumb Trail</a>: <a97class="skipto-links"href="#skipto-footer">Footer</a>: <a98href="#skipto-top"class="skipto-links">Top</a></div>99100</div>101<divclass="wrapper-box wrapper-section main-content-body"id="section-main">102103<p><em>NB: Much of this content is now outdated and the page, and the
104site as a whole, are going to be revamped in a modern approach (and
105following more recent guildelines).</em></p>106107<h2id="accessstatement">Accessibility Statement</h2>108109<p>The site administrator has attempted to follow the
110<ahref="http://www.w3.org/WAI/"title="W3C guidelines for barrier free access to the world wide web"><abbrtitle="World Wide Web Consortium">W3C</abbr> Web Accessibility Initiative</a> Web Content Accessibility
111Guidelines 1.0 for
112accessible web design in order to make this website available for all users. If
113 any page on this site cannot be used due to disability or error, by you, or
114someone you know, please <ahref="contact.html"title="Email Contact form for Site Administrator">email the site administrator</a> with
115the page or pages that posed a problem along with a description of
116what was wrong and he will attempt to correct the
117situation. If that is not possible he will make at least make note of that.</p>118119<p>The foundation required to make all pages is accessible to to ensure
120they conform to the <abbrtitle="World Wide Web Consortium">W3C</abbr> standards for <abbrtitle="XML HTML">XHTML</abbr> and <abbrtitle="Cascading Stylesheets">CSS</abbr> (which define the
121codes used to create the website). As such all pages on the site
122should be valid <abbrtitle="XML HTML">XHTML</abbr> 1.0. You can verify that this is the cae by
123selecting the &#8216;<abbrtitle="World Wide Web Consortium">W3C</abbr><abbrtitle="XML HTML">XHTML</abbr> 1.0&#8217; button or, if you are not displaying images,
124the &#8216;Valid <abbrtitle="XML HTML">XHTML</abbr> 1.0 Strict icon&#8217; text. In addition the stylesheets for the
125site should be valid <abbrtitle="CSS Version 2">CSS2</abbr> (which make be confirmed by using the &#8216;<abbrtitle="World Wide Web Consortium">W3C</abbr><abbrtitle="Cascading Stylesheets">CSS</abbr>126level 2&#8217; button or &#8216;Valid <abbrtitle="CSS Version 2">CSS2</abbr> icon&#8217; text).</p>127128<p>If any page on the site fails these tests, please <ahref="contact.html"title="Email Contact form for Site Administrator">email the site
129administrator</a> and indicate the page in which is broken.</p>130131<h2id="accesskeys">Access Keys</h2>132133<p>As described by the <ahref="http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-accesskey"title="Web Content Accessibility Guidelines Access Keys"><abbrtitle="World Wide Web Consortium">W3C</abbr> Accessibility Guidelines</a> access keys allow the user (you) to navigate using your keyboard more easily than without the access keys.</p>134135<h3id="available-keys">Available Keys</h3>136137<p>The choice of keys is intended to adhere to international recommendations regarding what key should perform which function.</p>138139<ul>140<li>1 Home Page</li>141<li>2 Skip to content</li>142<li>3 Site Map</li>143<li>6 Site navigation</li>144<li>9 Contact information</li>145<li>0 Access Key details</li>146</ul>147148<h3id="using-access-keys-in-various-web-browsers">Using access keys in various web browsers</h3>149150<h4id="internet-explorer-5-windows">Internet Explorer 5+ (Windows)</h4>151152<p>Hold down the Alt key, press the number or letter of the access key,
153then release the access key followed by the Alt key and, finally,
154press ENTER.</p>155156<h4id="firefox-mozilla-and-netscape-7-windows">Firefox, Mozilla and Netscape 7+ (Windows)</h4>157158<p>Hold down the Alt key and press the number or letter of the access
159key, then release the access key and the Alt key.</p>160161<h4id="firefox-mozilla-and-netscape-7-mac-os-x">Firefox, Mozilla and Netscape 7+ (Mac OS X)</h4>162163<p>Hold down the Ctrl key and press the number or letter of the access
164key, then release the access key and next the Ctrl key.</p>165166<h4id="iceweasel-firefox-mozilla-linux">Iceweasel, Firefox, Mozilla (Linux)</h4>167168<p>Hold down the Alt and Shift keys and press the number or letter of the
169access key, then release the access key, followed by the Alt and Shift
170keys.</p>171172<h4id="safari-and-omniweb-mac-os-x">Safari and Omniweb (Mac OS X)</h4>173174<p>Hold down the Ctrl key and press the number or letter of the access key, then release the access key and next the Ctrl key.</p>175176<h4id="konqueror-linux">Konqueror (Linux)</h4>177178<p>Press and release the Ctrl key, then press the number or letter of the access key.</p>179180<h4id="internet-explorer-4-windows">Internet Explorer 4 (Windows)</h4>181182<p>Hold down the Alt key and press the number or letter of the access key, then release the access key and next the Alt key.</p>183184<h4id="internet-explorer-5-mac">Internet Explorer 5+ (Mac)</h4>185186<p>Hold down the Ctrl key and press the number or letter of the access key, then release the access key and next the Ctrl key.</p>187188<h4id="internet-explorer-45-mac">Internet Explorer 4.5 (Mac)</h4>189190<p>Access keys are not supported.</p>191192<h4id="netscape-6-and-earlier-all-platforms">Netscape 6 and earlier (All platforms)</h4>193194<p>Access keys are not supported.</p>195196197198</div>199<divclass="wrapper-box wrapper-section section-nav-skipto"id="section-nav-skipto-menu-main">200<divclass="utility-nav-skipto-anchor">201<aid="skipto-menumain"title="Main"class="utility-skipto-anchor">202&nbsp;203</a>204</div><divclass="utility-nav-skipto-links">205<span>Skip to: </span><a206class="skipto-links"href="#skipto-header">Header</a>: <a207href="#skipto-main"208class="skipto-links">Content</a>: <a209class="skipto-links"href="#skipto-menumain">Navigation Menu</a>: <a210class="skipto-links"href="#skipto-news">News</a>: <a211href="#skipto-breadcrumb"class="skipto-links">Breadcrumb Trail</a>: <a212class="skipto-links"href="#skipto-footer">Footer</a>: <a213href="#skipto-top"class="skipto-links">Top</a></div>214215</div>216<divclass="wrapper-box wrapper-section wrapper-utility"id="section-nav-menu-main">217218219<ulclass="nav-menu-list"><liclass="nav-menu-level1"><ahref="index.html"hreflang="en">Miscellaneous Pages</a></li><liclass="nav-menu-level1 nav-menu-selected"><ahref="accessibility.html"hreflang="en">Accessibility Information</a></li><liclass="nav-menu-level1"><ahref="contact.html"hreflang="en">Contact Information</a></li><liclass="nav-menu-level1"><ahref="/other/Expat.html">Expat</a></li><liclass="nav-menu-level1"><ahref="/other/GPLv2.html">GPLv2</a></li><liclass="nav-menu-level1"><ahref="license_info.html"hreflang="en">License Information</a></li><liclass="nav-menu-level1"><ahref="not_barrier_free.html"hreflang="en">Not Barrier Free Pages</a></li><liclass="nav-menu-level1"><ahref="site_aids.html"hreflang="en">Site Aids for Accessibility</a></li></ul>220221<ulclass="nav-menu-list nav-menu-news"><liclass="nav-menu-level1 nav-menu-has-submenu"><ahref="../news/thecshore.html"hreflang="en">News</a><ul><liclass="nav-menu-level2"><ahref="../news/news-entry_03_a_new_old_plan.html"hreflang="en">A New Old Plan</a></li><liclass="nav-menu-level2"><ahref="../news/news-entry_02_website_rework.html"hreflang="en">Reworking and enhancing before relaunching</a></li><liclass="nav-menu-level2"><ahref="../news/news-entry_01_resurrect.html"hreflang="en">Reincarnation of cshore.is-a-geek.com</a></li></ul></li></ul>222</div>223224<divclass="wrapper-box wrapper-section wrapper-utility wrapper-notice"id="section-necromancy-notice">225<p>NB: The main page content is close to the 2007-2011 version (you can <ahref="https://web.archive.org/web/20100511024724/http://cshore.is-a-geek.com/">view it with no
226styles or graphics</a>). There are major technical updates for future work, however.
227</p>228</div>229230<divclass="wrapper-box wrapper-section section-nav-skipto"id="section-nav-skipto-footer">231<divclass="utility-nav-skipto-footer">232<aid="skipto-footer"title="Footer"class="utility-skipto-anchor">233&nbsp;234</a>235</div><divclass="utility-nav-skipto-links">236<span>Skip to: </span><a237class="skipto-links"href="#skipto-header">Header</a>: <a238href="#skipto-main"239class="skipto-links">Content</a>: <a240class="skipto-links"href="#skipto-menumain">Navigation Menu</a>: <a241class="skipto-links"href="#skipto-news">News</a>: <a242href="#skipto-breadcrumb"class="skipto-links">Breadcrumb Trail</a>: <a243class="skipto-links"href="#skipto-footer">Footer</a>: <a244href="#skipto-top"class="skipto-links">Top</a></div>245246</div>247<divclass="wrapper-box wrapper-section fineprintfooter"id="section-footer">248<divclass="copyrightnotice">249<p>250251 This page Copyright 2007-2009 Daniel Dickinson.
252253</p>254</div>255<div>256257 Content created: Not recorded in page info.
258259</div>260<div>261 Content last modified: 2017-05-05 18:26:26 -0400
262</div>263<p>264 NB: For the preceding dates and times, if the author's files have been moved, the modified
265 date may not reflect the actual lasted edited date.
266</p>267<!--accesskey="3" href="/sitemap.html" class="accesslinks">Site Map</a>: <a -->268<divclass="utility-nav-accesskey-links">269 For use by access keys: <a270accesskey="1"href="../index.html">Home</a>: <a271accesskey="2"href="#skipto-main">Content</a>: <a272accesskey="6"href="#skipto-menumain">Navigation Menu</a>: <a273accesskey="9"href="contact.html">Contact Information</a>: <a274accesskey="0"href="accessibility.html"275class="accessslinks">Access Key Definitions</a></div>276</div>277</div>278</body>279</html>

which renders basically as (except in the base browser font and colours rather than content box):

NB: Much of this content is now outdated and the page, and the
site as a whole, are going to be revamped in a modern approach (and
following more recent guildelines).

Accessibility Statement

The site administrator has attempted to follow the
W3C Web Accessibility Initiative Web Content Accessibility
Guidelines 1.0 for
accessible web design in order to make this website available for all users. If
any page on this site cannot be used due to disability or error, by you, or
someone you know, please email the site administrator with
the page or pages that posed a problem along with a description of
what was wrong and he will attempt to correct the
situation. If that is not possible he will make at least make note of that.

The foundation required to make all pages is accessible to to ensure
they conform to the W3C standards for XHTML and CSS (which define the
codes used to create the website). As such all pages on the site
should be valid XHTML 1.0. You can verify that this is the cae by
selecting the ‘W3CXHTML 1.0’ button or, if you are not displaying images,
the ‘Valid XHTML 1.0 Strict icon’ text. In addition the stylesheets for the
site should be valid CSS2 (which make be confirmed by using the ‘W3CCSS
level 2’ button or ‘Valid CSS2 icon’ text).

As you can see, with styling there are hidden elements in the styled version that can help navigate a slow interface (by allowing to e.g. skip directly to content using links and anchors in the HTML). Further the content of the style blocks in the HTML is arranged so that it makes a reasonable document when viewed in source-order, without styling. Notice too, that by using Webgen to do static site generation one can get things like navigation menus and other normally dynamic elements, without requiring even javascript. When javascript is available one can also have things like site search without server-side code (i.e. still a static site). (For that matter, with the right tools, one can collect all content into a master page that is searchable using standard browser/text search features).

2. CSS3 without Javascript should still be multi-device/platform

3. Fallback to CSS2 without Javascript should still render reasonably

4. Javascript can enhance the site but should not be a requirement

5. Where Javascript provides a major functionality, there should still be a non-JS option