Kentico CMS, © 2011 Kentico Software

Kentico CMS, © 2011 Kentico Software

Contents Mobile Development using Kentico CMS 6 2

Exploring the Mobile Environment 1

Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection web part 4 What just happened 6 Time for action - Reviewing the Mobile root page 8 What just happened 9 Time for action - Reviewing the sample mobile stylesheet 9 What just happened 10 Time for Action - Modifying the stylesheet 10 What just happened 15 Have a go hero – Defining a mobile stylesheet 15 Time for action – Mobile site viewing 15 What just happened 19

Device Targeting 20

Time for action: Creating a new mobile section 20 What just happened 27

Summary 28

Download the code files from: http://devnet.kentico.com/Blogs/Thomas-Robbins/Files/Mobile/code_v60.aspx

http://devnet.kentico.com/Blogs/Thomas-Robbins/Files/Mobile/code_v60.aspx

Page | 1

Mobile Development using

Kentico CMS 6

In today’s Internet connected world, mobile websites are becoming an important part of everyone’s life. With the slew of Internet connected devices being released in addition to the almost two million projected cellular phones available; you can almost guarantee that your site will be consumed by some type of mobile device. In this eBook we will look at building a mobile website with Kentico CMS. Upon reading and completing the following exercises we shall:

Understand the importance of the mobile scenario for your site

Understand the architecture of a Kentico CMS mobile site

Learn about the Mobile device redirection web part

Learn best practices for developing Cascading Style Sheets (CSS) for mobile devices

Extending the mobile sample site to target specific devices

Exploring the Mobile Environment Kentico CMS simplifies the design, implementation and deployment of your mobile web site. Just a quick look at your cell phone makes it easy to see there are important differences with mobile applications. Smaller screen size, reduced browser capabilities, and limited connectivity are the easiest to identify. If you start to think about your own cell phone usage, you can see numerous additional differences. Cellular phones are designed for everyday usage scenarios. This makes them subject to environmental impacts that aren’t always a concern for standard web applications, including variable acoustics and lighting. While many of the newer devices like the iPhone, Windows 7 and Android phones have helped to reduce these implications. The market today contains a wide variety of devices with an assortment of available features.

Defining a mobile strategy - a quick pause for marketers

Like any technology venture aligning your marketing strategy and your website objectives is important. Here are three questions to consider when developing your mobile strategy.


Page | 2

1. Are you strictly building a lead generation strategy? Mobile strategies shouldn’t always be about lead generation. The form factor makes it extremely difficult to perform extensive marketing lead generation. The mobile platform does provide a great medium for furthering existing customer relationships.

2. Have you defined your marketing objectives? Like any marketing and development strategy what are your key objectives? What is your audience demographic? These are important parts of developing an effective mobile strategy.

3. Have you defined accurate measures? Like any marketing strategy, defining accurate

measures is extremely important. Unlike other marketing strategies, mobile devices have limited capabilities and additional considerations for bandwidth usage.

Time for action - Viewing the mobile sample site

Included with the sample Corporate Site is a mobile example website. As a content administrator, let’s take a look at this site using the following steps.

1. Log into CMS Desk as Administrator, select the Content tab, in the content tree expand the Mobile folder, select Home, click the Edit button, and select the Page tab as shown in the following screenshot


Page | 3

2. Select the Live Site button to view the site rendered for a mobile device as shown in the following screenshot

What am I looking at?

While we are currently viewing this page in our desktop browser the site is currently providing a mobile rendering.

3. Select the Edit button and then the Design tab as shown in the following screenshot


Page | 4

What just happened

When you selected the Mobile folder, you accessed the mobile sample site. The /Mobile page works as a master page for the mobile section of the site. The /Mobile/Home page is where a mobile user is redirected, when the system identifies that a mobile browser is being used to view the site. The content of the page is dynamically loaded, by a repeater control that displays text from the Editable Text web part on the site’s main page.

The mobile folder contains the following files and folders.

File/Folder Description

Home

The default mobile home page. This page is where a mobile user gets redirected from the site’s Home page when a mobile device is detected by the Mobile device redirection web part.

News This page displays the News documents stored under the main News folder.

Articles This page displays the Article documents that are stored under it. It does not display any of the main site content.

About Us This page contains two Editable text web parts that are only shown to mobile users.

Search

The default search page for the mobile site. This page is not available within the navigation and users are directed here when they search within the mobile section.

Like any Kentico site we can use the Page tab to modify and view the page. When we select the Live site, this rendered the page as it is seen on the mobile device. Finally, like any standard site created using the Kentico Portal Engine we are able to access the Design tab to view the page layout and design options.

Time for Action - Mobile device redirection web part

Site users access the mobile site directly through the Mobile folder. Any mobile user that accesses the Corporate Site Home page is redirected to the Mobile folder by the Mobile device redirection web part. This web part reads the incoming HTTP request and checks the UserAgent


Page | 5

string submitted by the client browser. When the string matches an identified device, the user is redirected to the Mobile folder. Let’s view how this web part is set in the Corporate sample site using the following steps.

1. Log into CMS Desk, in the Content tree select the site Home page, click the Design tab, in the Actions zone web part zone on the Mobile redirection web part click the Configure button as shown in the following screenshot

Why are we looking at the site Home page?

Providing a consistent URL path is important to web site users. Placing the Mobile device redirection web part on the site home page assumes that users will always access this page first. Depending on your site design you may want to place this web part on the Master page or in other areas of the site.

2. In the Web part properties (Mobile device redirection), select the Redirection settings tab and review the Small device redirection URL and Large device redirection URL property as shown in the following screenshot and then click the Cancel button


Page | 6

Screen size vs. browser capabilities

Even though Mobile device redirection web part lists devices as small or large you can think of these two groups in a variety of contexts. Instead of assigning devices into groups based on the screen size you can categorize them reflecting browser capabilities. Some devices can run multiple browsers and each browser may or may not support certain technology (JavaScript, cookies, Flash, etc.). You can use also use these groupings to redirect users to specific mobile website displaying content optimized either for high-end smartphones/advanced mobile browsers or mid-range & low-end devices/basic browsers.

What just happened

When an HTTP request is received by the server for the site Home page, the Mobile device redirection web part programmatically evaluates the client browser string. This evaluates whether the page is viewed from an identified mobile device. This decision is based on the User Agent string received from the browser request passed to the Mobile device redirection web part.

When we reviewed the Small device redirection URL and Large device redirection URL properties, we observed the site path to which the client browser is redirected when the mobile device is detected. While it may seem these names are based on the size of the device. In reality, the system provides two groups that you can use to classify devices. In addition the Redirection settings tab provides a series of default selections as shown in the following table.

Field Value

Small device redirection URL Identified devices within this group are redirected to the assigned URL.

Large device redirection URL Identified devices within this group are redirected to the assigned URL.

Redirect Android Determines if Android based mobile devices should be recognized in the small or large device group. If set to Automatic, they are automatically recognized in the small device group. If set to Never they are never redirected.

Redirect Blackberry Determines if Blackberry based mobile devices should be recognized in the small or large device group. If set to Automatic, they are automatically recognized in the small device


Page | 7

group. If set to Never they are never redirected.

Redirect iPad Determines if iPad based mobile devices should be recognized in the small or large device group. If set to Automatic, they are automatically recognized in the large device group. If set to Never they are never redirected.

Redirect iPhone Determines if iPhone based mobile devices should be recognized in the small or large device group. If set to Automatic, they are automatically recognized in the small device group. If set to Never they are never redirected.

Redirect Nokia Determines if Nokia based mobile devices should be recognized in the small or large device group. If set to Automatic, they are automatically recognized in the small device group. If set to Never they are never redirected.

Always redirect When selected devices are automatically redirected on each site access.

Other small devices (User agent)

List of additional user agents strings that should be included within the small group

Other large devices (User agent)

List of additional user agent string that should be included within the large group.

Whenever a browser asks for a file or page from a web server, it sends a request using HTTP. HTTP is a request/response protocol that allows the browser to make a request and the web server to send back a response. The information sent in an HTTP request called a UserAgent string often contains a variety of information that identifies the computer making the request. This request information includes the browser type and whether or not it is a mobile device.

The Mobile device redirection web part allows you to divide mobile devices into two groups based on the information provided in the HTTP request. The web part checks the incoming request UserAgent string and identifies device as small or large based on the web part configuration. User is then redirected to appropriate mobile section that was designed and optimized for devices in specific group.


Page | 8

Where can I find examples of User Agent strings?

User Agent strings can get fairly complex and include a wide variety of details. A great source of information is http://www.useragentstring.com/.

Time for action - Reviewing the Mobile root page

The Corporate site mobile website is rendering using layout completely different than the standard website. This is achieved by breaking the content inheritance on the Mobile page. This page is using a master template for all underlying mobile pages. You can review the Mobile page template settings using following steps:

1. Log into CMS Desk, in the content tree click the Mobile page, select the Properties tab, switch to the Template tab and click the Edit template properties link as shown in the following screenshot

http://www.useragentstring.com/


Page | 9

2. In the Page template properties select the General tab and view the Master template selection as shown in the following screenshot and then close the window

What just happened

When we selected the Properties tab and then switched to the Template tab we could see that the Corporate Site Mobile – Master page template is used for the Mobile root page. We then clicked Edit template properties to view the configuration of this template. We then saw the Master template option is checked. Selecting this option breaks the inheritance of any content and formatting from the website root. The design of this page then becomes the default formatting and style for the underlying pages.

Time for action - Reviewing the sample mobile stylesheet

Stylesheets are an important part of site presentation. They are used to help define how the site is rendered through a desktop or mobile device browser. For mobile devices, the smaller screen size and reduced bandwidth offer unique challenges. The mobile sample site provides an example of a mobile style sheet that we can view using the following steps.

1. Log into CMS Desk, in the content tree click the Mobile page, select the Properties tab, click the General tab, in the CSS Stylesheet property click the Edit button as shown in the following screenshot


Page | 10

Why isn’t the stylesheet inherit attribute set?

As you can see in the screenshot above the Inherit attribute is not set for the Mobile page. This will create an entirely new style sheet for the folder. Depending on your organization you may want to define a site wide style sheet that does include mobile attributes.

2. In the Edit CSS stylesheet screen review the CSS in the Stylesheet text window as shown in the following screenshot and then click the Close button

What just happened

When we selected the Properties tab we could see that the Corporate Site – Mobile device stylesheet was defined for the mobile folder. We then selected Edit, which gave us the ability to view and change any elements of the existing stylesheet.

Time for Action - Modifying the stylesheet

It’s always good practice to utilize a mobile CSS style sheet that eliminates as much clutter as possible. Also, to ensure the best use of screen real estate, use a fluid width single column with three main sections. Usually, these three main sections are: a header, main content and a footer


Page | 11

section. In addition, creating tab based navigation links with relative widths and a horizontal menu makes it easier for your users to view the site on a mobile device. Let’s create a new stylesheet based on the existing mobile style sheet and then modify this to reduce the clutter, providing a better mobile rendering experience through the following steps:

1. Log into Site Manager, select the Development tab, click CSS stylesheets and then click the New CSS stylesheet link as shown below

2. In the New CSS stylesheet dialog enter the following information

Field Value

Stylesheet display name Mobile Site Clean

Stylesheet code name MobileSiteClean

Assign to Corporate Site Checked

3. In the Stylesheet text property enter the following and then select OK

body

{

background-color: #ffffff;

font-size: small;

font-family: Arial;

margin: 0px;

padding: 10px;

}

h1

{

color: #1E4077;

font-size: 160%;

}


Page | 12

.navigation

{

margin: 0px auto;

background-color: #AECAE7;

padding: 10px;

padding-top: 6px;

float: left;

}

.navigation li

{

list-style-type: none;

margin: 0px;

padding: 0px;

display: inline;

}

.navigation ul

{

margin: 0px;

padding: 0px;

}

.search

{

margin: 0px auto;


padding: 4px;

}

.searchBox

{

min-width: 30px;

}

a

{

color: #000000;

}

.footer

{


margin-top: 10px;

padding: 10px;

}

.logo

{

background-color: #1E4077;

padding: 5px;

}


Page | 13

Did you get the code?

This cade is available as part of the download package for this eBook.

4. Click the CMS Desk link, in CMS Desk select the Mobile page, click the Properties tab, select the General tab, from the CSS stylesheet dropdown select Mobile Site Clean, and then click the Save button as shown in the following screenshot


Page | 14

5. Select the Preview button to see the Mobile Site Clean stylesheet rendered as shown in the following screenshot

6. Click the Edit view mode, click the Properties tab, on the General tab, change the CSS stylesheet to Corporate Site – Mobile device and then select Save as shown in the following screenshot


Page | 15

What just happened

When we selected New CSS Stylesheet in Site Manager we defined a new system wide stylesheet. We then defined the name, code name and assigned it to the Corporate site. Within the Stylesheet text we defined a body, menu and footer area. We also defined various display elements that are needed to show other areas of the site. We then switched to CMS Desk and assigned the new stylesheet to the Mobile page. Finally we previewed the new stylesheet and then set the stylesheet back to the original Corporate Site – Mobile device.

Have a go hero – Defining a mobile stylesheet

Like any stylesheet you may have defined, always start with the basics. Typically, this is based on HTML standards and formatted with logical, semantic mark-up. Unlike other stylesheets, a mobile stylesheet may require special or reduced capabilities depending on supported device types. Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile device. It’s important to pay attention to the basics, like alternate text and properly labelled form fields. Given these concerns spend some time talking with the marketing group to understand what presentation styles are important for them. Then, create a set of wireframe examples for their review and define your stylesheet.

Time for action – Mobile site viewing

Now that we have covered the basics, let put this all together using a mobile device emulator using the following steps.

A note about emulators

When you don’t have access to a specific device for testing you will need to use an emulator. For this example we are using an iPad emulator available at http://www.genuitec.com/mobile/download.html. The Windows 7 Phone SDK including the emulator is available at http://www.microsoft.com/express/Phone/. Regardless of what emulator you select make sure that it provides the correct request to match the device. Many emulators may provide a visual test but not provide the correct HTTP request string.

http://www.genuitec.com/mobile/download.html

http://www.microsoft.com/express/Phone/


Page | 16

1. Log into CMS Desk, in the Content tree select the site Home page, click the Design tab, in the Actions zone web part zone on the Mobile redirection web part click the Configure button as shown in the following screenshot

2. In the Web part properties (Mobile device redirection), select the Redirection settings tab, in the Redirect iPad section select Never and then click Ok as shown in the following screenshot


Page | 17

3. Enter the URL of the site on your mobile device and validate that you see the Corporate site home page as shown in the following screenshot.

Shouldn’t I see the mobile site?

No, remember we set the Redirect iPad to Never. This means that you will see the standard home page.


Page | 18

4. With your desktop browser log into CMS Desk, in the Content tree select the site Home page, click the Design tab, in the Actions zone web part zone on the Mobile redirection web part click the Configure button as shown in the following screenshot

5. In the Web part properties (Mobile device redirection), select the Redirection settings tab, in the Redirect iPad section select Automatic and then click Ok as shown in the following screenshot


Page | 19

6. Open your device emulator, enter the URL to your site and validate that you see the following screenshot

What just happened

As we saw earlier the Corporate sample site is defined to automatically provide redirection for iPad devices. We first logged into CMS Desk and within the Mobile device redirection web part we set the Redirect iPad to Never. Then using our iPad emulator went to the site and viewed it. As we saw, we were automatically placed on the Corporate site home page. Next, we then configured the Mobile device redirection web part to Automatic. Once again using our iPad emulator we accessed the site and saw that we were redirected to the URL defined in the Small device redirection URL.


Page | 20

Device Targeting The growth of the mobile industry has helped to introduce a variety of new mobile devices to the market. Many of the new devices like the iPad, iPhone and a whole pile of Android based devices introduce a new set of unique features. For web sites this often means that you may want to target specific devices to leverage these features or just offer a better viewing experience for your web site users.

Time for action: Creating a new mobile section

Mobile marketing strategies often deliver different levels of user experience based on the features of specific devices. Within Kentico CMS this is achieved by creating multiple website sections that target specific groups of devices. This allows site designers to target specific device features like screen size or browser capabilities and implement optimal design and functionality. We can create a new mobile section that uses the large device group using the following steps.

1. Log into CMS desk, click the Content tab, in the Content tree select the Mobile page, click the Copy button as shown in the following screenshot


Page | 21

2. In the Copy document dialog select Corporate site root node and click the Copy button as shown in the following screenshot

3. In the Content tree validate that you see the new Mobile (1) folder as shown in the following screenshot


Page | 22

4. In the Content tree select Mobile (1), click the Edit view mode, click the Form tab, in the Document name field enter Mobile S and select Save as shown in the following screenshot

5. Click the Properties tab, select the URLs tab, change the Document alias field to MobileS and then click Save as shown in the following screenshot


Page | 23

Why we need to change document alias?

When we created the copy of the mobile section the system generated a document alias of Mobile-(1). The document alias is used in all the URLs of the underlying pages in the new mobile section. User experience is important and we wanted to provide an easier to remember URL.

6. Click the General tab, in the CSS stylesheet dropdown select the Mobile Site Clean and select the Save button as shown in the following screenshot

7. Click the Template tab and click the Clone template as ad-hoc as shown in the following screenshot


Page | 24

Why clone template as ad-hoc?

Selecting this option creates a new ad-hoc template based on the current page template. If we wanted to reuse this template we would need to save it as a new reusable template

8. On the Template tab click the Edit template properties link as shown in the following screenshot

9. In the Page template properties dialog check the Master template option and click Save as shown in the following screenshot


Page | 25

10. Click the Design tab, in the Footer zone web part zone for the Powered by Kentico web part click the Configure button as shown in the following screenshot

11. In the Web part properties (Powered by Kentico) dialog click on the Content tab, replace the value of the Text field with the following code and then select Ok

<a class="powered" href="http://www.kentico.com" title="Kentico CMS for

ASP.NET - the WEB 2.0 Content Management System for .NET

Wdevelopers">Powered by Kentico CMS</a>

Did you get the code?

This cade is available as part of the download package for this eBook.

12. Click the Preview button and validate that you see the following screenshot


Page | 26

13. In the Content tree select the Corporate Site Home page, click the Edit button, then the Design button, and in the Actions zone web part zone for the Mobile redirection web part click the Configure button as shown in the following screenshot

14. In the Web part properties (Mobile device redirection) screen click the Redirection settings tab, in the Large device redirection URL enter ~/MobileS/Home.aspx as shown in the following screenshot and then select Ok


Page | 27

Why did we change this?

We are changing this to match the new mobile section we just created.

15. Open your emulator or device to the Live site and validate that you see the following screenshot

What just happened

When we select Copy this created a new section on our site called Mobile(1). We then renamed the section to the more user friendly name of Mobile S. In order to create consistency on the site we then renamed the existing Document alias to MobileS. We then finalized the new site section to include a mobile stylesheet, Master template, and updated footer section. Finally, we modified the Mobile device redirection web part on the Corporate Site Home page to point the Large device redirection URL to the newly created section of the site.


Page | 28

Summary We learned a lot in this eBook about mobile site development using Kentico CMS. Specifically we covered

Viewing the sample mobile site

Learning about the Mobile device redirection web part

Best practices for building a mobile stylesheet

Creating new mobile section

Targeting specific mobile devices using Mobile device redirection web part

Documents

Kentico CMS, © 2011 Kentico Software