+ All Categories
Home > Technology > Going mobile

Going mobile

Date post: 03-Dec-2014
Category:
Upload: kenticocms
View: 329 times
Download: 1 times
Share this document with a friend
Description:
KENTICO CONNECTION SESSION:As the market share of smartphones is rapidly growing up and thanks to Apple they are getting more popular. It’s more important than ever to prepare your websites for mobile devices and offer them your content. In this session we will focus on main differences between traditional websites and websites for mobile devices. Kentico CMS supports mobile devices and we will show you how to prepare your websites for mobile devices, how to share content between main website and mobile part and more.
Popular Tags:
28
Going Mobile Thom Robbins [email protected] Twitter: @trobbins
Transcript
Page 1: Going mobile

Going MobileThom Robbins

[email protected]: @trobbins

Page 2: Going mobile

Agenda

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

Page 3: Going mobile

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

Page 4: Going mobile

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!)

Page 5: Going mobile

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 3G• 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 LegendNote: () = last month rankings

Page 6: Going mobile

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

Page 7: Going mobile

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.

Page 8: Going mobile

A mobile attack plan

• Provide a mobile alternative• Build a device specific application

Page 9: Going mobile

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

Page 10: Going mobile

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

Page 11: Going mobile

How does it work?

First • Place Mobile device redirection web part on page

Second •Set Redirection URL

Third •Break inheritance•Create stylesheet

Captures HTTP request

Page 12: Going mobile

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 TipBrowser must report as mobile

Check for Andriod

Check for iPad

Page 13: Going mobile

5 minute mobile makeover - CSS patterns

• Common design pattern (Eliminate clutter)– single-column, fluid width, three main sections: header, main content

and footer

Tab-based navigation, tabbed links with relative width and horizontal menu

Don’t forget smaller form factors!

Modify Stylesheet

Best Practice Tip

Page 14: Going mobile

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

Page 15: Going mobile

IT’S ALL ABOUT THE CONTENT!AKA: I SEE DATA!

API Layer

Mobile PC Mobile iPad

Kentico CMS WW Data

Page 16: Going mobile

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!

Page 17: Going mobile

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

WebResponse

Page 18: Going mobile

Unifying all the options (Approach 2) - WCF

Up front work is required!

Wow! Look at all the

options in WCF!

Page 19: Going mobile

WCF – Unified programming model

Interopwith other

Platforms & WS-*

ASMX & WSE

Attribute- Based

Programming

Enterprise Services

REST / HTTP Programming

HTTP Services

Message-Oriented

Programming

System.Messaging

ExtensibilityLocation

transparency

.NET Remoting

Page 20: Going mobile

WCF ABC (Address, Binding, Contract)

Client Service

Message

Address Binding Contract

(Where) (How) (What)

Endpoint

ABC A B C

Endpoints

A B C

Page 21: Going mobile

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)

Page 22: Going mobile

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” %>"%>

Page 23: Going mobile

[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

Page 24: Going mobile

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);

Variable

Page 25: Going mobile

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

Page 26: Going mobile

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

Page 27: Going mobile

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

Page 28: Going mobile

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


Recommended