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

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 21/02/24 17:02:08

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

Log message:
        Reorganize Use of Graphics with 3 subsections; mention graphics.css.

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

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /webcvs/www/www/server/staging/standards/gnu-website-guidelines.html,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -b -r1.23 -r1.24
--- gnu-website-guidelines.html 24 Feb 2021 21:41:27 -0000      1.23
+++ gnu-website-guidelines.html 24 Feb 2021 22:02:07 -0000      1.24
@@ -44,7 +44,12 @@
       <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="#UseofGraphics">Use of Graphics</a>
+    <ul>
+      <li><a href="#caveats">Caveats</a></li>
+      <li><a href="#image-basics">Basic recommendations</a></li>
+      <li><a href="#image-css">CSS classes for images</a></li>
+    </ul></li>
   <li><a href="#pollinking">Appendix 1 - Linking Policies</a></li>
   <li><a href="#repo">Appendix 2 - Working with Web CVS Repositories</a>
     <ul>
@@ -615,9 +620,11 @@
 you can use use <code>fold</code> from the GNU coreutils to ease the task.</p>
 
 
-<h3 id="UseofGraphics" class="subheader">10. Use of Graphics</h3>
+<h3 id="UseofGraphics" class="subheader">Use of Graphics</h3>
 
 
+<h4 id="caveats">Caveats</h4>
+
 <ul class="para">
 <li>The use of graphics should be minimized, so pages load fast
 over slow links, especially animations.<br />
@@ -647,6 +654,12 @@
 recognized by web browsers (avoid JPEG 2000, and be careful with PNG
 alpha channels; the former is not widely supported, and the latter are
 not fully supported by some older browsers).</li>
+</ul>
+
+
+<h4 id="image-basics">Basic recommendations</h4>
+
+<ul class="para">
 
 <li><p>Always have a textual alternative for in-line images, to ensure
 indexability by search engines and accessibility.  For instance:</p>
@@ -713,13 +726,46 @@
 <code>height</code> will reserve the space required for the image during
 the page loading phase, preventing incremental layout reflows.</p></li>
 
-<li>If you are adding a small floating image to a page that uses
+<li>Link all images that are displayed throughout the website to the
+relevant page, usually in <code>/graphics/</code>.
+This will allow users to quickly go to pages related to the pictures they
+are interested in. See the next section for an example.</li>
+</ul>
+
+
+<h4 id="image-css">CSS classes for images</h4>
+
+<ul class="para">
+<li><p>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
 (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>
+language. Here is an example:</p>
+
+<p class="imgleft">
+<a href="/graphics/gnu-post/"><img
+   src="/graphics/gnu-post/GNU-stamp.png"
+   title="GNU stamp"
+   alt="&nbsp;[Stamp with a GNU head]&nbsp;"
+   style="width: 8em; height: auto"
+   width="129px" height="122px" />
+</a></p>
+
+<pre class="emph-box">
+&lt;p class="imgleft"&gt;
+  &lt;a href="/graphics/gnu-post/"&gt;
+    &lt;img src="/graphics/graphics/gnu-post/GNU-stamp.png"
+         title="GNU stamp"
+         alt="&amp;nbsp;[Stamp with a GNU head]&amp;nbsp;"
+         style="width: 8em; height: auto"
+         width="129px" height="122px" /&gt;
+  &lt;/a&gt;
+&lt;/p&gt;
+</pre>
+<div style="clear: both"></div>
+</li>
 
 <li><p>If the image you are adding is 12em wide or more, and the page is
 templated, you may find it convenient to use one of the responsive
@@ -750,35 +796,8 @@
 <div style="clear: both"></div>
 </li>
 
-<li><p>Link all images that are displayed throughout the website to the
-relevant page, usually in <code>/graphics/</code>.  This can be done with
-code similar to this, which corresponds to the image on the left:</p>
-
-<p class="imgleft">
-<a href="/graphics/gnu-post/"><img
-   src="/graphics/gnu-post/GNU-stamp.png"
-   title="GNU stamp"
-   alt="&nbsp;[Stamp with a GNU head]&nbsp;"
-   style="width: 8em; height: auto"
-   width="129px" height="122px" />
-</a></p>
-
-<pre class="emph-box">
-&lt;p class="imgleft"&gt;
-  &lt;a href="/graphics/gnu-post/"&gt;
-    &lt;img src="/graphics/graphics/gnu-post/GNU-stamp.png"
-         title="GNU stamp"
-         alt="&nbsp;[Stamp with a GNU head]&nbsp;"
-         style="width: 8em; height: auto"
-         width="129px" height="122px" /&gt;
-  &lt;/a&gt;
-&lt;/p&gt;
-</pre>
-<div style="clear: both"></div>
-
-<p>This will allow users to quickly go to pages related to the pictures they
-are interested in.</p>
-</li>
+<li><a href="/graphics/graphics.css"><code>graphics.css</code></a> has
+some other layouts.</li>
 </ul>
 
 
@@ -1289,7 +1308,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/02/24 21:41:27 $
+$Date: 2021/02/24 22:02:07 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->