mobilephant
DESCRIPTION
Wordcamp Hamilton talk I gave about issues with designing for mobile and various solutions. I blame web designers for breaking the webTRANSCRIPT
Richard RudyWordcamp Hamilton 2013
Follow: @thezenmonkey #mobilephant
Monday, 24 June, 13
the mobile sized
in the roomRichard Rudy - Wordcamp Hamilton 2013
#mobilephant
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
mobile =
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
why do we care?
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
2011
371K/day 378K iPhones
562K iOS Devices
700K Android Devices
200K Nokia Smartphone
243K Blackberries
1.45M Devices/Day
http://www.lukew.com/ff/entry.asp?1728
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
2012
371K/day 572K iPhones
916K iOS Devices
2.4 Android Devices
247K Nokia Smartphone
66K Blackberries
3.6M Devices/Day
http://www.lukew.com/ff/entry.asp?1728
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
2012
3.6M Devices/Day
http://www.lukew.com/ff/entry.asp?1728
2011
1.45M Devices/Day
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
why do we care?
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
why do we need to deal with mobile?
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
because WE broke the web
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerationssmaller screens
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
larger input device
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
different interaction paradigms
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
context
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
network speed
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
seo
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
considerations
art direction
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
options
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
options
Separate Mobile Site
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
options
Responsive Design
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
options
ReSSResponsive with Server Side components
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
options
Screw It!
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
Separate Mobile Site
build a separate site
use a service like Wirenode
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
Separate Mobile SiteBenefits• Optimized Mobile Experience• Highly Customizable Layout• Can be fairly automated• Can Address Art Director Dilemma
Problems• Separate URL Structure• Links May Not Be Sharable Across Devices• SEO Headaches • Requires Maintaining Two Sets of Content• Requires Maintaining Two Code Bases• Monthly Fee if Using a Service• .mobi and m.domain seem antiquated
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
HTML5 + CSS3
many Wordpress template options
Responsive Design
custom theme
use a framework like Bootstrap or Foundation
intentional.js
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
Responsive DesignBenefits• One Codebase• One Content Source• Links Are Sharable• Same URL: No Sharing or SEO Issues• All In Browser So It’s Only Front-end Dev Work
Problems• Can’t Address Art Director Dilemma (Yet)• Can Make for Heavy Pages• Responsive Images• Sometimes you need to repeat and hide elements• Spec Isn’t Finished• Testing Suites
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
ReSSWPtouch
Roll Your Own
Adaptive Images
COPECreate Once Publish Everywhere
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
ReSSBenefits• One Content Source• Links Are Sharable• No SEO Issues• Can Solve Art Directors Dilemma• Optimizes Payload• Address Network Issue
Problems• Needs Both Front-end and Back-end Components• Can Complicates Your IA• Up-front Cost + Maintenance• Testing Suites
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
options
Separate Mobile SiteResponsive Design
ReSS
Monday, 24 June, 13
#WCHamOnt#mobilephantgotomarketers.com
Thank YouAll Icons from The Noun Project (http://thenounproject.com)
Elephant designed by Adrijan Karavdic from The Noun ProjectiPad from The Noun Project
Watch from The Noun Project
Follow: @thezenmonkey #mobilephantMonday, 24 June, 13