An overview of the state of the mobile industry as it pertains to the web. Content developed and driven based on the belief of the centrality of content to distributed content to mobile devices (http://www.domain7.com/mobile). Presentation content from a workshop session presented in Vancouver in September 2011 (http://domain7.com/blog/d7-workshops-designing-and-building-for-the-mobile-web/)

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. http://www.qrcodecity.com/q/RH
Friday, 16 September, 11

5. http://twitter.com/#!/bauhouse/favorites
Friday, 16 September, 11

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. 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 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. 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- 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. 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/ 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. 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
? 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. 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