33
GOING MOBILE Why Mobile? Why Now? Hi Everyone, Today we’re going to learn a bit about the power of mobile websites, and what you need to think about in order to provide your customers with a solid mobile experience.

Floyd brad mobile_presentation

  • Upload
    brfloyd

  • View
    114

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Floyd brad mobile_presentation

GOING MOBILEWhy Mobile? Why Now?

Hi Everyone,

Today we’re going to learn a bit about the power of mobile websites, and what you need to think about in order to provide your customers with a solid mobile experience.

Page 2: Floyd brad mobile_presentation

GROWTH“Over 70% of the world’s populations now has a mobile phone.”

-Sybase

When you think about mobile devices, the first thing we need to realize is that the platform is experiencing tremendous growth.

According to Sybase Inc., a research provider, over 70% of the world’s population now has a mobile phone. (Sybase, 2010)

Page 3: Floyd brad mobile_presentation

GROWTH

Growth of Mobile phones as a core internet device for users is growing as well. (click)

Gartner, a research firm with thousands of corporate clients worldwide (Gartner, 2012) suggests that “mobile phones will overtake PCs as the most common web access devices worldwide by 2013.” (Walsh, 2010)

Page 4: Floyd brad mobile_presentation

GROWTH

“Mobile Phones will overtake PCs as the most common web access device...by 2013”

-Gartner Research

Growth of Mobile phones as a core internet device for users is growing as well. (click)

Gartner, a research firm with thousands of corporate clients worldwide (Gartner, 2012) suggests that “mobile phones will overtake PCs as the most common web access devices worldwide by 2013.” (Walsh, 2010)

Page 5: Floyd brad mobile_presentation

“Tablets will overtake PC sales by the end of 2012.”

-Tim Cook (Apple CEO)

Source: (Brill, 2012)

GROWTH

And we certainly cannot forget tablets.

Apple CEO Tim Cook, announced recently that tablets will overtake PC sales by the end of 2012. (Brill, 2012)

Page 6: Floyd brad mobile_presentation

FOCUS“a mobile version of your site is not simply made by trimming down content to fit on a smaller screen”

-Tom Wentworth (Ektron, Inc.)

Secondly, one of the first things we work towards is focusing together on what’s truly important for mobile users, in regards to your site.

-Tom Wentworth, the CMO of the web content management and marketing optimization provider Ektron Inc. says that a mobile version of your site is not simply made by “trimming down content to fit on a smaller screen” (Wentworth, 2011)

Page 7: Floyd brad mobile_presentation

FOCUSCORE EXPERIENCE

Location

When thinking about your customers on the go, we really have to answer a few key questions.

Where are they? - on the road - at home - on vacation - in bed (click)

What are they looking for at this moment? - If they’re on the go, they may be looking for quick information bites. (click)

How will they need to interact with your site on their mobile device? Do they want to find information quickly? Are they forwarding that information to someone else?

Page 8: Floyd brad mobile_presentation

FOCUSCORE EXPERIENCE

Location Needs

When thinking about your customers on the go, we really have to answer a few key questions.

Where are they? - on the road - at home - on vacation - in bed (click)

What are they looking for at this moment? - If they’re on the go, they may be looking for quick information bites. (click)

How will they need to interact with your site on their mobile device? Do they want to find information quickly? Are they forwarding that information to someone else?

Page 9: Floyd brad mobile_presentation

FOCUSCORE EXPERIENCE

Location Needs Interaction

When thinking about your customers on the go, we really have to answer a few key questions.

Where are they? - on the road - at home - on vacation - in bed (click)

What are they looking for at this moment? - If they’re on the go, they may be looking for quick information bites. (click)

How will they need to interact with your site on their mobile device? Do they want to find information quickly? Are they forwarding that information to someone else?

Page 10: Floyd brad mobile_presentation

FOCUSSimplify Navigation

Vertical

Once we identify these key features, we can start to pinpoint functions of your new mobile site.

For instance we implement:

Vertical scrolling - which can really make your mobile website easy to navigate. (click)

Clear Paths - If your customers are in a hurry, they’ll want the information they seek to be readily available and easy to find. (click)

Easy Navigation - Remember we’re no longer talking about a precision mouse for pointing on screen. We’ll have to provide easy to use buttons and links, made for fingertips!

Page 11: Floyd brad mobile_presentation

FOCUSSimplify Navigation

Vertical Clear Path

Once we identify these key features, we can start to pinpoint functions of your new mobile site.

For instance we implement:

Vertical scrolling - which can really make your mobile website easy to navigate. (click)

Clear Paths - If your customers are in a hurry, they’ll want the information they seek to be readily available and easy to find. (click)

Easy Navigation - Remember we’re no longer talking about a precision mouse for pointing on screen. We’ll have to provide easy to use buttons and links, made for fingertips!

Page 12: Floyd brad mobile_presentation

FOCUSSimplify Navigation

Vertical Clear Path Big Buttons

Buy

Once we identify these key features, we can start to pinpoint functions of your new mobile site.

For instance we implement:

Vertical scrolling - which can really make your mobile website easy to navigate. (click)

Clear Paths - If your customers are in a hurry, they’ll want the information they seek to be readily available and easy to find. (click)

Easy Navigation - Remember we’re no longer talking about a precision mouse for pointing on screen. We’ll have to provide easy to use buttons and links, made for fingertips!

Page 13: Floyd brad mobile_presentation

FOCUSCORE EXPERIENCE

So those are some examples of how we can shift your user experience to a more mobile friendly configuration.

But that’s only half the story. (click)

How/What do you want your customers to think and feel when they use your website?

This is a very important question, because for many this will be the first encounter of your business and its purpose.

Page 14: Floyd brad mobile_presentation

FOCUSCORE EXPERIENCE

Think Affect

So those are some examples of how we can shift your user experience to a more mobile friendly configuration.

But that’s only half the story. (click)

How/What do you want your customers to think and feel when they use your website?

This is a very important question, because for many this will be the first encounter of your business and its purpose.

Page 15: Floyd brad mobile_presentation

FOCUSReduce Bandwidth

Compress Optimize

Remember that mobile internet bandwidth is still in the early stages of speed.

We’ll need to think about streamlining your content, images and media to provide a quick and beautiful experience on mobile platforms.

Page 16: Floyd brad mobile_presentation

DEVELOP

One of the core philosophies we live by is “Develop for One Web” (click)

This means “building your pages in a way that makes it easier to provide the same content to a wide range of users, regardless of the device they’re using to access your site.”

Joe Marini (Lynda.com)

Page 17: Floyd brad mobile_presentation

DEVELOP

“...build your pages in a way that makes it easier to provide the same content to a wide range of users, regardless of their device...”

-Joe Marini (Lynda.com)

One of the core philosophies we live by is “Develop for One Web” (click)

This means “building your pages in a way that makes it easier to provide the same content to a wide range of users, regardless of the device they’re using to access your site.”

Joe Marini (Lynda.com)

Page 18: Floyd brad mobile_presentation

PROGRESSIVE ENHANCEMENT

Content

Style

Behavior

This means that your website is built from the ground up to ensure your content and messaging is viewable on every platform possible, and that the look and feel of your website in rendered over various levels based on the device of the viewer. (click)

It also means that by purchasing one website you will provide as seamless an experience for all your potential and current customers.

Page 19: Floyd brad mobile_presentation

PROGRESSIVE ENHANCEMENT

HTML

CSS

Javascript

Content

Style

Behavior

This means that your website is built from the ground up to ensure your content and messaging is viewable on every platform possible, and that the look and feel of your website in rendered over various levels based on the device of the viewer. (click)

It also means that by purchasing one website you will provide as seamless an experience for all your potential and current customers.

Page 20: Floyd brad mobile_presentation

DETECT CAPABILITIES

The key to Progressive Enhancement, and the piece you should know above all else; is that your website, if built with Progressive Enhancement in mind, will detect the capabilities of each unique visitor, and provide the best experience it can.

Page 21: Floyd brad mobile_presentation

DEVELOP

Trident (Based on IE7)

Here we can see an example of two mobile browsers.

Her we see a simplified version of the mobile site from Wells FargoWe can see the basic functionality of the site is maintained with the basic sign in boxes. (Click)

On the right, we see a fully supported Wells Fargo mobile site, with its style and behavior as intended by the company.

Same information, but more complete experience.

Page 22: Floyd brad mobile_presentation

DEVELOP

WebKit(Based on Safari)

Trident (Based on IE7)

Here we can see an example of two mobile browsers.

Her we see a simplified version of the mobile site from Wells FargoWe can see the basic functionality of the site is maintained with the basic sign in boxes. (Click)

On the right, we see a fully supported Wells Fargo mobile site, with its style and behavior as intended by the company.

Same information, but more complete experience.

Page 23: Floyd brad mobile_presentation

BAD EXAMPLE

National

Let’s take a look at a not so good example of a mobile website. In fact, this example isn’t a mobile website at all.

Take a look at this reservation page on National Car Rental’s website. Now imaging trying to view this on an iPhone. (click)

Picture yourself struggling to zoom and tap on an individual link.

What are some things that National could do better?

Page 24: Floyd brad mobile_presentation

BAD EXAMPLE

National

Let’s take a look at a not so good example of a mobile website. In fact, this example isn’t a mobile website at all.

Take a look at this reservation page on National Car Rental’s website. Now imaging trying to view this on an iPhone. (click)

Picture yourself struggling to zoom and tap on an individual link.

What are some things that National could do better?

Page 25: Floyd brad mobile_presentation

GOODHertz

Now let’s take a look at a great example. Hertz has really worked to address their mobile customers and make them feel wanted.

They provided a clear path. In this case, what do you think this particular page is designed to do?(click)

That’s right, make reservations. (click)

Now look a this a bit closer. Though reservations are certainly the focus here, notice that they have also provided clear paths and (nice sized buttons) to get to other areas of the site.

With a few flicks and a tap or two, their customers can get in, get to the information they need, and get on with their day, trip, meeting or whatever else it is they are doing.

Now isn’t that what this is all about?

Page 26: Floyd brad mobile_presentation

GOODHertz

Now let’s take a look at a great example. Hertz has really worked to address their mobile customers and make them feel wanted.

They provided a clear path. In this case, what do you think this particular page is designed to do?(click)

That’s right, make reservations. (click)

Now look a this a bit closer. Though reservations are certainly the focus here, notice that they have also provided clear paths and (nice sized buttons) to get to other areas of the site.

With a few flicks and a tap or two, their customers can get in, get to the information they need, and get on with their day, trip, meeting or whatever else it is they are doing.

Now isn’t that what this is all about?

Page 27: Floyd brad mobile_presentation

GOODHertz

Now let’s take a look at a great example. Hertz has really worked to address their mobile customers and make them feel wanted.

They provided a clear path. In this case, what do you think this particular page is designed to do?(click)

That’s right, make reservations. (click)

Now look a this a bit closer. Though reservations are certainly the focus here, notice that they have also provided clear paths and (nice sized buttons) to get to other areas of the site.

With a few flicks and a tap or two, their customers can get in, get to the information they need, and get on with their day, trip, meeting or whatever else it is they are doing.

Now isn’t that what this is all about?

Page 28: Floyd brad mobile_presentation

GETGOCOOL.COM

Find a Retailer

OK, so any questions so far?

Great.

Let’s bring it closer to home and talk about a few things we might do to GetGoCool.com to really take care of your awesome customers.

Based on our past conversations, we know that there are three main needs that our customers have. hey want to find a retailer, (click) share information and (click) get answers to their questions.

Page 29: Floyd brad mobile_presentation

GETGOCOOL.COM

Find a Retailer Tell a Friend

OK, so any questions so far?

Great.

Let’s bring it closer to home and talk about a few things we might do to GetGoCool.com to really take care of your awesome customers.

Based on our past conversations, we know that there are three main needs that our customers have. hey want to find a retailer, (click) share information and (click) get answers to their questions.

Page 30: Floyd brad mobile_presentation

GETGOCOOL.COM

AnswersFind a Retailer Tell a Friend

OK, so any questions so far?

Great.

Let’s bring it closer to home and talk about a few things we might do to GetGoCool.com to really take care of your awesome customers.

Based on our past conversations, we know that there are three main needs that our customers have. hey want to find a retailer, (click) share information and (click) get answers to their questions.

Page 31: Floyd brad mobile_presentation

Mobile Version

GETGOCOOL.COM

Now we’ll have to dive in more to figure out all of the different technologies that can help you accomplish those things, however I do want wrap up by speaking about the value these concepts would bring to your customers.

You and I have previously spoke of your core target demographic, Truckers. Now truckers are very connected, but they’re not always on their laptops. They are however always on their mobile devices, and a mobile version of GetGoCool would give them a quick and easy way to access your site, which would let them know that you value their time and lifestyle.

Page 32: Floyd brad mobile_presentation

QUESTIONS

Page 33: Floyd brad mobile_presentation

REFERENCESAbout Gartner. (n.d.). Gartner Inc.. Retrieved June 23, 2012, from http://

www.gartner.com/technology/about.jsp

Affiliate Resources . (n.d.). Internet Marketing. Retrieved June 24, 2012, from

http://practicelightinternet.com/affiliate-resources-cb1/

Arrow down. (n.d.). Icon Search Engine. Retrieved June 24, 2012, from http://

findicons.com/icon/184617/arrow_down

Brill, M. (2012, February 16). Tablets: key usage statistics . The Future of

Mobile . Retrieved June 23, 2012, from http://txt4ever.wordpress.com/

2012/02/16/tablets-key-usage-statistics/

Business Obj. vs. User Exp.. (n.d.). MatSays. Retrieved June 24, 2012, from

http://www.matsays.com/notes/business-objectives-vs-user-experience-

via-smashing-magazine/

CityWest Church . (n.d.). CityWest Church . Retrieved June 24, 2012, from http://

www.citywestchurch.com.au/rwt-blog-28513

Comfort Box Shears . (n.d.). BlueStoneGarden.com . Retrieved June 24, 2012,

from http://www.bluestonegarden.com/Comfort-Box-Shears-HSB.html

Compress 1GB Data . (n.d.). Shazan Zahid: My Web World. Retrieved June 24,

2012, from http://www.shazanzahid.com/2011/08/compress-1gb-

into-64kb.html

Flower Heart. (n.d.). DryIcons.com. Retrieved June 24, 2012, from http://

dryicons.com/free-graphics/preview/flower-heart/

How to Optimize VPS . (n.d.). Best Cloud VPS Servers. Retrieved June 24, 2012,

from http://www.host1plus.com/blog/how-to-optimize-vps-performance/

Hunter Green Screen Marketing. (n.d.). Hunter. Retrieved June 24, 2012, from

http://www.huntergreenscreenmarketing.com/services.php

IDC. (2012, February 6). Smartphone Market. IDC Home. Retrieved June 23,

2012, from http://www.idc.com/getdoc.jsp?containerId=prUS23299912

Institute, T. R., & company, t. b. (n.d.). Maryland Estate Plan. Hyatt & Weber,

P.A. Law Firm. Retrieved June 24, 2012, from http://

hyattweberestateplanning.com

Ma, S. (2011, March 21). 10 Ways Mobile Sites Are Different . UXmatters.

Retrieved June 23, 2012, from http://www.uxmatters.com/mt/archives/

2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php