Online Strategy & Development
In a nutshell
Big PictureBig Picture
Consumer Device Convergence
Big PictureBig Picture
Web & Media Convergence
Web CharacteristicsWeb Characteristics
Live: Bloomberg, Wimbeldon
Live: Bloomberg, Wimbeldon
Interactive: Mortgage calculator before the web?
Interactive: Mortgage calculator before the web?
Permanent: No undo. Archives. No space constraints. Cumulative.
Permanent: No undo. Archives. No space constraints. Cumulative.
Collaborative: WikiPedia, Open source, Google Maps. Trackbacks. Comments. Forums.
Collaborative: WikiPedia, Open source, Google Maps. Trackbacks. Comments. Forums.
Noisy. Information Overload (Twitter)Noisy. Information Overload (Twitter)
Viral: email, facebook, youtube.Viral: email, facebook, youtube.
On demand: Google Search. URLs.
On demand: Google Search. URLs.
Now Social.Now Social.
AnalyticsAnalytics
What is being clicked ?What is being clicked ?
What pages are being loaded?What pages are being loaded?
How much time is being spent on a page?
How much time is being spent on a page?
What is the navigation path?What is the navigation path?
Who is being read?Who is being read?
Real timeReal time
Ad placement, sales, context.Ad placement, sales, context.
Demographic Profiling & TargettingDemographic Profiling & Targetting
Dawn targets individuals & households. Sunday print has magazine from women, children’s section, classifieds etc.
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.
iPhone targets the more tech savvy. Older generation finds it complex. Prefers tactile feedback.
Localization & internationalizationLocalization & internationalization
IA/UI/UXIA/UI/UX
Search or browse?Search or browse?Returning or new?Returning or new?
On-boarding Process? Goal? Time? Clicks?
On-boarding Process? Goal? Time? Clicks?
Reduce clicks, roundtrips, scrollReduce clicks, roundtrips, scroll
Hours, minutes or seconds?Hours, minutes or seconds?
OnMouseDown or OnMouseClick? OnMouseDown or OnMouseClick?
Rozee.pk gets it. Jang doesn’t but lacks competition.
Rozee.pk gets it. Jang doesn’t but lacks competition.
Graceful degradationGraceful degradation
Progressive renderingProgressive rendering
Discoverability. Gmail now has drag/drop.
Discoverability. Gmail now has drag/drop.
IA/UI/UXIA/UI/UX
Validation with JS, app or DB?Validation with JS, app or DB?
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.
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.
Date Picker. Text field, dropdown, popup calendar or embedded?Date of birth versus flight booking?
Date Picker. Text field, dropdown, popup calendar or embedded?Date of birth versus flight booking?
Demarcate information. Group information. Borders, background colors, gutters.
Demarcate information. Group information. Borders, background colors, gutters.
URL as a UI. Helps RESTful & SEO.URL as a UI. Helps RESTful & SEO.
IA/UI/UXIA/UI/UX
Don’t make the user thinkDon’t make the user think
Assume user has bad memory, is a poor decision maker and extremely slow and lazy. Design for this user.
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.
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)
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.
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.
Well formed HTML. Semantic. Microformats. Use alt, title, label, etc.
Use white space and gutters. Margins, padding or even borders?
Use white space and gutters. Margins, padding or even borders?
ProcessProcess
Ship it!Ship it!Keep it simpleKeep it simple
Daily, Weekly, Monthly milestonesDaily, Weekly, Monthly milestones
Build First. Refine Later.Build First. Refine Later.
Version control, bug tracking, wiki, QAVersion control, bug tracking, wiki, QA
1 great developer better than 20 bad ones. 2-3 person startups.
1 great developer better than 20 bad ones. 2-3 person startups.
Early on get jack of all, master of manyEarly on get jack of all, master of many
Later on get jack of few, master of oneLater on get jack of few, master of one
One step build. One step publish.One step build. One step publish.
BetaBeta
Web ArchitectureWeb Architecture
Stateless. GET, POST, sessions, cookies
Stateless. GET, POST, sessions, cookies
Centralized. Easy deploy. Quick bug fix turnaround (Gmail has gone as low as 4 hours)
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).
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.
Versioning. Everyone on same page. Instantaneous update. Build numbers to track problems.
Security. Runs in a sandbox environment. Security getting tighter.
Security. Runs in a sandbox environment. Security getting tighter.
Works everywhere. Creeping up on desktop.Works everywhere. Creeping up on desktop.
Bandwidth. Latency. ASync. Caching. Preloading. Progressive rendering. display/position/DOM manipulation
Bandwidth. Latency. ASync. Caching. Preloading. Progressive rendering. display/position/DOM manipulation
Web StackWeb Stack
HTTP: GET, POST, PUT, DELETE (HTML4 lacks support)
HTTP: GET, POST, PUT, DELETE (HTML4 lacks support)
HTTP: 2/4 concurrent browser limit. IE8 6/6. Do ASync.
HTTP: 2/4 concurrent browser limit. IE8 6/6. Do ASync.
HTTP: GZIP, DeflateHTTP: GZIP, Deflate
HTTP Servers: Comet (Push). Yahoo Push. Single connection. No setup/teardown.
HTTP Servers: Comet (Push). Yahoo Push. Single connection. No setup/teardown.
HTML: Semantic, HTML not XHTML. No CSS. No JS.
HTML: Semantic, HTML not XHTML. No CSS. No JS.
CSS: Weight, Cascasde (LI:1, UL LI:2, LI.red: 11, #menu: 100).
CSS: Weight, Cascasde (LI:1, UL LI:2, LI.red: 11, #menu: 100).
CSS: Box Model (Margin, Padding, Borders)
CSS: Box Model (Margin, Padding, Borders)
CSS: Selectors, DOM, CSS3 (sibling, descendant, first, last), Class vs ID
CSS: Selectors, DOM, CSS3 (sibling, descendant, first, last), Class vs ID
Web StackWeb Stack
JavaScript: faster engines ahead (v8/chrome, tracemonkey/FF)
JavaScript: faster engines ahead (v8/chrome, tracemonkey/FF)
JS: Use JSON. Avoid XML, CSVJS: Use JSON. Avoid XML, CSV
Don’t inlineDon’t inline
JS: Object based. Objects are dictionaries (KVP)
JS: Object based. Objects are dictionaries (KVP)
JS: Object literal syntaxJS: Object literal syntax
Do minifyDo minify
JS: Object detection not browser detection
JS: Object detection not browser detection
Web StackWeb Stack
Build RESTful services and web APIs
Build RESTful services and web APIs
Frameworks: MVC, ORM (EF, nHibernate), Blueprint/960.gs, jQuery
Frameworks: MVC, ORM (EF, nHibernate), Blueprint/960.gs, jQuery Automate: 1 step
build, 1 step publish.Automate: 1 step build, 1 step publish.
Tools: firebug, resharper, fiddler, trac, wfetch
Tools: firebug, resharper, fiddler, trac, wfetch
Caching: Server, Client, DBCaching: Server, Client, DB
I/O: memcached. ASP.NET application static vars
I/O: memcached. ASP.NET application static vars
DB: Denormalized. Add fields as needed. Hints from the UI.
DB: Denormalized. Add fields as needed. Hints from the UI.
Strategy: Platform StrategyStrategy: Platform Strategy
Everyone uses the platform. Seeks broad adoption.
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
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.You dictate the roadmap.
Microsoft promotes OEMs. Platform allows others to build on top of it.
Microsoft promotes OEMs. Platform allows others to build on top of it.
Apple controls the entire vertical. Provides a developer platform (Xcode + AppStore)
Apple controls the entire vertical. Provides a developer platform (Xcode + AppStore)
Strategy: Ecosystem StrategyStrategy: Ecosystem Strategy
Everyone contributes. Everyone benefits. Give to get.
Everyone contributes. Everyone benefits. Give to get.
Microsoft has an ecosystems strategy. Partners, vendors, certifications, OEMs, OS, Office, .NET/VS etc.
Microsoft has an ecosystems strategy. Partners, vendors, certifications, OEMs, OS, Office, .NET/VS etc.
Needs a platform.Needs a platform.
Entire ecosystem is self sustaining.Entire ecosystem is self sustaining.
Apple has an ecosystems strategy. Retail, manufacturing, support, development, OS, applications, training, IDE/SDK, 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.
MS can get into AV, Browsers, Media, Keyboards, etc. Internal demand alone will make it sustainable.
Strategy: Blue Ocean StrategyStrategy: Blue Ocean Strategy
Nintendo Wii. Didn’t compete. Created new segment.
Nintendo Wii. Didn’t compete. Created new segment.
Bing does not want to be a search engine. Wants to be a decision engine.
Bing does not want to be a search engine. Wants to be a decision engine.
Create new demand.Create new demand.
Differentiation is centralDifferentiation is central
Strategy: Disruptive StrategyStrategy: Disruptive Strategy
Element of Surprise. GMail. Apple notorious for secrecy.
Element of Surprise. GMail. Apple notorious for secrecy.
Competitors find it hard to react (resources, planning)
Competitors find it hard to react (resources, planning)
Gmail was extremely disruptive. Entire industry reacted.
Gmail was extremely disruptive. Entire industry reacted.
IE disrupted NS. GMail disrupted Hotmail. iPhone/BB disrupted Nokia/Motorola.
IE disrupted NS. GMail disrupted Hotmail. iPhone/BB disrupted Nokia/Motorola.
Strategy: Embrace & ExtendStrategy: Embrace & Extend
Microsoft’s StrategyMicrosoft’s Strategy
Wait for market to validate then E&E.
Wait for market to validate then E&E.
Need resources. Need foresight. Need ecosystem.
Need resources. Need foresight. Need ecosystem.
IE disrupted NS. GMail disrupted Hotmail. iPhone/BB disrupted Nokia/Motorola.
IE disrupted NS. GMail disrupted Hotmail. iPhone/BB disrupted Nokia/Motorola.
Strategy: Tiny verticals, Long tailStrategy: Tiny verticals, Long tail
Easy to buildEasy to build
Easy to manageEasy to manage
Can respond quickly. Can iterate quickly.
Can respond quickly. Can iterate quickly.
Specialization is advantageous. Do one thing and do it well.
Specialization is advantageous. Do one thing and do it well.
Can interface directly with users. They will endorse you.
Can interface directly with users. They will endorse you.
If the pie is big, multiple players can exist and verticals can thrive.
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.
If the market is competitive or the leader is big, build a vertical.
Strategy: Competitive StrategyStrategy: Competitive Strategy
Seed it. StackOverflow seeded with industry leaders.
Seed it. StackOverflow seeded with industry leaders.
Differentiate. Some like it hot, some like it cold. Bing design is polar opposite of Google.
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
Build it better with newer tools. StackOverflow (Web2.0) versus Experts Exchange
Communities: Deep engagement. Don’t fraternize.
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.
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.
Strong value proposition. Cross-sell. Up-sell.
Reach OutReach Out
LinkedIntinyurl.com/onlinestrategy
Personalaleembawany.com
Please drop an email to say hello & introduce yourself. Or for questions, feedback & guidance.
Looking for great developers on the biggest portal project.