95
Designing & Building for the Mobile Web Friday, 16 September, 11
Designing & Buildingfor the Mobile Web
Friday, 16 September, 11
A Domain7 WorkshopIllustration by Stephen Bau, modi!ed from the original by The Noun Project
Friday, 16 September, 11
Designing for MobileStephen Bau, Domain7
Friday, 16 September, 11
http://www.qrcodecity.com/q/RH
Friday, 16 September, 11
http://twitter.com/#!/bauhouse/favorites
Friday, 16 September, 11
http://www.designin"uences.com/"uid960gs/
Friday, 16 September, 11
Designingfor Mobile
DesignA broad definition:
Adapting skills and toolsto the forms of communicationthat make sense to connect with peopleand share your ideas
http://en.wikipedia.org/wiki/Design
Friday, 16 September, 11
Designingfor Mobile
Adapting to Technology• Language• Painting• Writing• Alphabet• Print• Photography
• Telephone• Film• Television• Computers• Internet• Mobile Devices
http://en.wikipedia.org/wiki/Technology
Friday, 16 September, 11
Designingfor Mobile
A Brief History of the Internet• 4 October 1957, USSR launched Sputnik• A US military project to connect strategic sites• Connecting academic institutions• Connecting the public• Mass marketing medium• Driving force behind social, economic and political
change
http://en.wikipedia.org/wiki/Internet
Friday, 16 September, 11
Designingfor Mobile
A Brief History of the Web• First web page: 20 years old
• 6 August 1991, Tim Berners-Lee posted a summary of the World Wide Web project
http://w3.org/
Friday, 16 September, 11
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Friday, 16 September, 11
Designingfor Mobile
Building for the Mobile WebSimple. Create a web page with plain old HTML.
• Fluid content
• One single column
• Vertical scrolling
• Hypertext links
• Address: URL
http://en.wikipedia.org/wiki/KISS_principle
Friday, 16 September, 11
Designingfor Mobile
Designing for the Mobile WebComplex. A higher level of requirements and expectations.
• Strategy
• Project Management
• Creative
• Design Process
• Front End Design
• Technology
http://domain7.com/results/
Friday, 16 September, 11
Designingfor Mobile
Technological ComplexityStrategy
• Business Strategy• Marketing Strategy• Content Strategy• Governance Strategy
Project Management
• Goals and Objectives• Strategies• Requirements• Schedules• Scope of work• Client expectations• Competitive analysis• Market Analysis
Creative
• Copywriting• Illustration• Photography• Typography• Branding• Creative Direction• Art Direction• Creative Licensing• Intellectual Property
Design Process
• Site Maps• Wireframes• Interactive Prototypes• Design Mockups• Templates
Front End Design
• Web Standards• HTML, CSS, JavaScript• Information Architecture• User Experience Design• Accessibility
Technology
• Hosting• Security• Server Management• Content Management• Database Management• Custom Development• Ecommerce• Site Analytics• Search Engine Optimization• Content Distribution Networks• API Integration• Social Media Integration
http://domain7.com/services/
Friday, 16 September, 11
Designingfor Mobile
Design for the Desktop Web• Designers adapted print design to the web
• Tables-based HTML
• Flash for typographical control and animation
• One-to-many mass communication
• Sites optimized for viewing on a single browser (IE)
http://www.adobe.com/"ashplatform/
Friday, 16 September, 11
Designingfor Mobile
Web StandardsA movement to return to the original goals of the web, governed by the World Wide Web Consortium
• Fluid
• Adaptive
• Accessible
• Device agnostic
http://www.w3.org/
Friday, 16 September, 11
http://www.zeldman.com/dwws/
Friday, 16 September, 11
Designingfor Mobile
Mobile Web BrowsersWebKit has been developed to adhere to web standards. With the success of the iPhone, it is quickly becoming the defacto standard on mobile devices.
• iOS
• Android
• Blackberry
http://www.webkit.org/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• Local Storage
• Geolocation
http://browsehappy.com/
Friday, 16 September, 11
http://joshduck.com/periodic-table.html
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://www.apple.com/html5/showcase/gallery/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://www.20thingsilearned.com/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://twitter.github.com/bootstrap/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://jquery.com/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://raphaeljs.com/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://thenounproject.com/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://24ways.org/2010/html5-local-storage
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://symphony-cms.com/
Friday, 16 September, 11
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://maps.google.com/
Friday, 16 September, 11
Designingfor Mobile
Golden Age of Web DesignLuke Wroblewski sums upour context in the mobile space
• Growth
• Constraints
• Capabilities
http://www.lukew.com/
Friday, 16 September, 11
Designingfor Mobile
Golden Age of Web DesignLuke Wroblewski sums upour context in the mobile space
• Growth = Opportunities
• Constraints = Focus
• Capabilities = Innovation
http://www.abookapart.com/products/mobile-!rst
Friday, 16 September, 11
Designingfor Mobile
Content StrategyKristina Halvorsen, Brain Traffic
• Create
• Publish
• Govern• Plan• Maintain• Measure
http://www.contentstrategy.com/
Friday, 16 September, 11
Designingfor Mobile
Designers as Technology ExpertsDesigners have a couple options
• Learn the technologies
• Partner with peoplewho already have theknowledge and skills
http://andyrutledge.com/
Friday, 16 September, 11
Designingfor Mobile
Designers as Technology ExpertsDesigners have a couple options
• Learn the technologies
• Partner with peoplewho already have theknowledge and skills
http://designprofessionalism.com/
Friday, 16 September, 11
http://andyrutledge.com/design-view.php
Friday, 16 September, 11
Designingfor Mobile
New Design ApproachesAndy Rutledge wrote about a different approach to design, using the New York Times as an example.
• Quality Content
• Business Model
• Usability
• Presentation
• Delivery
Image from Andy Rutledge, News Reduxhttp://andyrutledge.com/news-redux.php
Friday, 16 September, 11
Designingfor Mobile
New Design ApproachesAndy Rutledge wrote about a different approach to design, using the New York Times as an example.
• Quality Content
• Business Model
• Usability
• Presentation
• Delivery
Image from Andy Rutledge, News Reduxhttp://andyrutledge.com/news-redux.php
Friday, 16 September, 11
Friday, 16 September, 11
Image from Andy Rutledge, News Redux http://andyrutledge.com/news-redux.php
Friday, 16 September, 11
Building for MobileStephen Bau, Domain7
Friday, 16 September, 11
Buildingfor Mobile
ApproachesTwo basic approaches, with variations
• Native Apps• Device-Specific SDK• Frameworks Based on Web Standards
• Web• Device-Specific Design• Mobile First• Responsive Design
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple iPod
• BlackBerry
• HP
• LG
• Motorola
• Nokia
• Samsung
http://www.apple.com/ipod/
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple iPhone
• BlackBerry
• HP
• LG
• Motorola
• Nokia
• Samsung
http://www.apple.com/iphone/
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple iPad
• BlackBerry
• HP
• LG
• Motorola
• Nokia
• Samsung
http://www.apple.com/ipad/
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple
• BlackBerry• HP
• LG
• Motorola
• Nokia
• Samsung
http://ca.blackberry.com/
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple
• BlackBerry
• HP• LG
• Motorola
• Nokia
• Samsunghttp://hp.com/united-states/webos/us/en/tablet/touchpad-availability.html
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple
• BlackBerry
• HP
• LG• Motorola
• Nokia
• Samsunghttp://www.lg.com/us/mobile-phones/view-all-phones/view-all-phones.jsp
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple
• BlackBerry
• HP
• LG
• Motorola• Nokia
• Samsunghttp://www.motorola.com/Consumers/CA-EN/Home
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple
• BlackBerry
• HP
• LG
• Motorola
• Nokia• Samsung
http://www.nokia.ca/
Friday, 16 September, 11
Buildingfor Mobile
DevicesThe number of devices you need to support is exploding
• Apple
• BlackBerry
• HP
• LG
• Motorola
• Nokia
• Samsunghttp://www.samsung.com/ca/consumer/mobile/mobile-phones/index.idx?pagetype=type_p2&
Friday, 16 September, 11
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS• webOS
• PhoneGap
• Sencha
• jQTouch
• jQuery Mobile
http://developer.apple.com/
Friday, 16 September, 11
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS• PhoneGap
• Sencha
• jQTouch
• jQuery Mobile
https://developer.palm.com/
Friday, 16 September, 11
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS
• PhoneGap• Sencha
• jQTouch
• jQuery Mobile
http://www.phonegap.com/
Friday, 16 September, 11
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS
• PhoneGap
• Sencha• jQTouch
• jQuery Mobile
http://www.sencha.com/
Friday, 16 September, 11
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS
• PhoneGap
• Sencha
• jQTouch• jQuery Mobile
http://jqtouch.com/
Friday, 16 September, 11
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS
• PhoneGap
• Sencha
• jQTouch
• jQuery Mobile
http://jquerymobile.com/
Friday, 16 September, 11
Buildingfor Mobile
Mobile FirstPeople have been focusing on the small screen.
But mobile is morethan small devices.
http://www.mobileawesomeness.com/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte• Simon Collison
• Jon Hicks
• Clearleft
• dConstruct
• Media Queries
• Boston Globe
http://unstoppablerobotninja.com/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte• Simon Collison
• Jon Hicks
• Clearleft
• dConstruct
• Media Queries
• Boston Globehttp://www.alistapart.com/articles/responsive-web-design/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte
• Simon Collison• Jon Hicks
• Clearleft
• dConstruct
• Media Queries
• Boston Globe
http://colly.com/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte
• Simon Collison
• Jon Hicks• Clearleft
• dConstruct
• Media Queries
• Boston Globe
http://hicksdesign.co.uk/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte
• Simon Collison
• Jon Hicks
• Clearleft• dConstruct
• Media Queries
• Boston Globe
http://clearleft.com/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte
• Simon Collison
• Jon Hicks
• Clearleft
• dConstruct• Media Queries
• Boston Globe
http://2011.dconstruct.org/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte
• Simon Collison
• Jon Hicks
• Clearleft
• dConstruct
• Media Queries• Boston Globe
http://mediaqueri.es/
Friday, 16 September, 11
Buildingfor Mobile
Responsive DesignAdvocates for web standards are charting a new direction
• Ethan Marcotte
• Simon Collison
• Jon Hicks
• Clearleft
• dConstruct
• Media Queries
• Boston Globe
http://bostonglobe.com/
Friday, 16 September, 11
http://unstoppablerobotninja.com/ http://colly.com/ http://hicksdesign.co.uk/ http://clearleft.com/
Friday, 16 September, 11
http://2011.dconstruct.org/ http://mediaqueri.es/ http://bostonglobe.com/ http://domain7.com/mobile/
Friday, 16 September, 11
Buildingfor Mobile
Mobile ManifestoA set of principles to guide our approach
Friday, 16 September, 11
Buildingfor Mobile
Mobile ManifestoA set of principles to guide our approach
1. Open standards over single software vendors2. Mobile websites over device-specific apps3. Plaintext and indexable content whenever possible4. Plaintext source code when possible5. Start with market research before beginning any project6. Make mobile a central part of the development process7. Treat mobile and online strategies as linked
http://domain7.com/mobile/
Friday, 16 September, 11
http://domain7.com/mobile/
Friday, 16 September, 11
Buildingfor Mobile
The FutureThe choice about which technologies to use will depend on the goals and objectives.
• Write Software = Native Apps
• Publish Content = Web
Friday, 16 September, 11
Buildingfor Mobile
The FutureThe business giants of today are the technological leaders who are innovating and showing us the way forward.
• Apple = Software
• Google = Web
Friday, 16 September, 11
Buildingfor Mobile
The FutureThe trend is toward convergence of apps and web.
• Web = Software
http://www.google.com/apps/
Friday, 16 September, 11
Buildingfor Mobile
The FutureThe trend is toward convergence of apps and web.
1. Start with the web2. Build a business3. Deploy native apps
• Do it once
• Do it right the first time
http://longnow.org/
Friday, 16 September, 11
PrinterScreen Reader
Multi-platform App Framework
Desktop PC
Web
Responsive
Design
iOS jQTouch / jQuery Mobile
webOS Sencha PhoneGap
Native App
Laptop
Feature Phone
Smart Phone
Game Console
Touch Phone
Tablet
Future Devices?
Friday, 16 September, 11
Buildingfor Mobile
The Here and NowWhat we can do now is simplify.
• To Do List
• Media Diet
• File Management
http://bitliteracy.com/
Friday, 16 September, 11
Buildingfor Mobile
Simplify the WorkflowSimplify by creating a workflow that centres around free tools and accessible non-proprietary formats
• Plain text, XML and HTML
• Sync and share with Dropbox and Simplenote
• Collaborate with Google Docs
• Version control with Git and GitHub
• Add tools like iA Writer to format text with Markdown
• Easy content integration with a CMS like Symphony
http://daring!reball.net/projects/markdown/
Friday, 16 September, 11
http://simplenoteapp.com/
http://notational.net/
Friday, 16 September, 11
Buildingfor Mobile
Tools and StandardsOne of the greatest challenges for designers in applying these approaches is the fragmentation of tools.
• Scripting languages
• Templating languages
• Content management systems
• Lack of portability between systems
• Unnecessary reliance on proprietary APIs
http://stephenbau.com/articles/jeremy-keith-be-careful-what-you-wish-for
Friday, 16 September, 11
Buildingfor Mobile
Symphony and XSLTThe Domain7 site and intranet run on Symphony CMS
• XSLT is a W3C standard for templating
• Fast and easy to deploy
• Extends knowledge web designers already possess• XML• HTML• CSS
• Better separation of presentation and data layers
http://www.w3.org/TR/xslt
Friday, 16 September, 11
Friday, 16 September, 11
Friday, 16 September, 11
http://astuteo.com/slickmap/
Friday, 16 September, 11
Friday, 16 September, 11
Friday, 16 September, 11
http://markuplibrary.org/styleguide/
Friday, 16 September, 11
Friday, 16 September, 11
Friday, 16 September, 11
Notes
ResourcesFurther Reading
• A List Apart
• A Book Apart
• Luke Wroblewski
• Smashing Magazine
• Content Strategy
• Media Queries
• Domain7 Mobile Manifesto
Friday, 16 September, 11
Friday, 16 September, 11
