MobileFirstPrinciple-Draft


The mobile first principle is a way to think about design for multiple screen sizes.

It has some characteristics that are valued by most 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, because the css rules and markup are produced in the core, they should changed there.

Changes 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.

- inputs and textarea in general break the layout -- we should have a width of 99.9% and a max-width to

   the minimun necessary for PmWiki to work on cellphones.

- font-size on .wikidiff table header title/header should be bigger, at least 1em

- tables break the layout -- wrap tables with a div that has x-overflow:scrool enabled

- <code class="varlink"> breaks the layout on some pages from the documentation

- code,pre,.pre,.code,.varlink,.escaped,.diffmarkup ; they all break the layout -- perhaps enable x-overflow scroll in some of them, excluding "code.varlink"

- decide on how to use these css properties: word-break;word-wrap;white-space

  on pmwiki action areas (.wikitext,.wikidiff ...)

- css properties that may help are:

-- overflow; overflow-x -- word-break -- word-wrap -- white-space -- text-align -- text-align-last

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 either one of the principles does not go against any of the principles or values defended by PmWiki.

I believe that PmWiki supports a wide variety of desktop browsers and versions, and I believe it would be good to extended as well this support for mobiles phones and tablets.

this document is not complete yet ...

 0: 00.00 00.00 config start
 1: 00.01 00.00 config end
 2: 00.03 00.02 MarkupToHTML begin
 3: 00.04 00.03 MarkupToHTML end
 4: 00.05 00.03 MarkupToHTML begin
 5: 00.05 00.04 ReadApprovedUrls SiteAdmin.ApprovedUrls begin
 6: 00.05 00.04 ReadApprovedUrls SiteAdmin.ApprovedUrls end
 7: 00.06 00.05 MarkupToHTML end
 8: 00.06 00.05 MarkupToHTML begin
 9: 00.06 00.05 MarkupToHTML end
10: 00.06 00.05 now
Peak memory: 3,061,432 bytes