Domain7: Mobile Web Design Approach
Upcoming SlideShare
Loading in...5
×
 

Domain7: Mobile Web Design Approach

on

  • 2,162 views

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

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/)

Statistics

Views

Total Views
2,162
Views on SlideShare
2,161
Embed Views
1

Actions

Likes
0
Downloads
42
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Domain7: Mobile Web Design Approach Domain7: Mobile Web Design Approach Presentation Transcript

  • Designing & Building for the Mobile WebFriday, 16 September, 11
  • A Domain7 Workshop Illustration by Stephen Bau, modi ed from the original by The Noun ProjectFriday, 16 September, 11
  • Designing for Mobile Stephen Bau, Domain7Friday, 16 September, 11
  • http://www.qrcodecity.com/q/RHFriday, 16 September, 11
  • http://twitter.com/#!/bauhouse/favoritesFriday, 16 September, 11
  • http://www.designin uences.com/ uid960gs/Friday, 16 September, 11
  • 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/DesignFriday, 16 September, 11
  • Designing for Mobile Adapting to Technology • Language • Telephone • Painting • Film • Writing • Television • Alphabet • Computers • Print • Internet • Photography • Mobile Devices http://en.wikipedia.org/wiki/TechnologyFriday, 16 September, 11
  • 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/InternetFriday, 16 September, 11
  • 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
  • http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlFriday, 16 September, 11
  • 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_principleFriday, 16 September, 11
  • 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
  • http://www.nytimes.com/Friday, 16 September, 11
  • 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
  • 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
  • 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
  • http://www.zeldman.com/dwws/Friday, 16 September, 11
  • http://www.zeldman.com/Friday, 16 September, 11
  • 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
  • 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
  • http://joshduck.com/periodic-table.htmlFriday, 16 September, 11
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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-storageFriday, 16 September, 11
  • 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
  • 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
  • http://www.lukew.com/Friday, 16 September, 11
  • 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
  • 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- rstFriday, 16 September, 11
  • Designing for Mobile Content Strategy Kristina Halvorsen, Brain Traffic • Create • Publish • Govern • Plan • Maintain • Measure http://www.contentstrategy.com/Friday, 16 September, 11
  • 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
  • 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
  • http://andyrutledge.com/design-view.phpFriday, 16 September, 11
  • 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.phpFriday, 16 September, 11
  • 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.phpFriday, 16 September, 11
  • Friday, 16 September, 11
  • Image from Andy Rutledge, News Redux http://andyrutledge.com/news-redux.phpFriday, 16 September, 11
  • Building for Mobile Stephen Bau, Domain7Friday, 16 September, 11
  • 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 DesignFriday, 16 September, 11
  • 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
  • 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
  • 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
  • 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
  • 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.htmlFriday, 16 September, 11
  • 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.jspFriday, 16 September, 11
  • 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/HomeFriday, 16 September, 11
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Building for Mobile Mobile Manifesto A set of principles to guide our approachFriday, 16 September, 11
  • 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
  • http://domain7.com/mobile/Friday, 16 September, 11
  • 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 = WebFriday, 16 September, 11
  • 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 = WebFriday, 16 September, 11
  • 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
  • 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
  • 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 DevicesFriday, 16 September, 11
  • 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
  • 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
  • http://iawriter.com/Friday, 16 September, 11
  • http://simplenoteapp.com/ http://notational.net/Friday, 16 September, 11
  • 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-forFriday, 16 September, 11
  • 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/xsltFriday, 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 Resources Further Reading • A List Apart • A Book Apart • Luke Wroblewski • Smashing Magazine • Content Strategy • Media Queries • Domain7 Mobile ManifestoFriday, 16 September, 11
  • Friday, 16 September, 11