Online Strategy & Development In a nutshell

Consumer Device Convergence Big Picture Consumer Device Convergence

Web & Media Convergence Big Picture Web & Media Convergence

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

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

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

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

IA/UI/UX Interaction design: Image gallery Keyboard left and right. Image width/height attributes set (avoids redrawing, attributes available to JS earlier). Prev/Next links but carousel even better. Prev/Next links above/below and statically placed. Validation with JS, app or DB? Date Picker. Text field, dropdown, popup calendar or embedded? Date of birth versus flight booking? URL as a UI. Helps RESTful & SEO. Demarcate information. Group information. Borders, background colors, gutters.

IA/UI/UX Use white space and gutters. Margins, padding or even borders? Don’t make the user think Text as a UI (h1, p, anchors, alignment, wrapping, line-height, font-size) Assume user has bad memory, is a poor decision maker and extremely slow and lazy. Design for this user. 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. Design for accessibility? No JS. No Flash. Text based. Screen readers. Mobile. Etc.

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

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

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

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

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 DB: Denormalized. Add fields as needed. Hints from the UI. I/O: memcached. ASP.NET application static vars

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)

Strategy: Ecosystem Strategy Everyone contributes. Everyone benefits. Give to get. Needs a platform. Entire ecosystem is self sustaining. Microsoft has an ecosystems strategy. Partners, vendors, certifications, OEMs, OS, Office, .NET/VS etc. 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.

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

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

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

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

Strategy: Competitive Strategy Build it better with newer tools. StackOverflow (Web2.0) versus Experts Exchange Differentiate. Some like it hot, some like it cold. Bing design is polar opposite of Google. Seed it. StackOverflow seeded with industry leaders. 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. Communities: Deep engagement. Don’t fraternize. Strong value proposition. Cross-sell. Up-sell.

Reach Out Email aleemb@gmail.com 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.