2 Consumer Device Convergence Big PictureConsumer Device Convergence
3 Web & Media Convergence Big PictureWeb & Media Convergence
4 Web CharacteristicsCollaborative: WikiPedia, Open source, Google Maps. Trackbacks. Comments. Forums.Live: Bloomberg, WimbeldonViral: , 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 timeHow 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 & internationalizationiPhone 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, scrollOnMouseDown or OnMouseClick?On-boarding Process? Goal? Time? Clicks?Graceful degradationRozee.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/UXUse white space and gutters. Margins, padding or even borders?Don’t make the user thinkText 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 Process1 great developer better than 20 bad ones. 2-3 person startups.Ship it!Keep it simpleBuild First. Refine Later.Early on get jack of all, master of manyDaily, Weekly, Monthly milestonesVersion control, bug tracking, wiki, QALater on get jack of few, master of oneOne step build. One step publish.Beta
11 Web ArchitectureVersioning. Everyone on same page. Instantaneous update. Build numbers to track problems.Stateless. GET, POST, sessions, cookiesCentralized. 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, DeflateHTTP Servers: Comet (Push). Yahoo Push. Single connection. No setup/teardown.CSS: Selectors, DOM, CSS3 (sibling, descendant, first, last), Class vs ID
14 Web Stack Build RESTful services and web APIs Frameworks: MVC, ORM (EF, nHibernate), Blueprint/960.gs, jQueryAutomate: 1 step build, 1 step publish.Tools: firebug, resharper, fiddler, trac, wfetchCaching: Server, Client, DBDB: 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. jQueryYou 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 StrategyWait 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 buildEasy to manageSpecialization 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 ExchangeDifferentiate. 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 OutLinkedIntinyurl.com/onlinestrategyPersonalaleembawany.comPlease drop an to say hello & introduce yourself. Or for questions, feedback & guidance.Looking for great developers on the biggest portal project.