Build iPhone Compatible Drupal Websites Using iWebkit: Part 1

Sumit Kataria
Sumit Kataria

on

September 1, 2009

Build iPhone Compatible Drupal Websites Using iWebkit: Part 1

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
AttachmentSize
iphone.zip_.txt182.91 KB

Share it!

I am a php programmer.....

 

I am NOT using drupal, How can i make iphone compatible website....

 

Site is alredy existing one, i just want to make it iphone compatible, some thing similar to images shown in this link.

http://civicactions.com/blog/2009/sep/01/build_iphone_compatible_drupal_...

No statement was super, thank you. Oyun

 Okey | Tavla | Hava durumu | Sinema | Video |

Hey guys! Good work! Thats exactly what I've been looking for! Greetings from Germany,

Thomas Sabo

Super Job on this... Can't wait to dig into more...

 

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  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!

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

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

Please do!

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

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

Hi Bevan,

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

SO happy to hear this. Love it