building tomorrow's web with today's tools
DESCRIPTION
Few have the chance to create web-based mobile services from scratch. After years of investment in existing platforms (such as content management systems), how can you re-use your content, your servers, and your knowledge and evolve them to meet the mobile challenge?TRANSCRIPT
James Pearce Director, Developer Relations @ jamespearce [email protected]
BuildingTomorrow’s Web
With Today’s Tools
1941
An Experience Designed for the Medium
1995
An Experience Designed for the Medium
2007
An Experience Designed for the Medium
History has taught usto embrace change
History has taught usto question assumptions
History has taught usto have high expectations
How Mobileis Changing The Web
How The Webis Changing Mobile
2008
We must have aniPhone App!
2009
We must have anAndroid App!
2010
We must have aniPad App!
2011
We must have a...
omfg
PalmMicrosoft
Apple
Android
RIM RIMAndroidAppleMicrosoftPalm
Top U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010
Java
J2ME
Air
C++
C#
Obj-C
JS
Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
The Mobile Web
But what does this word even mean?
A perfect storm
ApplicationsDocuments
Programmatic DOMDeclarative HTML
JSON APIsThemes & templates
Arguments & signalsURLs
SynchronizationRequest/Response
Thick clientThin client
A New Web Stack
Worker Parallel
Processing
File SystemsDBs
App Cache
JavaScript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
More...
Web technologiesare a
viable alternativeto native development
Apps vs Web technologybuilt with
ApplicationsDocuments
Programmatic DOMDeclarative HTML
JSON APIsThemes & templates
Arguments & signalsURLs
SynchronizationRequest/Response
Thick clientThin client
Mobile userSedentary user
This is what it means
Mobile isan adjective not a noun
@media screen and (max-w
idth: 480px) {
#logo {
background-image: ur
l(mobile.png);
}}
Mobile devices are di!erent
Phone
GPS device
Camera
Music player
Content-Type: applicatio
n/msword
The Mobile Webis not a
320px Web
How did those assortedtank tops work out for you?
Techniques
adaptationad·ap·ta·tion
noun /ˌadapˈtāSHəәn/ /ˌadəәp-/
1. The action or process of adapting
or being adapted
2. A movie, television drama, or stage play
that has been adapted from a written work
3. A change by which an organism or species
becomes better suited to its environment
Mobile adaptation
Presentational
Prioritizational
Permutational
Presentational adaptation
Layout
Prioritizational adaptation
Navigation and IA
Permutational adaptation
Functionality
The topology of adaptation
Client Proxy Server
Permutational
Prioritizational
Presentational
Client Proxy Server
‘Passive’ client adaptation
<a href="tel:/
/555">555</a>
Proxy adaptation
There’s a bad sort
There’s a good sort
HTML, CSS...
Models
Controllers
Views
Server adaptation
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
Server adaptation
WordPress Mobile Packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack
Device detection with plugins
WPTouchhttp://wordpress.org/extend/plugins/wptouch
Drupal Mobile Pluginhttp://drupal.org/project/mobileplugin
Brand consistency
if (isset($_SERVER['HTTP_X_WAP_PROFILE']) { ...
if (in_array(substr($user_agent, 0, 4), $prefixes)) { ...
if (strpos($accept, 'wap') !== false) { ...
if (preg_match("/(" . $keywords . ")/i", $user_agent)) { ...
https://github.com/jamesgpearce/mobiledetect
Device detection with PHP
class ApplicationController < ActionController::Base has_mobile_fuend
*.mobile.erb
is_mobile_device?in_mobile_view?
https://github.com/brendanlim/mobile-fu
Device detection with Rails
var Connect = require("connect"), Monomi = require("monomi");
Connect.createServer(
Monomi.detectBrowserType(),
function(request, response, next) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.write('Hello World: '); response.end('you are using a ' + request.monomi.browserType); }
).listen(8080);
https://github.com/jamesgpearce/monomi
Device detection with node.js
Detection & user choice“Switch to our desktop site”
Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://m.mysite.com/posts/123
Using di!erent URLscan preserve
the integrity of‘One Web’
Can I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
Device diversity
Permutational
Prioritizational
Presentational
Client Proxy Server
Passive client adaptation
Responsive Web Design
Proxy adaptation
Device detection
Mobile site
Permutational
Prioritizational
Presentational
Client Proxy Server
Passive client adaptation
Responsive Web Design
Proxy adaptation
Device detection
Mobile site
A dedicated mobile app
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
The stack of the future
Storage
Security Business logic
User interfacesync
Storage
The return of the thick client
Do we have time for some code?
Progressive enhancement
JSCS
S
apppr
ogre
ssiv
een
hanc
emen
t
HTM
L
doc
assu
mpt
ion
vs
HTM
LJS
CSS
app
assu
mpt
ion
+/- featuredetection
Thick client, thin server
The shortfall in the cloud
http://mysite.com/myimage.png
http://i.tinysrc.mobi/http://mysite.com/myimage.png
Permutational
Prioritizational
Presentational
Client Proxy Server
Mobile app
Passive client adaptation
Responsive Web Design
Proxy adaptation
Device detection
Mobile site
Cloud support
Mobile isan adjective not a noun
The Mobile Webis not a
320px Web
History has taught usto embrace change
History has taught usto question assumptions
History has taught usto have high expectations
James Pearce Director, Developer Relations @ jamespearce [email protected]