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

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?

Do I need a mobile website?

Maybe?!

http://www.marco.org/980434663

pre 2007

Today

100+ Million

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

!"#

$"#

%&#

'%#

((#

)!#

((#

)*#

+,-./,.-

0112

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

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

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

$$#

)#

'3#

!!#

)3#

"&#

)*#

%*#

'$#

4567-85,

98:.5

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

mix

“only”

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

goalleisure

leisure

mix

“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

0

Directing mobile traffic.

http://www.flickr.com/photos/42961457@N04/4036087411/

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/

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/

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

hosted

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

•easy•no setup•auto updates

+

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

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://www.bravenewcode.com/products/wptouch-pro/

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

+

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

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

+

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

themes / templates

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

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

mobile theme

desktoptheme

site

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

+

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

style-sheets

separate CSS layer specifically for mobile devices

CSS 1

HTML

CSS 2

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

depending on the devices targeted, including handheld media:

<link rel="stylesheet" href="screen.css" media="screen"/>

<link rel="stylesheet" href="handheld.css" media="handheld"/>CSS included a similar feature via @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

+

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

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

+

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

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://www.flickr.com/photos/34838158@N00/3370167184/

http://analytics.percentmobile.com/

https://www.google.com/analytics

Testing

http://www.flickr.com/photos/93607538@N00/4271429/

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

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

Extra!

http://www.flickr.com/photos/33859819@N00/342958601/

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