Page History

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.

...

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?

General improvements:

...

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