Page History
...
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.
...
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