Going mobile with Kentico CMS
Upcoming SlideShare
Loading in...5
×
 

Going mobile with Kentico CMS

on

  • 3,537 views

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

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.

Statistics

Views

Total Views
3,537
Views on SlideShare
3,536
Embed Views
1

Actions

Likes
1
Downloads
16
Comments
0

1 Embed 1

http://schepnetx.posterous.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Data source - http://searchengineland.com/top-10-reasons-your-website-should-go-mobile-32566 http://www.bizreport.com/2010/02/time_spent_with_mobile_internet_increases.html#
  • Source: http://www.articlesbase.com/international-marketing-articles/top-ten-bestselling-cell-phone-in-april-2010-2264987.html

Going mobile with Kentico CMS Going mobile with Kentico CMS Presentation Transcript

  • Going Mobile
    Thom Robbins
    Thomasr@kentico.com
    Twitter: @trobbins
  • Agenda
    The mobile marketplace
    A mobile attack plan
    It’s all about the content
    Mobile best practices
  • 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
  • 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!)
  • 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
  • Pulling it together
    The Device
    • Web browsers
    • Constrained browsers
    • Proxy browsers
    • Limited controls
    • Limited screen size
    • Limited memory and bandwidth
    • Limited typography
    • Limited color palette
    The Environment
    • Variable accoustics
    • Variable lighting
    • Variable mobile coverage
    The Audience
    • Looking for answers (SEO is important)
    • Looking for local answers
    • Looking for local answers now
    • Ready to pay for local answers now
  • A pause for marketers
    Three things to consider when developing your mobile strategy
    Are you building only a lead generation strategy? Mobile strategies shouldn’t always be about lead generation. The form factor makes it extremely hard to perform extensive lead generation for marketing. The mobile platform does serve well for furthering existing customer relationships
    Have you clearly defined your objectives? Like any marketing and development strategy what are your key objectives? What is your audience demographics? These are important parts of developing an effective mobile strategy.
    Have you defined accurate measures? Like any marketing strategy defining accurate measures is extremely important. Unlike other marketing strategies small devices have limited capabilities and you always need to be careful with increasing bandwidth.
  • A mobile attack plan
    Provide a mobile alternative
    Build a device specific application
  • Provide a Mobile Alternative
    Guiding principles:
    • Alternate design and layout
    • Tactic: Kentico redirection web part
    • Tactic: Kentico CMS API
    • Tactic: .NET API
    • Simplify user input
    • Tactic: Simpler design
    • Reduced requests
    • Tactic: Windows Communication Foundation (WCF)
    • Adaptive design
    • Design adapts to mobile environment
    • Battery warnings
    • Lost connection
    • Linked phone calls (it is a phone!)
    • Graceful degradation
    • Notify user when personal info is selected
    • If denied a request degrade slowly
    • No clutter CSS
    • Flow based layouts
  • Check out the Mobile sample site
    Site home page contains redirection to /Mobile
    Dedicated CSS stylesheet (Corporate Site – Mobile)
    /Mobile node
    Works as a master page for the mobile section
    No template inheritance from main site
    Sections available
    Home – redirected page with a Repeater dynamically loading content from the Editable region on the main Home page
    News – Repeater displaying news with a transformation
    Articles – Dedicated mobile section and content is not shared
    About us – Two editable text web parts only in Mobile section
  • How does it work?
    Captures HTTP request
  • 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
  • 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!
  • 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
  • Mobile
    PC
    Mobile
    iPad
    API Layer
    Kentico CMS
    WW Data
    It’s all about the content!AKA: I see data!
  • 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!
  • 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
  • Unifying all the options (Approach 2) - WCF
    Up front work is required!
    Wow! Look at all the options in WCF!
  • 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
  • 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)
  • 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)
  • 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” %>"%>
  • [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
  • 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
  • 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
  • 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
  • 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
  • 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