Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1

Transcription

1

2 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:

3 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 1

4 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 2

5 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 3

6 What just happened Kentico CMS, 2011 Kentico Software 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 News Articles About Us Search 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. This page displays the News documents stored under the main News folder. This page displays the Article documents that are stored under it. It does not display any of the main site content. This page contains two Editable text web parts that are only shown to mobile users. 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 4

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

8 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 midrange & 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 Small device redirection URL Large device redirection URL Redirect Android Redirect Blackberry Value Identified devices within this group are redirected to the assigned URL. Identified devices within this group are redirected to the assigned URL. 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. 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 6

9 group. If set to Never they are never redirected. Redirect ipad Redirect iphone Redirect Nokia Always redirect Other small devices (User agent) Other large devices (User agent) 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. 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. 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. When selected devices are automatically redirected on each site access. List of additional user agents strings that should be included within the small group 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 7

10 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 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 Page 8

11 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 9

12 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 10

13 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 11

14 .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; background-color: #AECAE7; padding: 4px; }.searchbox { min-width: 30px; } a { } color: #000000;.footer { background-color: #AECAE7; margin-top: 10px; padding: 10px; }.logo { background-color: #1E4077; padding: 5px; } Page 12

15 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 13

16 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 14

17 What just happened Kentico CMS, 2011 Kentico Software 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 The Windows 7 Phone SDK including the emulator is available at 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. Page 15

18 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 16

19 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 17

20 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 18

21 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 19

22 Device Targeting Kentico CMS, 2011 Kentico Software 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 20

23 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 21

24 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 22

25 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 23

26 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 24

27 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=" 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 25

28 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 26

29 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 27

30 Summary Kentico CMS, 2011 Kentico Software 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 Page 28