Post on 06-May-2015
description
transcript
Basics of making mobilewebsites with Drupalwebsites with Drupal
Tom DeryckereSoftware Architect / Siruna
@twom
25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s
Technology Trends
From WAP to iMode to xHTML
Technology that works
From slow connections to fast connections
Network side TECHNOLOGY
5
Making content mobile
is the basis
Making mobile content
6
useful and usable
is the need
Mobile Web Applications that :
Work on a phone
Fit on a phone
Make SENSE on a phoneMake SENSE on a phone
Call to ACTION
and have REVENUE models
7
DrupalCon Paris:
http://drupalcon.siruna.com
Slate:
http://twom.slate.mobixx.eu
Examples (Drupal)
8
Garland mobile:
http://twom.garland.mobixx.eu
Marina:
http://twom.marina.mobixx.eu
Zen:
http://twom.zen.mobixx.eu
XIO:
http://xio.siruna.com
Examples (Drupal)
http://xio.siruna.com
http://portal.siruna.com
9
WHERE IS THE COMPLEXITY
10
Device fragmentation:− Millions of devices
− Different Operating systems
− Different capabilities
• Ex: screen sizes, javascript support, CSS / xHTML support, video support
− ...
Usability: make a fun and easy experience
Complexity
Usability: make a fun and easy experience− Content has to be easy to find
− Reduce scrolling (no horizontal scrolling)
− Make links clickable (not too small)
− Easy navigation structure that is easy to find
− ...
11
Convergence is coming
Javascript becomes more and more the standard
Desktop html works on mobile devices
On fragmentation
12
More interesting dataUnited States Handset Data - April 2009
Requests: 3,538,714,000
India Handset Data - April 2009
Requests: 447,079,855
480x320 px
176x220 px
240x320 px
320 x 240 px
13
480x320 px
Palm pre: 480 x 320
320 x 240 px
Source: AdMob
Optmization of download size− Network connections are not always optimal (between 50kb/s –
1,8Mbit/s
− Don’t let the user wait, don’t let him download content that he will
not use
Bring relevant content to the mobile user
Complexity
Bring relevant content to the mobile user− Understand what he will look for (think and plan well!!)
− Is not easy (especially for the customer)
14
Complexity
15
Simple (double) navigation
No video
Easy access to stories
SOME MORE EXAMPLES
16
Form a multi-column based site going towards a 1
column site
We are talking about generic designs
GeneralLogin or Register
17
Second navigation
New forum posts
New Comments
Sponsors etc ...
Rules of thumb
− No fixed margins
− No floats
− No big fixed fonts
− Reduce the usage of tables (or reduce the number of columns)
− Make a block with links to views like
Design
− Make a block with links to views like
• Most recent comments
• Most recent forum topics
− Remove node content from frontpage
− Replace the user login block by a link
− Navigation in a dropdown list works well
− No who is online, who is new kind of blogs (not relevant)
− You can make things sexy for iphone, android, ...
18
Examples
19
Examples
20
Examples
21
Examples
22
Examples
23
THE TOOLS
24
Many attempts in the comunity
Focus on − Providing mobile themes (e.g. iUI, mobile theme)
− Theme switching
− Mobile payments
Mobile modules for Drupal
− Mobile payments
Not a lot of demos
General no proven long term strategy
An overview on
25
http://mobiledrupal.com/content/overview-mobile-modules-drupal
Under my maintenance – Co-maintainers welcome!
http://drupal.org/project/mobile_tools(release 6.x-1.7)
http://drupal.org/project/siruna(release 6.x-1.0-beta)
Some Drupal modules
(release 6.x-1.0-beta)
http://drupal.org/project/wurfl(release 6.x-dev)
Planned:− Image resizing module
− Video transcoding solution (based on Media Mover)
− Providing some more mobile themes
26
Switching(Make sure the user gets access to the best site)
Device Detection(Mobile device, desktop, PSP, ...)
First define the flow (4 steps)
Theming
(Layout, image resizing, navigation, table linearization)
Functionality + content(What functionality and content is relevant for the device)
27
Device detection− Notify mobile users for the existence of a mobile site
− Automatically redirect mobile users to the mobile site
− Provide custom configurable message: e.g.: “View mobile |
classic”
− Support for Browscap, Wurfl and other third party device detection
User notification / redirection
− Support for Browscap, Wurfl and other third party device detection
modules
28
Mobile context in the permission system − Roles of the mobile visitor gets replaced by a mobile variant of his
normal roles
− Administrator can use role permissions to toggle functionality
• Node Acces, Menu per role, etc ... Can help
− = Mobile context for permissions
Mobile permissions
− = Mobile context for permissions
− Very powerfull tool to toggle functionality on your mobile site!
29
Theme switching (based on device group if needed)
Based on domain name or device detection
Switching per device group (Android, iPhone, etc ...)
Theme switching
30
Demo 1
31
Two main solutions
Create you own themes (see rules of thumb)− No fixed margins
− No floats
− No big fixed fonts
− Reduce the usage of tables (or reduce the number of columns)
− Make a block with links to views like
• Most recent comments
• Most recent forum topics
Creating the mobile look
Currently high risk and
complexity, but allows more
creativity!
− Remove node content from frontpage
− Replace the user login block by a link
− Navigation in a dropdown list works well
− No who is online, who is new kind of blogs (not relevant)
− You can make things sexy for iphone, android, ...
Use an adaptation service (like Siruna ;))− Does most of the work for you (image transcoding, device
detection, adaptation for difference devices)
− Build in functionality to help creating different versions
− Fast prototyping
− High Quality
Adaptation engine = proxy to the mobile user
Mobile URL Desktop URL
DNS
Website / XML stream
Adaptation
engine
The Siruna platform
Website
34
Website XML Feed
How does it work?
Device
Detection
Content
Fetcher
Content
Adaptation
EngineSelect
Menu
Automatic
Content
Adaptation
35
Fetcher
35
Adapt Style
Select mobile
content
Content adaptation engineSiruna Composer
Previewing XML based rules(http://open.siruna.org/documentation/sitemap-api)
36
<map:transform />
means you want to define a transformation on the content.
<map:transform type=“sirunaElementTransformer” />
XML scripting language: syntax
<map:transform type=“sirunaElementTransformer” />
means you want to use an “Element Transformer”
(http://open.siruna.org/documentation/sitemap-api for more
transformers.
<map:transform type=“sirunaElementTransformer>
<map:parameter name="task0"
value="remove(//p:form[@id='comment-form']//p:fieldset)" />
</map:transform>=> Means you want to remove the fieldset of the form
Remove content (example remove content of nodes on
frontpage)
Make drupal forms mobile friendly:
Adaptations (some examples)
< <map:transform type="sirunaElementTransformer">
<map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" />
</map:transform>
Make drupal forms mobile friendly:
38
<map:transform type="sirunaElementTransformer"><map:parameter name="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /><map:parameter name="task1" value="removeAttribute(//p:textarea, cols)" /><map:parameter name="task2" value="removeAttribute(//p:input, size)" /><map:parameter name="task3" value="setAttribute(//p:textarea, rows, 3)" /><map:parameter name="task4" value="setAttribute(//p:textarea, style, width:90%)" /><map:parameter name="task5" value="setAttribute(//p:form[@id='comment-form']//p:input, style, width:90%)"
/></map:transform>
Extract several menu structures and collect as dropdown
Adaptations (examples)
<map:transform type="sirunaMenuExtractor"><map:parameter name="task0" value="extract(//p:ul[@class='links primary-links'], false, false, true)" /><map:parameter name="task1" value="extract(//p:ul[@class='links secondary-links'], false, false, true)" />
</map:transform><map:transform type="sirunaMenuInserter"><map:parameter name="select_current_url" value="true" />
</map:transform>
Change / remove CSS attributes
39
<map:transform type="sirunaCSSTransformer">
<map:parameter name="task0" value="addCSSItemAttribute(.front #block-block-13, background-position, center)" />
<map:parameter name="task1" value="removeCSSItemAttribute(#block-block-13, height)" />
<map:parameter name="task2" value="removeCSSItemAttribute(#block-block-13, margin-bottom)" />
<map:parameter name="task3" value="removeCSSItemAttribute(#block-block-13, margin-top)" />
<map:parameter name="task4" value="removeCSSItemAttribute(#block-block-13, padding-top)" />
<map:parameter name="task5" value="addCSSItemAttribute(#block-block-13, background-position, center)" />
</map:transform>
Different adaptations for different devices:
Adaptations (examples)
<map:select type="sirunaExpressionSelector"><map:when test="width < 160 || !imageSupported">
<map:transform type="sirunaElementTransformer"><map:parameter name="task0" value="remove(//p:div[@id='contentsurround']//p:img)" />
</map:transform>
Analtyics inserter<map:transform type="sirunaGoogleAnalyticsInserter">
<map:parameter name="identifier" value="UA-2883003-5"/></map:transform>
40
</map:transform></map:when></map:select>
Tight integration between Siruna and Drupal
Flexible definition of filters for content types, menu
pages, views and individual pages
Duplication of theme enabling a “mobile configuration”
for the mobile users
Possibility to apply predefined adaptations
Siruna module
Possibility to apply predefined adaptations
Previewing of the mobile site from within Drupal
41
Module allows creating adaptation for your own
themes
Creation of a repository of mobile adaptations
Predefined adaptations
42
Filter is a adaptation pipeline for group of pages− E.g. Specific pages or nodetypes can have a different filter!
Powerfull concept to make complex sites mobile!
Define your filters
43
Demo 2
44
Mail : Tom.Deryckere@siruna.com
Blog: http://www.mobiledrupal.com
Twitter: @twom, @siruna
Siruna: http://www.siruna.com, http://open.siruna.com
Contact
45
Looking for partnerships with Drupal agencies
and developers!