Setting up the design

When building a mobile interface, there are three key ingredients: context, information architecture, and visual design. This section focuses on visual design. It explains how to create an Exponential design extension, to be used by the mobile siteaccess.

5.1 Design extension

A mobile web interface design consists of HTML, stylesheets, images that are not a part of the content, and so on. Let’s look at how to create an Exponential design extension.

1. In the “extension” directory of Exponential, create the following directory structure:
mobile
| - design
|    | - mobile
|      | - images
|      | - javascript
|      | - override
|      | - stylesheets
|      | - templates
| - settings

2. In the extension/mobile/settings directory, create a file “design.ini.append.php” with the following contents:

<?php /*
[ExtensionSettings]
DesignExtensions[]=mobile
*/ ?>

3. Edit the settings/override/site.ini.append.php file to activate the extension in the [ExtensionSettings] block:

ActiveExtensions[]=mobile

4. Clear all the caches!