Downloaded 50 times
Uploaded byRyan Hanawalt
Domain7: Mobile Web Design Approach
The document discusses the principles and practices for designing and building mobile websites, emphasizing the importance of adapting to various devices and technologies. It covers a range of topics, from the history of the internet and web standards to mobile app development strategies and responsive design. Key recommendations include prioritizing open standards, focusing on mobile content, and advocating for a unified approach between web and app technologies.
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Domain7: Mobile Web Design Approach
- 1. Designing & Building for the Mobile Web Friday, 16 September, 11
- 2. A Domain7 Workshop Illustration by Stephen Bau, modi ed from the original by The Noun Project Friday, 16 September, 11
- 3. Designing for Mobile Stephen Bau, Domain7 Friday, 16 September, 11
- 4.
- 5.
- 6. http://www.designin uences.com/ uid960gs/ 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 • Telephone • Painting • Film • Writing • Television • Alphabet • Computers • Print • Internet • Photography • Mobile Devices http://en.wikipedia.org/wiki/Technology Friday, 16 September, 11
- 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.
- 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.
- 15. Designing for Mobile Technological Complexity Strategy Creative Front End Design • Business Strategy • Copywriting • Web Standards • Marketing Strategy • Illustration • HTML, CSS, JavaScript • Content Strategy • Photography • Information Architecture • Governance Strategy • Typography • User Experience Design • Branding • Accessibility • Creative Direction Project Management • Art Direction • Creative Licensing Technology • Goals and Objectives • Intellectual Property • Strategies • Hosting • Requirements • Security • Schedules Design Process • Server Management • Scope of work • Content Management • Client expectations • Site Maps • Database Management • Competitive analysis • Wireframes • Custom Development • Market Analysis • Interactive Prototypes • Ecommerce • Design Mockups • Site Analytics • Templates • Search Engine Optimization • Content Distribution Networks • API Integration • Social Media Integration http://domain7.com/services/ Friday, 16 September, 11
- 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/ ashplatform/ 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.
- 19.
- 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.
- 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.
- 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- rst 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.
- 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.
- 42. Image from AndyRutledge, 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/ http://colly.com/ http://hicksdesign.co.uk/ http://clearleft.com/ Friday, 16 September, 11
- 70. http://2011.dconstruct.org/ http://mediaqueri.es/ http://bostonglobe.com/ http://domain7.com/mobile/ Friday, 16 September, 11
- 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.
- 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 ? Future Devices Friday, 16 September, 11
- 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://daring reball.net/projects/markdown/ Friday, 16 September, 11
- 81.
- 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.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 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.