[Fedora Infrastructure] #1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices
#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices ---------------------+------------------------------------------------------ Reporter: ynemoy | Owner: webmaster Type: bug | Status: new Priority: major | Milestone: Component: General | Version: Severity: Normal | Keywords: ---------------------+------------------------------------------------------ = phenomenon =
Multiple issues here: Tables go beyond the page but the page isn't told about being wider than the screen, so horizontal scrolling is not possible. Embedded pictures and headers aren't formatted properly so text can flow around it, even in extreme situations. The sidebar takes up too much space at high DPIs leaving only half the page for the body.
In the above order: http://ynemoy.fedorapeople.org/wikixofail/IMAG0016.jpg http://ynemoy.fedorapeople.org/wikixofail/IMAG0018.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0013.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0014.jpg http://ynemoy.fedorapeople.org/wikixofail/IMAG0015.jpg
Resizing the text and page zoom fixes some problems, but my opinion is that this is non obvious to many people.
http://ynemoy.fedorapeople.org/wikixofail/IMAG0017.jpg
= reason =
I'm not much of a CSS guy, but i have a few ideas. First of all, the sidebar is strictly set to a hard size in relation to the rest of the page. Second of all, horizontal scrolling is (and rightly so) disabled at all costs. Third of all, something is not set properly when formatting embedded inline pictures, so that the sidebar can wrap around it, or so that it's left justified instead of right justified so it runs off the page rather than running into the sidebar.
= recommendation =
Wikipedia has a pretty decent mobile interface that works very nicely on the Android devices, and presumably on others as well. It avoids using a sidebar and TOC by replacing it with expandable fields. I think that at least having that stylesheet available would be a start. The tricky part is detecting the actual dimensions *and* DPI of a screen and switching to the appropriate stylesheet. In this particular example, the screenshots were taken on an XO using mostly stock settings and Firefox.
Another and more costly and time consuming solution is to redesign the page more comprehensively so that it is a general purpose page for both mobile, small screen, and normal devices.
So I personally have no idea how to fix this with style sheets but I'm pretty sure that's how it gets fixed. Ian had mentioned something in fedora-admin but I'm not sure if any among us has any experience with making mobile style sheets.
Anyone out there?
- Mike
On Wed, 28 Oct 2009, Fedora Infrastructure wrote:
#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices ---------------------+------------------------------------------------------ Reporter: ynemoy | Owner: webmaster Type: bug | Status: new Priority: major | Milestone: Component: General | Version: Severity: Normal | Keywords: ---------------------+------------------------------------------------------ = phenomenon =
Multiple issues here: Tables go beyond the page but the page isn't told about being wider than the screen, so horizontal scrolling is not possible. Embedded pictures and headers aren't formatted properly so text can flow around it, even in extreme situations. The sidebar takes up too much space at high DPIs leaving only half the page for the body.
In the above order: http://ynemoy.fedorapeople.org/wikixofail/IMAG0016.jpg http://ynemoy.fedorapeople.org/wikixofail/IMAG0018.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0013.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0014.jpg http://ynemoy.fedorapeople.org/wikixofail/IMAG0015.jpg
Resizing the text and page zoom fixes some problems, but my opinion is that this is non obvious to many people.
http://ynemoy.fedorapeople.org/wikixofail/IMAG0017.jpg
= reason =
I'm not much of a CSS guy, but i have a few ideas. First of all, the sidebar is strictly set to a hard size in relation to the rest of the page. Second of all, horizontal scrolling is (and rightly so) disabled at all costs. Third of all, something is not set properly when formatting embedded inline pictures, so that the sidebar can wrap around it, or so that it's left justified instead of right justified so it runs off the page rather than running into the sidebar.
= recommendation =
Wikipedia has a pretty decent mobile interface that works very nicely on the Android devices, and presumably on others as well. It avoids using a sidebar and TOC by replacing it with expandable fields. I think that at least having that stylesheet available would be a start. The tricky part is detecting the actual dimensions *and* DPI of a screen and switching to the appropriate stylesheet. In this particular example, the screenshots were taken on an XO using mostly stock settings and Firefox.
Another and more costly and time consuming solution is to redesign the page more comprehensively so that it is a general purpose page for both mobile, small screen, and normal devices.
-- Ticket URL: https://fedorahosted.org/fedora-infrastructure/ticket/1774 Fedora Infrastructure http://fedoraproject.org/wiki/Infrastructure Fedora Infrastructure Project for Bugs, feature requests and access to our source code.
-- Fedora-websites-list mailing list Fedora-websites-list@redhat.com https://www.redhat.com/mailman/listinfo/fedora-websites-list
A thought would be to make the mobile device use the wiki's print stylesheet. It would be quite vanilla and primarily just text but it should be usable for a mobile user.
On Wed, Oct 28, 2009 at 8:46 PM, Mike McGrath mmcgrath@redhat.com wrote:
So I personally have no idea how to fix this with style sheets but I'm pretty sure that's how it gets fixed. Ian had mentioned something in fedora-admin but I'm not sure if any among us has any experience with making mobile style sheets.
Anyone out there?
- Mike
On Wed, 28 Oct 2009, Fedora Infrastructure wrote:
#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices ---------------------+------------------------------------------------------ Reporter: ynemoy | Owner: webmaster Type: bug | Status: new Priority: major | Milestone: Component: General | Version: Severity: Normal | Keywords: ---------------------+------------------------------------------------------ = phenomenon =
Multiple issues here: Tables go beyond the page but the page isn't told about being wider than the screen, so horizontal scrolling is not possible. Embedded pictures and headers aren't formatted properly so text can flow around it, even in extreme situations. The sidebar takes up too much space at high DPIs leaving only half the page for the body.
In the above order: http://ynemoy.fedorapeople.org/wikixofail/IMAG0016.jpg http://ynemoy.fedorapeople.org/wikixofail/IMAG0018.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0013.jpg
http://ynemoy.fedorapeople.org/wikixofail/IMAG0014.jpg http://ynemoy.fedorapeople.org/wikixofail/IMAG0015.jpg
Resizing the text and page zoom fixes some problems, but my opinion is that this is non obvious to many people.
http://ynemoy.fedorapeople.org/wikixofail/IMAG0017.jpg
= reason =
I'm not much of a CSS guy, but i have a few ideas. First of all, the sidebar is strictly set to a hard size in relation to the rest of the page. Second of all, horizontal scrolling is (and rightly so) disabled at all costs. Third of all, something is not set properly when formatting embedded inline pictures, so that the sidebar can wrap around it, or so that it's left justified instead of right justified so it runs off the page rather than running into the sidebar.
= recommendation =
Wikipedia has a pretty decent mobile interface that works very nicely on the Android devices, and presumably on others as well. It avoids using a sidebar and TOC by replacing it with expandable fields. I think that at least having that stylesheet available would be a start. The tricky part is detecting the actual dimensions *and* DPI of a screen and switching to the appropriate stylesheet. In this particular example, the screenshots were taken on an XO using mostly stock settings and Firefox.
Another and more costly and time consuming solution is to redesign the page more comprehensively so that it is a general purpose page for both mobile, small screen, and normal devices.
-- Ticket URL: https://fedorahosted.org/fedora-infrastructure/ticket/1774 Fedora Infrastructure http://fedoraproject.org/wiki/Infrastructure Fedora Infrastructure Project for Bugs, feature requests and access to our source code.
-- Fedora-websites-list mailing list Fedora-websites-list@redhat.com https://www.redhat.com/mailman/listinfo/fedora-websites-list
-- Fedora-websites-list mailing list Fedora-websites-list@redhat.com https://www.redhat.com/mailman/listinfo/fedora-websites-list
#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices -------------------------+-------------------------------------------------- Reporter: ynemoy | Owner: webmaster Type: bug | Status: new Priority: major | Milestone: Component: Web Content | Version: Severity: Normal | Resolution: Keywords: | -------------------------+-------------------------------------------------- Changes (by kevin):
* component: General => Web Content
#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices -------------------------+------------------------ Reporter: ynemoy | Owner: webmaster Type: bug | Status: closed Priority: major | Milestone: Component: Web Content | Version: Severity: Normal | Resolution: fixed Keywords: | Blocked By: Blocking: | -------------------------+------------------------ Changes (by kevin):
* status: new => closed * resolution: => fixed
Comment:
I can't seem to get to the images anymore, so not sure this is still happening.
I think things are fine now with small screens.
Please re-open if you still are seeing issues.
websites@lists.fedoraproject.org
-
fedora-badges -
Mike McGrath -
Sijis Aviles