Page History

...

...

• How to detect the possible matches for mobile devices in HTTP header user agent.
• Efficient way to manage and maintain possible devices list for new mobile devices added in the future.
• How to render the mobile theme.(Do we let the theme designers to implement their own mobile theme or one theme to act in both ways.)
• Basic information that is to display in mobile template
• Feature to be added to the HTML5 template.(Client side storage , media etc.)

Design

How mobile detection is done?

Roller mobile will use details in HTTP header's user-agent and match it with possible matches using regular expressions.

How to render the mobile theme

...

?

There are 3 options available,

*Use different weblog,search ,tags and entry pages for each template. complex to maintain and handle
*Use a one default mobile theme for all desktop theme. restricted
*Use different mobile theme for each desktop theme. preferred method

Comments

In our design we are having one template which can be dressed up according to the detected device.We use WeblogTemplateCode to maintain different types of Template Contents , template Language to assist in that.

When a user requests a Weblog page first the template is loaded and then it is being prepared using the identified "type" such as standard , mobile etc.

How a mobile theme is rendered.(User preferred mobile theme for mobile devices.)

Image Added

How many Themes we have?

We were evaluating the possibility of having a separate theme for mobile and it failed to withstand with roller existing architecture.The most suitable solution is to have a Theme with bunch of templates

Which has different template contents.We can define what are the template codes and their required attributes to load them into system.

What are the changes to Theme.xml ?

Following is an extract from Theme.xml

  <template action="weblog">
        <name>weblog</name>
        <description>weblog</description>
	<link></link>
        <navbar>false</navbar>
        <hidden>true</hidden>
         <templateCode>
           <templateLanguage>velocity</templateLanguage>
           <contentType>text/html</contentType>
           <contentsFile>weblog.vm</contentsFile>
           <type>standard</type>
       </templateCode>
         <templateCode>
           <templateLanguage>velocity</templateLanguage>
           <contentType>text/html</contentType>
           <contentsFile>weblog-mobile.vm</contentsFile>
           <type>mobile</type>
       </templateCode>
    </template>

One should add template code for a standard template and can leave other types (In here mobile template code) not adding.If there is no templateCode entry for mobile type we are cloning the standard's template code.

Major Changes in Roller code

Entry in createDB.vm

create table rol_templatecode (
    id                 varchar(48)  not null primary key,
    templateid varchar(48) not null,
    template     $db.TEXT_SQL_TYPE not null,
    templatelang varchar(48),
    contenttype  varchar(48),
    #columnNotNullWithDefault('type' 'varchar(16)' 'standard')
);

In Templates interface

  public WeblogTemplateCode getTemplateCode(String type) throws WebloggerException;

In WeblogManager interface

 public WeblogTemplateCode getTemplateCodeByType(String templateName, String type)
            throws WebloggerException ;

  public void saveTemplateCode(WeblogTemplateCode templateCode) throws WebloggerException;

User Interface for template code editing.

Image Added

Sample Mobile theme Design Preview in Nook Color.

Home Page

Image Added

Entry Page

Image Added

Search Result page

Image Added

Blog Posts relevant for design

Roller Mobile design - New approach

http://rollermobile.blogspot.com/2011/08/u-turn-in-roller-mobile-design.html

Roller WeblogTemplateCode design

http://rollermobile.blogspot.com/2011/08/roller-weblogtemplatecode-design.htmlOther can leave comments here.