2. Who Are We?
Brian Young Scotty Logan
Interface Designer IT Architect
& Web Developer
First web page: 1998 First web page: 1993
First web server: 1998 First web server: 1994
4. Twitter
We’ll make references to twitter
Everyone at #bdconf uses twitter
Scotty @scottylogan
Brian @auracreations
We’re tweeting now
Search for #suitoh11
6. Quick Survey
Do you have...
iPhone (iPod Touch?)
iPad
Android (tablet?)
Blackberry
Palm Pre / Win Phone 7 / smartphone
“dumb” / “feature” phone
7. Quick Survey
How many of you are
web developers or designers?
mobile web developers or designers?
native mobile app developers?
managers of any of the above
8. Why Mobile Matters
Mobile web access > non-mobile by 2015
Average iPhone user only spends 45% of his on-
device time making voice calls
9. Why Mobile Matters
25% in US only use mobile web; 70% in Egypt
59% of people have viewed website on phone,
then followed up on desktop
34% have done the reverse
@stephanierieger #bdconf
11. NetDB Active by OS
iPhone 5000
Android
Windows Mobile 3750
iPad
2500
Symbian
iPod
1250
WebOS
Blackberry
0
Windows Phone 7 April 2011 July 2011
12. www.stanford.edu
March - April 2011
iPhone 20000
Android
Win Mobile / WP7 15000
iPad
10000
Symbian
iPod
5000
WebOS
Blackberry
0
Other April 2011 July 2011
13. US Mobile Market
Oct ‘10 Jan ‘11 May ‘11
30%
22.5%
15%
7.5%
0%
Samsung LG Motorola RIM Apple Other
http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
14. US Smartphone Market
Oct ‘10 Jan ‘11 May ‘11
40%
30%
20%
10%
0%
Google RIM Apple Microsoft Palm Other
http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
15. Global Mobile Market
2009 2010 2011
40%
30%
20%
10%
0%
Nokia Samsung LG RIM Apple Sony E.Motorola ZTE HTC Huawei Others
Gartner, February 2011
16. Global Smartphone Market
2009 2010 2011
50%
37.5%
25%
12.5%
0%
Symbian Google RIM Apple Microsoft Other
Gartner, February 2011
17. Speed Matters
17% of people will not wait more than
5 seconds for a mobile web site to load
Gomez “When Seconds Count”
19. Where is mobile used?
82% of mobile web use at home
Waiting in line
Most tablet use 6pm - 10pm
(in bed?)
@lukew #bdconf
20. Mobile Browser Environment
Good Browsers Not So Good Browsers
iOS, Android, Feature phones and
Opera Mobile, everything else
new Blackberry,
No support for
WebOS
HTML5, CSS3 or JS
Support most of
WP7 for now :-(
HTML5, CSS3, JS
@ppk's mobile browser feature compatibility list
http://www.quirksmode.org/mobile/
21. Mobile is Personal
Anywhere, anytime access
Access to user location, camera, address
book, phone functionality, etc.
Touch and gesture control
Even babies can play games on the iPad
22. Apps
What is an App?
Everyone wants Apps
Do you really need one?
Native or Web App?
23. Native App
Coded in multiple languages, tools:
Objective C and XCode (iOS)
Eclipse and Java or C++ (Android)
??? and J2ME (Blackberry, older devices)
Web tool & Javascript, CSS and HTML (WebOS)
.Net Studio and C# (Windows Phone 7)
Code cannot be reused across platforms :(
In app stores, with 300,000 other apps
24. Web App
Coded in HTML5, CSS 3, and Javascript
Do it once and available everywhere
Can be installed on phone
Can be cached locally
even work offline
Access to local storage
No access to camera, contacts, etc (yet)
25. Hybrid Solutions
Wrap your web app in a native app
Device access (camera, contacts, etc)
Available in app stores
Open source
PhoneGap
Commercial
Appcelerator Titanium (fewer devices)
26. Still need a web site
Visitors and other non local users
Search
Returns links
Google does not distinguish between
desktop or mobile sites
Feature phones
Phones you don't build for
30. Separate Mobile Site
Used to be the way to do it
When devices had very limited
browsers
More maintenance
What about new devices?
Device detection scramble
Usually means a redirect [BAD]
31. Progressive Enhancement
Deliver a simple site
Enhance it based on the
capabilities of the browser
Media Queries
Feature detection
(Modernizr)
JavaScript
CSS3 features
32. Responsive Design
Website should display content reasonably
regardless of device resolution / orientation
fluid grids, CSS 3 layouts
content priority is maintained
content adjusted to the viewable space
text scaled to maintain content readability
Ethan Marcotte’s article
http://www.alistapart.com/articles/responsive-web-design/
33. Ethan was mostly right
He was wrong about images
Suggested using largest needed image
Letting the browser resize
Really bad for performance
Jason Grigsby: resize images on server
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
34. Mobile First!
Luke (@lukew) Wroblewski's Mobile First Talk
http://www.lukew.com/ff/entry.asp?1137
Mobile constraints improve design
Limited screen real estate on mobile
One distracted eyeball, one fat finger
Cut the crap, present only the most important
content
Better usability = Better experience!
36. or is it Content First?
Site Architecture
Many people ignore and forget this
Using all your content might not be the
answer
But mobile users often want it all
What do mobile users need on your site?
Use analytics
38. Accessibility
If I can't use your awesome website...
It's not really that awesome, is it?
@stephanierieger
#bdconf
Make content accessible by everyone
Content accessibility > Presentation styles
39. Viewports
Mobile browsers default to 960px wide
but scaled down
Fine for desktop sites, not for mobile sites
Set the viewport...
carefully
42. Performance and Optimization
Mobile devices often suffer from
Low bandwidth
High latency
Unreliable connectivity
Slower processors
Browsers only use 2,4, or 6 connections
to a site
43. How Pages are Fetched
iOS 4.3 uses up
to 4 connections
44. How Pages are Fetched
Android 2.2
uses up to 11
connections!
46. Images
Resize images on the server
WURFL has tools for this
http://tinysrc.net/
For images used in CSS
Base64 encode images, embed in CSS
Use CSS sprites
47. Testing
Emulators / simulators work, up to a point
May need Mac and Windows hosts
Test with real devices
On real networks (3g, Starbucks wifi)
In real conditions
Outside in sunshine
In classrooms
48. Managing a Mobile Site
Content Management and Maintenance
Use database or CMS to manage content
Reuse and publish content to multiple locations
Web Analytics
Track usage and behavior
Justify the need for mobile optimized sites
Continual Improvement
49. Mobile Aware Web Project
SGG funded project, with participants from
IT Services
University Communications
Student Affairs
Develop guidelines and tools
Develop reference sites, including
http://www.stanford.edu/m
http://itopenhouse.stanford.edu
50. What we're considering
JQuery Mobile for mobile framework
UI elements
Base style
Modernizr for feature detection
Media queries for screen size detection
Simple backend device classification
mod_rewrite regular expressions FTW!
51. Mobile Framework Showcase
Examples of mobile aware web developed using a
mobile framework
JQuery Mobile
http://commencement.stanford.edu/m
JQ Touch
http://www.stanford.edu/m
Sencha Touch
http://www.stanford.edu/group/itopenhouse/m
did any one web developers / designers drop their hands when asked about mobile? Guess what... you’re mobile developers / designers\n\nhttp://www.flickr.com/photos/wessexarchaeology/321370565/\n\n
Morgan Stanley, via http://mashable.com/2010/04/13/mobile-web-stats/\n\nhttp://www.flickr.com/photos/soldiersmediacenter/3729394795/\n
Morgan Stanley, via http://mashable.com/2010/04/13/mobile-web-stats/\n\nhttp://www.flickr.com/photos/50101005@N03/4607048471/\n
iPhone - >9,300 (~82%)\niPad - 348\nWindows Mobile - 636\nAndroid - 871\n\nIncludes old devices no longer in use\nbased on user selected OS in NetDB\ndoes not include “builtin” OS choice\n\nhttp://www.flickr.com/photos/eszter/478947769/\n\n
No Windows Phone 7 or Blackberry showing up\nAgain - not including “built-in” OS\n\nProblematic time for comparison - lots of users are away from campus\n\nhttp://www.flickr.com/photos/eszter/478947769/\n
Safari (iPhone, iPad, Android/Webkit) is now 3% of total homepage traffic\nGoogle Analytics does not break out Windows Mobile and Windows Phone 7\nOnly includes browers with javascript enabled\n\nhttp://www.flickr.com/photos/eszter/478947769/\n
http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n\n
http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
http://reviews.cnet.com/8301-19736_7-20031147-251.html\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
http://reviews.cnet.com/8301-19736_7-20031147-251.html\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
[twitter]Gomez When Seconds Count report http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf[/twitter]\n\nhttp://upload.wikimedia.org/wikipedia/commons/d/d0/FA-18_Hornet_breaking_sound_barrier_%287_July_1999%29.jpg\n\n
Repetitive now - deleting mail in the morning\nBored now - need something to do while in line, waiting for meeting to start, etc.\nUrgent now - I’m running late, which gate is my plane leaving from?\n\nhttp://www.flickr.com/photos/benlanc/4786607582/\n\n
[twitter]@ppk’s mobile browser feature compatibility list http://quirksmode.org/mobile/[/twitter]\nPeople don't really surf the web using the bad browsers, unless they have to\n\nhttp://www.flickr.com/photos/johanl/4424185115/\n \n
Brian Fling @fling #bdconf offers clients a web app for less than full cost, because it’s the right thing to do; client always choose to pay more for a native app\n\nhttp://www.flickr.com/photos/kaioshin/3085642914/\n\n
Well, mostly everywhere... might need some tweaks\nInstalled web pages have icons like regular apps\nW3C and others are working on device APIs; security remains an issue (for regular web pages)\n\nThere’s standardization work on device APIs at http://www.wacapps.net/web/portal too\n\nhttp://www.flickr.com/photos/schmish/4090562160/\n\n
[twitter]native app wrappers for web apps: http://phonegap.com/ and http://appcelerator.com/[/twitter]\nAlso Rhombile, but it uses a custom language\n\nhttp://www.flickr.com/photos/kitkaphotogirl/3516722887\n
SEO is all about links\nWhile you can create links to apps (on most devices), they’ll fail horribly if the user doesn’t have the app installed\n\n
\n
\n
\n
There may be cases where you have to do this\n\nWe’ll talk about redirects shortly\n\nhttp://www.flickr.com/photos/peterblanchard/3387759956\n\n\n\n
[twitter]lynx is the ultimate test of content first / progressive enhancement[/twitter]\n\n\n
[twitter]Original Responsive Web Design article: http://www.alistapart.com/articles/responsive-web-design/[/twitter]\n\nhttp://www.flickr.com/photos/kenjonbro/3796564454\n\n
[twitter]@grigs’ response to responsive design: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/[/twitter]\n\nhttp://www.flickr.com/photos/daveknapik/402730950/\n\n
[twitter]@lukew’s mobile first talk http://www.lukew.com/ff/entry.asp?1137[/twitter]\n\nhttp://www.flickr.com/photos/radioflyer007/4117675229\n\n
While you’re redesigning your site, make sure you keep it accessible\nAvoid fixed viewports\n\nhttp://www.flickr.com/photos/mniemand/3338678704\n
Some frameworks do this; many tutorials suggest this\nWorks more like a native app!\n
Lets user pinch and zoom to see details, or to make controls more readable and more accessible\n
RFC2616 (HTTP 1/.1 specification), section 8.1.4 "Practical Considerations" states:\nA single-user client SHOULD NOT maintain more than 2 connections with any server or proxy\n\nhttp://www.flickr.com/photos/danielfoster/2206175625\n
[twitter]Use firebug in firefox, or the web console in Safari / Chrome to see requests made by browser[/twitter]\n\nThis is from blaze.io, but Firebug in Firefox and the web console in Safari / Chrome also provide similar tools\n\n
This is from blaze.io, but Firebug in Firefox and the web console in Safari / Chrome also provide similar tools\n\n
[twitter]Aggregate & minimize CSS & Javascript, using tools like http://developer.yahoo.com/yui/compressor/ http://refresh-sf.com/yui/[/twitter]\n\n
tinysrc and wurfl cache images\n[twitter]Base64 encoding images: http://www.websiteoptimization.com/speed/tweak/inline-images/[/twitter]\n[twitter]CSS sprites: http://www.alistapart.com/articles/sprites/[/twitter]\n\nhttp://www.flickr.com/photos/andersondotcom/482150154\n
iOS simulator is part of XCode\nAndroid emulator on Linux, Mac, Windows\nUse desktop browsers with performance tools\nUse YSlow, etc.\n\nhttp://www.flickr.com/photos/konch/4974020028\n\n\n
http://www.flickr.com/photos/jemsweb/4363548805\n
[twitter]Mobile Aware Web Project http://www.stanford.edu/dept/its/projects/mobile/aware/info/ [/twitter]\n\nhttp://commencement.stanford.edu (June 2011)\nhttp://stanfordwho.stanford.edu (Summer 2011)\nhttp://itservices.stanford.edu (Summer 2011)\nhttp://events.stanford.edu (Summer 2011)\nhttp://news.stanford.edu (Summer 2011)\nhttp://explorecourses.stanford.edu (Summer 2011)\nacademic calendar on registrar site (Summer 2011)\n\nhttp://www.flickr.com/photos/subtleness/18765167/\n\n
[twitter]Modernizr - http://www.modernizr.com/ [/twitter]\n[twitter]http://detectmobilebrowser.com/ generate detection scripts for common languages, and mod_rewrite[/twitter]\n\n\nhttp://www.flickr.com/photos/jillclardy/3651849999/\n\n