Start date: 01-06-2011
Goal
Goal 1: Solve the problems found with "easy" workarounds.
The web pages and all the elements has to be optimized for a mobile experience
- Manage the mobile rendering only with css
- Remove areas directly from the scripts of the prototype def in order to prevent overriding
The size of the page has to be reduced (less loading time)
- reduce the size of the current stylesheet, minify
- remove js, minify
Switch mechanism
- filter managing the redirection
Goal 2: Provide a showcase
- Nice module presenting the mobile website
- Demo including jquery mobile
What I did
I tried few workarounds:
- Removed useless areas directly from the scripts (like promos, extras)
- Simplification of the stylesheet and of the layout
Extended templates / dialogs
I added two properties in the page info of the home page
- mobile logo, provide a logo only for the mobile website
- hide in mobile navigation, a page can be remove from the mobile navigation
I created a new template stkHomeExt which extends the stkHome template and provides a new dialog for the page properties.
To display correctly the mobile logo, I created a new model class extending STKTemplateModel. This class has a method providing the link of the mobile logo.
As I modified the Template model of the Home page, if I want to display the logo on every pages, I have to extend all the templates of the main site by adding this new model class.
I also extended the navigation model in order to provide a specific top navigation. Now we can hide some pages on the mobile website and keep them visible on the main website (useful for the home page).
Problems
- vertical nav