Designing & Buildingfor the Mobile Web

Friday, 16 September, 11

A Domain7 WorkshopIllustration by Stephen Bau, modi!ed from the original by The Noun Project

Friday, 16 September, 11

Designing for MobileStephen Bau, Domain7

Friday, 16 September, 11

http://www.qrcodecity.com/q/RH

Friday, 16 September, 11

http://twitter.com/#!/bauhouse/favorites

Friday, 16 September, 11

http://www.designin"uences.com/"uid960gs/

Friday, 16 September, 11

Designingfor Mobile

DesignA broad definition:

Adapting skills and toolsto the forms of communicationthat make sense to connect with peopleand share your ideas

http://en.wikipedia.org/wiki/Design

Friday, 16 September, 11

Designingfor Mobile

Adapting to Technology• Language• Painting• Writing• Alphabet• Print• Photography

• Telephone• Film• Television• Computers• Internet• Mobile Devices

http://en.wikipedia.org/wiki/Technology

Friday, 16 September, 11

Designingfor 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

Designingfor 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

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Friday, 16 September, 11

Designingfor Mobile

Building for the Mobile WebSimple. 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

Designingfor Mobile

Designing for the Mobile WebComplex. 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

http://www.nytimes.com/

Friday, 16 September, 11

Designingfor Mobile

Technological ComplexityStrategy

• 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

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

http://domain7.com/services/

Friday, 16 September, 11

Designingfor 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

Designingfor Mobile

Web StandardsA 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

http://www.zeldman.com/dwws/

Friday, 16 September, 11

http://www.zeldman.com/

Friday, 16 September, 11

Designingfor Mobile

Mobile Web BrowsersWebKit 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

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• Local Storage

• Geolocation

http://browsehappy.com/

Friday, 16 September, 11

http://joshduck.com/periodic-table.html

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://www.apple.com/html5/showcase/gallery/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://www.20thingsilearned.com/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://twitter.github.com/bootstrap/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://jquery.com/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://raphaeljs.com/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://thenounproject.com/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://24ways.org/2010/html5-local-storage

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://symphony-cms.com/

Friday, 16 September, 11

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://maps.google.com/

Friday, 16 September, 11

http://www.lukew.com/

Friday, 16 September, 11

Designingfor Mobile

Golden Age of Web DesignLuke Wroblewski sums upour context in the mobile space

• Growth

• Constraints

• Capabilities

http://www.lukew.com/

Friday, 16 September, 11

Designingfor Mobile

Golden Age of Web DesignLuke Wroblewski sums upour context in the mobile space

• Growth = Opportunities

• Constraints = Focus

• Capabilities = Innovation

http://www.abookapart.com/products/mobile-!rst

Friday, 16 September, 11

Designingfor Mobile

Content StrategyKristina Halvorsen, Brain Traffic

• Create

• Publish

• Govern• Plan• Maintain• Measure

http://www.contentstrategy.com/

Friday, 16 September, 11

Designingfor Mobile

Designers as Technology ExpertsDesigners have a couple options

• Learn the technologies

• Partner with peoplewho already have theknowledge and skills

http://andyrutledge.com/

Friday, 16 September, 11

Designingfor Mobile

Designers as Technology ExpertsDesigners have a couple options

• Learn the technologies

• Partner with peoplewho already have theknowledge and skills

http://designprofessionalism.com/

Friday, 16 September, 11

http://andyrutledge.com/design-view.php

Friday, 16 September, 11

Designingfor Mobile

New Design ApproachesAndy 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 Reduxhttp://andyrutledge.com/news-redux.php

Friday, 16 September, 11

Designingfor Mobile

New Design ApproachesAndy 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 Reduxhttp://andyrutledge.com/news-redux.php

Friday, 16 September, 11

Friday, 16 September, 11

Image from Andy Rutledge, News Redux http://andyrutledge.com/news-redux.php

Friday, 16 September, 11

Building for MobileStephen Bau, Domain7

Friday, 16 September, 11

Buildingfor Mobile

ApproachesTwo 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

Buildingfor Mobile

DevicesThe 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

Buildingfor Mobile

DevicesThe 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

Buildingfor Mobile

DevicesThe 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

Buildingfor Mobile

DevicesThe number of devices you need to support is exploding

• Apple

• BlackBerry• HP

• LG

• Motorola

• Nokia

• Samsung

http://ca.blackberry.com/

Friday, 16 September, 11

Buildingfor Mobile

DevicesThe number of devices you need to support is exploding

• Apple

• BlackBerry

• HP• LG

• Motorola

• Nokia

• Samsunghttp://hp.com/united-states/webos/us/en/tablet/touchpad-availability.html

Friday, 16 September, 11

Buildingfor Mobile

DevicesThe number of devices you need to support is exploding

• Apple

• BlackBerry

• HP

• LG• Motorola

• Nokia

• Samsunghttp://www.lg.com/us/mobile-phones/view-all-phones/view-all-phones.jsp

Friday, 16 September, 11

Buildingfor Mobile

DevicesThe number of devices you need to support is exploding

• Apple

• BlackBerry

• HP

• LG

• Motorola• Nokia

• Samsunghttp://www.motorola.com/Consumers/CA-EN/Home

Friday, 16 September, 11

Buildingfor Mobile

DevicesThe number of devices you need to support is exploding

• Apple

• BlackBerry

• HP

• LG

• Motorola

• Nokia• Samsung

http://www.nokia.ca/

Friday, 16 September, 11

Buildingfor Mobile

DevicesThe number of devices you need to support is exploding

• Apple

• BlackBerry

• HP

• LG

• Motorola

• Nokia

• Samsunghttp://www.samsung.com/ca/consumer/mobile/mobile-phones/index.idx?pagetype=type_p2&

Friday, 16 September, 11

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS• webOS

• PhoneGap

• Sencha

• jQTouch

• jQuery Mobile

http://developer.apple.com/

Friday, 16 September, 11

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS

• webOS• PhoneGap

• Sencha

• jQTouch

• jQuery Mobile

https://developer.palm.com/

Friday, 16 September, 11

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS

• webOS

• PhoneGap• Sencha

• jQTouch

• jQuery Mobile

http://www.phonegap.com/

Friday, 16 September, 11

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS

• webOS

• PhoneGap

• Sencha• jQTouch

• jQuery Mobile

http://www.sencha.com/

Friday, 16 September, 11

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS

• webOS

• PhoneGap

• Sencha

• jQTouch• jQuery Mobile

http://jqtouch.com/

Friday, 16 September, 11

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS

• webOS

• PhoneGap

• Sencha

• jQTouch

• jQuery Mobile

http://jquerymobile.com/

Friday, 16 September, 11

Buildingfor Mobile

Mobile FirstPeople have been focusing on the small screen.

But mobile is morethan small devices.

http://www.mobileawesomeness.com/

Friday, 16 September, 11

Buildingfor Mobile

Responsive DesignAdvocates 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

Buildingfor Mobile

Responsive DesignAdvocates for web standards are charting a new direction

• Ethan Marcotte• Simon Collison

• Jon Hicks

• Clearleft

• dConstruct

• Media Queries

• Boston Globehttp://www.alistapart.com/articles/responsive-web-design/

Friday, 16 September, 11

Buildingfor Mobile

Responsive DesignAdvocates 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

Buildingfor Mobile

Responsive DesignAdvocates 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

Buildingfor Mobile

Responsive DesignAdvocates 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

Buildingfor Mobile

Responsive DesignAdvocates 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

Buildingfor Mobile

Responsive DesignAdvocates 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

Buildingfor Mobile

Responsive DesignAdvocates 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

http://unstoppablerobotninja.com/ http://colly.com/ http://hicksdesign.co.uk/ http://clearleft.com/

Friday, 16 September, 11

http://2011.dconstruct.org/ http://mediaqueri.es/ http://bostonglobe.com/ http://domain7.com/mobile/

Friday, 16 September, 11

Buildingfor Mobile

Mobile ManifestoA set of principles to guide our approach

Friday, 16 September, 11

Buildingfor Mobile

Mobile ManifestoA set of principles to guide our approach

1. Open standards over single software vendors2. Mobile websites over device-specific apps3. Plaintext and indexable content whenever possible4. Plaintext source code when possible5. Start with market research before beginning any project6. Make mobile a central part of the development process7. Treat mobile and online strategies as linked

http://domain7.com/mobile/

Friday, 16 September, 11

http://domain7.com/mobile/

Friday, 16 September, 11

Buildingfor Mobile

The FutureThe choice about which technologies to use will depend on the goals and objectives.

• Write Software = Native Apps

• Publish Content = Web

Friday, 16 September, 11

Buildingfor Mobile

The FutureThe 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

Buildingfor Mobile

The FutureThe trend is toward convergence of apps and web.

• Web = Software

http://www.google.com/apps/

Friday, 16 September, 11

Buildingfor Mobile

The FutureThe trend is toward convergence of apps and web.

1. Start with the web2. Build a business3. Deploy native apps

• Do it once

• Do it right the first time

http://longnow.org/

Friday, 16 September, 11

PrinterScreen Reader

Multi-platform App Framework

Desktop PC

Web

Responsive

Design

iOS jQTouch / jQuery Mobile

webOS Sencha PhoneGap

Native App

Laptop

Feature Phone

Smart Phone

Game Console

Touch Phone

Tablet

Future Devices?

Friday, 16 September, 11

Buildingfor Mobile

The Here and NowWhat we can do now is simplify.

• Email

• To Do List

• Media Diet

• File Management

http://bitliteracy.com/

Friday, 16 September, 11

Buildingfor Mobile

Simplify the WorkflowSimplify 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

http://iawriter.com/

Friday, 16 September, 11

http://simplenoteapp.com/

http://notational.net/

Friday, 16 September, 11

Buildingfor Mobile

Tools and StandardsOne 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

Buildingfor Mobile

Symphony and XSLTThe 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

http://symphony-cms.com/

Friday, 16 September, 11

Friday, 16 September, 11

Friday, 16 September, 11

http://astuteo.com/slickmap/

Friday, 16 September, 11

Friday, 16 September, 11

Friday, 16 September, 11

http://markuplibrary.org/styleguide/

Friday, 16 September, 11

Friday, 16 September, 11

Friday, 16 September, 11

Notes

ResourcesFurther Reading

• A List Apart

• A Book Apart

• Luke Wroblewski

• Smashing Magazine

• Content Strategy

• Media Queries

• Domain7 Mobile Manifesto

Friday, 16 September, 11

Friday, 16 September, 11