Make a Drupal theme look better on the iPhone and the iPad

When I got my first iPhone two years back I adapted the theme here on xdeb.org to work better with it. I documented it in my post Make a Drupal theme look better on the iPhone.

During the holidays I got to try out the iPad for a few days and found ways to make the xdeb.org theme work better for it as well.

I have two simple goals for the iPhone and the iPad (and all other mobile devices):

  • Avoid the need to zoom in and scroll sideways, making the text readable directly.
  • Make the navigation and the search function touch friendly with larger buttons/fields and more spacing. Please visit xdeb.org with your iPhone and/or iPad and I think you will agree that it’s a marked improvement in usability. There is of course a lot more that can be done. My point is that you can get this nice improvement with such a small investment and I’m surprised that not more web sites does this.

I believe this works on all webkit mobile based browser so Android users etc. will benefit from it as well. If someone can test xdeb.org on an Android device and report back in an comment to this post or via the contact form I would be very glad.

To the xdeb.org theme I have added three CSS files and one meta header tag. The CSS files is “iphone.css”, “ipad_portrait.css” and “ipad_landscape.css”. The media attribut “max/min-device-width” in the link tag makes it possible to control which device loads the CSS-files. See example below.

<!-- Start iPhone/iPad stuff -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="<?php $base_path . $directory .'/iphone.css'; ?>" />
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)" href="<?php $base_path . $directory .'/ipad_portrait.css'; ?>" />
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)" href="<?php $base_path . $directory .'/ipad_landscape.css'; ?>" />
<meta name="viewport" content="width=device-width" />
<!-- End iPhone/iPad stuff -->

All three CSS files increase the size and spacing of the navigation links and the search field. The iPhone CSS file makes the layout single column. The iPad portrait CSS file makes the layout two column.

With the viewport meta tag set to “width=device-width” the browser is instructed to use the width of the device as the width of the viewport, instead of the default 980 pixels. The web page will then exactly fill the screen.

I did some testing with a Zen 2 STARTERKIT theme and come up with the example code below. For a production site it needs a lot of work but I think it’s a good start.

Put this in the info file of your Zen 2 subtheme.

stylesheets[only screen and (max-device-width: 480px)][] = css/iphone.css
stylesheets[only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)][] = css/ipad_portrait.css
stylesheets[only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)][] = css/ipad_landscape.css

Put this in “css/iphone.css”.

/* $Id: iphone.css,v 1.1 2011/01/15 08:58:05 frjo Exp $ */

#page {
  margin: 10px;
  font-size: 28px;
}

/*
* Content
*/
#content {
  float: none;
}

.sidebar-first #content .section {
  padding-left: 0;
}

.sidebar-second #content .section {
  padding-right: 0;
}

.two-sidebars #content .section {
  padding-left: 0;
  padding-right: 0;
}

/*
* Navigation
*/
#navigation {
  position: absolute;
  top: -170px;
  left: 0;
  float: none;
  margin-right: 0;
  height: 170px;
}

.with-navigation #content {
  margin-top: 170px;
}
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
  margin-top: 0;
}

#navigation li {
  margin: 0 30px 30px 0;
}

#navigation li a {
  display: block;
  font-size: 45px;
  padding: 10px;
  border: 1px solid #000;
  text-decoration: none;
}

/*
* First sidebar
*/
.region-sidebar-first {
  float: none;
  width: 100%;
  margin-right: 0;
}

.region-sidebar-first .section {
  margin: 0;
}

/*
* Second sidebar
*/
.region-sidebar-second {
  float: none;
  width: 100%;
  margin-left: 0;
}

.region-sidebar-second .section {
  margin: 0;
}

#search-box {
  margin: 20px 0;
}
#search-box input {
  font-size: 40px;
}

Put this in “css/ipad_portrait.css”.

/* $Id: ipad_portrait.css,v 1.1 2011/01/15 08:58:05 frjo Exp $ */

/*
* Content
*/
.sidebar-second #content .section {
  padding-right: 0;
}

.two-sidebars #content .section {
  padding-right: 0;
}

/*
* Navigation
*/
#navigation {
  height: 170px;
}

.with-navigation #content,
.with-navigation .region-sidebar-first {
  margin-top: 170px;
}
.with-navigation .region-sidebar-second {
  margin-top: 0;
}

#navigation li {
  margin: 0 30px 30px 0;
}

#navigation li a {
  display: block;
  font-size: 45px;
  padding: 10px;
  border: 1px solid #000;
  text-decoration: none;
}

/*
* Second sidebar
*/
.region-sidebar-second {
  float: none;
  margin-left: 0;
  clear: both;
}

.region-sidebar-second .section {
  margin: 0;
}

#search-box {
  margin: 20px 0;
}
#search-box input {
  font-size: 40px;
}

Put this in “css/ipad_landscape.css”.

/* $Id: ipad_landscape.css,v 1.1 2011/01/15 08:58:05 frjo Exp $ */

/*
* Navigation
*/
#navigation li {
  margin: 0 30px 30px 0;
}

#navigation li a {
  display: block;
  font-size: 45px;
  padding: 10px;
  border: 1px solid #000;
  text-decoration: none;
}

#search-box {
  margin: 20px 0;
}
#search-box input {
  font-size: 40px;
}

Comments

For android you can download the SDK from Google which includes a Android emulator. This makes testing very easy on you own PC!

Could this be achieved without the use of zen- I am familiar with browscap and Wurfl, but these are not yet implemented well in D7. I am currently using ninesixty and am familiar with drupal template files. I am also running mobile tools- but would like something a bit more lightweight.

This can be implemented on any theme, or more precisely on any web site, you like. Simply add the link tags to include the iPhone/iPad CSS files and then add any CSS you like to them.

The theme on xdeb.org is a custom built theme. In the example I use Zen 2 since that is what I build most customer sites with.

Thanks for the input. I will be playing around with this for days to come. Again thank you very much

Can you please check csswizardry.com website that discusses the best practices for iPHone? According to that, we need to avoid the reference to media attribute in link element and have all media specific css definitions in one css file.

can you please let me know your views?

He only mentions “…your main stylesheet does not have a media attribute”. This is true of any normal Drupal theme.

The only real difference is that he puts the iPhone CSS at the bottom of his main CSS file with a media type (@media screen…) and I have them in a separate file.

This site provides really great information about the drupal theme But does the Html works in other CMS i.e. Joomla, Word Press too

The technique of using media queries when linking in CSS files works on any system. The CSS will need to be adapted of course.

For android you can download the SDK from Google which includes a Android emulator. This makes testing very easy on you own PC!

I really feel great that I visited this site it contains lots of information and lots of codes that is really helpful to me. The best part is that all the codes are great and working
Thanks for these codes !!!!!!!!!!!!!!!!

Could this be achieved without the use of zen- I am familiar with browscap and Wurfl, but these are not yet implemented well in D7. I am currently using ninesixty and am familiar with drupal template files.

This can be implemented on any web site. It is in no way specific to Drupal or any theme.

Add the link tags pointing to the CSS files, the meta viewport tag. Then you add the CSS you need to make your site look good on an iPhone/iPad/etc.

Thanks Frjo that you replied me I would rather the fact and would keep in mind when I am using these codes
Thanks Again !!!!!!!!!!!!!!!!!!