MobileFirstPrinciple
A lenghty doc for trivial changes, and nothing new for anyone here. I believe I'll just put the changes right after this line when they are ready.
Here ...
The mobile first principle is a way to think about design for multiple screen sizes.
It has some characteristics that are valued by most new almost all css frameworks these days.
Since today mobiles have the priority, I believe pmwiki should deliver its features for mobile first as well, but most of all, mobiles too.
Since those changes don't pertain to the skin (but can be changed on the skin) because the css rules and markup are produced in the core, they should be changed there.
Since those changes won't hurt the appearance too much, but just how lines break or words break and when, at the end I believe those changes can be merged in the core without much regret when it comes to compatibility for old skins, recipes and browsers and even tweaks made inside config.php .
PmWiki already looks awesome on mobile with the new responsive skin, but the changes made to the skin trough javascript, don't get extended to all the community if those changes don't become part of the core.
I did some tests, but not with the new PmWiki skin, but with one I made for myself, the results I found with this skin, perhaps will not be found with the new PmWiki skin, so on the next tests I will use the older PmWiki skin.
Changes so far I believe that would be good to achieve are:
- text in all sections of pmwiki (.wikitext,.wikidiff ...) they all break the layout when used from small devices. The correct mixture of ingredients (css properties) have to be achieved for that. Mostly special css properties like: word-break, word-wrap and white-space. For block html markup mostly.
- inputs and textarea in general break the layout -- it should have a max-width of 99.9% imposed to all HTML input markup.
- font-size on .wikidiff table title/header should be bigger, and it was supposed be bigger, but somewhere in core the font got reduced from 15px to 12px only, just keeping the default, will make the text more readable on smartphones.
- tables break the layout -- wrap tables with a div that has x-overflow:scroll enabled, the new skin already does that, but those changes are not extended to the community, unless they use the new skin. -- perhaps adding an optmized javascript section for HTMLHeaderFmt?, so all can benefit from it
- <code class="varlink"> breaks the layout on some pages from the documentation
-- indentation for code tag breaks the layout when used with .escaped and some links with pre formated text
- code,pre,.pre,.code,.varlink,.escaped,.diffmarkup ; they all break the layout depending on the size of the screen -- enable x-overflow scroll in some of them, or brak-word/break-line, excluding "code.varlink" and some others
- decide on how to use these css properties: word-break;word-wrap;white-space
on pmwiki action areas (.wikitext,.wikidiff ...), indentation and some others html tags ...
- css properties that may help are:
-- overflow; overflow-x -- word-break -- word-wrap -- white-space -- text-align -- text-align-last
Mobiles have a more vertical flow for information and desktops have a wide space that can enable a display of information that is more horizontal.
Some html markup on smartphones that have a more traditional role and have a horizontal flow of information or formatted text, that spans longer then smartphones viewport, would have to word-wrap/word-break, but some PmWiki admins/skin writers perhaps would not agree with it and rather would prefer to keep a horizontal flow of information, for that we have scrollers.
On my experience, which is not vast, but a change on font type and color is more than enough to tell that the text is pre-formatted and also it doesn't create any problem understanding the code/text as most of the time monospaced fonts are used, which makes it easier to understand and note that what we are reading is indeed pre-formatted.
Directions could be pointed out to wiki admins so they could write a line or two of css properties and/or selectors & properties, or even an $EnableXXXX var to achieve keep the horizontal pace of information or a more vertical one.
To keep a vertical flow of information is something that most designers try toachieve with all the content on their sites when targeting smarphones, as by principle, smartphones were made for that or at least, have that non transponent physical restriction.
There are many sites on the internet that can talk about the benefits and also problems of adopting a mobile first principle for web design, but the important for me is the fact that it does not go aginst the principles (not too much at least) any of the principles or values defended by PmWiki as the changes are small in size, won't hurt any of the work already done on top of the current and older versions of PmWiki, and also those small changes will impact positively all current and future adopters as they will deploy for a software that is at the core optimized for smartphones too.
I believe that PmWiki supports a wide variety of desktop browsers and versions, old to new, since mosaic and ie 4.0 to most contemporary ones, and I believe it would be a good to extended as well this support for mobiles at the core, without changing much of it, and without breaking compatibility with what was already built and customized by users on their wiki sites or already made recipes.
I also see that there is not much javascript at the core and this is also the reason why I propose the changes at the core using only minimal html and css.
this document is not complete yet ...