When you evaluate your website, or where you want it to be, consider the following website strategies:

• Foundational—Educate your users about your purpose and products with little interactivity. Enable business users to publish content using content editing and management, approval chainA series of users or user groups who must approve content before it can be published.s, and publishing. Reduce site maintenance for IT and increase the number of visits to your website.
• Tactical—Facilitate content reuse, user-generated content, categorization, and page assembly. Create Smart Forms, taxonomies, online communities. Synchronize multiple sites. Develop pages, templates, surveys and polls, blogs, search, commenting and threaded discussions.
• Strategic—Embrace multi-channel delivery and support a richer customer experience with eCommerce, multi-channel, multi-site, multi-language, and video.
• Engagement—Continually analyze and customize the customer experience with personaa category of users who fit a targeted demographic, attitude, or behavior.s, create touch-centric interaction for mobile devices, integrate with marketing automation, use multivariate testing, geolocation, device orientation, and activity streams to target content for what is relevant and meaningful to your site visitor. Customer Relationship Management systems can personalize the Web experience to drive revenue, deliver better business results, increase your brand awareness, and create customer loyalty.

Separate Mobile Site Design

If you have an existing website that you do not want to redesign, you can separate the content into 2 site architectures: 1 for desktop computers and 1 for mobile devices. You can target your content specifically for mobile devices, avoiding the complexity of developing device-conditional style sheets and manipulating existing content.

However, you will have to maintain 2 sites and ensure that they are synchronized (where applicable). You have to set up device recognition so that mobile device requests for your website are routed to your mobile (m-dot) site instead.

Also, having 2 sites can impact your SEOSearch Engine Optimization - improving the visibility of search results ranking negatively if content is found on both sites.

Separate Mobile Template Design

Separate templates, optimized for mobile, get rendered whenever somebody visits your site from a mobile device. This approach lets you define a unique mobile experience, without affecting the desktop experience, and create a mobile experience without having to undergo a complete website redesign. Loading of pages is more streamlined when you use separate templates instead of the responsive design approach because only the mobile content gets retrieved from the server; responsive sites often have extra content that is then hidden by CSS rules based upon the current device.

However, you must maintain more than 1 set of templates (for mobile and desktop experiences). Also, the server must detect whether a visitor is using a mobile device before rendering a mobile template, so a list of devices must be kept up-to-date. Fortunately, Ektron is able to keep the device list up to date for you. See Updating the Wireless Universal Resource File.

Responsive Web Design

You should consider a Responsive Web Design (RWDResponsive web design moves and resizes content objects provides to provide an optimal viewing experience on any viewing device.) when you have a high degree of overlap between the site visitor experience and content on many devices.

Responsive design provides an optimal viewing experience for devices of any size by adapting the layout of your pages with CSS3 media queries. The elements on your pages (including any images) must use relative units (percentages or ems) for sizing instead of fixed dimensions (pixels). This enables your site to expand and contract to the viewing size of any device.

Responsive design has a single code base, where other approaches require the use of separate mobile-specific templates to display your pages to mobile devices. While you may identify which of your content is "canonical" in a Separate Mobile Site Design, the singular architecture and repository of a responsive design means that you have one authoritative source for SEOSearch Engine Optimization - improving the visibility of search results leading to higher rankings by search engines. (Multiple websites can dilute your ranking.) It also lets your site visitors use a consistent set of URLUniversal Resource Locators without the issue of directing to the WWW or m(dot) site.

Many traditional websites require a complete redesign and implementation to change to a responsive site. Additionally, a complete redesign may require added time and effort to ensure that the user experience is mobile-friendly. You must weigh the costs of a redesign to gain the benefits of a single code base (long-term maintenance savings, SEO improvements, and so on).

Another issue to consider before creating a responsive website is that entire pages are loaded. If you have a lot of content on a page, it can impact the user experience. By contrast, if your site uses separate mobile templates, you can decide if some of that content should be loaded on certain types of devices.

Using Responsive Frameworks with PageBuilder shows how to work responsive Web design into your PageBuilder pages.

Responsive Web Design and Server Side Components

Responsive Web Design + Server Side Components (RESSResponsive Web Design + Server Side Components) has the flexibility of responsive design while providing the granularity of device detection to deliver device-specific components.

Ektron supports the use of RESS by providing tools to display content and assets based on groups of devices, which can be added to your responsive pages. Of course, this responsive aspect means that your site needs to be redesigned, but once redesigned, these tools can provide the best of both approaches.

Using Responsive Frameworks with PageBuilder shows how to work responsive Web design into your PageBuilder pages.

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.
   —Image—

   

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 groups. Assign to each one any mobile devices that use the template you created. See Also: Grouping Mobile Devices.
7. Return to the Template Configuration screen and click the template you identified in Step 2.
8. Check every mobile Device Group 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.
   —Image—

   

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

   • To test mobile templates, preview your content within them. See Previewing Content in a Mobile Template.
   • 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 Updating the Wireless Universal Resource File.
   • To conditionalize Smart Form content based on user device, see Creating a Mobile-Driven Web Experience.
   • To use a mobile site visitor's geographic location to deliver relevant content, see Using Geographic Data from a Mobile Device.

Previewing Content in a Mobile Template

You can preview content in mobile template to ensure the content fits within the screen resolution.

Specifying Device-Specific Content with Smart Forms

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.

Adding a Group by Breakpoint

Ektron provides 2 default groups by breakpoint (Smart Phones, and Tablets). When you set up breakpoints, images that are subsequently uploaded are created in each of the breakpoint sizes for use on devices that fit the breakpoint criteria. See Also: Applying Adaptive Image Resizing.

1. Workarea > Settings > Configuration > Mobile Settings > View All Device Groups.
2. Click New Group.
3. Click Group by Breakpoint.

4. Click Create Group. The Group Device by Breakpoint screen appears. The Smart Phones group has a breakpoint of 480 pixels. The graphics to the right of the groups show the devices that fit your criteria. The check boxes under the device images lets you select the devices that you want to show as options on the Device Preview screen of the toolbar. See Editing in Ektron.

   NOTE: You can specify new breakpoint values for an existing group on this screen and click Save.

   —Image—

   

5. If a Wireless Universal Resource File (WURFL) update is available, click Update. For more information about WURFL, see Creating a Mobile-Driven Web Experience.
6. Click Add Breakpoint to create a new breakpoint group. The Add New Device Group dialog box appears.
   —Image—

   

7. Enter the name of this breakpoint group. For example, Small Phones.
8. Enter the breakpoint width for the group. For example, 360.
9. Click Create Group. The Group Device by Breakpoint screen re-appears with device images next to the new breakpoint group.
   —Image—

   

10. Click Save to create the new group. The new group appears in the Groups By Breakpoint (Default) section of the View All Device Groups screen.

Adding a Group by Operating System

1. Workarea > Settings > Configuration > Mobile Settings > View All Device Groups.
2. Click New Group.
3. Click Group by Operating System (OS).

4. Click Create Group. The Group Device by OS screen appears.

   NOTE: If your Wireless Universal Resource File (WURFL) is out of date, a notice appears on the screen. Click Update to update the device information. For more information about WURFL, see Creating a Mobile-Driven Web Experience.

   —Image—

   

5. Enter the name of this OS group.
6. Check the boxes next to the available operating systems you want in this group.
7. You can specify new dimensions for preview, or accept the default values.
8. Click Save to create the new group. The new group appears in the Groups By Device Configuration section of the View All Device Groups screen.

Adding a Group by Device 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 > Mobile Settings > View All Device Groups.
2. Click New Group.
3. Click Group by Device Model.
4. Click Create Group. The Group Device by Model screen appears.

   NOTE: If your Wireless Universal Resource File (WURFL) is out of date, a notice appears on the screen. Click Update to update the device information. For more information about WURFL, see Creating a Mobile-Driven Web Experience.

   —Image—

   

5. Enter the name of this Model group. For example, My Favorite Phones.
6. Enter a model name in the search box of a device that you want to add. For example, enter Blackberry or iPhone and press Enter.
7. Select the devices you want in the model group by checking the boxes. If you want to choose models from Blackberry AND iPhone AND Razr, first select your device and models from one, then enter another into the search box and select the others. Your selections appear on the right side of the screen.
   —Image—

   

8. You can specify new dimensions for preview, or accept the default values.
9. Click Save to create the new group. The new group appears in the Groups By Device Configuration section of the View All Device Groups screen.

Deleting a Device Group

1. Workarea >Settings > Configuration > Mobile Settings > View All Device Groups.
2. Click Delete (). A confirmation dialog box appears.
3. Click Delete.

Some visitors to your website will be on devices that have less-than-optimal bandwidth due to their geographic location, their network, or device limitations. As a result, the website loads slower for the mobile visitor than for the desktop visitor. By optimizing your images for device sizes, you minimize these limitations.

Simply shrinking an image to fit a smaller device may result in an unsatisfactory image. To ensure that your mobile visitors receive the best experience, Ektron’s Mobile Image Selector lets content authors replace the image (with a satisfactory substitute) that gets displayed for visitors on mobile devices of certain sizes. For example, the following images show a "Times Square" article example on a Smart Phone. Authors can swap out the desktop image for an image that renders well on smaller devices; the shrunken image on the left gets replaced by the image on the right.

Adaptive Image Resizing lets every visitor receive the image that is most appropriate based on their device. For example, Smart Phones may receive an image that’s been scaled down to a lower resolution and 480-pixels wide, while the “Desktop” version of the image might be high resolution and 1200-pixels wide.

Image resolution ultimately defines the amount of detail an image holds. If an original image is 1024 x 1024 pixels, there is a significant loss of detail when looking at a scaled-down 24 x 24 thumbnail image. However, a 24 x 24 thumbnail image has a much smaller physical size in KB, which means that it downloads much faster.

IMPORTANT: A delay in loading a page by only 1 second can dramatically impact your conversion rate and deliver a poor customer experience.

If you view a 1024-pixel-wide image on a 320-pixel-wide screen, you cannot see the detail. Downsizing the image to 320 pixels reduces the physical size significantly with no loss of image detail. Similarly, you also can crop a section of the 1024-pixel-wide image to a 320-pixel-wide section with all of its detail.

You want to balance image quality with file size because every millisecond of load-time makes a difference to the experience (and tolerance) of your site visitors.

When you add an image to the Ektron CMS, Ektron creates copies of the image in the sizes specified in the image breakpoint groups, up to the width of the original image.

For example, if you set up 4 image breakpoints at 320, 476, 620 and 768 pixels, when you upload an 1024 x 1600 image called MonaLisa.jpg, the CMS creates 4 additional images as follows:

• Original image—/uploadedimages/MonaLisa.jpg MonaLisa.jpg
• 320 breakpoint—/uploadedimages/320W_MonaLisa.jpg
• 476 breakpoint—/uploadedimages/476W_MonaLisa.jpg
• 620 breakpoint—/uploadedimages/620W_MonaLisa.jpg
• 768 breakpoint—/uploadedimages/768W_MonaLisa.jpg

If a 400-pixel device calls the Mona Lisa image, the device gets the 476-pixel image scaled to fit the (400-pixel device) container. However, even though you can force an 1024 x 1600 image to fit into a container, creating smaller images drastically reduces the physical size of the image files by several factors of kilobytes that are transferred, significantly speeding up page-load time. Delays in page loading can mean a loss in customer conversions and deliver a poor customer experience.

For information about responsive image selection when you are editing your Web page, see Editing Images in Editing in Ektron.

Enabling Adaptive Images for Breakpoints

If you have mobile devices grouped by breakpoints, you must enable groups to create adaptive images when images are uploaded to the library or as assets. Go to Workarea > Settings > Configuration > Mobile Settings > Adaptive Image Settings. The Adaptive Image Settings screen appears. The following example shows the Small Phones group that was added in Adding a Group by Breakpoint.

When you check a box next to a breakpoint group, the screen expands to let you specify maximum width and height for the breakpoint images, and lets you add a file label as a prefix to the image filename. In the following example, uploading Mona_Lisa.jpg generates SM_Mona_Lisa.jpg for the Small Phones group, SP_Mona_Lisa.jpg for the Smart Phones group, and the TB_Mona_Lisa.jpg for the Tablets group.

Checking boxes for Library and DMS enables adaptive image generation when images are uploaded into these locations.

The Advanced Setting tab of the Adaptive Image Setting screen lets do the following:

• Specify minimum file size that an image is before it will get resized. The default minimum is 80 KB—smaller files are not resized.
• Specify caching levels 1 and 2. Use caching to avoid expensive query storage. You should approximate the number of image files in the image folders.

  To clear both Level 1 and Level 2 cache, click Clear Cache.

  • Level 1 caching stores only a filename, file size, and resolution.
  • Level 2 caching stores the file's content as a byte array.

    Best Practice 

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

    Level2CacheItemThresholdKB * Level2CacheSize = total memory used

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

  How adaptive image caching works

  How Adaptive Image Caching Works

  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 searched 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).
• The Direct Access Query String Key (targetTypeID) is for developers who want to ignore a user's device and choose a specific version of an image. The targetTypeID string is appended after the question mark (?) on a URL. You can change targetTypeID to another string in this field.

Using Adaptive Images with the Editor

When you add an image to content from the library and click on the image to select it, the Inspector shows the breakpoints and corresponding images on the Advanced tab.

You can replace the image you want by clicking Change and selecting another image from the library.

When responsive images are inserted into the editor, the editor produces HTML similar to the following code to determine which images should be displayed for each breakpoint.

<figure class="ektron-responsive-imageset" 
  title="Mona Lisa" 
  data-ektron-image-src="/uploadedImages/Content/About/
    Mona_Lisa.jpg?targetTypeId=Tablets" 
  data-media="/uploadedImages/Content/About/
    FP_Mona_Lisa.png?targetTypeID=FeaturePhone" 
  data-media316="/uploadedImages/Content/About/
    SM_Mona_lisa.jpg?targetTypeID=Smartphone" 
  data-media768="/uploadedImages/Content/About/
    Mona_Lisa.jpg?targetTypeID=Tablets">
  <img src="/uploadedImages/Content/About/
    Mona_Lisa.jpg?targetTypeID=Tablets" alt="Mona Lisa" />
</figure>

For information about the editor, see Editing in Ektron.

Creating Image Copies in the Specified Resolution

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 Creating a Mobile-Driven Web Experience).

<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.