pretty mailman listinfo pages?

[Gérard Talbot]

Le 2014-04-22 19:15, Ahmed Fathy Hussein a écrit :
> Hello,
> 
> This is the final modified version after looking at the options 
> available
> in mailman:
> http://dl.dropboxusercontent.com/u/143005469/listinfo2.html
> 
> Changes to the previous version are the removed button in "About" 
> section
> and the form near the bottom.
> Please feel free to suggest any modifications.

Suggestions:

- How about setting the doctype to strict HTML 4.01
- type="text/css" is missing on links and style blocks
- a table can not be nested inside a p element
- semantically speaking, classes should never use an element's name. 
This is where bootstrap.css hurts again: using their CSS code makes the 
code less and less manageable, less understandable, less useful. class 
names and id should describe the role and functions of objects inside 
the page. So, eg.:
taxonomic-designation, warning, suggestion, form-registration, new-post, 
column, navbar-item, etc...
are good examples of class names. OTOH, eg.:
span9, table, well, red, table-bordered
are bad examples of class names.
Classes is for logical grouping of elements, not for document-unique 
elements.
- with more time, I would look to see if the 3 levels of nested divs 
(lines 26, 27, 28, 41, 42, 43) could be reduced; this could be long as 
the real page could be much more bloated (divitis)

-----------

Here's a simple experiment that anyone can do and then check what I've 
been trying to explain about bootstrap.css in bug 317553
https://bugs.kde.org/show_bug.cgi?id=317553

In the page, we have the following:

<h1><strong>About kde-www</strong></h1>

h1 {
     font-size: 2.2em;
     line-height: 2.56em;
}
h1, h2, h3, h4, h5, h6 {
     margin: 0px;
     font-family: "Open Sans Light","Helvetica 
Neue",Helvetica,Arial,sans-serif;
     font-weight: normal;
     color: #204A87;
     text-rendering: optimizelegibility;
     text-shadow: 0px 1px 0px white;
     word-wrap: normal;
}
body {
     font-family: "Open Sans","Helvetica 
Neue",Helvetica,Arial,sans-serif;
     font-size: 14px;
     line-height: 1.6em;
}


In Firefox 28.0, with developer tools/Inspection, just disable the 
declarations (uncheck the corresponding checkboxes) so that you end up 
with only the following markup and CSS code:


<h1>About kde-www</h1>

h1, h2, h3, h4, h5, h6 {
     color: #204A87;
     text-rendering: optimizelegibility;
}

body {
     font-family: "Open Sans","Helvetica 
Neue",Helvetica,Arial,sans-serif;
     font-size: 14px;
     line-height: 1.6em;
}


That is what I did with developer tools: I have reduced the number of 
nodes and I have removed 7 declarations and I end up with the - almost 
exact - same rendered layout. This is a fair demonstration of 
re-declarations, over-declaring, over-coding, not relying on 
inheritance, not understanding default values, user agent style sheets 
CSS rules, etc.. do.
text-shadow: 0px 1px 0px white; could be also safely removed as the 
shadow has the same color of the background of page
word-wrap is by default normal; so there is no need to declare this
font-family is a property that is inherited
h1's vertical margins and font-size is the same in all major browsers' 
user agent style sheet: so why not rely on these, why not use these, why 
zero the vertical margins and then recreate pseudo-margins with an 
increased line-height?
The font-weight of the text is emboldened and then removed and then 
emboldened again and then removed with the <strong> element, the 
font-family (Light usually means font-weight 300 or less), increased 
font-size and then font-weight: normal. I hope people see what I see 
here: the font-weight of the words "About kde-www" is increased twice 
and decreased twice.
Etc...

I made the same changes and removals in Chrome 34.0.1847.116 and ended 
up with the same layout. Same conclusion.

Gérard
-- 
Konqueror Implementation Report of CSS 2.1 test suite (RC6): 9418 
testcases
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Konq-IR-CSS21TestSuite.html
53 Bugs in Konqueror 4.13.0
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/
Contributions to the CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html