Upload
brfloyd
View
114
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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.
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)
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)
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)
“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)
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)
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?
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?
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?
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!
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!
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!
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.
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.
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.
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)
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)
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.
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.
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.
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.
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.
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?
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?
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?
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?
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?
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.
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.
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.
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.
QUESTIONS
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