The presentation highlights interaction design, usability, tools and platforms choices, recommended coding practices, architecture, processes, competitive & business strategy and everything that a great web developer should know about.

1. Online Strategy & Development In a nutshell

2. Big Picture Consumer Device Convergence

3. Big Picture Web & Media Convergence

4. Web Characteristics Live: Bloomberg, Wimbeldon Interactive: Mortgage calculator before the web? Permanent: No undo. Archives. No space constraints. Cumulative. Collaborative: WikiPedia, Open source, Google Maps. Trackbacks. Comments. Forums. Noisy. Information Overload (Twitter) Viral: email, facebook, youtube. On demand: Google Search. URLs. Now Social.

5. Analytics What is being clicked ? What pages are being loaded? How much time is being spent on a page? What is the navigation path? Who is being read? Real time Ad placement, sales, context.

6. Demographic Profiling & Targetting Dawn targets individuals & households. Sunday print has magazine from women, children’s section, classifieds etc. iPhone targets the more tech savvy. Older generation finds it complex. Prefers tactile feedback. Localization & internationalization

7. IA/UI/UX Search or browse? Returning or new? On-boarding Process? Goal? Time? Clicks? Reduce clicks, roundtrips, scroll Hours, minutes or seconds? OnMouseDown or OnMouseClick? Rozee.pk gets it. Jang doesn’t but lacks competition. Graceful degradation Progressive rendering Discoverability. Gmail now has drag/drop.

9. IA/UI/UX Don’t make the user think Assume user has bad memory, is a poor decision maker and extremely slow and lazy. Design for this user. Design for accessibility? No JS. No Flash. Text based. Screen readers. Mobile. Etc. Text as a UI (h1, p, anchors, alignment, wrapping, line-height, font-size) Prefer two-level nesting. No more than three. H1, H2, H3. Nav and Sub Nav. Two level lists. Well formed HTML. Semantic. Microformats. Use alt, title, label, etc. Use white space and gutters. Margins, padding or even borders?

10. Process Ship it! Keep it simple Daily, Weekly, Monthly milestones Build First. Refine Later. Version control, bug tracking, wiki, QA 1 great developer better than 20 bad ones. 2-3 person startups. Early on get jack of all, master of many Later on get jack of few, master of one One step build. One step publish. Beta

11. Web Architecture Stateless. GET, POST, sessions, cookies Centralized. Easy deploy. Quick bug fix turnaround (Gmail has gone as low as 4 hours) Fat servers, thin clients but getting richer. (Canvas/SVG/XUL, Offline storage, RIA). Versioning. Everyone on same page. Instantaneous update. Build numbers to track problems. Security. Runs in a sandbox environment. Security getting tighter. Works everywhere. Creeping up on desktop. Bandwidth. Latency. ASync. Caching. Preloading. Progressive rendering. display/position/DOM manipulation

12. Web Stack HTTP: GET, POST, PUT, DELETE (HTML4 lacks support) HTTP: 2/4 concurrent browser limit. IE8 6/6. Do ASync. HTTP: GZIP, Deflate HTTP Servers: Comet (Push). Yahoo Push. Single connection. No setup/teardown. HTML: Semantic, HTML not XHTML. No CSS. No JS. CSS: Weight, Cascasde (LI:1, UL LI:2, LI.red: 11, #menu: 100). CSS: Box Model (Margin, Padding, Borders) CSS: Selectors, DOM, CSS3 (sibling, descendant, first, last), Class vs ID

13. Web Stack JavaScript: faster engines ahead (v8/chrome, tracemonkey/FF) JS: Use JSON. Avoid XML, CSV Don’t inline JS: Object based. Objects are dictionaries (KVP) JS: Object literal syntax Do minify JS: Object detection not browser detection

14. Web Stack Build RESTful services and web APIs Frameworks: MVC, ORM (EF, nHibernate), Blueprint/960.gs, jQuery Automate: 1 step build, 1 step publish. Tools: firebug, resharper, fiddler, trac, wfetch Caching: Server, Client, DB I/O: memcached. ASP.NET application static vars DB: Denormalized. Add fields as needed. Hints from the UI.

15. Strategy: Platform Strategy Everyone uses the platform. Seeks broad adoption. Microsoft Windows ME seeks to be the underlying platform for smart phones. iPhone seeks to build it’s own phones. WordPress. jQuery You dictate the roadmap. Microsoft promotes OEMs. Platform allows others to build on top of it. Apple controls the entire vertical. Provides a developer platform (Xcode + AppStore)

16. Strategy: Ecosystem Strategy Everyone contributes. Everyone benefits. Give to get. Microsoft has an ecosystems strategy. Partners, vendors, certifications, OEMs, OS, Office, .NET/VS etc. Needs a platform. Entire ecosystem is self sustaining. Apple has an ecosystems strategy. Retail, manufacturing, support, development, OS, applications, training, IDE/SDK, etc. MS can get into AV, Browsers, Media, Keyboards, etc. Internal demand alone will make it sustainable.

17. Strategy: Blue Ocean Strategy Nintendo Wii. Didn’t compete. Created new segment. Bing does not want to be a search engine. Wants to be a decision engine. Create new demand. Differentiation is central

18. Strategy: Disruptive Strategy Element of Surprise. GMail. Apple notorious for secrecy. Competitors find it hard to react (resources, planning) Gmail was extremely disruptive. Entire industry reacted. IE disrupted NS. GMail disrupted Hotmail. iPhone/BB disrupted Nokia/Motorola.

19. Strategy: Embrace & Extend Microsoft’s Strategy Wait for market to validate then E&E. Need resources. Need foresight. Need ecosystem. IE disrupted NS. GMail disrupted Hotmail. iPhone/BB disrupted Nokia/Motorola.

20. Strategy: Tiny verticals, Long tail Easy to build Easy to manage Can respond quickly. Can iterate quickly. Specialization is advantageous. Do one thing and do it well. Can interface directly with users. They will endorse you. If the pie is big, multiple players can exist and verticals can thrive. If the market is competitive or the leader is big, build a vertical.

21. Strategy: Competitive Strategy Seed it. StackOverflow seeded with industry leaders. Differentiate. Some like it hot, some like it cold. Bing design is polar opposite of Google. Build it better with newer tools. StackOverflow (Web2.0) versus Experts Exchange Communities: Deep engagement. Don’t fraternize. Expertise. You can’t build an online shoe store if you have never worked in one. You can’t do supply chain if you don’t know wholesalers, retailers, have credit in market. Partner or build a platform. Strong value proposition. Cross-sell. Up-sell.

22. Reach Out Email [email_address] LinkedIn tinyurl.com/onlinestrategy Personal aleembawany.com Please drop an email to say hello & introduce yourself. Or for questions, feedback & guidance. Looking for great developers on the biggest portal project .