Taking Your Content Mobile

transcript

Taking YourContent Mobile

http://www.flickr.com/photos/87919923@N00/346563918/

30 minute quick intro...Dallas Open Camp 2010

HELLO!

Jeremy JohnsonDirector of User Experience for gamestop.com

I ♥mobile@jeremyjohnson

Taking YourContent Mobile

blogsmicro-blogsmagazinesmarketingbrochureinformationvideophotose-commerceapplications

Needs custom experience...

How many of you have a website?

How many of you have a mobile website?

Do I need a mobile website?

Maybe?!

http://www.marco.org/980434663

pre 2007

100+ Million

http://www.lukew.com/ff/entry.asp?1174

+,-./,.-

!"#$%&'"("&)*(+,+(+-.&/0&1234&56678&92

!"#$%&'(&#'$)'*+&',$%%&-'.//'"0'12.-*/+"0&)

3"04$5&0*$.%'6'7-"/-$&*.-83"/8-$9+*':';<<='>+&'?$&%)&0'3"2/.08

4567-85,

0;;<=>?26/8?./20;;<=@7/-1A5,.0;;<8BA5,.0;;<0,:/58:

2$:%*-;&!$/+<-&!-=+"&!"%>-(?<"*-&@ 92

"Gill, David" <David.Gill@nielsen.com>

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201001-201008

goal vs. leisure

“I need to find a pizza joint”

“I’m just playing around”

http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html

goalleisure

leisure

“only”

http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html

goalleisure

leisure

“only”

http://openca.mp/

www.jeremyjohnsononline.com

Lets get started!

tic tic tic

http://www.flickr.com/photos/mar00ned/

Do I need a mobile website?

You may already have one!

raisingrobots.comtumblr.com

23hd.composterous.com

jeremyjohnsononline.comWordpress

warmhotchocolate.comWordpress.com

twitter.com/jeremyjohnsontwitter

Directing mobile traffic.

yoursite.com

m.yoursite.com

detect script

yoursite.com

m.yoursite.com

iphone.yoursite.com

detect script

http://mobile.tutsplus.com/tutorials/html5/mobile-browser-detection/

<?php $agent = $_SERVER['HTTP_USER_AGENT']; if(preg_match('/iPhone|Android|Blackberry/i', $agent)){ header("Location: mobile.html"); exit; } ?>

http://detectmobilebrowser.com/

http://code.google.com/p/php-mobile-detect/

The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.http://wurfl.sourceforge.net/

Lets look at some options!

http://ffffound.com/image/2f1c04e45f116d294ac0d667d68cce6ac9073de0

hostedplug-inscustom devthemes / templatesstyle-sheetsadaptive-layoutsauto-generate

Strategy #1: Code well and do nothing special for mobileStrategy #2: Make a separate “mobile” siteStrategy #3: Build mobile-aware adaptive sites

The hardest to pull-off methodology is the one that can bring the best of all worlds to your site visitors. A fully mobile-aware site has adaptive content that reacts to device capabilities, and is therefore future-proof as it tests features rather than sniffing browsers.

http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

hosted

sites that are hosted, with ready-to-go mobile versions served up automatically.

•easy•no setup•auto updates

plug-ins

http://www.bravenewcode.com/products/wptouch-pro/

these CMS plug-ins, once installed give you options and themes to make your site mobile ready.

plug-in themesite

plug-ins

http://crowdfavorite.com/wordpress/plugins/wordpress-mobile-edition/

http://mobilepress.co.za/

http://www.wptap.com/

http://mobiforge.com/running/story/the-dotmobi-wordpress-mobile-pack

•pretty easy•minor setup•available for a wide

selection of CMS•ability to customize

e-commerceapplications

Needs custom experience...

01. <ul class="rounded"> 02. <li><a class="blog-‐

title" href="#livetest">Post Title</a><br />

03. <div class="month">Jun</div> 04. <div class="date">30</div> 05. <p class="post-‐

author">By: <i>Connor Zwick</i></p> 06. <p class="post-‐

description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>

07. </ul>

http://mobile.tutsplus.com/tutorials/html5/mobile-wordpress-theming-day-2/

• total control•you’ll learn a lot•explore new mobile

interactions

themes / templates

templates that have specifically formatted designs and markup for mobile devices.

mobile theme

desktoptheme

http://www.blogohblog.com/wordpress-mobile-theme/

http://themeforest.net/item/simple-mobile/110202?redirect_back=true&ref=wpexplorer&clickthrough_id=11329982

http://drupal.org/project/nokia_mobile

http://themeforest.net/item/mobility-wordpress-theme-for-web-and-ipad/103273

• free/cheap•OK selection• tested

style-sheets

separate CSS layer specifically for mobile devices

As early as 1998, the HTML 4 specification offered ways to link to different style sheets

depending on the devices targeted, including handheld media:

@media screen { /* rules for computer screens */ }

@media handheld { /* rules for handheld devices */ }

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/

•only extra CSS / style sheets

adaptive-layouts

layouts that use media-query to detect size of the browser, and adjust appropriately.

yoursite.com yoursite.com

http://colly.com/comments/carry_on_responsively/

“Over several days he forcibly manipulated the layout with CSS media queries, and in turn created initial dynamic layouts for certain desktop browser widths, and various orientations of iPad and iPhone.”http://colly.com/comments/carry_on_responsively/

•street cred •only extra CSS / style

sheets•consistent design

auto-generate

yoursite.com

detect script

auto-generate

mobile site

a mobile version is “scraped” from your desktop site and generated on the fly.

http://mobify.me/

http://www.google.com/gwt/n

http://bmobilized.com/

http://www.usablenet.com/

•no changes to your site

•zero need for any IT involvement

•quick! (but sometimes dirty...)

Tracking!

http://analytics.percentmobile.com/

https://www.google.com/analytics

Testing

http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2

http://www.opera.com/mobile/demo/

Extra!

http://tinysrc.net/

http://i.tinysrc.mobi/http://mysite.com/myimage.png

http://www.sencha.com/

http://nicolasgallagher.com/demo/pure-css-social-media-icons/

http://www.svgcharts.net/Example.aspx?type=line

http://www.zingchart.com/flash-and-html5-canvas/#sidebyside-hbar-1

http://www.apple.com/html5/

questions?

thanks!jeremy johnson@jeremyjohnson

www.jeremyjohnsononline.com

Taking Your Content Mobile

Technology