Mobile

Minimous < Skins > Monobook   (talk | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

Summary: Plain vanilla PmWiki responsive template that is compatible with mobile devices.
Version: 18-Nov-2011
Prerequisites: None; if you want mobile browser detection requires Detect Mobile Free or Detect Mobile recipe.
Status: Active
Maintainer: XES
Categories: Skins Mobile RWD PHP72
Users: +2 (view / edit)
License: CC-BY @andytir at Twitter.com for the skin
Discussion: Mobile-Talk
Users: +2 (View / Edit)

Create a mobile-device compatible template for your website

This is a very bare-bones basic template that is mobile-device compatible. There's no frills here, so you may want to use this in conjunction with DetectMobileFree (or DetectMobile) as a mobile-only skin. It's a basic 1140-grid adapted to PmWiki, and you can add a banner graphic, sidebar columns, etc. and use it as the base skin of your website and it will gracefully change size down to mobile devices.

Description

PmWiki skin compatible with mobile devices such as iPhone, iPod Touch, cell phones, Android devices, etc..

Installation

Download the package, place the entire contents including the "mobile" folder into your pub/skin/ directory.

To enable the skin site-wide, change the $Skin = 'pmwiki'; line to: $Skin = 'mobile';

Configuration

Usage

Notes

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

Contributors

Thanks to http://cssgrid.net/ for the original template ("1140 CSS Grid: 12 columns fluid to mobile"). The original template is Creative Commons By-attribution, created by Twitter's @andytir.

Crisses aka XES adapted the original template to PmWiki, and really seriously dumbed it down. It's much more adaptable than it appears, with very slick HTML code that's easy to play with on the back-end.

Comments

See discussion at Mobile-Talk

FAQ

How can I make this template only show for mobile devices?

After installing the template into your /pub directory, install the DetectMobileFree recipe. Then add these lines to your config.php file instead of the "$Skin = 'pmwiki';" line.

include_once("$FarmD/cookbook/detectmobilebrowsers.php");
if(detect_mobile_device()) {
   $Skin = 'mobile';
} else {
   $Skin = 'pmwiki';
}

How can I make this into the main template look better on iPad, computer and laptop displays?

You can use the instructions at http://cssgrid.net (edit see https://web.archive.org/web/20111228012843/http://cssgrid.net:80/) and some basic knowledge of HTML to customize the design of your website. This template can have up to 12 columns, so it's based on a 12 block grid. I made the skin very basic because it's meant for mobile devices, but you have a lot of room to make this design pretty for standard web browsers. There's many examples at that website. In case the website goes away, the main webpage is included in the package (view "documentation.html" in a browser -- all images have been removed so you're better off viewing on the original site).

How can I exclude the iPad from the mobile browser?

DetectMobileFree already excludes tablet devices.

If you're using DetectMobile, try this instead:

if(detect_mobile_device() && (!strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))) {
   $Skin = 'mobile';
} else {
   $Skin = 'pmwiki';
}

User notes +2: If you use, used or reviewed "Mobile", you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.