1. Online Strategy & Development
In a nutshell

2. Consumer Device Convergence
Big Picture
Consumer Device Convergence

3. Web & Media Convergence
Big Picture
Web & Media Convergence

4. Web Characteristics
Collaborative: WikiPedia, Open source, Google Maps. Trackbacks. Comments. Forums.
Live: Bloomberg, Wimbeldon
Viral: , 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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