Designing and Building for the Mobile Web (2011)
description
Transcript of Designing and Building for the Mobile Web (2011)
![Page 1: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/1.jpg)
Designing & Buildingfor the Mobile Web
Friday, 16 September, 11
![Page 2: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/2.jpg)
A Domain7 WorkshopIllustration by Stephen Bau, modi!ed from the original by The Noun Project
Friday, 16 September, 11
![Page 3: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/3.jpg)
Designing for MobileStephen Bau, Domain7
Friday, 16 September, 11
![Page 4: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/4.jpg)
http://www.qrcodecity.com/q/RH
Friday, 16 September, 11
![Page 5: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/5.jpg)
http://twitter.com/#!/bauhouse/favorites
Friday, 16 September, 11
![Page 6: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/6.jpg)
http://www.designin"uences.com/"uid960gs/
Friday, 16 September, 11
![Page 7: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/7.jpg)
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
![Page 8: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/8.jpg)
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
![Page 9: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/9.jpg)
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
![Page 10: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/10.jpg)
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
![Page 11: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/11.jpg)
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Friday, 16 September, 11
![Page 12: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/12.jpg)
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
![Page 13: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/13.jpg)
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
![Page 15: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/15.jpg)
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
![Page 16: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/16.jpg)
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
![Page 17: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/17.jpg)
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
![Page 18: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/18.jpg)
http://www.zeldman.com/dwws/
Friday, 16 September, 11
![Page 20: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/20.jpg)
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
![Page 21: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/21.jpg)
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• Local Storage
• Geolocation
http://browsehappy.com/
Friday, 16 September, 11
![Page 22: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/22.jpg)
http://joshduck.com/periodic-table.html
Friday, 16 September, 11
![Page 23: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/23.jpg)
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
![Page 24: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/24.jpg)
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
![Page 25: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/25.jpg)
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
![Page 26: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/26.jpg)
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://jquery.com/
Friday, 16 September, 11
![Page 27: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/27.jpg)
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://raphaeljs.com/
Friday, 16 September, 11
![Page 28: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/28.jpg)
Designingfor Mobile
Browser CapabilitiesWeb browsers are becoming more capable
• HTML5
• CSS3
• JavaScript
• SVG
• XSLT
• Local Storage
• Geolocation
http://thenounproject.com/
Friday, 16 September, 11
![Page 29: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/29.jpg)
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
![Page 30: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/30.jpg)
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
![Page 31: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/31.jpg)
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
![Page 33: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/33.jpg)
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
![Page 34: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/34.jpg)
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
![Page 35: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/35.jpg)
Designingfor Mobile
Content StrategyKristina Halvorsen, Brain Traffic
• Create
• Publish
• Govern• Plan• Maintain• Measure
http://www.contentstrategy.com/
Friday, 16 September, 11
![Page 36: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/36.jpg)
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
![Page 37: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/37.jpg)
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
![Page 38: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/38.jpg)
http://andyrutledge.com/design-view.php
Friday, 16 September, 11
![Page 39: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/39.jpg)
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
![Page 40: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/40.jpg)
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
![Page 41: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/41.jpg)
Friday, 16 September, 11
![Page 42: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/42.jpg)
Image from Andy Rutledge, News Redux http://andyrutledge.com/news-redux.php
Friday, 16 September, 11
![Page 43: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/43.jpg)
Building for MobileStephen Bau, Domain7
Friday, 16 September, 11
![Page 44: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/44.jpg)
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
![Page 45: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/45.jpg)
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
![Page 46: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/46.jpg)
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
![Page 47: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/47.jpg)
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
![Page 48: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/48.jpg)
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
![Page 49: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/49.jpg)
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
![Page 50: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/50.jpg)
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
![Page 51: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/51.jpg)
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
![Page 52: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/52.jpg)
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
![Page 53: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/53.jpg)
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
![Page 54: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/54.jpg)
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
![Page 55: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/55.jpg)
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
![Page 56: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/56.jpg)
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
![Page 57: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/57.jpg)
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
![Page 58: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/58.jpg)
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS
• PhoneGap
• Sencha
• jQTouch• jQuery Mobile
http://jqtouch.com/
Friday, 16 September, 11
![Page 59: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/59.jpg)
Buildingfor Mobile
SDKs and FrameworksTools and frameworks for mobile development
• iOS
• webOS
• PhoneGap
• Sencha
• jQTouch
• jQuery Mobile
http://jquerymobile.com/
Friday, 16 September, 11
![Page 60: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/60.jpg)
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
![Page 61: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/61.jpg)
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
![Page 62: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/62.jpg)
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
![Page 63: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/63.jpg)
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
![Page 64: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/64.jpg)
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
![Page 65: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/65.jpg)
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
![Page 66: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/66.jpg)
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
![Page 67: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/67.jpg)
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
![Page 68: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/68.jpg)
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
![Page 69: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/69.jpg)
http://unstoppablerobotninja.com/ http://colly.com/ http://hicksdesign.co.uk/ http://clearleft.com/
Friday, 16 September, 11
![Page 70: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/70.jpg)
http://2011.dconstruct.org/ http://mediaqueri.es/ http://bostonglobe.com/ http://domain7.com/mobile/
Friday, 16 September, 11
![Page 71: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/71.jpg)
Buildingfor Mobile
Mobile ManifestoA set of principles to guide our approach
Friday, 16 September, 11
![Page 72: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/72.jpg)
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
![Page 73: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/73.jpg)
http://domain7.com/mobile/
Friday, 16 September, 11
![Page 74: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/74.jpg)
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
![Page 75: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/75.jpg)
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
![Page 76: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/76.jpg)
Buildingfor Mobile
The FutureThe trend is toward convergence of apps and web.
• Web = Software
http://www.google.com/apps/
Friday, 16 September, 11
![Page 77: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/77.jpg)
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
![Page 78: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/78.jpg)
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
![Page 79: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/79.jpg)
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
![Page 80: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/80.jpg)
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
![Page 82: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/82.jpg)
http://simplenoteapp.com/
http://notational.net/
Friday, 16 September, 11
![Page 83: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/83.jpg)
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
![Page 84: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/84.jpg)
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
![Page 86: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/86.jpg)
Friday, 16 September, 11
![Page 87: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/87.jpg)
Friday, 16 September, 11
![Page 88: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/88.jpg)
http://astuteo.com/slickmap/
Friday, 16 September, 11
![Page 89: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/89.jpg)
Friday, 16 September, 11
![Page 90: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/90.jpg)
Friday, 16 September, 11
![Page 91: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/91.jpg)
http://markuplibrary.org/styleguide/
Friday, 16 September, 11
![Page 92: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/92.jpg)
Friday, 16 September, 11
![Page 93: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/93.jpg)
Friday, 16 September, 11
![Page 94: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/94.jpg)
Notes
ResourcesFurther Reading
• A List Apart
• A Book Apart
• Luke Wroblewski
• Smashing Magazine
• Content Strategy
• Media Queries
• Domain7 Mobile Manifesto
Friday, 16 September, 11
![Page 95: Designing and Building for the Mobile Web (2011)](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c7f1e94a795916268b46f9/html5/thumbnails/95.jpg)
Friday, 16 September, 11