Build iPhone Compatible Drupal Websites Using iWebkit: Part 1

Submitted by Sumit Kataria on September 1, 2009 - 11:14pm

The iPhone and iPod touch continue to gain market share of mobile web traffic. According to edibleapple 48% of all smartphone web requests in the US come from iPhones, while Windows and RIM devices together comprised 34% of mobile web requests.
These numbers show that it is becoming increasingly important to have iPhone compatible websites.

The good news is that with Drupal sites, it is becoming easier to make them mobile web compatible. Lets start converting your Drupal website into an iPhone compatible version using iWebkit.

iWebKit is a web toolkit designed to create iPhone and iPod touch compatible websites and webapps. It is very easy to use, extremely fast, compatible and extensible. iWebkit is available under GNU license and can be downloaded from iwebkit.net.

In first part of this series of tutorials I will cover the basics of the iWebKit Drupal theme and in second part I will discuss enabling it on your site along with a desktop theme.
Demo of iWebKit: Demo
(demo it on your iPhone or iPhoneTester)

Let's Get Started:

Download iWebKit Drupal theme from the bottom of this blog.
Extract the theme in your site’s 'sites/all/themes' directory and
enable it as default theme at http://mysite.com/admin/build/themes .
Now if you visit your website from an iPhone it will look like this
You will see the primary menu of your site is beautifully converted into
iPhone type menus with a picture and details.

The code behind these menu items is:

if(!empty($primary_links)) {
  $out = '<ul class="pageitem" title="' . ($title ? $title : $site_name) . '" selected="true">
  <li class="textbox"><p>My Example menu</p></li>';
  foreach($primary_links as $link_name => $link) {
    $out .= '<li class="menu"><a href="' . $link['href'] . '"><img alt="list" src="'.path_to_theme('iphone').'/thumbs/contacts.png" /><span class="name">' . $link['title']  . '</span><span class="comment">'.$link['attributes']['title'].'</span><span class="arrow"></span></a></li>';
  }
  $out .= '</ul>';
  echo $out;
}

In a similar way you can build your secondary menu in iPhone style
menus using $secondary_links variable instead of $primary_links above.

Top bar and arrow links:

<div id="topbar">
      <div id="leftnav"><a href="<?php print base_path(); ?>"><img alt="home" src="<?php print base_path() . path_to_theme() ?>/images/home.png" /></a></div>
      <div id="title"><?php print $site_name; ?></div>
      <div id="rightnav"><a href="<?php print 'logout&amp;'.drupal_get_destination(); ?>">logout</a></div>
</div>

This code adds page title, home link (left-navigation) and logout links
(right-navigation) in top bar.

Teaser list display on home page

<li class="menu">
    <a href="<?php print $node_url ?>" title="<?php print $title ?>">
      <span class="name"><?php print $title ?></span>
      <span class="arrow" />
    </a>
</li>

The code above adds a nice iPhone style title and arrow to title.

Form support: iWebKit offers excellent support for iPhone style forms. It outputs all forms in an iPhone styled way. For example to add a user-login form like this one

you would use the following code:

<form action="?q=user/login&amp;'. drupal_get_destination() .'" method="post" id="user-login">
<ul class="pageitem"> 
  <li class="form"><input placeholder="Username" id="edit-name" name="name" type="text" /></li> 
  <li class="form"><input placeholder="Password" id="edit-pass" name="pass" type="password" /></li> 
  <input placeholder="" id="edit-pass" name="form_id" id="edit-user-login" type="hidden" value="user_login" />
  <li class="form"><input name="Submit input" name="op" id="edit-submit" type="submit" value="Submit" /></li>
</ul></form>

Themes with iWebKit: There are 13 iWebKit themes available for download in themes package. You can view demos of these themes.

Popup support: These are the same popups that you get in settings on your iPhone when you reset all settings. You can find the code for popups in the iWebKit documentation.

iWebkit 4.6.1 natively supports many other cool features - you can learn more about them at iwebkit.net.

A Demo OF this theme is available at: http://iphone.sumitk.net

Attachment	Size
iphone.zip_.txt	182.91 KB

Sumit Kataria's blog

Comments

SO happy to hear this. Love

Submitted by MaximillianK on September 8, 2009 - 3:40am.

SO happy to hear this. Love it

Great! Is this theme

Submitted by Bevan Rudge on September 21, 2009 - 5:20pm.

Great! Is this theme available on Drupal.org too?

When's the next lesson?

Submitted by Jeremy (not verified) on September 22, 2009 - 11:25am.

Really eager to figure out how this works, like how do you customize the pages. So keep the tutorial coming. Thanks.

Hi Bevan, No this theme is

Submitted by Sumit Kataria on September 22, 2009 - 2:36pm.

Hi Bevan,

No this theme is not available on drupal.org yet ... but I am thinking of maintaing it as a project soon.

Please do!

Submitted by Bevan Rudge on September 22, 2009 - 3:18pm.

Please do!

I'll second that.

Submitted by Jeremy (not verified) on September 25, 2009 - 5:57pm.

This theme is needed, as well as more info on how to customize it.

Production ready theme +2 more tutorials coming this week!!

Submitted by Sumit Kataria on September 28, 2009 - 3:54am.

So finally I got some time to finish this theme and make it production ready this weekend. Will release it soon.

Theme does not work on android

Submitted by Jamie T (not verified) on October 2, 2009 - 5:04am.

I tried looking at the demo site using android browser (believe it uses webkit same as iphone) and it renders the std drupal theme not an iphone based theme. Does the demo site check the user agent - if so may want to set it up for android phones as well?

yes it checks user agent

Submitted by Sumit Kataria on October 3, 2009 - 8:02am.

Yes http://iphone.sumitk.net detect user-agents and enable iWebkit theme only for iPhones/iTouch devices .... I need to test this theme for android devices before enabling for them.

Will keep this thread informed!