One of our clients has a large world-wide user base, in many locations where Internet access is limited. In addition to developing for mobile browsers, they also wanted a “low bandwidth” version of the site, optimized for older computers and dial-up connections. Using a handy module and some theming tricks, this was very easy to implement in Drupal.

Setting Up Your Theme

Thanks to Drupal’s ability to make sub-themes, your low-fi theme can be based off your original theme, which saves lots of development time. Our base theme was built in Zen, but the idea applies to any theme.

To make a sub-theme, copy your original theme folder (or sub-theme folder, you can nest themes indefinitely) to a new folder, and rename it to reflect it’s a low-fi theme. It does not have to be inside your base theme folder, it can be anywhere in your themes directory. For this example, lets say our theme is called worldtheme, and we renamed it to worldthemelow.

Now go into the worldthemelow folder and make the following changes:

  1. Rename the .info file to match the new theme name. In this case, worldthemelow.info
  2. Open worldthemelow.info and change the name and base theme values. For example:
    name = World Theme Low Bandwidth
    base theme = worldtheme
  3. Open template.php and rename any hooks to their new theme name. So if you had worldtheme_preprocess_page, change it to worldthemelow_preprocess_page. However, if these hooks will operate exactly like the base theme, you can remove them entirely, as the sub-theme will use the base theme hooks instead.

Now you can go to admin/build/themes and enable your low-fi theme.

Configuring Your Theme Files

At this point, your low bandwidth theme is just a copy of the original. Before we dive into making actual code changes, we want to trim down on the files we’re using. The advantage of using a sub-theme is that you don’t have to duplicate all your original theming work, and any changes made to the original theme will propagate into the sub-theme. You can edit your .tpl.php files to exclude images, Flash, and other high-bandwidth elements, and remove any .tpl.php files you don’t need to change.

However, this doesn’t work exactly how we want with CSS. If my base theme has a css file pages.css with my page styles, and my sub-theme also has pages.css, the sub-theme will only use its own stylesheet. This means that any changes made to the base theme’s CSS will also have to be done on the sub-theme, which isn’t efficient development.

Instead of copying all the CSS files from the base theme, we copy only the ones we need and rename them. So instead of pages.css, call it pages-low.css and update your theme’s .info file to use these new -low stylesheets. Now you can remove all the old CSS, and only add in the changes you want to make, while the base theme loads the original CSS from pages.css.

While it might seem counterproductive to be adding more CSS to a low-fi theme, with CSS aggregation and browser caching, the impact is negligible. Plus, you save development time by not having to implement all CSS changes across multiple stylesheets.

Implementing The Theme

Now that our theme is set, we need a way for users to activate it. This can be done by enabling the select different theme permission in admin/user/permissions, which provides an option in a user’s profile. However, our client wanted an actual link on the site that let people switch with a single click, regardless if they had an account.

I started first with the Switchtheme module but it only provides a block. To create a link, I made custom hook_menu() calls to switch between the themes.

function mymodule_menu()

Here’s the function that does the actual switching, using the Switchtheme function switchtheme_switch_form_submit():

function gmdp_change_bandwidth_theme($new_theme = FALSE) 
    elseif (!$current_theme || $current_theme == 'worldtheme') 
 }

$form = array(‘values’ => array(‘theme’ => $new_theme));
switchtheme_switch_form_submit(”, $form);

$referer = $_SERVER

[“HTTP_REFERER”] ? $_SERVER[“HTTP_REFERER”] : ”;
drupal_goto($referer);
}

Now I needed to create a custom block that would display the proper link. I then put this block in my theme at the top of the page, where it’s easy to access before the entire page has to load.

function mymodule_block_low_bandwidth_link() {
  global $user;
  // Determine the user's current theme, for the low/high bandwidth link.
  $current_theme = isset($_SESSION['custom_theme']) ? 
    $_SESSION['custom_theme'] : $user->theme;
  if ($current_theme == 'globalmdpthemelow') {
     $link = l('High Bandwidth', 'high-bandwidth');
  }
  else {
     $link = l('Low Bandwidth', 'low-bandwidth');
  }
  $block['subject'] = '';
  $block['content'] = $link;
  return $block;
}

General Tips

  • The easiest tip to making a theme low-fi is to remove all background images and replace them with solid colors. Changing images with gradients to solid colors also helps.
  • Do NOT use “display: none” or “visbility: hidden” to hide images. While they won’t display, the browser will still load them, so you don’t save on any bandwidth.
  • If your site is fixed-width, make your low bandwidth theme a fluid width. If users have slow connections, they probably have older computers with smaller or unusual resolutions.
  • When you first switch to your low-fi theme, you might notice that block titles are appearing, even if they were set to in the base theme. This is easily fixed by re-submitted the block settings for each block in admin/build/blocks in your new theme.
  • If your site uses Panels, you can set each pane’s visibility based on theme. Use this to to hide any large-bandwidth elements, such as image carousels or Flash, in your low bandwidth theme.