Taking Your Content Mobile: Very quick Introduction

Strategy 1: Code well and do nothing special for mobile Strategy 2: Make a separate “mobile” site Strategy 3: Build mobileaware adaptive sites The hardest to pulloff methodology is the one that can bring the best of all worlds to your site visitors. A fully mobileaware site has adaptive content that reacts to device capabilities, and is therefore futureproof as it tests features rather than sniffing browsers. sites that are hosted, with readytogo mobile versions served up automatically. these CMS plugins, once installed give you options and themes to make your site mobile ready. templates that have specifically formatted designs and markup for mobile devices. separate CSS layer specifically for mobile devices. layouts that use mediaquery to detect size of the browser, and adjust appropriately. 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

Taking Your

Content Mobile

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

30 minute quick intro

Dallas Open Camp 2010

HELLO!

Taking Your

*

micro-blogs magazines

marketing

brochure

information video

photos

e-commerce applications

How many of you have a

website?

How many of you

website?

Do I need a

mobile website?

Do I need a

mobile website?

Maybe?!

pre 2007

Today

100+ Million

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

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”

goal leisure

leisure mix

“only”

goal leisure

leisure mix

“only”

http://openca.mp/

www.jeremyjohnsononline.com

Lets get started!

tic tic tic

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

tumblr.com

posterous.com

Wordpress

Wordpress.com

twitter

Directing mobile

traffic.

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

m.yoursite.com

detect script

m.yoursite.com

iphone.yoursite.com

detect script

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

Lets look at

some options!

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

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/

plug-ins

custom dev

themes / templates style-sheets

adaptive-layouts

auto-generate

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

ready-• easy

+

plug-ins

custom dev

themes / templates style-sheets

adaptive-layouts

auto-generate

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

these CMS plug-ins, once

installed give you options and

themes to make your site

mobile ready.

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

plug-ins

custom dev

themes / templates style-sheets

adaptive-layouts

auto-generate

applications 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>    

• total control

interactions

+

themes / templates

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

templates that have specifically

formatted designs and markup

for mobile devices.

mobile theme

desktop theme 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

+

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

+

plug-ins

custom dev

themes / templates style-sheets

adaptive-layouts

auto-generate

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/

plug-ins

custom dev

themes / templates style-sheets

adaptive-layouts

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/

http://www.flickr.com/photos/34838158@N00/3370167184/

http://analytics.percentmobile.com/

https://www.google.com/analytics

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

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

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

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

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?

jeremy johnson

@jeremyjohnson

www.jeremyjohnsononline.com