Hi Niels,
I've done some improvements based on your previous remarks. I patched
the files provided by your online demo.
Demos are temporary available :
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A01.%C2%A0Introduction.html
http://stephane.yaal.fr/tmp/installer_docs/Chapter%C2%A02.%C2%A0What%27s%20new%20in%20Debian%208.html
http://stephane.yaal.fr/tmp/installer_docs/Release%20Notes%20for%20Debian%208%20%28jessie%29,%2064-bit%20PC_draft.html
2015-01-03 15:14 GMT+01:00 Niels Thykier <niels@thykier.net>:
> I have a list of remarks below. Mind you, despite its length, it looks
> rather good in general. I took the liberty of walking through all of
> the chapters to find issues.
>
> * I think the next/previous arrows should have a different colour than
> grey as it does not stand out (even in production mode).
In this new version, the arrows are red, not grey. It's easier to see
them. The files are attached to this message (png files for direct
use, svg files for modifications).
> * The "grey box" around the content seems a bit weird (desktop mode).
> In cell-phone mode, it looks fine. Perhaps it is just a "preference"
> rather than an actual issue.
I'm not really convinced. The general style is based on Publican one.
I don't want to change it if the improvement is not obvious.
However, if several people think it's better without it, I will change my mind.
> * The draft image is wider than the white "content" background on my
> display (1366x768), which looks a bit weird. Admittedly, it is only
> for draft mode, but we do expose the draft mode to users
> currently[1].
For that, replace the included CSS in the draft page:
### before ###
body { background-image: url('images/draft.png');
background-repeat: no-repeat;
background-position: top left;
/* The following properties make the watermark "fixed" on the page. */
/* I think that's just a bit too distracting for the reader... */
/* background-attachment: fixed; */
/* background-position: center center; */
}
### after ###
.navheader, .navfooter { background-image: url('images/draft.png');
background-repeat: no-repeat;
background-position: top left;
}
.navheader > table {
background-image: url('images/draft.png');
}
.navfooter > table {
background-image: url('images/draft.png');
}
### end ###
With the new CSS, the 'draft' image has the same width than the text.
The footer displays the 'draft' picture too.
> * The table in 2.2 could do with separator between columns now and
> possibly alternating colouring for rows. At least on a 300px width
> phone.
I added CSS rules to debian.css to display alterning color for rows
and an hover color too. I think it fits your idea.
(see demo link). The new debian.css file is attached to this message.
The new rules are lines 112-119:
.informaltable tbody tr:nth-child(even) {
background-color:#DDDDDD;
}
.informaltable tbody tr:hover {
background-color:#666666;
color: #FFFFFF;
}
> * The next/previous arrows do not fit in the bottom of e.g. chapter 2.
> There is /no/ problem in the top - only the bottom.
> * Possibly related to the previous problem. I am having a hard time
> clicking on the "next" arrow in the bottom (even after I scroll it
> into view). The next arrow in the top does not seem to have the same
> issue.
I don't see the problem. Which device and browser do you use?
The others remarks are not fixed. I prefer to ship partial
improvements faster due to the freeze.
What do you think about them?
Is it too late to be integrated in the documentation?
Unfixed below:
> * There are some items that might be difficult to "tap" with a small
> cellphone according to google speedpage. See the links below. I
> suspect some of these might be edge cases or could be solved with a
> bit more margin between the items in the index.
> * The "Caution" remarks (plus "note" etc.) has a so much margin that
> only 16-20 characters are shown per line[2]. In desktop mode it
> only takes 1-2 lines.
> * I suspect we could do with less margins on smaller phones for
> indented items (e.g. bullet lists or indices). E.g. have a look at
> 3.1.1 or the indices of one of the pages.
> Though admittedly, there is probably a limit to what can be done
> here.
> * Any non-trivial shell command or file "content" will not fit on a
> single line as it should. I doubt there is much we can do there
> though.
> * Same with most links that are spelled out. E.g.
> "https://www.debian.org/distrib";
> is enough to fill an entire line on its own. NB: The full link is
> longer.
> * You can zoom out to see the "grey" area on the right handside. This
> seem to happen even if there is no content to wide for the view.
> On my phone it has a different "grey" colour than the one the phone
> gives for "The page is not wider than this". (e.g. in Chapter 6).
> * The Appendices keep the first word of the title on the same line as
> "Appendix X:", which makes some words not fit the view even if they
> could when placed on a subsequent line.
>
>
> I suspect most of these are just "minor" issues that needs a bit of css
> fiddling - a few of them may require textual changes and some are
> probably unfixable (e.g. the shell commands and long links that we want
> to spell out). I would greatly appreciate further patches to solve
> these issues.
>
> Thanks,
> ~Niels
>
> Results from google speedpage (see the "User experience" part):
> *
> https://people.debian.org/~nthykier/release-notes-draft-mode.amd64.html/index.en.html
> *
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpeople.debian.org%2F~nthykier%2Frelease-notes.amd64.html%2Findex.en.html&tab=mobile
>
> [1] https://www.debian.org/releases/jessie/amd64/release-notes/index.en.html
>
> [2]
> https://people.debian.org/~nthykier/release-notes.amd64.html/ch-about.en.html
>
--
Stéphane
Attachment:
next.png
Description: PNG image
Attachment:
prev.png
Description: PNG image
Attachment:
red-next.svg
Description: image/svg
Attachment:
red-prev.svg
Description: image/svg
/* Cascading stylesheet for the Debian Installer Installation Guide */
/* global style of the page */
body {
background-color: #EEEEEE;
border: 40px solid #EEEEEE;
margin: 0;
padding: 0 10px;
font-family: "liberation sans", "Myriad ", "Bitstream Vera Sans", "Lucida Grande", "Luxi Sans", "Trebuchet MS", helvetica, verdana, arial, sans-serif;
line-height: 1.2em;
}
@media (max-width: 5in), (max-device-width: 5in){
body {
border: 0px;
padding: 0px;
}
}
body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part {
margin-top: 0;
padding: 2em 6em 6em;
}
body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part {
padding: 2em;
}
body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index {
background-color: #FFFFFF;
margin: 40px auto 4em;
padding: 1px 40px 20px 30px;
}
@media (max-width: 1024px) {
body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index {
max-width: 45em;
}
}
@media (min-width: 1025px) {
body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index {
max-width: 70em;
}
}
@media (max-width: 5in), (max-device-width: 5in){
body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index {
max-width: 100%;
}
}
hr {
border-top: 1px dotted #808080;
margin: 0;
}
a:link {
color: #0035C7;
text-decoration: none;
}
a:visited {
color: #00207A;
text-decoration: none;
}
a:link:hover {
color: #00207A;
text-decoration: underline;
}
code {
font-family: "liberation mono","bitstream vera mono","dejavu mono",monospace;
font-weight: bold;
word-wrap: break-word;
}
h1 {
color: #C70036;
line-height: 1.1em;
}
h2, h3, h4, h5, h6 {
color: #C70036;
}
/* for first page */
.book > .titlepage h1.title {
text-align: center;
}
.titlepage h1.title {
text-align: left;
}
.authorgroup div {
text-align: center;
}
/* table in content */
.informaltable table {
border: 1px solid #AAAAAA;
}
.informaltable table th {
border-width: 0;
background-color: #C70036;
}
.informaltable table td {
border-width: 0;
}
.informaltable tbody tr:nth-child(even) {
background-color:#DDDDDD;
}
.informaltable tbody tr:hover {
background-color:#666666;
color: #FFFFFF;
}
/* Terminal examples */
pre.screen {
-moz-tab-size: 4;
background-color: #F5F5F5;
border-radius: 11px 11px 11px 11px;
border-style: none;
box-shadow: 0 2px 5px #AAAAAA inset;
color: #000000;
display: block;
font-family: "liberation mono","bitstream vera mono","dejavu mono",monospace;
font-size: 0.9em;
margin-bottom: 1em;
padding: 0.5em 1em;
page-break-inside: avoid;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Navigation elements */
.navheader a, .navfooter a {
opacity: 0.50;
transition: opacity 0.15s ease-in-out;
}
.navheader a:hover, .navfooter a:hover {
opacity: 1;
}