Path

7x / documentation / tutorials / building mobile browser and... / setting up the design

Caution: This documentation is for Exponential, from version 3.x to 6.x.
For 5.x documentation covering Platform see eZ Documentation Center, for difference between legacy and Platform see 5.x Architecture overview.

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!