Version 2
Created by mwringe on Feb 20, 2012 3:31 PM. Last modified by mwringe on Apr 11, 2012 9:28 AM.

    Status

    Initial planning stage

     

    Introduction

    In order for a mobile portal site to look and act properly on a mobile device, it will need to conform to the constraints of the mobile device.

     

    The main constraints to take into consideration:

     

    • screen size: the css will have to be modified in order to properly display elements on the screen. We may also need to provide smaller images than what is normally provided on the desktop site.
    • lack of mouse input: since we cannot rely on a mouse being used we cannot use hover support on a mobile device
    • touch based input: we will need to provide ample room around buttons to make sure they are easy to select when touched.

     

    The screen resolution, aspect ratio and pixel density can vary greatly across devices:

    • Phones can have resolutions between 240x320px and 1280x720px.
    • Tablets can resolutions between 1024x600 and (soon) 1920x1200px+
    • Desktops can have resolutions between 1024x768px and 2560x1600px+

     

    These numbers are going to continue to change as new devices get released. In order to provide the best experience across multiple mobile devices, the portal site should be designed in a 'responsive' manner, it should adapt to the screen it is currently being displayed upon.

     

    For our initial mobile portal offering, we do not want to have to completely rewrite all the rendering elements (ie WebUI) as such we will be concentrating on improving the skinning ability of the portal to better handle our mobile skinning requirements. For the specification on future mobile site rendering and usability improvements (like touch based gestures) please see <insert link here>.

     

    Background Information

     

    Responsive Web Design

    The idea behind responsive web design is to write one page with the same content but have its behaviour and layout change based on what device is accessing it. This is mostly done using css3 media queries and some javascript. Support for this can either be added by using different css stylesheets based on specific device width (sticky points), using percentages instead of pixels (smooth transitions), or a combination of both (usually the case since using just percentages doesn't exactly work nicely. A three column layout on a tablet might look ok, but not on a phone).

     

    For older browsers which do not support css3 media queries, small javascript libraries exists to add support.  See respond.js and css3-mediaqueries.js

     

    Specification

     

    Mobile Skin

    For most of the mobile look and feel, we should be able to handle this through skinning the portal with a mobile skin. This will allow us to customize most of the look and feel, but our current skinning implementation is lacking certains features and there are areas which need improvement.

     

    Mockup

    TODO: create mockup images. Simple overview of how the layout and such will change based on the device page width, orientation, etc...

     

    Skinning Service Improvements Needed

    • Remove all inline and internal css stylesheets.
      • There are still places in the groovy templates and autogenerated html where we specify css styles. All css styles need to be defined in one place, the portal skin.
    • Add skin support for javascript
      • since some of the current javascript (eg menu hovers) is specific to a desktop environment, we will need to modify the skinning framework to include specific javascript files based on the currently loaded skin.
    • Add html head meta support for a skin
      • for mobile, there are certain meta tags which need to be enabled (eg viewport settings). We will need to be able to add meta tags based on the currently loaded portal skin.

     

    Mobile Page Containers

    We will need to create some default mobile page containers which will be responsive. This will be where our main responsive layouts should be handled.

     

    MockUps

    • TODO: add mockups here for some generic responsive layouts which would work for a portal

     

    Page Container Improvements

    • remove inline css styles from the containers and make this part of the skin
    • TODO: research some more, but it doesn't appear that containers can be easily added to the portal. Being able to add a customized container is going to be a feature we should support.

     

    Mobile Portal Template

    We need to create a very basic mobile portal template with only the 'mobilized' portlets available.