As mobile internet usage increases in popularity, we have to be more aware of how to adapt to this technology. Webpages made using Kentico CMS are capable of being used on mobile devices. We will show you how to prepare your websites for them. Attend the Kentico Connection 2010 conference to learn more. All over the world, the market share of smartphones and 3G phones is rapidly growing. Thanks to companies like Apple and Blackberry, internet usage through mobile technology is becoming a habit not only for businesspeople, but everyday phone users as well. More than ever, preparation of websites for mobile devices is needed for websites to satisfy their viewers. In this session, we will focus on main differences between traditional websites and websites for mobile devices. Since Kentico CMS supports mobile devices, we will present: How to make your websites ready for mobile phone viewing; and How to share content between your main website, your website’s mobile counterpart, and more.

1. Going Mobile Thom Robbins Thomasr@kentico.com Twitter: @trobbins

2. Agenda The mobile marketplace A mobile attack plan It’s all about the content Mobile best practices

3. Mobile opportunity – Data and Hype Expected 9% growth in 2010 Estimated 2 Billion cell phones worldwide (hand me downs included) 93% of US adults own a cell phone (ubiquitous technology) YouTube accounts for 36% of total video traffic on mobile networks worldwide 1.6 Billion purchased from mobile devices in 2009 (increasing buyer confidence) 7.5% of the top 500 online retailers have a mobile website/iPhone app Mobile advertising spending will surpass 6.5 billion in 2012 Users average 13 hours online total per week, up from 7 hours in 2002 (Ruder Finn report – Americans spend 3 hours using the mobile web) “Desktops will be irrelevant in 3 years time” John Herlihy – Google

4. What are people doing? Mobile users are opportunistic! 91% of mobile consumers use the Internet to socialize (compared to 79% of desktop users) 45% engage with social networks 62% use mobile for instant messaging 40% read content Mobile users watch videos (dominate traffic form) Mobile users are more likely to research subjects Men are more likely to use mobile as an ‘escape’ (Not me of course!)

5. Top selling phones in 2010 Reflects more than 50 countries across six continents mobile phone sales (not all inclusive list!) – 1. (2) Nokia 3720 Classic 2. (1) Apple iPhone3G 3. (3) HTC HD2 4. (-)HTC Desire 5. (-)Sony Ericsson XPERIA X10 6. (-)Nokia 2730 Classic 7. (10) Samsung B2100 8. (-)Sony Ericsson Vivaz 9. (5) Nokia E52 10. (-)HTC Legend Note: () = last month rankings

7. Constrained browsers

8. Proxy browsers

9. Limited controls

10. Limited screen size

11. Limited memory and bandwidth

12. Limited typography

14. Variable lighting

16. Looking for local answers

17. Looking for local answers now

19. A mobile attack plan Provide a mobile alternative Build a device specific application

21. Tactic: Kentico redirection web part

22. Tactic: Kentico CMS API

23. Tactic: .NET API

24. Simplify user input

25. Tactic: Simpler design

26. Reduced requests

27. Tactic: Windows Communication Foundation (WCF)

28. Adaptive design

29. Design adapts to mobile environment

30. Battery warnings

31. Lost connection

32. Linked phone calls (it is a phone!)

33. Graceful degradation

34. Notify user when personal info is selected

35. If denied a request degrade slowly

36. No clutter CSS

38. How does it work? Captures HTTP request

39. Extending redirection – device targeting CMS.GlobalHelper Browser must report as mobile Best Practice Tip Exploit the ASP.NET Request object (Request.UserAgent) Check for iPhone iPhone User Agent Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us)AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 Check for Andriod Check for iPad

40. 5 minute mobile makeover - CSS patterns Common design pattern (Eliminate clutter) single-column, fluid width, three main sections: header, main content and footer Best Practice Tip Tab-based navigation, tabbed links with relative width and horizontal menu Modify Stylesheet Don’t forget smaller form factors!

41. Build a Device Specific Applications Tap into native application integration Caters to occasionally connected devices Caters to device features Marketplaces (fame, fortune and exposure) Tools: Appcelerator Titanium Tools: MobiOne Tools: Visual Studio

42. Mobile PC Mobile iPad API Layer Kentico CMS WW Data It’s all about the content!AKA: I see data!

43. Exposing content (Approach 1) REST What is REST? REST stands for Representation State Transfer Conceived in 2000 as a doctoral dissertation by Roy Fielding (a principal author of HTTP protocol) REST is about accessing resources through a universal interface (web browser) RESTful URLs are addressable http://www.mysite.com/Products/Item300 Why REST? Leverages scalability of the Web Site scalability through caching and session state Easier URLs Simplifies SEO Consistency with the design of the World Wide Web Can leverage generic client components (ex. jQuery controls) and dev skills Why not REST? If you need advanced collaboration between applications like distributed transactions (WS-*) If you need to use a protocol other than HTTP REST is an architectural style, not a specification!

44. Bit.ly Restful Example - simple protected void bGetInfo_Click(object sender, EventArgs e) { string apiKey = "&apiKey=APIkey"; string loginKey="&login=rusername"; //encode the string string shortUrl =shorturl"&shortUrl= "+ Server.HtmlEncode(txtURL.Text); // Format for string sent is - http://api.bit.ly/v3/clicks?&shortUrl=http%3A%2F%2Fbit.ly%2FavNcS4&login=login&apiKey=key&format=xml // URL must be encoded WebRequestreq = WebRequest.Create("http://api.bit.ly/v3/clicks?" + shortUrl + apiKey + loginKey); WebResponseresp = req.GetResponse(); Stream stream =resp.GetResponseStream(); StreamReadersr = new StreamReader(stream); String s=sr.ReadToEnd(); txtInfo.Text=s; } WebRequest WebResponse

45. Unifying all the options (Approach 2) - WCF Up front work is required! Wow! Look at all the options in WCF!

46. WCF – Unified programming model .NET Remoting ASMX & WSE Interop with other Platforms & WS-* Extensibility Location transparency Attribute- Based Programming Message- Oriented Programming REST / HTTP Programming Enterprise Services System.Messaging HTTP Services

47. WCF ABC (Address, Binding, Contract) Endpoint A B C A B C A B C Client Service Endpoints Message Address Binding Contract (Where) (How) (What)

48. webHttpBinding New “web-friendly” WCF Binding in Fx 3.5 Allows for the development of RESTful services Does not use SOAP envelopes HTTP and HTTPS Transports Only Supports several wire formats: XML JSON Binary (streams)

49. WebServiceHost Specialized SerivceHost for RESTful services Eliminates need for lots of configuration Automatically configures address, binding, contract Optimized for single-endpoint services Use from .svc file: <%@ ServiceHost Language="C#" Debug="true" Service="Caching1.FeedService" Factory=“System.ServiceModel.Activation.WebServiceHostFactory” %>"%>

50. [WebGet] And [WebInvoke] Binds a WCF operation to URI space and HTTP method Indicate the HTTP Method for the operation WebGet – Don’t make me write it WebInvoke – All verbs other than GET (Method parameter takes in the name of the Verb) Other Parameters BodyStyle – Indicates whether the Request/ Response are wrapped or not RequestFormat – Json or Xml ResponseFormat – Json or Xml UriTemplate – Rich binding to URI

51. UriTemplate String that allows you to define the structure of the URI, as well as to define “Holes” The “Holes” are variables You Bind the template with parameters to fill the holes {productId} hole / variable gets bound to productId parameter in operation [OperationContract] [WebGet(UriTemplate=“product/{productId}")] Product GetProduct(intproductId); Variable

52. Mobile site best practices Organize navigation logically for mobile users Put navigation buttons below content to avoid scrolling Place popular buttons first Make word links shorter for space Use optimized heading tags Keep information three clicks from home page Degrade application gracefully Allow social bookmarking and tagging functionality Avoid pop ups Submit a separate site map to Google Run a mobile site back link campaign

53. Things to avoid.. Flash (Depending on device) Frames Cookies (many newer devices will support) User tables sparingly Nested tables Absolute measures (100px wide can be half the screen) Using a lot of fonts

54. Tips for images Images must be small Saving a 3 color file into a 256 color indexed GIF increases size Photoshop has a nice option to reduce this (Image mode – indexed and then choose web colors) Images must download quickly Beware of clutter factor Don’t put large images at the top of the page It’s annoying to have to wait Exception: Photo gallery

55. Additional Information Did you get your poster? Best samples are in your project! Don’t forget to attend the API session tomorrow Documentation - http://devnet.kentico.com/Documentation.aspx Code Snippet Library - http://devnet.kentico.com/Blogs/Thomas-Robbins.aspx Marketplace - http://devnet.kentico.com/Marketplace.aspx