Online Strategy
& Development
In a nutshell
Big Picture
Consumer Device Convergence
Big Picture
Web & Media Convergence
Web Characteristics
Live: Bloomberg,
Wimbeldon
Interactive: Mortgage
calculator before the
web?
On demand: Google
Search. URLs.
Viral: email, facebook,
youtube.
Collaborative:
WikiPedia, Open
source, Google
Maps.
Trackbacks.
Comments.
Forums.
Noisy. Information
Overload (Twitter)
Permanent: No undo.
Archives. No space
constraints.
Cumulative.
Now Social.
Analytics
What is being clicked ?
Who is being read?
How much time is
being spent on a page?
What pages are being
loaded?
What is the navigation
path?
Real time
Ad placement, sales,
context.
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
IA/UI/UX
Returning or new?
Search or browse?
Discoverability. Gmail
now has drag/drop.
Hours, minutes or
seconds?
On-boarding Process?
Goal? Time? Clicks?
Rozee.pk gets it. Jang
doesn’t but lacks
competition.
Reduce clicks,
roundtrips, scroll
OnMouseDown or
OnMouseClick?
Graceful degradation
Progressive rendering
IA/UI/UX
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.
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.
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.
Use white space and
gutters. Margins,
padding or even
borders?
Prefer two-level
nesting. No more than
three. H1, H2, H3. Nav
and Sub Nav. Two level
lists.
Text as a UI (h1, p,
anchors, alignment,
wrapping, line-height,
font-size)
Well formed HTML.
Semantic.
Microformats. Use alt,
title, label, etc.
Process
Ship it!
Keep it simple
Build First. Refine
Later.
Daily, Weekly, Monthly
milestones
1 great developer
better than 20 bad
ones. 2-3 person
startups.
Early on get jack of
all, master of many
Version control, bug
tracking, wiki, QA
One step build. One
step publish.
Later on get jack of
few, master of one
Beta
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
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
Web Stack
JavaScript:
faster engines
ahead
(v8/chrome,
tracemonkey/FF)
JS: Use JSON. Avoid
XML, CSV
JS: Object
based. Objects
are dictionaries
(KVP)
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
Tools: firebug,
resharper, fiddler, trac,
wfetch
I/O: memcached.
ASP.NET application
static vars
Automate: 1 step
build, 1 step publish.
Caching: Server,
Client, DB
DB: Denormalized. Add
fields as needed. Hints
from the UI.
Strategy: Platform Strategy
Everyone uses
the platform.
Seeks broad
adoption.
You dictate the
roadmap.
Apple controls the
entire vertical.
Provides a developer
platform (Xcode +
AppStore)
Microsoft Windows ME
seeks to be the
underlying platform for
smart phones. iPhone
seeks to build it’s own
phones. WordPress.
jQuery
Microsoft promotes
OEMs. Platform allows
others to build on top
of it.
Strategy: Ecosystem Strategy
Everyone
contributes.
Everyone benefits.
Give to get.
Entire ecosystem is
self sustaining.
Apple has an
ecosystems
strategy. Retail,
manufacturing,
support,
development, OS,
applications,
training, IDE/SDK,
etc.
Needs a platform.
Microsoft has an
ecosystems strategy.
Partners, vendors,
certifications, OEMs,
OS, Office, .NET/VS
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.
Bing does not want
to be a search
engine. Wants to be
a decision engine.
Create new
demand.
Differentiation is
central
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.
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.
Strategy: Tiny verticals, Long tail
Easy to build
If the pie is big,
multiple players can
exist and verticals
can thrive.
Easy to manage
Can respond
quickly. Can iterate
quickly.
Can interface
directly with users.
They will endorse
you.
Specialization is
advantageous. Do
one thing and do it
well.
If the market is
competitive or the
leader is big, build
a vertical.
Strategy: Competitive Strategy
Differentiate. Some
like it hot, some
like it cold. Bing
design is polar
opposite of Google.
Communities: Deep
engagement. Don’t
fraternize.
Strong value
proposition. Crosssell. Up-sell.
Build it better with
newer tools.
StackOverflow
(Web2.0) versus
Experts Exchange
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.
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.