Designing and Building for the Mobile Web (2011)

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.

7.
Designing
for Mobile
Design
A broad deﬁnition:
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

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

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

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

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

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-speciﬁc 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

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

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 ﬁrst time
http://longnow.org/
Friday, 16 September, 11