Feature Proposal: Standard Skin for Mobile Devices

Motivation

Smartphones and Tablets are spreading constantly in companies. Working with TWiki on a mobile device will become an important option for business users.

Description and Documentation

There should be a standard skin for small sized screens like smartphones or tablets.

Recognition of current user device and automatic switch to mobile skin.

Skins need to be classified as mobile or desktop skins to allow automatic selection or a mobile skin could be defined in TWiki Preferences or Configuration.

Current skins like pattern or topmenu work on mobile devices but elements are to small sized for proper usage on smaller devices.

Examples

Impact

Implementation

-- Contributors: MichaelGulitz - 2012-07-18

Discussion

Michael, this is absolutely on target and in line with the TWikiMission. Someone needs to drive a mobile skin. Some thoughts:

• The same user is likely to access TWiki using an browser and a mobile device, so as you pointed out, a preferences setting to set one or the other might not be the best choice.
• Possibly auto-detect the device based on Wikipedia:User_agent
• Auto-detect the device and still use a preferences setting, such as DEVICETYPE = desktop, mobile, autodetect.
• We have a SKIN setting to set the desktop skin. We probably need also a MOBILESKIN setting to set the mobile skin?
• Core TWiki, plugins and TWiki apps could be made aware of the device type. For this, a DEVICEDETECTED variable could be defined with value desktop or mobile. If DEVICETYPE is set to autodetect, DEVICEDETECTED is set dynamically to desktop or mobile.
• What parts of the TWiki core and standard plugins should be made aware of the detected device?
• HTML5 makes it easy to tailor for mobile devices. We need an HTML5 strategy.

-- PeterThoeny - 2012-07-19

Thinking this over I believe the best place to store the skin mode as a session variable. That way the same user can use different skin modes on different devices.

-- PeterThoeny - 2012-07-31

Another option is to do a ResponsiveWebDesign, e.g. a create a ResponsiveTopMenuSkin that changes the page layout based on window size.

-- Peter Thoeny - 2015-04-29