You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 14 Next »

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.

This new model class provide also a new 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).
The vertical navigation (or down navigation) has also changed. Only the first children of the current page are displayed.

Mobile Filter
I created a filter, its role is to detect if the request comes from a mobile browser or not, and then redirect to the corresponding website.
The analysis of the request is managed by WURFL.
The redirection is no more a redirection in the sense that we have now a single url. According to the device requesting the content, we set the corresponding site definition. With this solution the content is rendered differently but the url stay the same.

Problems

What's next?

  • No labels