Recent Changes - Search:
PITS /

01406: Core responsive skin discussion

Summary: Core responsive skin discussion
Created: 2017-04-26 17:34
Status: Closed - added to core as Skins:PmWiki-responsive
Category: CoreCandidate
From: Petko
Assigned:
Priority: 4
Version:
OS:

Description: Here we can discuss improvements for the "pmwiki-responsive" core skin. Please add your comments in sections below. --Petko April 26, 2017, at 05:35 PM

See also:

Open issues

Please add a new issue here.

Closed

Background Color (click to open)

Background Color

When browsing pmwiki.org, while using IceApe with a dark gtk? theme in Linux, in the main body of the page, I see white letters on white background. The same happens with the new skin. My guess is that, by choice, there is no background or font color set, and the browser uses its default choice: white.

Thanks for the report, good catch, should be fixed now. Indeed, there was no text color set, an omission rather than by choice. Also fixed in the default skin. --Petko April 28, 2017, at 07:04 AM

View switching (click to open)

View switching

A quick check with my smart phone shows me two problems:

  1. switching from landscape to portrait or vice versa on some pages the page does not size to the right width. Check page PmWiki.Tables for instance. Switching over to portrait view can display a page too narrow, or switching over to landscape view can display the page too wide (cutting out part on the right).
  2. when switching from portrait with side menu opened out to landscape, the landscape view is greyed out (on my phone screen in landscape the side menu appears always visible, i.e. same as desktop view, so page should not be greyed out.

HansB April 28, 2017, at 09:22 AM

Thank you, #2 is now fixed. Can you elaborate on #1 ? On my computer, Android phone and Android tablet, both with Firefox and Chrome (and Epiphany), I cannot experience any problem with the Tables page when rotating the device or resizing the window. My two iPhones are is too small and thus stuck in narrow/mobile view. --Petko April 28, 2017, at 10:01 AM

My phone has a screen size of 1280 x 720 pixels, Android OS, built-in (Chrome) browser. Holding it landscape the pmwiki.org pages are displayed with side menu left, same as on desktop screen. When turning the phone to upright position, the pages are displayed with the side menu hidden, as well as the font size increased a little. Turning the phone to landscape / wide view, the pages get displayed as before as on desktop screen, the font size decreases to what it was before.
Now this is fine, but on the PmWiki.Tables page the behaviour is different: when the page loads with the phone upright, it appears like the others in portrait/mobile view, same increased font size, tables looking fine etc. It does have a horizontal scroll though (which is not noticed unless one looks for it), as there is a line with preformatted text going further to the right (a few lines below the question: "How can I specify the width of columns?"). When I turn the phone to horizontal, the page width does not adjust correctly, and there is either part of the left or part of the right side not visible. It does scroll horizontally however and shows those cut off parts of text (but that is totally annoying). The font size does not decrease, as it does on other pages, it stays the same as it was in the vertical/portrait/mobile view. - A similar thing happens when I open the Tables page with the phone horizontal: the page appears as on a desktop screen, and as the other pages, with font size decreased, and no horizontal scroll. Then when I turn the phone upright, the font size does not increase and the page appears as too narrow with grey margin to the right, and there is no horizontal scroll. The preformatted text I mentioned is displayed fully. - So somehow the page width adjustment goes wrong, and it may be connected with the issue of preformatted text and horizontal scroll, but I do not know, I have not done any specific tests for that. -- HansB April 29, 2017, at 03:21 AM
PS: I did a test by adding a long line of preformatted text here: Test.PreformattedText (and Skins.SkinTest-Compact shows this as well). The issues are the same as described above, but the differences in font size when going from upright to horizontal are totally extreme. It seems the skin tries to adjust to the longest preformatted text line. Opening the page with the phone horizontal the font size is as in other pages. The long preformatted line has no horizontal scroll and is cut off. Turning the phone to upright makes the page appear with an unreadable tiny font, and the long preformatted line is shown fully. - Loading that page with phone upright the mobile view is okay, there is horizontal scroll. Then turning the phone horizontal shows the desktop page view, but with an extreme increase in font size. - HansB April 29, 2017, at 03:51 AM

Ok, I see, thanks. The zoom-in-out is the default browser behavior, it is not the skin that tries to adjust to the longest preformatted text line, but the browser. The skin does nothing to cause or prevent this, but every browser does it its way when you change the orientation. The only way I know to prevent this is to set minimum and maximum scale to 1 in the meta viewport, and this will also prevent a person to zoom in or out. I don't want to do this, I prefer being able to zoom if I like. Disabling zoom always for everybody seems to me worse than the browser changing the zoom only when you rotate the device, and only when there is a large element in the page. --Petko April 29, 2017, at 10:08 AM

Well I do find this behaviour quite confusing. It is not expected when rotating a phone. I do not have this happen with the Amber skin. I also think the side menu should still be hidden on a 1280px wide screen, and the fonts not reduced so much. - HansB April 29, 2017, at 01:50 PM

Should the large preformatted blocks have a scrollbar or not was discussed at Skins:2016-Talk, and any solution will be better than what the old skin did (enlarge the whole page). In "desktop/landscape" mode they did have a scrollbar as it was assumed that one would use a computer with mouse and keyboard. It may be an incorrect assumption, as even laptops and all-in-ones have now touch screens, so it may be logical for these blocks to behave the same way on the two layouts. --Petko April 29, 2017, at 10:08 AM

I commented there just now. I find horizontal scroll bars more useful, even on a smart phone screen. - HansB April 29, 2017, at 01:50 PM

Ok, moved overflow:auto from the desktop section to the general section. This also fixes the zoom-after-rotate confusion. --Petko April 29, 2017, at 02:43 PM

Minimum screen width for desktop/landscape mode (click to open)

Minimum screen width for desktop/landscape mode

I also think the side menu should still be hidden on a 1280px wide screen, and the fonts not reduced so much. - HansB April 29, 2017, at 01:50 PM

Keep in mind that some desktop&laptop computer monitors are still large 1280, 1024 or even 800 real pixels. The pixels themselves are larger than those on the phones (72-96 per inch on monitors vs. up to 806 per inch on phones) and it is perfectly fine to read text on such monitors in the landscape/desktop mode.

However, I completely agree that on an actual mobile phone it will be better to have the "mobile" font sizes and line heights in both orientations: the "mobile" view is specifically designed so that it is easy to tap on links without risking a mistake. Not that much the text size (even small text is very easy to read on a very high density screen), but the interaction. I'll think about it. --Petko April 29, 2017, at 03:21 PM

I've increased the min-width for "desktop" view to 50em which is about 800 "Reference pixels". This causes a 5.5" FullHD phone (1920x1080) to always display the "mobile" view, but a 7" tablet (1024x600) in landscape mode displays the "desktop" view, as well as a 13.3" laptop (1366x768). --Petko April 30, 2017, at 09:31 AM