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.
...
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
...
...
.
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
Overview
Content Tools