Ektron 8.6.1

Ektron's Mobile-Driven Web Experience

Web traffic from mobile devices is accelerating. Making your Web site available to mobile users is not enough. Your Web site must deliver the same, consistent level of experience to your mobile visitors as you do for those who visit your Web site on their desktop to ensure that your consumers are accessing information, products, and services from your Web site.

Mobile applications require different, more compact navigational aids, and content must fit into a smaller footprint. Mobile Web sites need "tap to call" options to take advantage of cellular technology, a robust search, flexible menus, and quick access to content. Tables and figures may need to be adjusted or reconfigured to avoid unnecessary "pinching" and scrolling.

Web Site Models

When you consider creating a mobile-driven Web experience, you can adopt 1 of the following models. With Ektron, you can use responsive and adaptive Web design to deliver a Web experience on a hand-held device.

Single-site model

Benefits:

  • A responsive Web design detects the browser size and arranges the content based on that size.
  • An adaptive Web design detects the device and arranges content based on style sheets for specific devices, device types, or dimensions of the browser window.
  • You can maintain your consistency of brand and message more easily.

Considerations:

  • The limited display of the mobile experience forces you to communicate information with less room. You must evaluate your content to determine whether content is relevant or suitable for each type of display.

Multi-site model

Benefits:

  • Perhaps you have an existing Web site that you do not want to redesign. This model separates the content into a site architecture for desktop computers and a site architecture for mobile devices.
  • It lets you target your content specifically for mobile devices, avoiding the complexity of developing device-conditional style sheets and manipulating existing content.

Considerations:

  • You will maintain 2 sites and ensure that they are synchronized (where applicable).
  • Having 2 sites can impact your SEO ranking negatively if content is found on both sites.
  • You have to set up device recognition so that mobile device requests for your Web site are routed to your mobile (m-dot) site instead.
Using mobile templates

Using Mobile Templates

A template is a customized Web page format comprised of objects such as content blocks, list controls, menus, rotating banners, a search object, and videos. How you assemble the objects affects the user experience. Because of the smaller display size, templates for mobile devices may have a single column to eliminate horizontal scrolling, pinching, and zooming. You decide what is practical for each device by creating different templates instead of creating different content. Objects may have to be omitted or replaced with mobile-friendly objects. The following image shows PageBuilder templates for desktop and mobile devices. Note that the mobile template does not include content object 3.

You should use the same dropzone IDs for both the mobile and desktop templates. Content does not display if a mobile template contains a dropzone ID that the corresponding desktop template does not have.

Ektron can detect specific characteristics of a mobile device, such as the differences between the Android Droid X and Droid 2. These characteristics help you determine how to render the user experience. For example, one device may support Flash technology and another may not.

In any case, you want to ensure that your content on a mobile device is elastic, meaning that it can scale to the various sizes of displays. Use percentages instead of hard-coded pixel sizes for the mobile template. If you set PageBuilder dropzone width to 100%, the normal flow of the objects in the mobile browser cause them to stack from the top to the bottom.

Setting up a mobile template

Setting Up a Mobile Template

  1. In the site root/web.config file, set ek_EnableDeviceDetection to True.

    <add key="ek_EnableDeviceDetection" value="true">

  2. Identify a template for which you want to create a mobile version, using the Workarea > Settings > Configuration > Template Configuration screen. Click any template to see its folder location relative to your site root.

  3. Open Windows Explorer and locate that template in the site root folder.
  4. Copy and save a mobile version of the template under a suitable name, for example, account.pb.smartphone.aspx.
  5. Adapt the template for mobile use by changing column styles, removing unwanted navigation, images, headers, footers, adding components that help mobile users, and so on.
  6. Create device configurations. Assign to each one any mobile devices that use the template you created. See Also: Grouping Devices.
  7. Return to the Template Configuration screen and click the template you identified in Step 2.
  8. Check every mobile Device Configuration for which you created a mobile template version. Then, for every checked configuration, click the ellipsis button ( ) to its right, navigate to and select the mobile template you created in Step 6.

    Now, if a mobile device user accesses a page which uses that template, the mobile-enhanced template displays the content.

  9. To test mobile templates, preview your content within them. See Previewing Content in a Mobile Device Template.
  10. Ektron uses the Wireless Universal Resource File (WURFL) file to obtain wireless device information. To learn how to view, update, and customize this file, see Ektron's Mobile-Driven Web Experience.
  11. To conditionalize Smart Form content based on user device, see Specifying Device-Specific Content with Smart Forms.
  12. To use a mobile site visitor's geographic location to deliver relevant content, see Using Geomapping Features with a Mobile Device.
Grouping devices

Grouping Devices

You can create a device group to accommodate a variety of mobile devices by grouping characteristics, such as display size. You can group devices for standard presentation and add refinements for specific devices. For example, a device configuration may consist of a Smart Phones group (Apple iPhone®, Samsung Galaxy Note™ II, Motorola® Droid RAZR MAXX HD, and so on) and a Tablets group (Apple iPad®, Google Nexus™ 10, Microsoft® Surface™, and so on).

With Ektron, you can group devices by model or operating system.

Grouping by model gives you more control over specifications, but it is quicker to group by operating system. You may want to first group by operating system, then only define models that do not work properly under an operating system configuration.

IMPORTANT: Because a device may be covered by several configurations, use the Reorder button to determine the order in which devices are checked. See Also: Ektron's Mobile-Driven Web Experience

To determine which mobile devices to add to your device configurations, review your Analytics reporting to see which mobile devices are browsing your site. To see the Browser and OS report:

  1. In the Workarea, select Reports > Traffic Analytics > Visitors > Browser Capabilities > Browsers and OS.
  2. Modify the time period and rank if needed. For more information, see Viewing Analytics Data.

The example shows that Android and iPhone mobile devices have browsed pages. Create templates and device configurations to improve the experience of these visitors.

Adding a device configuration by selecting operating system

Adding a Device Configuration by Selecting Operating System

Each mobile device's definition includes an operating system. To reduce effort, you can create configurations by choosing one or more operating systems. When you do, each device using that OS is automatically included in the list. For example, you create a device configuration for all Android phones.

While defining a mobile device, you decide if the configuration applies to handheld devices, tablets, or both device types. You also specify a resolution (width and height). So, if two devices share an operating system but have different resolutions, create a separate configuration for each one.

Prerequisites

To add a device configuration by selecting an operating system:

  1. Workarea > Settings > Configuration > Device Configurations.
  2. Click Add Device Configuration (by OS).
  3. In the Device Configuration field, enter a name for the configuration.
  4. Click Add OS.
  5. Select one or more operating systems for this configuration.
  6. At the Device Type field, choose whether the configuration applies to handheld devices, tablets, or both device types.
  7. Set the Width and Height of the device display in pixels.

  8. Click Save Device Configuration.
Adding a device configuration by selecting models

Adding a Device Configuration by Selecting Models

When adding individual devices to a configuration, group devices that share characteristics, such as Flash support and screen resolution. Since you will assign the configuration to a mobile template, make sure that all devices support the template's functionality.

  1. Workarea > Settings > Configuration > Device Configurations.
  2. Click Add Device Configuration.
  3. In the Device Configuration field, enter a name for this configuration.
  4. Click Add Model. The Selecting an existing model screen appears.

    1. Type a model in the field and click Search.
    2. Click on the model you want to add. Repeat this step for as many models that you want to add.
  5. Set the Width and Height of the device display in pixels.

  6. Click Save Device Configuration.
Editing a device configuration

Editing a Device Configuration

  1. Workarea > Settings > Configuration > Device Configurations.
  2. Click the configuration that you want to edit.

    NOTE: You cannot edit the Generic and Generic Mobile configurations.

  3. Note that the second line of the display indicates if the configuration was determined by operating system or model. You can only add or remove models or operating systems, depending on that setting.

  4. Click Edit Device Configuration. The Update Device Configuration screen appears.

  5. To remove any model or operating system from this configuration, click X to the left of its name.
  6. Update the other fields on the screen as needed. For information on the fields, see Setting Up a Mobile Template.
  7. Click Save Device Configuration.
Deleting a device configuration

Deleting a Device Configuration

NOTE: You cannot delete the Generic and Generic Mobile configurations.

  1. Workarea > Settings > Configuration > Device Configurations.
  2. Click Delete ().
  3. Check the box next to configurations you want to delete.
  4. Click Delete ().
Reordering a device configuration

Reordering a Device Configuration

You can determine the first acceptable configuration that a device will use. To accomplish this, change the order of the device configurations.

For example, you configured an iPad in the AppleDevices and the Tablet Devices configurations. However, because AppleDevices is set for a small resolution, you want an iPad to use the Tablet Devices configuration (which has a larger screen). Reorder the devices so that Tablet Devices appears above AppleDevices.

  1. Workarea > Settings > Configuration > Device Configurations.
  2. Click Reorder Device Configurations ().
  3. Click a configuration you want to move.

  4. Click Up/Down () to arrange the list to the desired order.
  5. Click Update Device Order.
Applying adaptive image resizing

Applying Adaptive Image Resizing

Adaptive Image Resizing resizes images and helps you implement a caching strategy to enhance a user's mobile experience on your site. It includes the following features:

  • A caching strategy to enhance performance
  • Criteria to determine which images get resized
  • A user-defined set of resolutions—Ektron renders the image in a device-appropriate resolution
  • A direct access mode that lets a developer set an image to a predefined resolution

All settings are configured in your siteroot/web.config file.

Prerequisite

Edit the siteroot/web.config file on your Ektron server and set ek_EnableDeviceDetection to True.

Determining which images get resized

Determining Which Images Get Resized

Two criteria determine which images get resized. Images must meet both criteria to be eligible for resizing.

  • Minimum File Size—You can specify a minimum file size in KB—smaller files are not resized. The default minimum is 80 KB. To modify it, open the siteroot/web.config file and update the ImageSizeThresholdKB value.
    <<AdaptiveImageProcessorConfig ImageSizeThresholdKB="80"
  • Folders—Only images in specified folders and their subfolders can be resized. To do so, open the siteroot/web.config file and find the following section.
    <IncludePathList>
  <!--Files in the specified path WILL be processed by resizer. 
    The Include Path includes ALL sub-directories of the specified path--> |
  <IncludePath Path="~/uploadedimages" /> 
  <IncludePath Path="~/assets" />
</IncludePathList>

    The tilde character represents your site root folder: ~/.

    To include a folder, enter an IncludePath tag. For its Path property, enter the folder path within your site root folder (as shown in the examples). You do not need to specify child folders if a parent folder is listed.

Setting image resolutions

Setting Image Resolutions

By default, web.config contains the following adaptive image resolutions:

<ImageResConfigs>
  <ImageResConfig TypeID="LowRes" MaxWidth="320" MaxHeight="480" />
  <ImageResConfig TypeID="MedRes" MaxWidth="1024" MaxHeight="768" />
</ImageResConfigs>

Ektron uses these settings to reduce Web page images that exceed a device's resolution (as listed the Device Configurations screen). See Also: Setting Up a Mobile Template. The image is resized to the resolution of the user's device if the resolution is listed within the <ImageResConfigs> tags. If the device's resolution is not listed, the image is resized to the next larger one.

For example, a site visitor uses an IPhone (resolution 320 x 480) and encounters an image 706 pixels width by 534 pixels height. Ektron resizes it to 320 x 242. If another visitor uses a Samsung Galaxy S (resolution 480 x 800), he sees the full image because the next larger resolution in the <ImageResConfigs> tags (1024 x 768) exceeds the image's size. In this case, no resizing occurs but a shadow copy of the image is created for MedRes bucket.

You could create a third ImageResConfig element to support Samsung Galaxy S. Modify the <ImageResConfigs> tags as shown in red below.

<ImageResConfigs>
	<ImageResConfig TypeID="LowRes" MaxWidth="320" MaxHeight="480" />
       <ImageResConfig TypeID="SGalaxySRes" MaxWidth="480" MaxHeight="800" />
	<ImageResConfig TypeID="MedRes" MaxWidth="1024" MaxHeight="768" />
</ImageResConfigs>

After you make this change, on a Samsung Galaxy S, the 706 x 534 image is rendered as 480 x 363. You can insert as many ImageResConfig elements as you wish to accommodate mobile devices.

Creating image copies in the specified resolution

Creating Image Copies in the Specified Resolution

Once device detection is enabled, as new images are added to specified Ektron folders, additional versions are automatically created in sizes described in Setting Image Resolutions.

If a mobile visitor views an image that was in Ektron before device detection was turned on, the image may be resized at that time. Ektron saves any resized versions in the same folder as the original image.

If the image is later viewed on any device with the same resolution range, the saved version is displayed. This practice enhances the performance of your mobile Web site. The creation of additional image versions also increases the number of files and storage space needed.

Best Practice

When planning an implementation of Adaptive Image Resizing, consider your future space requirements.

Naming pattern for resized images

Naming Pattern for Resized Images

The new image's name consists of ImageResConfig TypeID_original file name.extension. For example, if the image's name is mytest.png, and it is resized to specifications set in the LowRes ImageResConfig element, the new file name is LowRes_mytest.png.

Adaptive image caching

Adaptive Image Caching

Use caching to avoid query storage, since that is an expensive operation.

Prerequisites

  • You can edit the siteroot/web.config file on your Ektron server.
  • In the site root/web.config file, set ek_EnableDeviceDetection to True.

To minimize the demand on your Ektron server, the Adaptive Image Resizing feature uses 2 caching strategies, known as Level 1 and Level 2.

  • Level 1 caching stores only a file name, file size, and resolution. You determine the number of items that may be stored in Level 1 cache in the following web.config setting. 
    <AdaptiveImageProcessorConfig 
  ImageSizeThresholdKB="80" 
  Level1CacheSize="5000".....

    Best Practice

    The Level1CacheSize should approximate the number of image files in the included folders.

  • Level 2 caching stores the file's content as a byte array. A resized file is only saved to level2 cache if the resized file size is less than Level2CacheItemThresholdKB.
    • You determine the number of items that may be stored in Level 2 cache in the following web.config setting.
      <AdaptiveImageProcessorConfig 
  ImageSizeThresholdKB="80" 
  Level1CacheSize="5000" 
        Level2CacheSize="500" ...
    • You may enable or disable Level 2 caching in the following web.config setting.
      <AdaptiveImageProcessorConfig 
  ImageSizeThresholdKB="80" 
  Level1CacheSize="5000" 
  Level2CacheSize="500" 
  Level2CacheItemThresholdKB="256" 
  EnableL2Caching="true"

Adaptive Image Resizing caching works as follows:

  1. A user on a mobile device accesses an Ektron Web page that uses Adaptive Image Resizing.
  2. For every image file request, Ektron looks for it in Level 1 cache to determine if the image size exceeds the threshold.
    • If the cached item is found, the cached file information is used.
    • If the cached item is not found, Ektron queries the storage device for the file information and caches it.
  3. For every qualified image request, if level 2 caching is enabled, Ektron looks in level 2 cache for the target file. If the file is found, the cached byte array is sent to the user's device. If the file is not found, Ektron sends the image from storage and caches the byte array (if the size does not exceed the defined limits).

    Best Practice

    Use the following formula to calculate memory usage for level 2 caching:

    total memory used = Level2CacheItemThresholdKB * Level2CacheSize

    For example: 256KB*500=128000KB=128MB of maximum memory used by Level 2 caching.

Clearing cache

Clearing Cache

To clear both Level 1 and Level 2 cache, use the Clear Cache button in the Workarea > Settings > Configuration > Device Configurations screen.

Direct access mode

Direct Access Mode

Prerequisite

You must have 1 or more <ImageResConfig> tags within the <ImageResConfigs> tag in web.config.

Direct access mode lets you resize an image to any resolution set in the <ImageResConfigs> tags in web.config. See Also: Setting Image Resolutions. To apply direct access mode to an image, use the following syntax:

<img src="uploadedimages/testfile.jpg?targetTypeID=LowRes"/>

This syntax displays an image in the resolution specified in the img src property's targetTypeID query string parameter (shown in red in the previous code sample). targetTypeID refers to an <ImageResConfig> tag. In the example, targetTypeID refers to the LowRes tag (shown in red in the following code sample).

<ImageResConfigs>
  <ImageResConfig TypeID="LowRes" MaxWidth="320" MaxHeight="480" />         
  <ImageResConfig TypeID="MedRes" MaxWidth="1024" MaxHeight="768" />
</ImageResConfigs>

To finish this example, the image would display in a maximum resolution of 320 x 480.

Unlike other Adaptive Image features, direct access mode does not consider the user's device. So, it ignores the value set by the ek_EnableDeviceDetection setting in web.config.

Changing the query string parameter name

Changing the Query String Parameter Name

You can change the name of the direct access mode query string parameter using the DirectAccessQueryString property of AdaptiveImageProcessorConfig tag in web.config. By default, it is targetTypeID.

For example, to change the direct access mode query string parameter to DirectAccessTarget, modify the AdaptiveImageProcessorConfig tag as shown.

<AdaptiveImageProcessorConfig 
  ImageSizeThresholdKB="80" 
  Level1CacheSize="5000" 
  Level2CacheSize="500" 
  Level2CacheItemThresholdKB="256" 
  EnableL2Caching="true" 
  DirectAccessQueryString="DirectAccessTarget">
Using geomapping features with a mobile device

Using Geomapping Features with a Mobile Device

Mobile browsing makes the geographic location of a site visitor very important information. For example, if a mobile visitor is accessing your site, you can show nearby stores and special promotions. Creating the mobile experience in Ektron takes 2 steps.

Step 1: Create content with geolocation metadata

Step 1: Create Content with Geolocation Metadata

Ektron content can have MapLatitude and MapLongitude metadata. This metadata is automatically added when you publish content with a street and city address in the MapAddress field. To learn more about this, see Server Control Reference.

The following image shows the MapLatitude and MapLongitude metadata.

Step 2: Create a mobile template with the Map server control

Step 2: Create a Mobile Template with the Map Server Control

Because of the size of a mobile device, you may decide to rearrange the content list, map image, and search components provided by the Map server control. To do this, change the standard map EkML file. See Controlling Output with Ektron Markup Language and the sample file [siteroot]/workarea/template/map/map.ekml.

To complete this step, place the Map Server control on a mobile device template. See Map Properties and Setting Up a Mobile Template for more information.

Showing maps and near-by locations

Showing Maps and Near-by Locations

After finishing the previous steps, you can browse to the template that contains the map on a mobile device. If your Smart Phone has GPS capability, it shows your location at the center of the map. For all other mobile devices, the center of the map is the Latitude and Longitude coordinates set on the Map server control.

Content locations appear as map pins, and the content list is sorted by distance from the current location (with GPS) or map center.


Specifying device-specific content with Smart Forms

Specifying Device-Specific Content with Smart Forms

You can set up Smart Form configurations to recognize a user's device and, based on that information, display appropriate content. For example, if a user is not using a Smart Phone, show a complex display with rich graphics. If a user is using a Smart Phone, create a simpler presentation of the same fields without graphics. To learn about this capability, see Inserting a Conditional Section.

You can also designate some or all of an HTML form's postback message to be conditional upon a user's device. So, for example, the postback message for Smart Phone users can be much shorter than the message for users who are not using a mobile device. To learn more about this, see Specifying Conditional Text in the Postback Message.

Previewing content in a mobile device template

Previewing Content in a Mobile Device Template

There are 2 ways to preview mobile content in any mobile device template to ensure the content fits within the screen resolution.

From within the Ektron editor

Previewing Mobile Content within the Editor

  1. Edit content in the editor.
  2. Click Preview (). The Preview dialog appears.

  3. Select a model from the Device Configuration drop-down and click Preview. The content displays in the selected template.
From a PageBuilder page

Previewing Mobile Content from a PageBuilder Page

  1. Log into your Ektron Web site.
  2. Navigate to PageBuilder page that you want to view as a mobile device user would.
  3. From the PageBuilder menu, click View > iPhone, iPad or Droid.

  4. The page redisplays, simulating the selected device.

Updating the wireless universal resource file (WURFL)

Updating the Wireless Universal Resource File

Because new mobile devices are being created every day, it is important for your Web site to detect these devices when they are available and present the appropriate experience to visitors who use these devices when they visit your site.

  1. Go to Workarea > Settings Configuration > Device Configurations.
  2. Click WURFL File Manager. The WURFL File Manager screen appears.

  3. Click Update File.
Additional mobile information

Additional Mobile Information

See also these Web pages.