MOBILE SITE

ARCHITECTURE.

DESIGNING & RE-PURPOSING FOR THE MOBILE WEB WITH SEO, FRAMEWORKS, & USABILITY IN MIND

BEN DAVEY. MOBILENATION

4,617,136,636 mobile phone subscriptions

3,500,000,000 Tooth brushes in use

MOBILE INTERNET IS EXPLODING

•  72.5M people in the US have a smartphone •  48% of customers use mobiles in-store for product research •  People are turning back to the browser to get information – mobile

browsing exceeds use of downloaded apps

A MOBILE PRESENCE IS A MUST-HAVE FOR ALL BUSINESS

Consumers now see mobile internet more indispensible than

making calls

Source:  Prosper  Mobile  Insights,  2011  

21.6%  16.7%  

15.7%  7.8%  

6.9%  5.9%  

4.9%  2.0%  2.0%  

1.0%  

TexCng  Internet  

Email  Call  GPS  

Facebook  Apps  News  

Bluetooth  Calendar  

The mobile web experience

•  Not  just  a  320px  window  to  the  desktop  internet  

•  Access  to  new  hardware  – GPS  – Telephony  – Touch  gestures  – Soon:  Camera  

•  New  ways  to  access  and  link  content  

You can rely on your mobile users having a more up-to-date browser than your desktop users!

87.3% of all smartphones run a webkit derived browser capable of displaying HTML5 content (iOS+android+RIM)

Search on mobile

•  Discovery  of  mobile  content  isn’t  just  through  search  engines  – Social  networking  – Social  check-­‐ins  

•  Google  has  an  IniCal  focus  on  locaCon  relevance  &  local  lisCngs  

Mobile web SEO

Technical   Content  

External  

External SEO

•  Add  to  google  business  lisCngs  •  Social  media  &  Crowd-­‐sourced    •  Foursquare,  where.com  

•  Think  about  the  posiConing  of  physical  aZenCon  geZers  that  enable  linking  of  physical  media  -­‐  2D  barcodes,  Shazam  audio  recogniCon,  digimarc  

Technical optimisations

•  URL  rewriCng  opCmisaCons  sCll  help  

•  Microdata  (www.schema.org)  •  ThemaCc  consistency  

hZp://m.mysite.com/posts/123  

hZp://m.mysite.com/post?id=123  

Thematic consistency

Ensure  that  content  provided  by  accessing  a  URI  yields  a  themaCcally  coherent  experience  when  accessed  from  different  devices  

“  ”  -­‐  W3C  mobile  web  best  pracCses  

Thematic consistency

hZp://mysite.com/posts/123    

hZp://m.mysite.com/posts/123  

Thematic consistency •  Something  of  a  pipe  dream  for  most  

•  Tends  to  favour  the  lowest  common  denominator  •  Adopt  consistent  redirecCon  policies  instead  –  redirect  to  a  higher  level  page  in  the  same  category  

≠

Architecting your mobile presence

Simplicity  is  the  key  to  brilliance    –  Bruce  Lee  

 “   ”  

Mobile usage habits tend to vary significantly to Sedentary usage habits – users want important information with minimal navigation Keep your mobile front simple and ensure a consistent UI

Know your content

Touch-based Native apps began the mobile revolution

The App ExplosionBack

MoreTab 4 Tab 3Tab 2Tab 1

Why?

2000 Mobile web app

2011 Mobile web app

Mobile HTML5 – allowing app-like experiences online

•  FORMULATED WITH TOUCH DEVICES IN-MIND

•  WORKS ACROSS MULTIPLE PLATFORMS & DEVICES

•  SUPPORTS TOUCH GESTURES, HARDWARE-ACCELERATED GRAPHICS, GPS,MORE

•  EASIER TO TIE-INTO EXISTING WEB EXPERIENCES

•  PARTS OF THE EXPERIENCE CAN BE CACHED TO WORK OFFLINE – GREAT FOR MOBILE NETWORKS

WHO’S USING IT?

FOR TECHNICAL, POLITICAL & ACCESSIBILITY REASONS…

FRAMEWORKS

JO  (JoApp.com)  

jQMobile  

jQuery  Mobile  

AbstracCons  providing  animated  transiCons,  &  widgets  such  as  toolbars,    tab  views,  table  views,  buZons  etc.  Typically  designed  to  mimic  naCve  app  behavior  

FRAMEWORK-BUILT DYNAMIC SITES AND SEO  

MOBILENATION

MOBILENATION

Build  and  deploy  mobile  content  in  minutes  –  no  developers  or  IT  needed  

Develop  apps  in  hours  

Deploy  far  beyond  

convenConal  app-­‐stores  

Leverage  exisCng  content  &  

infrastructure  

Update  in    minutes  

MobileNation BEN@MOBILENATIONHQ.COM @MOBILENATIONHQ PH. 0414 476 248 (AUS), 650 283 4237 USA