Developing a mobile website

difficultmangledΚινητά – Ασύρματες Τεχνολογίες

12 Νοε 2013 (πριν από 3 χρόνια και 6 μήνες)

54 εμφανίσεις

Developing a mobile website

Erick Beck & John Chivvis

Texas A&M University

TAMU mobile web:

m.tamu.edu

Bob
Timm

Jeff
Carouth

Callouts

2000




1600





1200




800





400




0

2007E 2008E 2009E 2010E 2011E 2012E 2013E 2014
E

2015E

Mobile Users
v
. Desktop Users

(within 5 years)


Morgan Stanley Research


Global Mobile

v
. Desktop Internet User Projection, 2007
-
2015

I’ve never gotten good
reception in here.

Where have you
been living?

www.sxc.hu

Actually it’s time to go mobile.



2010: Mobile Web



2009:
TAMUmobile

for
iPhone

Elements of Mobile Web Development

Native Apps vs. Web

HTML/CSS for mobile displays

Content for mobile website

Native Apps
v
. Mobile Web

Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi
| Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer
| Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video
HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light
sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera |
Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital
compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro
| Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular |
Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity
sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p |
5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor |
Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet
access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass
| Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro |
Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular |
Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity
sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p |
5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor |
Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet
access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass

Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi
| Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer
| Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video








Experience

+ Content

Delivery

Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi
| Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer
| Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video
HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light
sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera |
Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital
compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro
| Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular |
Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity
sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p |
5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor |
Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet
access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass
| Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro |
Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular |
Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity
sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p |
5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor |
Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet
access | Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass

Three
-
axis gyro | Accelerometer | Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi
| Cellular | Bluetooth 2.1 | Video HD (720p | 5
-
MP still camera | Internet access | Three
-
axis gyro | Accelerometer
| Proximity sensor | Ambient light sensor | Assisted GPS | Digital compass | Wi
-
Fi | Cellular | Bluetooth 2.1 | Video








Pros/Cons of Native Apps


Pros


Controlled user experience


Use of hardware features


Off
-
line usage


Uses app code on device


Cons


Develop for each platform


Different experiences based on device


Cost/time of development/deployment


Testing not as easy


Upgrades/version require new downloads

Pros/Cons of Mobile Web


Pros


Cost/time to develop less


Upgrades quicker


Accessible to all/no installation


More discoverable


Cons


Customer satisfaction


User experience/performance depends on design


More difficult to access native device capabilities


No offline mode

The Future

www.sxc.hu

Is there still an app

for that?

That’s so 2009.

Has a
smartphone

Has one, too.

Has one, too.

Has one, too.

Has one, too.

So do they.

So do they.

But not this lady.

The Future

Making the Transition


Websites:


fast, inexpensive development


quickly conveying content


Tapping into AJAX/CSS, improved browsers
for similar experiences across devices.


App:


high profile projects


intensive graphics/animations


self
-
contained/offline


tapping into the device's hardware (camera,
GPS, accelerometer, etc.)

Mobile Web Design


We've come full circle to
what those communicators
in the audience already
knew, “
Content
i
s King.”


Focus on your content and
user experience and then
design accordingly.

Who to design for?

a)
rockStar’s


iPhone
.

b
)
OfficeJim’s

Droid.

c) Carg0Dude’s
TracFone
.

d
) creeper’s
Blackberry.

e
) All of the above.

“Sir,

the

possibility

of

successfully

navigating

the

mobile

user
-
agent

field

is

approximately

3720

to

1
.



Image
-

http://hubblesite.org/

Quote
-

Return Of The Mobile
Stylesheet

by Dominique
Hazaël
-
Massieux
,
alistapart.com



Design Choices

Icons

Lists


Be consistent.


Follow standard
conventions so as not to
confuse your users.


Give the user the
navigational/UI experience
they expect.


Content Design

Mobile site needs
to be lean, fast


Display the content


Need a faster
method of getting to
their content


Attracts high traffic
from desktop users

Mobile Content

“The user IS mobile, not just HOLDING one.”


-
Justin
Gatewood
, Victor Valley Community College District

Mobile girl under
trees with mobile
device

Mobile Content


Making a mobile website is not the same as making your website
mobile.


Customize your content.

http://www.flickr.com/photos/46550265@N02/4428701815/

Avg. NYT article length:
1,200 words

Avg. Online article:
250
-
500 words

Twitter length:

140 char.

Mobile Content

Mobile Content

What do they want?

Mobile Content

But wait, why’s this here?

What’s the “A&M” stand for?

What’s an “Aggie”?

Analyze & offer

0
10,000
20,000
30,000
40,000
50,000
60,000
70,000
11/21/05
11/22/05
11/23/05
11/24/05
11/25/05
11/26/05
11/27/05
Overall
Mobile
Texas A&M overall web traffic
v
. mobile traffic Nov. 22
-
28, 2009

Lessons learned


Don't worry about publishing everything at once.


Be willing to make mistakes.


Be flexible.


Look for partners.


Design & redesign.

Campus partners

Bringing it all full circle


Integrating data


New

partnerships


New features


Updates, updates

Questions/Contacts


Mobile:
m.tamu.edu


TAMUmobile

(Apps & Web):
www.tamu.edu/mobile


Blog:
webmaster.tamu.edu


Web:
www.tamu.edu



Erick:
ebeck@tamu.edu


John:
chiv@tamu.edu