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