ASCII Smiley Face Daniel Dickinson Mini Headshot
The C Shore
Daniel Dickinson's Website - Experimental

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:

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          &nbsp;
 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          &nbsp;
 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&apos;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          &nbsp;
 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:&nbsp;&nbsp;</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          &nbsp;
 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 &#8216;<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="XML HTML">XHTML</abbr> 1.0&#8217; button or, if you are not displaying images, 
124the &#8216;Valid <abbr title="XML HTML">XHTML</abbr> 1.0 Strict icon&#8217; 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 &#8216;<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Cascading Stylesheets">CSS</abbr> 
126level 2&#8217; button or &#8216;Valid <abbr title="CSS Version 2">CSS2</abbr> icon&#8217; 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          &nbsp;
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          &nbsp;
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):

ASCII Smiley Face
The C Shore: Daniel Dickinson's Website
You are here:  Home | Other | Accessibility Information

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.

Content created: Not recorded in page info.
Content last modified: 2017-05-05 18:26:26 -0400

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).

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

6. An example of blog & comments with search following MWRD