On Tue, Oct 7, 2014 at 3:13 PM, Bináris wikiposta@gmail.com wrote:
Is there a techguide anywhere on how to style templates to avoid mobile problems?
I'll write up some notes...
The first thing is to *test your pages on mobile*. The least one can do is fire up a page in *.m.wikipedia.org in a desktop browser and make the window narrow. Or, use your smartphone's browser if you have one.
Often, things can be reworked to cleanly handle both wide and narrow windows; for instance: * using inline-block or floats instead of tables or fixed percentage widths to set things side-by-side
Sometimes it may be necessary to make the style more complex, using media queries to do separate styling for wide or narrow screens (google for "CSS media queries" to see how all this works). Currently there's no way to do media queries in inline style attributes, which makes things hard for templates.
If your template uses styles defined in MediaWiki:Common.css / MediaWiki:Mobile.css you can define separate style overrides there, but you have to be an admin to edit those etc so it's harder to deal with.
-- brion