www/server/staging/standards gnu-website-guidel...

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 21/02/22 17:13:33

Modified files:
        server/staging/standards: gnu-website-guidelines.html 

Log message:
        - Restyle the first sentence.
        - Make the TOC more compact (.toc + .columns instead of .summary)
          and add a skip link.
        - Mention updating style.rtl.css when changes to layout.css are
          ltr-specific.
        - Minor fixes.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/standards/gnu-website-guidelines.html?cvsroot=www&r1=1.17&r2=1.18

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /webcvs/www/www/server/staging/standards/gnu-website-guidelines.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -b -r1.17 -r1.18
--- gnu-website-guidelines.html 22 Feb 2021 19:29:42 -0000      1.17
+++ gnu-website-guidelines.html 22 Feb 2021 22:13:33 -0000      1.18
@@ -2,7 +2,10 @@
 <!-- Parent-Version: 1.95 -->
 <title>Website Guidelines - GNU Project - Free Software Foundation</title>
 <style type="text/css"><!--
-  .summary li { list-style: none; }
+  .important { margin: 2em 0 3em; }
+  .skiptoc { position: absolute; top: -2.5em; left: 0; }
+  .toc { position: relative; padding: 1.4em 1.5% 1.6em; max-width: 97%; }
+  .toc li { list-style: none; }
   .emph-box { margin: .7em 0; }
 @media (min-width: 55em) {
   .flex { display: flex; flex-direction: row; }
@@ -12,25 +15,36 @@
  <!--#include virtual="/server/standards/po/gnu-website-guidelines.translist" 
-->
 <!--#include virtual="/server/banner.html" -->
 <h2>GNU Website Guidelines</h2>
+<div class="thin"></div>
 
-<p class="center emph-box">
-  Our goal is to get information to people.
-  Keeping the site design simple helps accomplish that.
+<p class="important">
+  <em>Our goal is to get information to people. 
+  Keeping the site design simple helps accomplish that.</em>
 </p>
 
-<div class="summary">
-<h3>Table of Contents</h3>
-<ul>
+<div class="toc">
+<p class="skiptoc">
+<small><a href="#main-text">[Skip the table of contents]</a></small></p>
+<hr class="no-display" />
+<h3 class="no-display">Table of Contents</h3>
+<ul class="columns">
   <li><a href="#GeneralGuidelines">1. General Guidelines</a></li>
   <li><a href="#CopyrightGuidelines">2. Copyright Guidelines</a></li>
   <li><a href="#orthography">3. Spelling and Punctuation</a></li>
   <li><a href="#filenames">4. Filenames</a></li>
   <li><a href="#urls">5. URLs</a></li>
-  <li><a href="#HTMLGuidelines">6. HTML Guidelines</a></li>
-  <li><a href="#tables">7. Tables and Menus</a></li>
-  <li><a href="#templating">8. Using our Page Template</a></li>
-  <li><a href="#styling">9. Page Styling</a></li>
-  <li><a href="#UseofGraphics">10. Use of Graphics</a></li>
+  <li><a href="#HTMLGuidelines">6. HTML Guidelines</a>
+    <ul>
+      <li><a href="#tables">Tables and menus</a></li>
+      <li><a href="#templating">Using our page template</a></li>
+    </ul></li>
+  <li><a href="#styling">7. Page Styling</a>
+    <ul>
+      <li><a href="#styling-templated">Styling of templated pages</a></li>
+      <li><a href="#other-stylesheets">Other stylesheets</a></li>
+      <li><a href="#text-only">Text-only browsers</a></li>
+    </ul></li>
+  <li><a href="#UseofGraphics">8. Use of Graphics</a></li>
   <li><a href="#pollinking">Appendix 1 - Linking Policies</a></li>
   <li><a href="#repo">Appendix 2 - Working with Web CVS Repositories</a>
     <ul>
@@ -39,14 +53,18 @@
       <li><a href="#htaccess">.htaccess and redirections</a></li>
       <li><a href="#scripts">Scripts</a></li>
       <li><a href="#sysadmins">System administrators</a></li>
-    </ul>
-  </li>
-  <li><a href="#UsefulResources">Appendix 3 - Useful Resources</a></li>
+    </ul></li>
+  <li><a href="#UsefulResources">Appendix 3 - Useful Resources</a>
+    <ul>
+      <li><a href="#external-resources">External resources</a></li>
+      <li><a href="#internal-resources">Internal resources</a></li>
+    </ul></li>
 </ul>
 <hr class="no-display" />
 </div>
 
-<p>Please be considerate of all who access our web pages, and accommodate
+<p id="main-text">
+Please be considerate of all who access our web pages, and accommodate
 them, including those who use low-end hardware, as well as those with slow
 Internet connections. We wish to prevent web designs that look
 great under one version of one browser, and ugly under many others.  Of
@@ -393,7 +411,7 @@
 </ul>
 
 
-<h3 id="tables" class="subheader">7. Tables and menus</h3>
+<h4 id="tables">Tables and menus</h4>
 
 
 <ul class="para">
@@ -405,7 +423,7 @@
 <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F49";>WCAG 2.1 
F49</a>
 and
 <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F91";>WCAG 2.1 
F91</a>
-do not occur in any circumstance.</li>
+do not occur under any circumstances.</li>
 <!-- Please explain -->
 
 <li>Some people like to organize links as a menu to
@@ -423,8 +441,7 @@
 </ul>
 
 
-<h3 id="templating" class="subheader">8. Using our Page Template</h3>
-
+<h4 id="templating">Using our page template</h4>
 
 <ul class="para">
 <li>To help people follow the above guidelines, a page template (or
@@ -437,7 +454,7 @@
 original source</a> of the boilerplate instead, and follow the instructions
 in it.</li>
 
-<li>The XHTML templated pages must follow the <a
+<li>The templated pages must follow the <a
 href="https://www.w3.org/TR/xhtml1/";>XHTML-1.0 guidelines</a>.</li>
 
 <li>Our <abbr title="Server-Side Includes">SSIs</abbr> declare UTF-8 as the
@@ -450,7 +467,7 @@
 <h3 id="styling" class="subheader">9. Page Styling</h3>
 
 
-<h4>Styling of templated pages</h4>
+<h4 id="styling-templated">Styling of templated pages</h4>
 
 <ul class="para">
 <li>Generic styling for desktops and smartphones is provided by <a
@@ -492,7 +509,7 @@
 </ul>
 
 
-<h4>Other stylesheets</h4>
+<h4 id="other-stylesheets">Other stylesheets</h4>
 
 <ul class="para">
 <li>Historical pages (unmaintained translations for the most part) refer
@@ -514,10 +531,13 @@
 <li>Translators maintain stylesheets (<code>/style.<var>lang</var>.css</code>)
 that modify <code>layout.css</code> according to
 their own needs.  The RTL languages (Arabic, Persian, and Hebrew) use
-<a href="/style.rtl.css"><code>style.rtl.css</code></a>.</li>
+<a href="/style.rtl.css"><code>style.rtl.css</code></a>. Please don't
+forget to update <code>style.rtl.css</code> if you make LTR-specific
+changes to <code>layout.css</code>.</li>
 </ul>
 
-<h5>Text-only web browsers</h5>
+
+<h4 id="text-only">Text-only web browsers</h4>
 
 <p>Even if the main web development target is composed by modern graphical web
 browsers, browsability through terminal web browsers is an indication of good
@@ -530,16 +550,16 @@
 and should be accessible by text-only users.</li>
 
 <li>The subset of text-only browsers for compatibility testing is composed by
-stable and modern text mode browsers (ie. lynx, elinks, w3m, etc.) executed
+stable and modern text mode browsers (such as Lynx, Elinks, w3m, etc.) executed
 on the latest stable xterm, with <i>at least</i> support for 24-bit color,
 italic/bold fonts and UTF-8 enabled.</li>
 
-<li>The CSS Media Queries can be used to detect graphical web browsers and 
their
+<li>The CSS media queries can be used to detect graphical web browsers and 
their
 capabilities, but may be ignored (always return <var>true</var>) on text-only
-web browsers.
+browsers.
 
-<p>The correct way to prevent graphical web browsers from parsing
-a CSS fragment dedicated to text-only web browsers is:</p>
+<p>The correct way to prevent graphical browsers from parsing
+a CSS fragment dedicated to text-only browsers is:</p>
 
 <div class="flex">
     <pre class="emph-box">
@@ -596,10 +616,11 @@
 
 <h3 id="UseofGraphics" class="subheader">10. Use of Graphics</h3>
 
+
 <ul class="para">
 <li>The use of graphics should be minimized, so pages load fast
 over slow links, especially animations.<br />
-Ideally, the page loading time should remain under 3000 ms
+Ideally, the page loading time should remain under 3000&nbsp;ms
 (with caching and proxying disabled). So, when it exceeds this limit, consider
 using lossless compression or smaller images.</li>
 
@@ -693,8 +714,8 @@
 
 <li>If you are adding a small floating image to a page that uses
 <code>layout.css</code> (the stylesheet for <a
-href="#templating">templated pages</a>
-), you may want to use the <code>imgright</code> or <code>imgleft</code> class
+href="#templating">templated pages</a>), you may want to use the
+<code>imgright</code> or <code>imgleft</code> class
 (defined in the IMAGES section of the stylesheet).  This will ensure that
 the floating direction is reversed if the page is translated into an RTL
 language.</li>
@@ -703,7 +724,7 @@
 templated, you may find it convenient to use one of the responsive
 <code>pict</code> classes that are defined in the <code>IMAGES</code> section 
of
 the <code>layout.css</code> stylesheet. You can adjust
-the width in a style attribute if none of the predefined ones fits your needs,
+the width in a style attribute if none of the predefined ones fits your needs;
 for instance:
 <div style="clear: both"></div>
 
@@ -755,8 +776,9 @@
 </pre>
 <div style="clear: both"></div>
 
-This will allow users to quickly go to pages related to the pictures they
-are interested in.</li>
+<p>This will allow users to quickly go to pages related to the pictures they
+are interested in.</p>
+</li>
 </ul>
 
 
@@ -844,9 +866,11 @@
 well-known proprietary software.  For example, the following
 text&mdash;and not much else&mdash;would be acceptable:</p>
 
-<blockquote><p>w3 is a web browser for GNU Emacs, similar to Internet Explorer.
+<blockquote><p>w3m is a web browser for GNU Emacs, similar to Internet 
Explorer.
 It can run on all platforms GNU Emacs runs on, including GNU/Linux,
 proprietary Unix systems, and Windows.</p></blockquote>
+<!-- According to Wikipedia, w3m is text-based, whereas (AFAIK) IE is
+graphical. I wouldn't say they are similar. -->
 
 <p>Links which appear in other areas, such as the testimonials or
 philosophy pages, as well as links to user groups may discuss such
@@ -864,8 +888,8 @@
 project pages should have little mention of open source.  The GNOME
 page used to provide a good example of a tactful way to do it:</p>
 
-<blockquote><p>GNOME is part of the GNU Project, and is free software 
(sometimes
-referred to as open source software).</p></blockquote>
+<blockquote><p>GNOME is part of the GNU Project, and is free software
+(sometimes referred to as open source software).</p></blockquote>
 
 <p>Any exceptions to this rule should be apparent from the context.
 For instance, user groups pages may talk in greater detail about
@@ -901,6 +925,7 @@
 them.</p>
 
 <p>As a final explanation:</p>
+
 <blockquote><p>
 Even for making links from www.gnu.org, we do not <em>require</em> that
 people call the system GNU/Linux or use the term &ldquo;free software&rdquo;
@@ -1130,7 +1155,7 @@
 <h3 id="UsefulResources" class="subheader">Appendix 3 - Useful Resources</h3>
 
 
-<h4>External resources</h4>
+<h4 id="external-resources">External resources</h4>
 
 <p>This section contains references managed by third parties.</p>
 
@@ -1163,9 +1188,10 @@
 </ul>
 
 
-<h4>Internal resources</h4>
+<h4 id="internal-resources">Internal resources</h4>
 
 <p>This section contains references managed by us.</p>
+
 <ul>
     <li><a href="#content">The GNU Website Guidelines</a> (this page);</li>
 
@@ -1261,7 +1287,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/02/22 19:29:42 $
+$Date: 2021/02/22 22:13:33 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->