Blogs by date "May 2012"

Theming for the iPad

I have been working this week on updating some of my Exponent sites to take advantage of the mobile theming feature now available in Exponent 2. In a nutshell, the feature allows you to define a separate index.php file that will be viewed by clients using mobile browsers. You can also use specific CSS code to adjust the appearance of your page to better suit the browsing of small screen mobile devices.

Enter the iPad. With a maximum screen width of 1024 px you have a screen size equivalent to most laptop screens but with the handicap that dropdown menus (Such as the YUI Top Menu) do not work in the safari browser on the iPad.

Now if you talk to other web designers you will find many who advocate that dropdown menus are a poor way to provide efficient navigation to your users and the fact that they do not work on the iPad calls for a solution.

In my early testing, I made changes in  /themename/mobile/index.php  and was not able to see them  on my iPad. I later found that the iPad was not included in the array that is used to identify browsers in expTheme.php  (fixed for 2.0.7) Once past this hurdle it was not too hard to provide specific code to replace the dropdown menus with a tabbed interface.

That same page has dropdown menus when viewed with a regular PC.

The code in the template for the above tabbed interface contains two embedded navigator modules, each in their own div.

<div id="nav">
<?php expTheme::module(array("module"=>"navigation","view"=>"Tab Nav","source"=>"@top")); ?>

<div id="top-sub-nav">    
<?php expTheme::module(array("module"=>"navigation","view"=>"children-only-top-nav","source"=>"@top")); ?>

Included in the CSS directory is a stylesheet for mobile devices.

iPad.css contains some CSS3 specific code which recognizes the iPad and displays css which will work on its 1024 pixel wide screen.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
/* Navigation */
#top-sub-nav .navigationmodule.children-only-top-nav ul li a:link {
text-decoration:none; }

​The CSS above is just an example, obviously there is a whole lot more code needed to display the tabs but you get the idea. The CSS declarations are all wrapped in curly braces and the @media screen and max-device-width designations make this css specific to the iPad.

I have not done a lot of testing with other mobile devices (iPod Touch, iPhone or Droid) but for my purposes where my school sites are increasingly being visited by iPads, I think this will be a workable solution.

You can read a bit more about Mobile theming in this exponent docs site article.