You've Decided to Use HTML5. Now What?
•
1 like•435 views
Slides from the webinar "So You've decided to use HTML. Now what?" Presented by Dave Porter
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to You've Decided to Use HTML5. Now What?
Similar to You've Decided to Use HTML5. Now What? (20)
More from Appnovation Technologies
More from Appnovation Technologies (19)
Recently uploaded
Recently uploaded (20)
You've Decided to Use HTML5. Now What?
- 1. CANADIAN HEADQUARTERS UNITED STATES OFFICE UNITED KINGDOM OFFICE www.appnovation.com 152 West Hastings Street 3414 Peachtree Road, #1600 3000 Hillswood Drive info@appnovation.com Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 Hillswood Business Park Chertsey KT16 0RS, UK YOU’VE DECIDED TO USE HTML5. NOW WHAT? 10 Considerations for a Great HTML5 website or mobile app Dave Porter – SproutCore Architect & Core Team Member marketing@appnovation.com Dave Porter V
- 2. Appnovation is one of the world’s TOP OPEN SOURCE DEVELOPMENT SHOPS. Dave Porter V
- 3. LOCATIONS VANCOUVER OFFICE ATLANTA OFFICE LONDON OFFICE 152 West Hastings Street 3414 Peachtree Road, #1600 3000 Hillswood Drive Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 Hillswood Business Park Chertsey KT16 0RS, UK Dave Porter V
- 4. Dave Porter V
- 5. YOU’VE DECIDED TO USE HTML5. NOW WHAT? Dave Porter V
- 6. Decide on HTML5 Dave Porter V
- 7. 0. DECIDE ON HTML5 HOW DID YOU GET HERE? • Settled Standards: Move Forward with Backward Compatibility • The Fastest-Improving Platform. Period. • Feature Parity • Build Once, Deploy Everywhere Dave Porter V
- 8. Know Your Purpose Dave Porter V
- 9. 1. KNOW YOUR PURPOSE WHAT IS YOUR PROJECT’S REASON FOR BEING? Have a Mission Statement Information? Content? Sales? Product? Social? Dave Porter V
- 10. 1. KNOW YOUR PURPOSE WHAT IS YOUR PROJECT’S REASON FOR BEING? Bad Mission Statement: “Drive customer engagement.” Dave Porter V
- 11. 1. KNOW YOUR PURPOSE WHAT IS YOUR PROJECT’S REASON FOR BEING? Good Mission Statement: “A value-add component to our primary offering, allowing our customers to access their content when away from their primary device. Drives customer engagement by offering full- featured content previews with as little friction as possible.” Dave Porter V
- 12. Know Your Audience Dave Porter V
- 13. 2. KNOW YOUR AUDIENCE SPECIAL CONSIDERATIONS • Does your audience include: • Many users of older browsers? • Mobile users? • Speakers of different languages? Dave Porter V
- 14. Frameworks & Technology Dave Porter V
- 15. 3. FRAMEWORKS & TECHNOLOGY PRODUCT GOALS LEAD TO TECHNOLOGY CHOICES Dave Porter V
- 16. 3. FRAMEWORKS & TECHNOLOGY PRODUCT GOALS LEAD TO TECHNOLOGY CHOICES Web Application Middle ground Content-Managed Website Dave Porter V
- 17. 3. FRAMEWORKS & TECHNOLOGY PRODUCT GOALS LEAD TO TECHNOLOGY CHOICES Dave Porter V
- 18. Know What’s Possible Dave Porter V
- 19. 4. KNOW WHAT’S POSSIBLE HTML5 FEATURES In 2012 your web page can... ...know where it is ...take photos (soon) ...work offline ...prefetch data ...show and manipulate video, audio and advanced graphics ...handle big data ...talk to the vision-impaired ...do anything you can do with native Dave Porter V
- 20. 4. KNOW WHAT’S POSSIBLE THE BROWSER QUESTION :D :| >:( arstechnica.com Dave Porter V
- 21. 4. KNOW WHAT’S POSSIBLE THE BROWSER QUESTION arstechnica.com Dave Porter V
- 22. 4. KNOW WHAT’S POSSIBLE TARGETING THE STANDARDS Feature detection Graceful degradation caniuse.com Dave Porter V
- 23. Structural Considerations Dave Porter V
- 24. 5. STRUCTURAL CONSIDERATIONS PLANNING AHEAD • Should your project include: • Responsive design? (yes) • Offline support? • Localization? • Automated unit tests? • Analytics? Dave Porter V
- 25. Scope & Focus Dave Porter V
- 26. 6. SCOPE & FOCUS • With a clear understanding of your project’s mission: • Define its size, or size it in stages. • Focus & clearly define must-haves for release. • Avoid feature creep. • Be flexible, but keep deadlines in mind. • Examine any new feature idea in light of the question: is this required for release? Is it more important than other release features? • Features can creep (a little) after v1.0 Dave Porter V
- 27. Development Strategies Dave Porter V
- 28. 7. CHOOSE A DEVELOPMENT STRATEGY METHODOLOGIES • Buzz-word magnet • Waterfall (Heavy, linear, slow, careful) • Spiral; Iterative; Cascade (Lighter, cyclical, iterative) • Agile (Very light, fast-paced iteration; rapid release) • No one buzz-word is going to solve all problems for all projects. Consider: • Ongoing development • Team size & experience Dave Porter V
- 29. 7. CHOOSE A DEVELOPMENT STRATEGY INTERNAL, EXTERNAL & HYBRID TEAMS • If you have an internal team, awesome. • If you have a project that will be nearly complete at v1.0, Appnovation can build your project. • If your project is likely to see ongoing development, Appnovation can help you build a team. Dave Porter V
- 30. Design, Design, Design Dave Porter V
- 31. 8. DESIGN, DESIGN, DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN • User Experience (UX) • User Interface (UI) • Vague Ideas • Wireframes • Pixel-Perfect Mockups Dave Porter V
- 32. Development Dave Porter V
- 33. 9. DEVELOPMENT GETTING TO 1.0 • Assemble & train your team • Establish timelines • Maintain design flexibility • Avoid feature-creep • Develop • QA • Internal testing • Beta testing • Deployment Dave Porter V
- 34. Beyond 1.0: Iterate & Innovate Dave Porter V
- 35. 10. BEYOND 1.0 ITERATE & INNOVATE • Early results: • Analytics • Listen to your users… but don’t trust them verbatim “If I had asked people what they wanted, they would have said faster horses.” – Henry Ford • Analyze, synthesize, act • Iterative design & enhancement • Remember: Avoid Feature Creep. Dave Porter V
- 36. CANADIAN HEADQUARTERS UNITED STATES OFFICE UNITED KINGDOM OFFICE www.appnovation.com 152 West Hastings Street 3414 Peachtree Road, #1600 3000 Hillswood Drive info@appnovation.com Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 Hillswood Business Park Chertsey KT16 0RS, UK Thank You For Your Participation! QUESTIONS? Dave Porter – SproutCore Architect & Core Team Member marketing@appnovation.com Dave Porter V
Editor's Notes
- Today’s presentation picks up where last week’s left off: You’ve decided to use HTML5, what’s next?: Ten considerations for a great HTML5 website or mobile app.
- Before you got to this presentation, you decided to use HTML5. Why?
- Settled standards let you move forward with backward compatibility.This is the promise of standards: they are going to stay standard.It’s being driven forward by enormous contributions fromApple, Google, Microsoft, Adobe, the Mozilla Foundation, Nokia, Samsung, Intel, have all contributed, and all have a vested interest in improving the platform that your app is running on. So your app is going to work better, faster, on the same hardware, for free, with no effort from you.In 2012, the standards have caught up with the promise of a universal platform. Adoption is skyrocketing.The original promise of the web: a universal, standard platform, with the promise of build-once, deploy-anywhere.
- You need a clear statement up front about what your project’s place in the organization is.
- This is clearly a caricature, but I want to drive home the point that your project is going to fail if you can’t clearly enunciate what it’s for.
- Mission statements can and should change, but at every point they should remain clear, valuable, achievable and in sync with what you’re actually building.
- Focus on this now: these inform & constrain decisions you’re making shortly.
- Project purpose informs framework choices; informs whether you’re building a web Site, a web App, or something in between.
- Content like blog posts, corporate information, doesn’t change much.Data like client billing status, reservation status, or stock portfolio information, changes often.Comsumption, a little at a time.Heavy interaction, like querying, sorting, changing values?
- Fantastic Graphics by Pixelmator®Passive consumption of content: web Site. Use a CMS, they’re great.Dynamic interaction with data: web Application.Middle ground: light-weight apps, app-y kind of pages, like Twitter, LinkedIn, anything with a Web 2.0 vibe.
- CMS’s like Wordpress or DrupalApp-lite or app-y websites: Wild west. A whole ton of options and not a whole lot of top-level best practices. Be prepared for some uncertainty.Full-fledged application: SproutCore. Only game in town for opinionated, foundational optimizations for the application use case.Make these decisions now, because there is a high cost of switching horses midstream.
- What can you do in a modern browser?How do you support non-modern browsers?
- First up, the good news. In 2012, your web site or application can…Know where it is with the Geolocation APITake photos (soon) with the upcoming Device APIs from MozillaWork offline with local storage, browser databases, and the AppCache APIIntelligently prefetch data so that it’s ready when the user wants itVideo, audio and advanced graphics with new HTML5 tags and the WebGL graphics specificationHandle big data with Web Workers, which allow you to crunch big numbers in the backgroundTalk vision-impaired users through your product with the Accessible Rich Internet Application standardDo almost anything you can do with native. The goal of HTML5 is feature parity, and it’s damn close.
- HTML5 is growing but not quite universal yet. The Big Technical Question remains which browsers you have to support.Once you move to standards, you support features rather than browsers. But for another year or two you’re going to have to answer the browser question.Tradeoff between addressing your fullest audience and the extra time, effort, money it takes to support legacy browsers.Charts courtesy of ArsTechnica with data from netmarketshare.com.IE: 50%.IE9: 10%! IE9 is where Microsoft got on board with standards. IE9 support is easy – build to the standards.IE8: ~30%. Death by 1000 papercuts. Nonstandard variants of calls. Much less capable than newer browsers. Supporting IE8 will slow you down.IE7: Nobody. Tied to Vista.IE6: <6%, <1% in the West. - Google stopped supporting IE6 a couple years ago. - Supporting IE6 is a nightmare, costly, and your developers will hate you. - Explore Chrome Frame as an alternative.
- 60+% browser market is on board with standards.Firefox and Chrome have automatic background updating; their users are up to date or close.Mobile users mostly up to date also.75% phone browsing happens on iPhone; iPhone users tend to be up to date or close.HTML5 standards coverage is high and only going to increase.Don’t target standards-based browsers. Instead, target features.
- Detect whether the feature is present (Modernizr)If it’s a bleeding-edge feature, provide graceful fallback in case it’s absentcaniuse.com to get market share data for each feature. Tops.Think about this now to avoid investing in IE8 support and then discovering late in the game that there’s a deal-breaking feature missing.
- A few specific features you need to plan ahead for.
- Plan ahead! Building these features in from the start is dramatically easier than tacking them on later. Especially responsive design, localization & unit tests.
- Define project scope. Size in stages, focus on v1.0 requirements. Very few sectors and scenarios require full-featured v1.0 releases.ESPECIALLY before release, avoid feature creep (tendency of projects to get bogged down with too many good ideas and become less than the sum of its parts).
- Decide how your project will be run, and by whom.
- Don’t choose a methodology, understand the continuum and do what fits your project & team best.Waterfall – corporate approach. Whole project-at-a-time, from analysis to design to development to test to deploy. Big, slow, safe.Sprial / iterative / cascade – lighter-weight responses to Waterfall. Smaller incremental improvements pass more quickly through the waterfall steps.Agile. Very light-weight, fast-paced, constant parallel work by everybody; stable release every sprint. Invigorating, chaotic (Scrum!), incredibly fast innovation from groups that can handle it.Consider:Are you assembling an ongoing iterative team? Go more agile.Team size & experience. Very agile development requires very sophisticated, self-motivated team members.
- If you have an internal, HTML5-savvy team, go to town.If you don’t, and your project is a one-off, no need to shoulder cost of nurturing & maintaining big development groups. Appnovation has delivered great results to happy clients, like Reebok, NBC, Fox News, the DOD; we’d love to for you too.If you want to develop a team, or develop your team’s HTML5 chops, Appnovation has experience working in hybrid teams, sharing expertise & developing at the same time. Had a blast on the last two projects. Proud of the work we did, but even more of the work they were capable of doing after we left.
- Preemptive counterpoint: It’s possible to have too much design, but it’s very rare. Most projects err (often badly) the other direction.
- User Experience: the flows and feel of thingsUser Interface: the best widget for particular jobsIntegrating:Cocktail napkin ideasWireframes: functionally-complete skeletons of what can be done and howPixel-perfect mockups: how it’s going to look at every step in every stateThe sophistication of your team is going to determine how far along the design-complete spectrum you have to go. Wherever you decide to land, I encourage you to take another couple of steps towards the fullly-mocked-up end. Even with Agile, the more stable your design is, the better.Be flexible, but don’t use flexibility as an excuse to go in without a plan!Appnovation has a great design staff.
- Real Artists Ship. – S. Jobs
- Always plan time for version 1.1 for bug fixes and lessons learned.Enthusiastic early adopters are full of feedback but not omniscient. Absorb, amalgamate, combine with analytics before acting.Iterate! If you’re agile or agile-ish just keep the cycle going; otherwise iterations may require their own full projects.And remember: Focus is Golden.