Ektron
Ektron's Mobile-Driven Web Experience
Web traffic from mobile devices is accelerating. Making your website available to mobile users is not enough. Your website must deliver the same, consistent level of experience to your mobile visitors as you do for those who visit your website on their desktop to ensure that your consumers are accessing information, products, and services from your website.
Mobile applications require different, more compact navigational aids, and content must fit into a smaller footprint. Mobile websites 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.
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. See Developing Wireframe Templates for information about creating PageBuilder wireframethe architecture of a Web page containing columns, dropzones, and layout information. templates.
You should use the same dropzonean area on a Web page where you can drag and drop a widget. 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.
<add key="ek_EnableDeviceDetection" value="true">
account.pb.smartphone.aspx
.Now, if a mobile device user accesses a page which uses that template, the mobile-enhanced template displays the content.
You can preview content in mobile template to ensure the content fits within the screen resolution.
You can set up Smart Forman Ektron-defined Web page that contains XML (hidden from the end user) to display content, and receive, verify, and save user input. 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.
You can 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: Reordering a Device Configuration
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:
The following example shows that Android and iPhone mobile devices have browsed pages. You can create templates and device configurations to improve the experience of these visitors.
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
- You are a member of the Administrators group
- Device detection is enabled See Also: Ektron's Mobile-Driven Web Experience
To add a device configuration by selecting an operating system:
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.
NOTE: You cannot edit the Generic and Generic Mobile configurations.
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.
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:
Prerequisite
To enable Adaptive Image Resizing settings, set ek_EnableDeviceDetection to True in
siteroot/web.config
.<add key="ek_EnableDeviceDetection" value="true" />
Two criteria determine which images get resized. Images must meet both criteria to be eligible for resizing.
siteroot/web.config
file and update the ImageSizeThresholdKB
value.
<AdaptiveImageProcessorConfig ImageSizeThresholdKB="80"
Level1CacheSize="5000" Level2CacheSize="500"
Level2CacheItemThresholdKB="256" EnableL2Caching="true"
DirectAccessQueryString="targetTypeID">
siteroot/web.config
file and find the following section. The tilde character (~) represents your site root folder: ~/
.<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>
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 only need to specify parent folders to include child folders.
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 images that exceed a device's resolution (as defined in the Device Configurations screen). See Also: Ektron's Mobile-Driven Web Experience . The image gets 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 gets resized to the next larger one.
For example, if a site visitor uses an iPhone (pixel resolution 320 x 480) and encounters an 706 x 534 image, Ektron resizes it to 320 x 242. If another visitor uses a Samsung Galaxy S (pixel resolution 480 x 800), the visitor sees the full image because the image (706 x 534) is smaller than the next larger breakpoint (1024 x 768); no resizing occurs.
In this example, you may need to identify a new breakpoint (say, between 320 and 1024) to accommodate other devices.
IMPORTANT: Review your site analytics to gain an understanding of the devices that are being used to view your site. To create a third ImageResConfig
element to support Samsung Galaxy S. Modify the <ImageResConfigs>
tags as shown in the following example.
<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 want to accommodate mobile devices.
After you enable device detection in web.config
, as new images are added to specified Ektron folders, Ektron automatically creates versions of the image in specified sizes (described in Setting Image Resolutions).
<add key="ek_EnableDeviceDetection" value="true" />
A new image filename consists of ImageResConfig TypeID_original file name.extension
. For example, if the original image filename is mytest.png
, and it is resized to specifications set in the LowRes ImageResConfig
element, the new filename is LowRes_mytest.png
.
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 creates resized image versions in the same folder as the original image.
If you later view the image on any device with the same resolution range, the saved version is displayed. This practice enhances the performance of your mobile website. However, creating 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.
Use caching to avoid expensive query storage.
Prerequisites
- You can edit
siteroot/web.config
on your Ektron server.- In
siteroot/web.config
, set ek_EnableDeviceDetection to true.
To minimize the demand on your Ektron server, the Adaptive Image Resizing feature uses 2 caching strategies.
web.config
setting. <AdaptiveImageProcessorConfig
ImageSizeThresholdKB="80"
Level1CacheSize="5000".....
Best Practice
The
Level1CacheSize
should approximate the number of image files in the included folders.
Level2CacheItemThresholdKB
.Level2CacheSize.
EnableL2Caching.
<AdaptiveImageProcessorConfig ImageSizeThresholdKB="80" Level1CacheSize="5000" Level2CacheSize="500" Level2CacheItemThresholdKB="256" EnableL2Caching="true"
Adaptive Image Resizing caching works as follows:
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.
Prerequisite
You must have 1 or more
<ImageResConfig>
tags within the<ImageResConfigs>
tag inweb.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. Unlike other Adaptive Image features, direct access mode does not consider the user's device, and ignores the value set by the ek_EnableDeviceDetection
setting in web.config
.
To apply direct access mode to an image (for example, so that the image displays in a maximum resolution of 320 x 480), use the following syntax:
<img src="uploadedimages/testfile.jpg?targetTypeID=LowRes"/>
The targetTypeID
refers to an <ImageResConfig>
tag with TypeID=LowRes
.
<ImageResConfigs>
<ImageResConfig TypeID="LowRes" MaxWidth="320" MaxHeight="480" />
<ImageResConfig TypeID="MedRes" MaxWidth="1024" MaxHeight="768" />
</ImageResConfigs>
You can change the targetTypeID
name. For example, to change the direct access mode query string parameter from targetTypeID
to DirectAccessTarget
, modify the AdaptiveImageProcessorConfig
tag in web.config
as follows.
<AdaptiveImageProcessorConfig
ImageSizeThresholdKB="80"
Level1CacheSize="5000"
Level2CacheSize="500"
Level2CacheItemThresholdKB="256"
EnableL2Caching="true"
DirectAccessQueryString="DirectAccessTarget">
After you change the parameter, your syntax is as follows:
<img src="uploadedimages/testfile.jpg?DirectAccessTarget=LowRes"/>
If your site visitor is on a mobile device, the geographic location of your site visitor becomes very important information. For example, if a mobile visitor is accessing your site, you can display nearby stores and special promotions. To create a geographically aware Web experience with Ektron, follow these steps.
[siteroot]/workarea/template/map/map.ekml
.To learn more about using geolocation, see the Map server control and Using the Map Server Control.
After finishing the previous steps, use your mobile device (if it has GPS capability) to browse to the template that contains the map; it shows your location at the center of the map. For other mobile devices, the center of the map is the Latitude and Longitude coordinates set by 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.
NOTE: The commercial license between Ektron Inc. and ScientiaMobile, Inc., the owner of WURFL, expired on April 3rd, 2016. You have the following options:
When a device requests information from a Web server, HTTP headers are passed to the server along with the image URL. The HTTP headers contain information that identifies the type of device that is doing the request. Because new mobile devices are being created every day, it is important for your website to detect these devices when they are available and present the appropriate experience to visitors who use these devices when they visit your site.
Each time a user clicks on the View All Device Groups folder, Ektron determines whether more recent device information is available.