Make your Drupal blog mobile!

This is my first post in a series of tutorials illustrating how the open source Siruna software can help you in making your website mobile. The goal is not to create a mobile site from scratch, but to repurpose your existing sites for display on mobile devices. The advantage is that you do not lose time by creating a complete new mobile theme, and Siruna assists in making some usability choices.
Drupal is currently not aware of mobile devices and delivers a very bad "out-of-the-box" solution to serve these devices. At the other hand, Drupal is very suited for mobile transformations because of the well structured theming.

Although this tutorial looks long and complex, you will notice that almost no programming is required... This means that you don't have to be a web guru to get things running, and that it is difficult to make a lot of errors. The guru's will see that they can go deep enough in the details later on.

I am also working on a Drupal-Siruna module making things a lot simpler.

My first example will show how I made from this blog a mobile blog.

The tools

Testing of your mobile site

For evaluation during the “mobilization” proccess, you can use one of the following available tools:

Development

For following this tutorial you need to have Firefox and Firebug, a firefox extension. Firebug is an essential tool for web developers, and I will assume that most of the readers already have some basic understanding of this extension. If not, a tutorial is available on the Firebug website.

We will use the Siruna service to make our site mobile. Siruna has created a commercial supported open-source software suite to make mobile websites. Siruna is in the league of software solutions that do semi-automatically adaptations of your website to a mobile version. This allows complete reuse of your webcontent, and it delivers a very very fast solution for making your site mobile! Together with an adaptation service, Siruna provides an authoring tool to configure and tweak your web adaptation. It also allows immediate previewing. This is in contrast with similar solutions like Mowser where the developer cannot tweak the display of his site. More information on Siruna is available on http://open.siruna.com.

Siruna as an adaptation server with authoring possibilities
Siruna as an adaptation server with authoring possibilities

You also need a little knowledge about CSS and Xpath (click the links for short tutorials). If you have no of little knowledge, just continue this tutorial and you will learn along the way!

Design - Layout - Functionality

Design and Layout

When creating the mobile version of the site, you have to have an idea of the layout you are heading too. The layout must take into account the nature of a mobile device and the usage context. How your mobile site will look like is open to creativity of the developer, but it is good to try to follow some best practices. Questions you have to ask are:

  • How do I arrange the navigation. Where comes the menu and in what form?
  • What functionality and information do I give the user? What is needed for the mobile context, and what is not?
  • What do I put on top and what will get less attention on the bottom.

For the layout we will follow the mobiforge guidelines. The layout of the original site exist of a header, content and two columns. Eventually we want to transform this into a one column layout, that is easy browsable by a mobile device.

Basic transformation from web to mobile
Basic transformation from web to mobile

There are more types of transformations possibles (e.g. Grid layout with icons on the frontpage is visually very attractive), but the one presented here will do fine on most devices.

Functionality

Now, the functionality that I want to keep on the mobile blog are:

  • Mobile users can use the menu structure
  • Mobile users can log in
  • Mobile users can read the blog posts, navigate them and post comments
  • Mobile users don't need to see the extra metadata attached to a blog post (tags, date, author)
  • Mobile users don't need to see the "who's new" and "currently loggedin users" blocks.
  • Mobile news at the right column will be displayed as a link to a page with the links

Let's start!

I now have set the context somewhat (I hope you are still following). We know the tools, and we have some idea where we are heading too. Now it's time to do the real work and configure our transformation. Here is a simple step for step approach:

Step 1: Create your own blog

I will illustrate the adaptation process with this blog, but try to follow it while applying this tutorial to your own blog, someone else his blog or website. If along the way you see specific problems with your site, drop me a note, and I will respond to you. You can already test the result of your site with the Openwave phone simulator, the iPhone, the Opera Mini Simulator or the ready.mobi website tester.

Step 2: Create a Siruna account and start a new mobile project


  • Create an account on the Siruna website and login . The creation of an account is necessary because Siruna will have to collect information about your site, and Siruna will also give you later an URL for your new mobile site.
  • When logged in, you see an overview of your projects. Each project can be a website that you want to make mobile. Currently there is no limit to the number of projects you can start.
  • Add a new project (by clicking the "add new project" link), give it a name (no spaces!!) and enter the domain of the site (remark: use only the domain name... in the course of the next weeks you will also be able to add directories)
  • Click on the name of the project and you will see a new screen. You get the following information:

    • Website: URL of the site you want to mobilize
    • Mobile URL: this is the URL that you can use to preview the mobile version of your site.

My projects
Add a new project

Create a new project
Create a new project

Step 3: make a filter and start editing the filter

Filters are an important aspect of the Siruna service because they allow custom adaptations for different pages. For example I can create a filter for http://www.mobiledrupal.com, another for http://www.mobiledrupal.com/user, another for http://www.mobiledrupal.com/blog, etc ... Since we are now dealing with a simple blog, 1 filter serving the whole site will be good enough for us.


  • Click on "Add Filter"
  • In the first field you can fill in the URL of a page that you want to make mobile. This is in fact the default page that will be used by Siruna to preview the result.
  • Give the filter a name: e.g. home
  • Set the matching path for the filter. We will keep it simple and set to http://www.yourdomain/anything(*)
  • Save the filter

Create a new filter in the Siruna composer
Create a new filter in the Siruna composer

Now that you have created your project and initialized one filter, we come to the difficult part of this tutorial. In the project page of your blog, you now have to click on the name of the filter. This bring you to the actual composer window. The central place to create your site adaptations.

Overview of the Siruna composer
Overview of the Siruna composer

A short explanation on the composer:
(A) The preview windows of your mobile site. You can click the different regions of the site to get the xPath expression at the bottom of the composer (you will see a blue frame around the region). I have the tendency to use Firebug for this purpose and define the xPath expression myself instead of using the composer suggested xPath expression.

(B) The composer window. Here you see the Siruna configuration file (Sitemap) that contains the transformation that you want to do. Currently there are already some transformations there that transform images, check the sites XHTML compliance, linearizes tables, make the site more compact, etc ... You will add here new lines describing the adaptations.

(C) In the menu, you can save the transformation. The preview window will be updated whenever you save. The preview button allows you previewing of your site on different type of devices. Clicking on API brings you to the documentation of the available commands.

Step 4: Learn the Basics of the Siruna transformations

The reason why the composer looks quiet of complex is because you can go into the little details for fine tuning your site. Don't be afraid of them now. Later you can go into these details yourself to fine tune your site..
When opening the composer, you are confronted with a configuration file, called the sitemap. It contains a lot of XML code that defines the actual transformation. A very short overview on the elements:

The root element is <map:sitemap xmlns:map="http://apache.org/cocoon/sitemap/1.0"/>

The child element is <map:pipelines />. This element contains a <map:pipeline /> element.. Here no further explanation is necessary, since these elements can be left untouched and will not be used here.

The pipeline element contains multiple  <map:match pattern=”” />elements. The composer will automatically makes such an element for each filter. You never have to manually manipulate this element. The pattern element will equal the name of your filter (the name you have given when you created a new filter).

Each pattern element contains a set of generators, selectors, transformers and serializers.I will provide examples in later blogs on the usage of these elements. We will now only use the transformers element.
Transformers are identified by <map:transform type=”[transformerName]> elements. You could compare these transformers to software methods that performs some action (=adaptation) on your website. You can take a look at the Siruna documentation for a list of transformers and their use: http://open.siruna.org/documentation/transformersAPI. You will add some transformers later in this tutorial. An example of a transformer is the SirunaCSSTransformer . This transformer will contain changes to the CSS files of the site. The SirunaElementTransformer will perform actions on html elements of your site, like removing or moving div blocks.

A transformer can contain some extra parameters that hold an extra method defined by <map:parameter name="task0" value="[methodeName(params)]”/> If there are multiple parameters per transformer, the name must count up: task0, task1, etc .. For example the SirunaCSSTransfomer has a method for removing CSS attributes (e.g. <map:parameter name="task0" value="removeCSSItem(.two-sidebars #right-container)" />) and the sirunaElementTransformer contains a method to remove XHTML elements (e.g. <map:parameter name="task0" value="remove(//p:div[@id='block-aggregator-category-1'])" />)

Overview of the Siruna sitemap. Just look for the transformers.
Overview of the Siruna sitemap. Just look for the transformers.

Step5: Start transforming

Transforming your site into a mobile site is done by adding a series of transformations in the Siruna composer (in the Sitemap file. Clicking on Save in the menu updates the previewing window. I will demonstrate some easy transformations that I applied to this blog. To know where you best add these transformations in the Sitemap, search for the following comment:
<!-- add your transformations here -->

Transformation 1: Create dropdown list for displaying the menu
Drop down lists can provide a better experience on mobile devices for navigation. The more menu items, the more interesting the drop down list is. In my case you could argue the use of a drop down. 5 menu items can also be nicely displayed on top of a mobile page. This is the code that I used to make the drop down menu:

<!-- Extracts the menu from a div block. Detection of links is automatic -->
<map:transform type="sirunaMenuExtractor">
  <map:parameter name="task0" value="extract(//p:div[@id='navbar-inner'],false, true, true)" />
</map:transform>
<!-- this transformer inserts the dropdown list -->
<map:transform type="sirunaMenuInserter" />

The sirunaMenuExtractor takes a part of the page as identified by the following xPath expression //p:div[@id='navbar-inner']. The expression points to the div containing the menu links of my theme.
The best way to get this xPath expression is by using Firebug. If you open Firebug in Firefox, and choose for 'inspect', you can navigate to the menu block and see wath the id is.
The xPath expression just says: take the div block with id='navbar-inner'. sirunaMenuInserter takes the extracted menu and builds a drop down list on the top of the page.

Creation of a dropdown menu
Creation of a drop down menu

transformation 2: Adjusting the layout to make it viewable on a mobile device
Till now you still have a very bad layout of your mobile page. The main reason is the use of fixed margins. All fixed widths are already filtered by the Siruna software, so now we delete all margin-left and margin-right that are fixed.
Fixed margins don't have any reason to exist in this mobile context.
The restulting code in the Siruna XML is:

<map:transform type="sirunaCSSTransformer" >
  <map:parameter name="task0" value="removeCSSItem(.two-sidebars #right-container)" />
  <map:parameter name="task1" value="changeCSSItemAttribute(.two-sidebars #content,margin-right, 0)" />
  <map:parameter name="task2" value="changeCSSItemAttribute(#sidebar-left, margin-right, 0)"/>
  <map:parameter name="task3" value="changeCSSItemAttribute(#sidebar-right, margin-left, 0)"/>
  <map:parameter name="task4" value="changeCSSItemAttribute(#sidebar-right, margin-right, 0)"/>
</map:transform>

For this I used the sirunaCSSTransformer. This is a very helpful transformer for correcting an fine tuning the layout. You see that the arguments of the methods contain the CSS selector, the CSS attribute and the new value. For a change I used the removeCSSItem and the changeCSSItemAttribute methods. Here you also should use Firebug to search for all fixed margins. When you apply these filters you will soon see that the layout of the site is ok.

Note: The developers promised to make the removal of fixed margins a default action in the future release. This should make things a lot easier in the future!

Remove unnecessar elements
This part is a matter of taste, but for my blog I want to remove different elements displayed on the page. Currently on the mobile web, less is more, so let's remove some elements:


  • Who's online block
  • Mobile news
  • Blog author and creation date
  • Tags underneath the blog

The resulting code is

<map:transform type="sirunaElementTransformer" >
  <map:parameter name="task0" value="remove(//p:div[@id='block-aggregator-category-1'])"/>
  <map:parameter name="task2" value="remove(//p:div[@id='logo'])" />
  <map:parameter name="task4" value="remove(//p:div[@class='submitted'])" />
  <map:parameter name="task5" value="remove(//p:li[@class='blog_usernames_blog first'])" />
  <map:parameter name="task6" value="remove(//p:div[@class=v'taxonomy-terms'])" />
</map:transform>

As you will see, the columns of your site will be linearized to one big column that also contains the content. In the case of my blog, the two right columns will end up underneath my main content. More specifically I want to add my mission to the top of the page. I can do this by adding a task to the

<map:parameter name="task3" value="moveBefore(//p:div[@id='mission'],//p:div[@id='header-image'])"/>

This task tells Siruna to put the block with id=mission before the block with id=header-image. This looks simple? You can do this with whatever content you want... just find the right xpath expressions.

Some additional CSS tweaking
When previewing your site, you are probably not completely satisfied with the result. Most of the time this comes of bad font-size and margins. So probably you want to do some extra tweaking. I have added the following transformations to my project:

reducing the margin of the logo causing to much whitespace above the logo:

<map:parameter name="task5" value="changeCSSItemAttribute(#logo-title,margin-top, 0)" />

Reducing the font sizes of the titles

<map:parameter name="task6" value="changeCSSItemAttribute(h1#site-name,font-size, 1em)"/>
<map:parameter name="task7" value="changeCSSItemAttribute(div#site-name,font-size,1em)"/>

Reducing the font sizes of the breadcrumbs

<map:parameter name="task8" value="changeCSSItemAttribute(.breadcrumb,font-size, 16px)"/>
<map:parameter name="task9" value="changeCSSItemAttribute(.breadcrumb,margin-top, 0px)"/>

Reducing the hight of the header block

<map:parameter name="task10" value="changeCSSItemAttribute(#header-image,height, 14px)"/>

Setting the background to white

<map:parameter name="task11" value="addCSSItemAttribute(body,background-color,#ffffff)"/>

Further assistance and feedback

These steps should be sufficient to make your blog mobile and serve most mobile devices. More tweaking is always possible. We didn't mention differentiation between high vs low end devices or pagination. I will give some examples on this later.

If you need further assistance, things are not working out as they suppose to be or you just have some general remarks, you can:

  • Comment on this blog
  • Go to the Siruna user forum

If you have successfully finished this tutorial, post the link of your mobile and desktop site as a comment!

Trackback URL for this post:

http://mobiledrupal.com/trackback/14

spokesman review blogs

I would have to say this stall serves up a superb, nutritious, pore- breachin’ broth and is well worth checking out. Unfortunately, the chef did break one of Pieman’ s review rules,‘ Don’ t try and diddle the dim foreigner.’ Pieman paying up policy in ...

Printing West Palm Beach

Details are lacking and Microsoft is unlikely to comment, but my guess is that this has more to do with the software implementation around Windows RSS Platform and where/ how that design concept will evolve and emerge in the future (Windows Live, Share...

Graco Nautilus 3 In 1 Car Seat

Good post I've enjoyed studying this and I've added your post in my listing of associated blogs check it out http://www.graconautilus3in1carseats.com/tag/graco-nautilus-3-in-1-multi...