/
Going Mobile Going Mobile

Going Mobile - PowerPoint Presentation

debby-jeon
debby-jeon . @debby-jeon
Follow
372 views
Uploaded On 2017-04-28

Going Mobile - PPT Presentation

Thom Robbins Thomasrkenticocom Twitter trobbins Agenda The mobile marketplace A mobile attack plan Its all about the content Mobile best practices Mobile opportunity Data and Hype ID: 542503

http mobile web amp mobile http amp web content rest site string wcf kentico design iphone limited api device

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "Going Mobile" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

Going Mobile

Thom Robbins

Thomasr@kentico.com

Twitter: @

trobbinsSlide2

Agenda

The mobile marketplace

A mobile attack plan

It’s all about the content

Mobile best practicesSlide3

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 appMobile advertising spending will surpass 6.5 billion in 2012Users 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 – GoogleSlide4

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 subjectsMen are more likely to use mobile as an ‘escape’ (Not me of course!)Slide5

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

iPhone

3G3. (3)  HTC HD24. (-)HTC Desire5. (-)Sony Ericsson XPERIA X106. (-)Nokia 2730 Classic7. (10) Samsung B21008. (-)Sony Ericsson Vivaz9. (5) Nokia E5210. (-)HTC LegendNote: () = last month rankingsSlide6

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 nowSlide7

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

A mobile attack plan

Provide a mobile alternative

Build a device specific applicationSlide9

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 CSSFlow based layoutsSlide10

Check out the Mobile sample site

Site home page contains redirection to /Mobile

Dedicated CSS

stylesheet

(Corporate Site – Mobile)

/Mobile nodeWorks as a master page for the mobile sectionNo template inheritance from main site Sections availableHome – redirected page with a Repeater dynamically loading content from the Editable region on the main Home pageNews – Repeater displaying news with a transformationArticles – Dedicated mobile section and content is not sharedAbout us – Two editable text web parts only in Mobile sectionSlide11

How does it work?

Captures HTTP requestSlide12

Extending redirection – device targeting

Check for

iPhone

CMS.GlobalHelper

Exploit the ASP.NET Request object (

Request.UserAgent

)

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

Best Practice Tip

Browser must report as mobile

Check for

Andriod

Check for

iPadSlide13

5 minute mobile makeover - CSS patterns

Common design pattern (Eliminate clutter)

single-column, fluid width, three main sections: header, main content and footer

T

ab-based navigation

,

tabbed links with relative width and horizontal menu

Don’t forget smaller form factors

!

Modify

Stylesheet

Best Practice TipSlide14

Build a

Device Specific Application

s

Tap into native application integration

Caters to o

ccasionally connected devicesCaters to device featuresMarketplaces (fame, fortune and exposure)Tools: Appcelerator TitaniumTools: MobiOneTools: Visual StudioSlide15

It’s all about the content!

AKA: I see data!

API Layer

Mobile

PC

Mobile

iPad

Kentico CMS

WW DataSlide16

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/Item300Why REST?Leverages scalability of the WebSite scalability through caching and session stateEasier 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!Slide17

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 WebRequest req = WebRequest.Create("http://api.bit.ly/v3/clicks?" + shortUrl

+ apiKey + loginKey); WebResponse resp = req.GetResponse(); Stream stream =resp.GetResponseStream();

StreamReader sr = new StreamReader(stream);

String s=

sr.ReadToEnd

();

txtInfo.Text

=s;

}

WebRequest

WebResponseSlide18

Unifying all the options (Approach 2) - WCF

Up front work is required!

Wow! Look at all the options in WCF!Slide19

WCF – Unified programming model

Interop

with other

Platforms & WS-*

ASMX & WSE

Attribute-

Based

Programming

Enterprise Services

REST / HTTP Programming

HTTP Services

Message-

Oriented

Programming

System.Messaging

Extensibility

Location transparency

.

NET

RemotingSlide20

WCF ABC (Address, Binding, Contract)

Client

Service

Message

Address

Binding

Contract

(Where)

(How)

(What)

Endpoint

A

B

C

A

B

C

Endpoints

A

B

CSlide21

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:XMLJSONBinary (streams)Slide22

WebServiceHost

Specialized

SerivceHost

for

RESTful

servicesEliminates need for lots of configurationAutomatically configures address, binding, contractOptimized for single-endpoint servicesUse from .svc file:<%@ ServiceHost

Language="C#" Debug="true" Service="Caching1.FeedService" Factory=“

System.ServiceModel.Activation.WebServiceHostFactory

%>

"%>Slide23

[WebGet

] And [

WebInvoke

]

Binds a WCF operation to URI

space and HTTP methodIndicate the HTTP Method for the operationWebGet – Don’t make me write itWebInvoke – All verbs other than GET (Method parameter takes in the name of the Verb)Other ParametersBodyStyle – Indicates whether the Request/ Response are wrapped or notRequestFormat –

Json or XmlResponseFormat – Json or Xml

UriTemplate

– Rich binding to URISlide24

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(int productId);

VariableSlide25

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 tagsKeep information three clicks from home pageDegrade application gracefullyAllow social bookmarking and tagging functionalityAvoid pop upsSubmit a separate site map to GoogleRun a mobile site back link campaign Slide26

Things to avoid..

Flash (Depending on device)

Frames

Cookies (many newer devices will support)

User tables sparingly

Nested tablesAbsolute measures (100px wide can be half the screen)Using a lot of fontsSlide27

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 factorDon’t put large images at the top of the pageIt’s annoying to have to waitException: Photo gallerySlide28

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.aspxMarketplace - http://devnet.kentico.com/Marketplace.aspx