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

Emailaleemb@gmail.com

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.