Initial planning stage
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>.
Responsive Web Design
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.
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 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.
- 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.