[Date Prev][Date Next] [Thread Prev][Thread Next] [Date Index] [Thread Index]

Bug#772963: release-notes: cellphone friendly CSS



Am 24.01.2015 um 18:27 schrieb Stéphane Blondon:
> 2015-01-21 17:48 GMT+01:00 Niels Thykier <niels@thykier.net>:
>> On 2015-01-21 01:23, Stéphane Blondon wrote:
>>>>  * 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?
>>>
>>
>> It was a Nokia Lumia Windows phone.  I assume that means it was an
>> internet explorer.  Regardless, I reproduced it in Iceweasel's developer
>> mode (see attached screenshot) using the (predefined) 320x480 window mode.

I reproduced it with the mentioned developer's mode predefined small screen
option, too, but, in fact, the one who reported the problem was talking about a
480x800 screen size of his Samsung Galaxy cellphone, as far as I recall.
Another Web Developer's extension to Firefox/Iceweasel might be useful as well:
it provides the option to define any window size and to check out the result
from within Firefox.
There is a separate User Agent Switcher Firefox extension (2), also developped
by him, with which you can reproduce the representation with different user
agents. It is possible to import any existing user agent list or to set up a
user-defined list on your own and import it. An updated list of them is
available on (3).

Anyway, by defining 480x800 window size with (1) with the reported Samsung
Galaxy (I tried all Galaxy models available in (2,3) and also with Nokia Lumia's
only model listed in (2,3) results in: The "next" arrow icon sticks to the right
edge of the window and no "previous" arrow or house icon in sight either.

I am not a professional web designer, but as Stéphane puts it, the Chapter
2.html file is too "crowded" by style information that should be better put into
the .css, at least, that's my five cent.

I checked the Google's PageSpeed Insights and downloaded the latest
documentation on that issue W3C's CSS Device Adaptation, for instance. If I come
about a decent (laymen's ;) solution I am going to hand it in.

Regards,

Stephan Beck



(1) http://www.chrispederick.com/work/web-developer/
(2) http://www.chrispederick.com/work/user-agent-switcher
(3) http://techpatterns.com/forums/about304.html (by Harald Hope, BSD 2 Clause)

> 
> Thanks, I understand the problem. However it's not easy to fix. There
> are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
> footer expands. It's the same problem in the current version of the
> footer and is not due to the new css. For example, see with a little
> screen :
> https://www.debian.org/releases/stable/amd64/ch01s06.html
> 
> I don't think it's easy to fix without changing HTML. I will ask to a
> web designer at work monday but I'm pessimistic.
> 
> 
>> I am very pleased with the changes so far.  If the missing next arrows
>> (above) and the huge margin (see below) issues can be resolved, I would
>> certainly not mind putting this live.
> 
> Great news! :)
> 
> 
> I've updated the debian.css file in order to spend less space on
> little screen for lists and table of content.
> The URLs are the same:
> 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
> 
> 
>>>>  * 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.
> 
> It's not really easy to fix because there is css style directly in the page:
> <div class="caution" style="margin-left: 0.5in; margin-right: 0.5in;">
> 
> Like the footer, this margin create the same problem on little screen
> for the current documentation (Debian 7.0).
> The clean way to do it is to remove the style attribute and to it in
> the css file. Do you think it's easy to do?
> 
> If not changing it, the rendering is the same with or without the css
> on little screen: plenty lines.
> 
> If you can remove the stylee attribute, I will work on improving the
> caution block.
> 
> 
> I'm ready to improve other points if needed.
> 



Attachment: signature.asc
Description: OpenPGP digital signature


Reply to: