Web Engagement for the Mobile Era

Web Engagement for the Mobile Era

Russ Danner, Sr. Architect

Presented By

Rivet Logic Corporation Russ Danner
11410 Isaac Newton Square N. Sr. Architect / Engagement Director
Suite 210 Rivet Logic Corporation
Reston, VA 20190
Ph: 703.955.3480 Fax: 703.234.7711
ARTISANS OF OPEN SOURCE

Rivet Logic

•  Award-winning professional services focused on:
o  Web Experience Management
o  Enterprise Content Management
o  Collaboration and Social Communities

•  Using Leading Open Source Software

Copyright © 2011. Rivet Logic Corporation. All rights reserved. 2 ARTISANS OF OPEN SOURCE

Agenda

•  Driving factors
•  Keys for going mobile
•  Best practices
•  Technical Readiness
•  Demo
•  Questions


Foundational Shifts


Social


Local


Mobile


Re-enforcing Trends

Mobile

Social Local


A new era is upon us


The Tipping Point


Begin Adapting Today


Social Trends


Local / Personal Trends


Local Trends


Mobile Trends


Putting the pieces together


Keys to going Mobile


Key: Take a Mobile First Strategy


What do your Analytics say?


View Constraints


Not optimized for Mobile


Optimized for Mobile


Premium on performance


Key: Get user focused


Key: Remember new use profile


Key: Leverage unique capabilities


Key: Commit to mobile


Key: Create New, don’t port


Key: Best Practices


Practice: Single Platform, Multi-channel


Practice: Markup matters


Practice: Define target resolutions ranges


Practice: Touch targets sizes

Targets designed for slipping fingers:

Drag and release inside the green
area and the target should activate.

Let go outside the green area and
the target should cancel.

If you hold the target, the target
should simply highlight.

Avoid hover pop-ups, they don t
work very well in the mobile
context.


Practice: Use HTML5


Practice: Use Sprites


Practice: Consolidate and Compress Code


Technical Readiness


Multi-Channel Authoring


Single Content, Many Templates


Multi-channel Review (Preview)


Multi-channel Publishing


WCM: Alfresco + Crafter rivet


High level Architecture

studio

delivery

Demo

DEMO


Learn More:

sales@rivetlogic.com

www.rivetlogic.com

www.crafterrivet.org


Source References

  http://www.facebook.com/press/info.php?statistics
  http://www.socialnomics.net/2010/05/05/social-media-revolution-2-refresh/
  http://bynd.com/wp-content/uploads/2011/05/social_loco_infographic_vSCREEN.png
  http://www.wsiwebsmart.com/_blog/Blog/post/Do_You_Have_a_Mobile_Marketing_Strategy
  http://blog.kissmetrics.com/loading-time/
  http://www.lukew.com/ff/entry.asp?933
  http://www.lukew.com/ff/entry.asp?1479
  http://websmx.com/dme/?Workshops:Web_Development:Mobile_Development_Primer
  http://www.abookapart.com/products/mobile-first
  http://www.email-marketing-reports.com/wireless-mobile/smartphone-statistics.htm#smartphones
  http://www.mobileadvertisingbook.com/mobile-advertising/how-many-smartphones-are-there-in-the-us
 http://mobithinking.com
 http://www.digitalbuzzblog.com
 http://tag.microsoft.com/home.aspx
 http://www.onlinemarketing-trends.com/2011/07/yelp-celebrates-20-million-reviews.html
 http://money.cnn.com/2010/03/16/technology/facebook_most_visited/
 http://liesdamnedliesstatistics.com/2010/09/social-network-advertising-to-hit-4-2-billion-next-year.html
  http://www.socialmediadd.com/Articles.asp?ID=247
  Data noted from comscore and hitwise


Photo References
Foundational Shifts
iStock_000006018710XSmall.jpg
http://www.istockphoto.com/stock-photo-6018710-seismograph-machine-room-angle-view.php?st=585022d

Social
http://www.istockphoto.com/stock-photo-13182843-teamwork-communication.php?st=58b6ac2
http://www.istockphoto.com/stock-photo-536442-technology.php?st=cfbf01c
Local
http://www.istockphoto.com/stock-photo-11944524-business-people.php?st=2924205
Stock_000018624861XSmall.jpg
http://www.istockphoto.com/stock-photo-18624861-my-location-app-on-iphone-4.php?st=53e44de

Mobile
http://www.istockphoto.com/stock-photo-18500151-apple-ipad-and-iphone-4.php?st=d899090

Re-enforcing Trends
Original, Rivet Logic
The Tipping Point
http://4.bp.blogspot.com/-OFj9BGCasIY/TmLQt6qmJDI/AAAAAAAAArc/YLHC4CtaS6g/s1600/tipping+point+illustration.jpg
http://baroneenglish.blogspot.com/2011/09/what-if-we-could-be-tipping-point.html
Slide 10:Begin Adapting Today
http://www.istockphoto.com/stock-photo-13010529-monarch-butterfly-emerging-from-it-s-chrysalis.php?st=a624be5

Social Trends
Source: http://blog.kissmetrics.com/social-media-statistics/, http://www.socialnomics.net/2011/09/01/social-media-growth-infographic/

Social Trends
unknown

Local Trends
http://www.istockphoto.com/stock-photo-5167835-surfing-in-the-rain.php?st=767dc94

Local Trends
http://bynd.com/wp-content/uploads/2011/05/social_loco_infographic_vSCREEN.png

Mobile Trends
http://www.wsiwebsmart.com/_blog/Blog/post/Do_You_Have_a_Mobile_Marketing_Strategy/

Mobile Trends
Unknown

Putting the pieces together
http://www.istockphoto.com/stock-photo-17955906-last-puzzle-piece.php?st=a254387

Keys to going Mobile
http://www.istockphoto.com/stock-photo-17273059-apple-ipad-amp-iphone-apps.php?st=0659ec3

Take a “Mobile First” Strategy
http://www.istockphoto.com/stock-photo-17362545-mile-one.php?st=c71a80b

Backup Demo Slides


Alfresco Share


Dashboard


Author Content


View as iPhone


In context preivew


Backup Slides


Social Trends

Social is now the #1 internet activity


Social Trends

96% of people between 18 and 30
years old have joined a social network


Social Trends

Facebook handles more traffic in a
week than Google


Local Trends


Mobile Trends


Location Services


Video


Gestures


Camera


Microphone


Touch Targets

Touch target size should be:

Generally: 35px by 35px or 9mm

Minimum: 26px of 7mm

Spacing between targets
Minimum: 8px or 2 mm

Visual targets should be no less than 60%
of the target size


Pixels are not Pixels are not Pixels


HTML5


CDN


Look like your homepage?


Performance is Critical


Web Engagement for the Mobile Era

More Related Content

Web Engagement for the Mobile Era