Taking Your Content Mobile

Taking Your Content Mobile 30 minute quick intro... Dallas Open Camp 2010 http://www.ﬂickr.com/photos/87919923@N00/346563918/

HELLO!

Jeremy Johnson Director of User Experience for gamestop.com @jeremyjohnson I mobile

Taking Your Content Mobile *

blogs micro-blogs magazines marketing brochure information video photos e-commerce applications

blogs micro-blogs magazines marketing brochure information video photos e-commerce Needs custom applications 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?!

pre 2007 http://www.marco.org/980434663

100+ Million

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

!"#$%&'(&#'$)'*+&',$%%&-'.//'"0'12.-*/+"0&) !"#$%&'"("&)*(+,+(+-.&/0&12 34&56678&92 !"# %&# +,-./,.- ((# ((# $"# '%# 0112 )!# )*# $$# '3# 4567-85, )3# %*# )# 0;;<=>?26/8?./2 !!# 0;;<=@7/-1A5,. 98:.5 "&# 0;;<8BA5,. '$# 0;;<0,:/58: 2$:%*-;&!$/+<-&!-=+"&!"%>-(?<"*-&@ 92 @ 3"04$5&0*$.%'6'7-"/-$&*.-8 3"/8-$9+*':';<<='>+&'?$&%)&0'3"2/.08 "Gill, David" <David.Gill@nielsen.com>

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

“I’m just playing around” goal vs. leisure “I need to find a pizza joint”

leisure leisure mix goal “only” http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html

http://openca.mp/

www.jeremyjohnsononline.com

Lets get started! tic tic tic http://www.ﬂickr.com/photos/mar00ned/

Do I need a mobile website? You may already have one!

tumblr.com raisingrobots.com

posterous.com 23hd.com

Wordpress jeremyjohnsononline.com

Wordpress.com warmhotchocolate.com

twitter twitter.com/jeremyjohnson

Directing mobile traffic. http://www.ﬂickr.com/photos/42961457@N04/4036087411/

detect script yoursite.com m.yoursite.com

detect script yoursite.com m.yoursite.com iphone.yoursite.com

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://mobile.tutsplus.com/tutorials/html5/mobile-browser-detection/

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://wurﬂ.sourceforge.net/

Lets look at some options! http://ffffound.com/image/2f1c04e45f116d294ac0d667d68cce6ac9073de0

hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate

Strategy #1: Code well and do nothing special for mobile Strategy #2: Make a separate “mobile” site Strategy #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 plug-in site theme these CMS plug-ins, once installed give you options and themes to make your site mobile ready. http://www.bravenewcode.com/products/wptouch-pro/

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

e-commerce Needs custom applications 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. H ere will be a short excerpt of the post, fo r 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 mobile theme site desktop theme templates that have specifically formatted designs and markup for mobile devices. http://www.bravenewcode.com/products/wptouch-pro/

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 CSS 1 CSS 2 HTML 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: <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

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

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 detect script yoursite.com 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.ﬂickr.com/photos/34838158@N00/3370167184/

http://analytics.percentmobile.com/

https://www.google.com/analytics

Testing http://www.ﬂickr.com/photos/93607538@N00/4271429/

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

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

Extra! http://www.ﬂickr.com/photos/33859819@N00/342958601/

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

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/ﬂash-and-html5-canvas/#sidebyside-hbar-1

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

questions?

www.jeremyjohnsononline.com thanks! jeremy johnson @jeremyjohnson

http://www.conseilsmarketing.fr	63
http://www.jeremyjohnsononline.com	55
http://www.conseilsmarketing.com	5
http://www.commpro.biz	3
http://zhuaxia.com	1

Taking Your Content Mobile

by Jeremy Johnson on Aug 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 127

Statistics

Taking Your Content Mobile — Presentation Transcript