Designing and Building for the Mobile Web (2011)

  • 328 views
Uploaded on

Presented by Stephen Bau in 2011, this presentation gives a brief history of design and the internet, and makes a strong, academic case for responsive design. Includes examples, media queries, …

Presented by Stephen Bau in 2011, this presentation gives a brief history of design and the internet, and makes a strong, academic case for responsive design. Includes examples, media queries, including Bau's use of the Fluid 960 Grid System, Symphony CMS and XSLT. References to Jefrey Zeldman, Luke Wroblewski, and other responsive web pioneers.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
328
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing & Building for the Mobile Web Friday, 16 September, 11
  • 2. A Domain7 Workshop Illustration by Stephen Bau, modified from the original by The Noun Project Friday, 16 September, 11
  • 3. Designing for Mobile Stephen Bau, Domain7 Friday, 16 September, 11
  • 4. http://www.qrcodecity.com/q/RH Friday, 16 September, 11
  • 5. http://twitter.com/#!/bauhouse/favorites Friday, 16 September, 11
  • 6. http://www.designinfluences.com/fluid960gs/ Friday, 16 September, 11
  • 7. Designing for Mobile Design A broad definition: Adapting skills and tools to the forms of communication that make sense to connect with people and share your ideas http://en.wikipedia.org/wiki/Design Friday, 16 September, 11
  • 8. Designing for Mobile Adapting to Technology • Language • Painting • Writing • Alphabet • Print • Photography http://en.wikipedia.org/wiki/Technology Friday, 16 September, 11 • Telephone • Film • Television • Computers • Internet • Mobile Devices
  • 9. Designing for 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
  • 10. Designing for 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
  • 11. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Friday, 16 September, 11
  • 12. Designing for Mobile Building for the Mobile Web Simple. 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
  • 13. Designing for Mobile Designing for the Mobile Web Complex. 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
  • 14. http://www.nytimes.com/ Friday, 16 September, 11
  • 15. Designing for Mobile Technological Complexity Strategy • • • • 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 http://domain7.com/services/ Friday, 16 September, 11 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
  • 16. Designing for 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/flashplatform/ Friday, 16 September, 11
  • 17. Designing for Mobile Web Standards A 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
  • 18. http://www.zeldman.com/dwws/ Friday, 16 September, 11
  • 19. http://www.zeldman.com/ Friday, 16 September, 11
  • 20. Designing for Mobile Mobile Web Browsers WebKit 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
  • 21. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • Local Storage • Geolocation http://browsehappy.com/ Friday, 16 September, 11
  • 22. http://joshduck.com/periodic-table.html Friday, 16 September, 11
  • 23. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://www.apple.com/html5/showcase/gallery/ Friday, 16 September, 11
  • 24. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://www.20thingsilearned.com/ Friday, 16 September, 11
  • 25. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://twitter.github.com/bootstrap/ Friday, 16 September, 11
  • 26. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://jquery.com/ Friday, 16 September, 11
  • 27. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://raphaeljs.com/ Friday, 16 September, 11
  • 28. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://thenounproject.com/ Friday, 16 September, 11
  • 29. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://24ways.org/2010/html5-local-storage Friday, 16 September, 11
  • 30. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://symphony-cms.com/ Friday, 16 September, 11
  • 31. Designing for Mobile Browser Capabilities Web browsers are becoming more capable • HTML5 • CSS3 • JavaScript • SVG • XSLT • Local Storage • Geolocation http://maps.google.com/ Friday, 16 September, 11
  • 32. http://www.lukew.com/ Friday, 16 September, 11
  • 33. Designing for Mobile Golden Age of Web Design Luke Wroblewski sums up our context in the mobile space • Growth • Constraints • Capabilities http://www.lukew.com/ Friday, 16 September, 11
  • 34. Designing for Mobile Golden Age of Web Design Luke Wroblewski sums up our context in the mobile space • Growth = Opportunities • Constraints = Focus • Capabilities = Innovation http://www.abookapart.com/products/mobile-first Friday, 16 September, 11
  • 35. Designing for Mobile Content Strategy Kristina Halvorsen, Brain Traffic • Create • Publish • Govern • Plan • Maintain • Measure http://www.contentstrategy.com/ Friday, 16 September, 11
  • 36. Designing for Mobile Designers as Technology Experts Designers have a couple options • Learn the technologies • Partner with people who already have the knowledge and skills http://andyrutledge.com/ Friday, 16 September, 11
  • 37. Designing for Mobile Designers as Technology Experts Designers have a couple options • Learn the technologies • Partner with people who already have the knowledge and skills http://designprofessionalism.com/ Friday, 16 September, 11
  • 38. http://andyrutledge.com/design-view.php Friday, 16 September, 11
  • 39. Designing for Mobile New Design Approaches Andy 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 Redux http://andyrutledge.com/news-redux.php Friday, 16 September, 11
  • 40. Designing for Mobile New Design Approaches Andy 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 Redux http://andyrutledge.com/news-redux.php Friday, 16 September, 11
  • 41. Friday, 16 September, 11
  • 42. Image from Andy Rutledge, News Redux http://andyrutledge.com/news-redux.php Friday, 16 September, 11
  • 43. Building for Mobile Stephen Bau, Domain7 Friday, 16 September, 11
  • 44. Building for Mobile Approaches Two 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
  • 45. Building for Mobile Devices The 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
  • 46. Building for Mobile Devices The 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
  • 47. Building for Mobile Devices The 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
  • 48. Building for Mobile Devices The number of devices you need to support is exploding • Apple • BlackBerry • HP • LG • Motorola • Nokia • Samsung http://ca.blackberry.com/ Friday, 16 September, 11
  • 49. Building for Mobile Devices The number of devices you need to support is exploding • Apple • BlackBerry • HP • LG • Motorola • Nokia • Samsung http://hp.com/united-states/webos/us/en/ tablet/touchpad-availability.html Friday, 16 September, 11
  • 50. Building for Mobile Devices The number of devices you need to support is exploding • Apple • BlackBerry • HP • LG • Motorola • Nokia • Samsung http://www.lg.com/us/mobile-phones/ view-all-phones/view-all-phones.jsp Friday, 16 September, 11
  • 51. Building for Mobile Devices The number of devices you need to support is exploding • Apple • BlackBerry • HP • LG • Motorola • Nokia • Samsung http://www.motorola.com/ Consumers/CA-EN/Home Friday, 16 September, 11
  • 52. Building for Mobile Devices The number of devices you need to support is exploding • Apple • BlackBerry • HP • LG • Motorola • Nokia • Samsung http://www.nokia.ca/ Friday, 16 September, 11
  • 53. Building for Mobile Devices The number of devices you need to support is exploding • Apple • BlackBerry • HP • LG • Motorola • Nokia • Samsung http://www.samsung.com/ca/consumer/mobile/ mobile-phones/index.idx?pagetype=type_p2& Friday, 16 September, 11
  • 54. Building for Mobile SDKs and Frameworks Tools and frameworks for mobile development • iOS • webOS • PhoneGap • Sencha • jQTouch • jQuery Mobile http://developer.apple.com/ Friday, 16 September, 11
  • 55. Building for Mobile SDKs and Frameworks Tools and frameworks for mobile development • iOS • webOS • PhoneGap • Sencha • jQTouch • jQuery Mobile https://developer.palm.com/ Friday, 16 September, 11
  • 56. Building for Mobile SDKs and Frameworks Tools and frameworks for mobile development • iOS • webOS • PhoneGap • Sencha • jQTouch • jQuery Mobile http://www.phonegap.com/ Friday, 16 September, 11
  • 57. Building for Mobile SDKs and Frameworks Tools and frameworks for mobile development • iOS • webOS • PhoneGap • Sencha • jQTouch • jQuery Mobile http://www.sencha.com/ Friday, 16 September, 11
  • 58. Building for Mobile SDKs and Frameworks Tools and frameworks for mobile development • iOS • webOS • PhoneGap • Sencha • jQTouch • jQuery Mobile http://jqtouch.com/ Friday, 16 September, 11
  • 59. Building for Mobile SDKs and Frameworks Tools and frameworks for mobile development • iOS • webOS • PhoneGap • Sencha • jQTouch • jQuery Mobile http://jquerymobile.com/ Friday, 16 September, 11
  • 60. Building for Mobile Mobile First People have been focusing on the small screen. But mobile is more than small devices. http://www.mobileawesomeness.com/ Friday, 16 September, 11
  • 61. Building for Mobile Responsive Design Advocates 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
  • 62. Building for Mobile Responsive Design Advocates for web standards are charting a new direction • Ethan Marcotte • Simon Collison • Jon Hicks • Clearleft • dConstruct • Media Queries • Boston Globe http://www.alistapart.com/articles/ responsive-web-design/ Friday, 16 September, 11
  • 63. Building for Mobile Responsive Design Advocates 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
  • 64. Building for Mobile Responsive Design Advocates 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
  • 65. Building for Mobile Responsive Design Advocates 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
  • 66. Building for Mobile Responsive Design Advocates 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
  • 67. Building for Mobile Responsive Design Advocates 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
  • 68. Building for Mobile Responsive Design Advocates 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
  • 69. http://unstoppablerobotninja.com/ Friday, 16 September, 11 http://colly.com/ http://hicksdesign.co.uk/ http://clearleft.com/
  • 70. http://2011.dconstruct.org/ Friday, 16 September, 11 http://mediaqueri.es/ http://bostonglobe.com/ http://domain7.com/mobile/
  • 71. Building for Mobile Mobile Manifesto A set of principles to guide our approach Friday, 16 September, 11
  • 72. Building for Mobile Mobile Manifesto A set of principles to guide our approach 1. Open standards over single software vendors 2. Mobile websites over device-specific apps 3. Plaintext and indexable content whenever possible 4. Plaintext source code when possible 5. Start with market research before beginning any project 6. Make mobile a central part of the development process 7. Treat mobile and online strategies as linked http://domain7.com/mobile/ Friday, 16 September, 11
  • 73. http://domain7.com/mobile/ Friday, 16 September, 11
  • 74. Building for Mobile The Future The choice about which technologies to use will depend on the goals and objectives. • Write Software = Native Apps • Publish Content = Web Friday, 16 September, 11
  • 75. Building for Mobile The Future The 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
  • 76. Building for Mobile The Future The trend is toward convergence of apps and web. • Web = Software http://www.google.com/apps/ Friday, 16 September, 11
  • 77. Building for Mobile The Future The trend is toward convergence of apps and web. 1. Start with the web 2. Build a business 3. Deploy native apps • • Do it once Do it right the first time http://longnow.org/ Friday, 16 September, 11
  • 78. Screen Reader Printer Desktop PC Laptop Responsive Design Web Feature Phone Native App Smart Phone Game Console iOS jQTouch / jQuery Mobile Touch Phone Multi-platform App Framework webOS Sencha PhoneGap Tablet ? Friday, 16 September, 11 Future Devices
  • 79. Building for Mobile The Here and Now What we can do now is simplify. • Email • To Do List • Media Diet • File Management http://bitliteracy.com/ Friday, 16 September, 11
  • 80. Building for Mobile Simplify the Workflow Simplify 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://daringfireball.net/projects/markdown/ Friday, 16 September, 11
  • 81. http://iawriter.com/ Friday, 16 September, 11
  • 82. http://simplenoteapp.com/ http://notational.net/ Friday, 16 September, 11
  • 83. Building for Mobile Tools and Standards One 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
  • 84. Building for Mobile Symphony and XSLT The 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
  • 85. http://symphony-cms.com/ Friday, 16 September, 11
  • 86. Friday, 16 September, 11
  • 87. Friday, 16 September, 11
  • 88. http://astuteo.com/slickmap/ Friday, 16 September, 11
  • 89. Friday, 16 September, 11
  • 90. Friday, 16 September, 11
  • 91. http://markuplibrary.org/styleguide/ Friday, 16 September, 11
  • 92. Friday, 16 September, 11
  • 93. Friday, 16 September, 11
  • 94. Notes Resources Further Reading • A List Apart • A Book Apart • Luke Wroblewski • Smashing Magazine • Content Strategy • Media Queries • Domain7 Mobile Manifesto Friday, 16 September, 11
  • 95. Friday, 16 September, 11