Domain7: Mobile Web Design Approach

Designing & Buildingfor the Mobile Web

Friday, 16 September, 11

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

Designing for MobileStephen Bau, Domain7

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

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

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

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

Designingfor Mobile

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

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

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

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

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/

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

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

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/

http://www.nytimes.com/

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/

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/

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/

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

http://www.zeldman.com/

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/

Designingfor Mobile

Browser CapabilitiesWeb browsers are becoming more capable

• HTML5

• CSS3

• JavaScript

• SVG

• Local Storage

• Geolocation

http://browsehappy.com/

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

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

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

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://www.20thingsilearned.com/

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

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

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://jquery.com/

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://raphaeljs.com/

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://thenounproject.com/

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

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

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://symphony-cms.com/

Designingfor Mobile

• HTML5

• CSS3

• JavaScript

• SVG

• XSLT

• Local Storage

• Geolocation

http://maps.google.com/

http://www.lukew.com/

Designingfor Mobile

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

• Growth

• Constraints

• Capabilities

http://www.lukew.com/

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

Designingfor Mobile

Content StrategyKristina Halvorsen, Brain Traffic

• Create

• Publish

• Govern• Plan• Maintain• Measure

http://www.contentstrategy.com/

Designingfor Mobile

Designers as Technology ExpertsDesigners have a couple options

• Learn the technologies

• Partner with peoplewho already have theknowledge and skills

http://andyrutledge.com/

Designingfor Mobile

Designers as Technology ExpertsDesigners have a couple options

• Learn the technologies

• Partner with peoplewho already have theknowledge and skills

http://designprofessionalism.com/

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

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

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

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

Building for MobileStephen Bau, Domain7

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

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/

Buildingfor Mobile

• Apple iPhone

• BlackBerry

• HP

• LG

• Motorola

• Nokia

• Samsung

http://www.apple.com/iphone/

Buildingfor Mobile

• Apple iPad

• BlackBerry

• HP

• LG

• Motorola

• Nokia

• Samsung

http://www.apple.com/ipad/

Buildingfor Mobile

• Apple

• BlackBerry• HP

• LG

• Motorola

• Nokia

• Samsung

http://ca.blackberry.com/

Buildingfor Mobile

• Apple

• BlackBerry

• HP• LG

• Motorola

• Nokia

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

Buildingfor Mobile

• Apple

• BlackBerry

• HP

• LG• Motorola

• Nokia

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

Buildingfor Mobile

• Apple

• BlackBerry

• HP

• LG

• Motorola• Nokia

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

Buildingfor Mobile

• Apple

• BlackBerry

• HP

• LG

• Motorola

• Nokia• Samsung

http://www.nokia.ca/

Buildingfor Mobile

• Apple

• BlackBerry

• HP

• LG

• Motorola

• Nokia

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

Buildingfor Mobile

SDKs and FrameworksTools and frameworks for mobile development

• iOS• webOS

• PhoneGap

• Sencha

• jQTouch

• jQuery Mobile

http://developer.apple.com/

Buildingfor Mobile

• iOS

• webOS• PhoneGap

• Sencha

• jQTouch

• jQuery Mobile

https://developer.palm.com/

Buildingfor Mobile

• iOS

• webOS

• PhoneGap• Sencha

• jQTouch

• jQuery Mobile

http://www.phonegap.com/

Buildingfor Mobile

• iOS

• webOS

• PhoneGap

• Sencha• jQTouch

• jQuery Mobile

http://www.sencha.com/

Buildingfor Mobile

• iOS

• webOS

• PhoneGap

• Sencha

• jQTouch• jQuery Mobile

http://jqtouch.com/

Buildingfor Mobile

• iOS

• webOS

• PhoneGap

• Sencha

• jQTouch

• jQuery Mobile

http://jquerymobile.com/

Buildingfor Mobile

Mobile FirstPeople have been focusing on the small screen.

But mobile is morethan small devices.

http://www.mobileawesomeness.com/

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/

Buildingfor Mobile

• Ethan Marcotte• Simon Collison

• Jon Hicks

• Clearleft

• dConstruct

• Media Queries

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

Buildingfor Mobile

• Ethan Marcotte

• Simon Collison• Jon Hicks

• Clearleft

• dConstruct

• Media Queries

• Boston Globe

http://colly.com/

Buildingfor Mobile

• Ethan Marcotte

• Simon Collison

• Jon Hicks• Clearleft

• dConstruct

• Media Queries

• Boston Globe

http://hicksdesign.co.uk/

Buildingfor Mobile

• Ethan Marcotte

• Simon Collison

• Jon Hicks

• Clearleft• dConstruct

• Media Queries

• Boston Globe

http://clearleft.com/

Buildingfor Mobile

• Ethan Marcotte

• Simon Collison

• Jon Hicks

• Clearleft

• dConstruct• Media Queries

• Boston Globe

http://2011.dconstruct.org/

Buildingfor Mobile

• Ethan Marcotte

• Simon Collison

• Jon Hicks

• Clearleft

• dConstruct

• Media Queries• Boston Globe

http://mediaqueri.es/

Buildingfor Mobile

• Ethan Marcotte

• Simon Collison

• Jon Hicks

• Clearleft

• dConstruct

• Media Queries

• Boston Globe

http://bostonglobe.com/

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

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

Buildingfor Mobile

Mobile ManifestoA set of principles to guide our approach

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/

Buildingfor Mobile

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

• Write Software = Native Apps

• Publish Content = Web

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

Buildingfor Mobile

The FutureThe trend is toward convergence of apps and web.

• Web = Software

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

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/

PrinterScreen Reader

Multi-platform App Framework

Desktop PC

Responsive

Design

iOS jQTouch / jQuery Mobile

webOS Sencha PhoneGap

Native App

Laptop

Feature Phone

Smart Phone

Game Console

Touch Phone

Tablet

Future Devices?

Buildingfor Mobile

The Here and NowWhat we can do now is simplify.

• Email

• To Do List

• Media Diet

• File Management

http://bitliteracy.com/

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/

http://iawriter.com/

http://simplenoteapp.com/

http://notational.net/

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

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

http://symphony-cms.com/

http://astuteo.com/slickmap/

http://markuplibrary.org/styleguide/

ResourcesFurther Reading

• A List Apart

• A Book Apart

• Luke Wroblewski

• Smashing Magazine

• Content Strategy

• Media Queries

• Domain7 Mobile Manifesto

Domain7: Mobile Web Design Approach

Technology

Transcript of Domain7: Mobile Web Design Approach

Mobile Financial Services: An Approach To AML/CTF For Mobile Money

A Mobile First Approach to Recruitment Technology

BYOD: The Easyjet approach to Mobile Learning?

The Fuse Approach to Mobile App Development

THE CHANGEMAKER S CHALLENGE DOMAIN7 fileTHE CHANGEMAKER’S CHALLENGE DOMAIN7.COM You need two players and one facilitator for this game. The facilitator assigns each player a card.

Mobile approach to higher education jan2013

State of Mobile + 7 Ways to approach and improve your mobile marketing

Mobile Do’s and Don’ts – A Geo-Centric Approach to Mobile Success

Humanistic approach in mobile adhoc network hamanet

Industry presentation - Conceptual approach for a mobile ...

Mobile Testing - Keytorc Approach

Mobile api test approach

A Machine Learning Based Approach to Mobile Network Analysisweb.cs.ucla.edu/~yuanjie.li/slides/icccn18-mobile-analytics-slides.pdf · A Machine Learning Based Approach to Mobile Network

An Optimal Hierarchical Clustering Approach to Mobile ...

Practical Approach to Mobile application Testingsamples.leanpub.com/practicalapproachtomobile... · Practical Approach to Mobile application Testing Author: Prasanna V. Jayaprakash

Retailers Need to Adopt a Mobile-First Approach - Accentureadopt a mobile-first approach now to meet changing customer expectations. Developments in mobile technology combined with

What Mobile Development Approach Makes Sense

Mobile connects an integrated approach to mobile marketing 14 march 2013

Mobile Banking - The Next Gen Approach

An Average Modeling Approach for Mobile Refrigeration ...