Start date: 01-06-2011
Start date: 10-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.

Main site visit
Possibility to visit the desktop site from the mobile.

Design
I designed few elements:

  • teaser / teaser group
  • article page
  • image gallery

For the image gallery I developed new JS functions integrating jQuery Mobile features. On a touchscreen device you can swipe the image.

jQueryMobile integration
I did a quick script enabling the jQuery framework, with this framework the website looks like an application.
When you request a new page, the content of this page is loaded asynchronously in the current page.

Problems

I didn't find new problems or drawbacks.
It's really a constraint to not have the possibility the change the html(script) of a paragraph.

And some dialogs should have a tab containing properties for the mobile website.

What's next?

Finally the main goals are completed , the demo project is running well on my iPhone but there si still a lot of things to do.
Here I suggest few tracks on which we could spend more times.

  • Review of all the STK elements
    • All the elements (templates / paragraphs) have to be redesigned, the dialog of the some of them should also provide a tab for mobile properties
    • What we do we Flash paragraph, HTML paragraph
  • Management of the images:
    • reduce the size in order to save loading times
    • images for HD mobile
  • Work on the size of the page, still to big (max 100k)
  • More granularity in the mobile detection. For the moment, we detect if it's a mobile or not, but we could imagine to detect if it's a tablet, a smartphone, a mobile, ect.
    By defining more "mobile family", we could also define a site definition per family. The user experience would strongly be improved, each mobile family will have its own enhanced website.
  • Accessibility (for example iPhone VoiceOver mode)
  • Dig into jQuery Mobile
  • Mobile Filter improvements:
    • review the filter mechanism
    • improve the way the WURFL repository is loaded
    • improve the mobile browser test
  • No labels