Pending cleanup, and reevaluation
Minimalist Responsive Web Design
Notes on combining plain-html-first, Responsive Web Design, and accessibility
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.
- Speed & Security:
- 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<html lang="en"> 3<head> 4 <title>Accessibility Information</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="license" content="GPLv2" /> 7 <meta name="copyright" content="Copyright 2007-2009 Daniel Dickinson" /> 8 <meta name="generator" content="webgen - Webgen::PathHandler::Feed" /> 9 <link href="../stylesheets/default.css" title="Default" 10 rel="stylesheet" type="text/css" /> 11 <link rel="alternate stylesheet" title="High Contrast" 12 href="../stylesheets/high_contrast.css" type = "text/css" /> 13 <link rel="alternate stylesheet" title="Large Print" 14 href="../stylesheets/large_print.css" type="text/css" /> 15 <link rel="alternate stylesheet" title="Large Contrast" 16 href="../stylesheets/large_contrast.css" type="text/css" /> 17 <script type="text/javascript" src="../javascripts/styling-helper.js"></script> 18 19 <link rel="icon" type="image/vnd.microsoft.icon" href="../favicon.ico" /> 20</head> 21<!-- default.template 22 template for default html page wrapper 23 Copyright (C) 2007-2009,2017 Daniel Dickinson <thecshore@thecshore.com> 24--> 25<body onload="if (self != top) top.location = self.location;"> 26<div class="wrapper-parent-box wrapper-body" id="page-body"> 27 <div class="wrapper-box wrapper-section section-nav-skipto" id="section-nav-skipto-top"> 28 <div class="utility-nav-skipto-anchor"> 29 <a id="skipto-top" title="Top" class="utility-skipto-anchor"> 30 31 </a> 32 </div> 33 </div> 34 <div class="wrapper-box wrapper-section section-nav-skipto" id="section-nav-skipto-header"> 35 <div class="utility-nav-skipto-header"> 36 <a id="skipto-header" title="Header" class="utility-skipto-anchor"> 37 38 </a> 39 </div><div class="utility-nav-skipto-links"> 40 <span>Skip to: </span><a 41 class="skipto-links" href="#skipto-header">Header</a>: <a 42 href="#skipto-main" 43 class="skipto-links">Content</a>: <a 44 class="skipto-links" href="#skipto-menumain">Navigation Menu</a>: <a 45 class="skipto-links" href="#skipto-news">News</a>: <a 46 href="#skipto-breadcrumb" class="skipto-links">Breadcrumb Trail</a>: <a 47 class="skipto-links" href="#skipto-footer">Footer</a>: <a 48 href="#skipto-top" class="skipto-links">Top</a></div> 49 50 </div> 51 <div class="wrapper-box wrapper-section wrapper-parent-box wrapper-utility" id="section-header"> 52 <div class ="wrapper-box wrapper-parent-box" id="header-siteid"> 53 <div class="wrapper-box" id="siteid-logo"> 54 <a href="../index.html"><img alt="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 <div class="wrapper-box" id="siteid-title"><span id="title-header">The C Shore:</span> 57 <span id="title-header-subtitle">Daniel Dickinson's Website</span></div> 58 </div> 59 <div class="wrapper-box utility-accessibility-links" id="header-accessibility"> 60 <a href="site_aids.html#stylechooser">Site Aids</a> 61 | <a href="accessibility.html">Accessibility Information</a> 62 </div> 63 </div> 64 <div class="wrapper-box wrapper-section section-nav-skipto" id="section-nav-skipto-breadcrumb"> 65 <div class="utility-nav-skipto-anchor"> 66 <a id="skipto-breadcrumb" title="Breadcrumb Trail" class="utility-skipto-anchor"> 67 68 </a> 69 </div><div class="utility-nav-skipto-links"> 70 <span>Skip to: </span><a 71 class="skipto-links" href="#skipto-header">Header</a>: <a 72 href="#skipto-main" 73 class="skipto-links">Content</a>: <a 74 class="skipto-links" href="#skipto-menumain">Navigation Menu</a>: <a 75 class="skipto-links" href="#skipto-news">News</a>: <a 76 href="#skipto-breadcrumb" class="skipto-links">Breadcrumb Trail</a>: <a 77 class="skipto-links" href="#skipto-footer">Footer</a>: <a 78 href="#skipto-top" class="skipto-links">Top</a></div> 79 80 </div> 81 <div class="wrapper-box wrapper-section wrapper-utility utility-breadcrumb-trail" id="section-nav-breadcrumb"> 82 <span class="utility-breadcrumb-intro">You are here: </span><span class="utility-breadcrumb-item"><a href="../index.html" hreflang="en">Home</a></span><span class="utility-breadcrumb-separator"> | </span><span class="utility-breadcrumb-item"><a href="index.html" hreflang="en">Other</a></span><span class="utility-breadcrumb-separator"> | </span><span class="utility-breadcrumb-item"><a href="accessibility.html" hreflang="en">Accessibility Information</a></span> 83 </div> 84 <div class="wrapper-box wrapper-section section-nav-skipto" id="section-nav-skipto-main"> 85 <div class="utility-nav-skipto-anchor"> 86 <a id="skipto-main" title="Main" class="utility-skipto-anchor"> 87 88 </a> 89 </div><div class="utility-nav-skipto-links"> 90 <span>Skip to: </span><a 91 class="skipto-links" href="#skipto-header">Header</a>: <a 92 href="#skipto-main" 93 class="skipto-links">Content</a>: <a 94 class="skipto-links" href="#skipto-menumain">Navigation Menu</a>: <a 95 class="skipto-links" href="#skipto-news">News</a>: <a 96 href="#skipto-breadcrumb" class="skipto-links">Breadcrumb Trail</a>: <a 97 class="skipto-links" href="#skipto-footer">Footer</a>: <a 98 href="#skipto-top" class="skipto-links">Top</a></div> 99 100 </div> 101 <div class="wrapper-box wrapper-section main-content-body" id="section-main"> 102 103<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> 106 107<h2 id="accessstatement">Accessibility Statement</h2> 108 109<p>The site administrator has attempted to follow the 110<a href="http://www.w3.org/WAI/" title="W3C guidelines for barrier free access to the world wide web"><abbr title="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 <a href="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> 118 119<p>The foundation required to make all pages is accessible to to ensure 120they conform to the <abbr title="World Wide Web Consortium">W3C</abbr> standards for <abbr title="XML HTML">XHTML</abbr> and <abbr title="Cascading Stylesheets">CSS</abbr> (which define the 121codes used to create the website). As such all pages on the site 122should be valid <abbr title="XML HTML">XHTML</abbr> 1.0. You can verify that this is the cae by 123selecting the ‘<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="XML HTML">XHTML</abbr> 1.0’ button or, if you are not displaying images, 124the ‘Valid <abbr title="XML HTML">XHTML</abbr> 1.0 Strict icon’ text. In addition the stylesheets for the 125site should be valid <abbr title="CSS Version 2">CSS2</abbr> (which make be confirmed by using the ‘<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Cascading Stylesheets">CSS</abbr> 126level 2’ button or ‘Valid <abbr title="CSS Version 2">CSS2</abbr> icon’ text).</p> 127 128<p>If any page on the site fails these tests, please <a href="contact.html" title="Email Contact form for Site Administrator">email the site 129administrator</a> and indicate the page in which is broken.</p> 130 131<h2 id="accesskeys">Access Keys</h2> 132 133<p>As described by the <a href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-accesskey" title="Web Content Accessibility Guidelines Access Keys"><abbr title="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> 134 135<h3 id="available-keys">Available Keys</h3> 136 137<p>The choice of keys is intended to adhere to international recommendations regarding what key should perform which function.</p> 138 139<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> 147 148<h3 id="using-access-keys-in-various-web-browsers">Using access keys in various web browsers</h3> 149 150<h4 id="internet-explorer-5-windows">Internet Explorer 5+ (Windows)</h4> 151 152<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> 155 156<h4 id="firefox-mozilla-and-netscape-7-windows">Firefox, Mozilla and Netscape 7+ (Windows)</h4> 157 158<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> 160 161<h4 id="firefox-mozilla-and-netscape-7-mac-os-x">Firefox, Mozilla and Netscape 7+ (Mac OS X)</h4> 162 163<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> 165 166<h4 id="iceweasel-firefox-mozilla-linux">Iceweasel, Firefox, Mozilla (Linux)</h4> 167 168<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> 171 172<h4 id="safari-and-omniweb-mac-os-x">Safari and Omniweb (Mac OS X)</h4> 173 174<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> 175 176<h4 id="konqueror-linux">Konqueror (Linux)</h4> 177 178<p>Press and release the Ctrl key, then press the number or letter of the access key.</p> 179 180<h4 id="internet-explorer-4-windows">Internet Explorer 4 (Windows)</h4> 181 182<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> 183 184<h4 id="internet-explorer-5-mac">Internet Explorer 5+ (Mac)</h4> 185 186<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> 187 188<h4 id="internet-explorer-45-mac">Internet Explorer 4.5 (Mac)</h4> 189 190<p>Access keys are not supported.</p> 191 192<h4 id="netscape-6-and-earlier-all-platforms">Netscape 6 and earlier (All platforms)</h4> 193 194<p>Access keys are not supported.</p> 195 196 197 198 </div> 199 <div class="wrapper-box wrapper-section section-nav-skipto" id="section-nav-skipto-menu-main"> 200 <div class="utility-nav-skipto-anchor"> 201 <a id="skipto-menumain" title="Main" class="utility-skipto-anchor"> 202 203 </a> 204 </div><div class="utility-nav-skipto-links"> 205 <span>Skip to: </span><a 206 class="skipto-links" href="#skipto-header">Header</a>: <a 207 href="#skipto-main" 208 class="skipto-links">Content</a>: <a 209 class="skipto-links" href="#skipto-menumain">Navigation Menu</a>: <a 210 class="skipto-links" href="#skipto-news">News</a>: <a 211 href="#skipto-breadcrumb" class="skipto-links">Breadcrumb Trail</a>: <a 212 class="skipto-links" href="#skipto-footer">Footer</a>: <a 213 href="#skipto-top" class="skipto-links">Top</a></div> 214 215 </div> 216 <div class="wrapper-box wrapper-section wrapper-utility" id="section-nav-menu-main"> 217 218 219 <ul class="nav-menu-list"><li class="nav-menu-level1"><a href="index.html" hreflang="en">Miscellaneous Pages</a></li><li class="nav-menu-level1 nav-menu-selected"><a href="accessibility.html" hreflang="en">Accessibility Information</a></li><li class="nav-menu-level1"><a href="contact.html" hreflang="en">Contact Information</a></li><li class="nav-menu-level1"><a href="/other/Expat.html">Expat</a></li><li class="nav-menu-level1"><a href="/other/GPLv2.html">GPLv2</a></li><li class="nav-menu-level1"><a href="license_info.html" hreflang="en">License Information</a></li><li class="nav-menu-level1"><a href="not_barrier_free.html" hreflang="en">Not Barrier Free Pages</a></li><li class="nav-menu-level1"><a href="site_aids.html" hreflang="en">Site Aids for Accessibility</a></li></ul> 220 221 <ul class="nav-menu-list nav-menu-news"><li class="nav-menu-level1 nav-menu-has-submenu"><a href="../news/thecshore.html" hreflang="en">News</a><ul><li class="nav-menu-level2"><a href="../news/news-entry_03_a_new_old_plan.html" hreflang="en">A New Old Plan</a></li><li class="nav-menu-level2"><a href="../news/news-entry_02_website_rework.html" hreflang="en">Reworking and enhancing before relaunching</a></li><li class="nav-menu-level2"><a href="../news/news-entry_01_resurrect.html" hreflang="en">Reincarnation of cshore.is-a-geek.com</a></li></ul></li></ul> 222 </div> 223 224 <div class="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 <a href="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> 229 230 <div class="wrapper-box wrapper-section section-nav-skipto" id="section-nav-skipto-footer"> 231 <div class="utility-nav-skipto-footer"> 232 <a id="skipto-footer" title="Footer" class="utility-skipto-anchor"> 233 234 </a> 235 </div><div class="utility-nav-skipto-links"> 236 <span>Skip to: </span><a 237 class="skipto-links" href="#skipto-header">Header</a>: <a 238 href="#skipto-main" 239 class="skipto-links">Content</a>: <a 240 class="skipto-links" href="#skipto-menumain">Navigation Menu</a>: <a 241 class="skipto-links" href="#skipto-news">News</a>: <a 242 href="#skipto-breadcrumb" class="skipto-links">Breadcrumb Trail</a>: <a 243 class="skipto-links" href="#skipto-footer">Footer</a>: <a 244 href="#skipto-top" class="skipto-links">Top</a></div> 245 246 </div> 247 <div class="wrapper-box wrapper-section fineprintfooter" id="section-footer"> 248 <div class="copyrightnotice"> 249 <p> 250 251 This page Copyright 2007-2009 Daniel Dickinson. 252 253 </p> 254 </div> 255 <div> 256 257 Content created: Not recorded in page info. 258 259 </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 <div class="utility-nav-accesskey-links"> 269 For use by access keys: <a 270 accesskey="1" href="../index.html">Home</a>: <a 271 accesskey="2" href="#skipto-main">Content</a>: <a 272 accesskey="6" href="#skipto-menumain">Navigation Menu</a>: <a 273 accesskey="9" href="contact.html">Contact Information</a>: <a 274 accesskey="0" href="accessibility.html" 275 class="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 ‘W3C XHTML 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 ‘W3C CSS level 2’ button or ‘Valid CSS2 icon’ text).
If any page on the site fails these tests, please email the site administrator and indicate the page in which is broken.
Access Keys
As described by the W3C Accessibility Guidelines access keys allow the user (you) to navigate using your keyboard more easily than without the access keys.
Available Keys
The choice of keys is intended to adhere to international recommendations regarding what key should perform which function.
- 1 Home Page
- 2 Skip to content
- 3 Site Map
- 6 Site navigation
- 9 Contact information
- 0 Access Key details
Using access keys in various web browsers
Internet Explorer 5+ (Windows)
Hold down the Alt key, press the number or letter of the access key, then release the access key followed by the Alt key and, finally, press ENTER.
Firefox, Mozilla and Netscape 7+ (Windows)
Hold down the Alt key and press the number or letter of the access key, then release the access key and the Alt key.
Firefox, Mozilla and Netscape 7+ (Mac OS X)
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.
Iceweasel, Firefox, Mozilla (Linux)
Hold down the Alt and Shift keys and press the number or letter of the access key, then release the access key, followed by the Alt and Shift keys.
Safari and Omniweb (Mac OS X)
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.
Konqueror (Linux)
Press and release the Ctrl key, then press the number or letter of the access key.
Internet Explorer 4 (Windows)
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.
Internet Explorer 5+ (Mac)
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.
Internet Explorer 4.5 (Mac)
Access keys are not supported.
Netscape 6 and earlier (All platforms)
Access keys are not supported.
NB: The main page content is close to the 2007-2011 version (you can view it with no styles or graphics). There are major technical updates for future work, however.
This page Copyright 2007-2009 Daniel Dickinson.
NB: For the preceding dates and times, if the author's files have been moved, the modified date may not reflect the actual lasted edited date.
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).