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.

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