Page History
Wiki Markup |
---|
{rate} _Start date: 01-06-2011 |
...
_ _Start date: 10-06-2011 |
...
Goal
...
_ h3.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 |
...
h3. 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 |
...
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
...
|http://wurfl.sourceforge.net/].
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.
h3. 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.
h3. 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
|