Possible approach to create a mobile microsite with STK

Create a mobile site definition

The purpose of a site definition is to assign templates, theme and domains to a site. Copy an existing site definition such as the German language demo-project-de as a basis and create a new mobile site definition. Use Magnolia's extends feature to inherit configuration from parent site definitions so you only need define mobile device specific exceptions. This saves time and effort.

Create a mobile domain

In the site definition, assign a mobile domain name such as m.demo-project.com. This is the address that mobile visitors use to access the site. They will be served the same content as desktop visitors but with a different layout and look.

Disable page elements that don't work well on a small screen

In a typical website, header and primary navigation dominate the top of the screen while the sides are occupied by vertical navigation and related content. The focal point of the page is usually in the middle. When designing a mobile layout, focus on what is in the middle of the page. What content occupies the most valuable real estate when you view the site with a desktop browser? On a news site it is typically the story. When migrating a desktop site to a mobile site, start from the center and expand outwards. The further away you get, the less important the content.

Disable vertical and meta navigation in the site definition. Leave a very basic horizontal navigation at the top that consists of three items. Disable also the extras, promos and base areas. It is OK to go "overboard" with disabling at this stage in order to arrive at a very minimal layout. You can make it richer later.

At this point you can start testing the site with a narrow desktop browser window or a mobile emulator. You can see what effect disabling the page elements has on the layout.

Create a custom theme

Extend the existing pop theme. In the theme, define a mobile style sheet. Start by targeting a single device class such as devices with a maximum screen width of 480 px. Apple iPhone belongs to this class. With a CSS media query you can apply the style sheet to the site when a visitor with a matching device requests content.

Edit imaging variations

Define STK Imaging variations for images. Variations are rules that control the size of images displayed on the site. Magnolia CMS generates the images on-the-fly. For a mobile device, limit image size to smaller than the screen width.

Navigation

Decide how a mobile visitor will navigate the site....

  • No labels