On Tue, Oct 7, 2014 at 3:13 PM, BinĂ¡ris <wikipo...@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
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Reply via email to