Presentation on theme: "Online Strategy & Development In a nutshell. Big Picture Consumer Device Convergence."— Presentation transcript:
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? Permanent: No undo. Archives. No space constraints. Cumulative. Collaborative: WikiPedia, Open source, Google Maps. Trackbacks. Comments. Forums. Noisy. Information Overload (Twitter) Viral: email, facebook, youtube. On demand: Google Search. URLs. Now Social.
Analytics What is being clicked ? What pages are being loaded? How much time is being spent on a page? What is the navigation path? Who is being read? Real time Ad placement, sales, context.
Demographic Profiling & Targetting Dawn targets individuals & households. Sunday print has magazine from women, childrens section, classifieds etc. iPhone targets the more tech savvy. Older generation finds it complex. Prefers tactile feedback. Localization & internationalization
IA/UI/UX Search or browse? Returning or new? On-boarding Process? Goal? Time? Clicks? Reduce clicks, roundtrips, scroll Hours, minutes or seconds? OnMouseDown or OnMouseClick? Rozee.pk gets it. Jang doesnt but lacks competition. Graceful degradation Progressive rendering Discoverability. Gmail now has drag/drop.
IA/UI/UX 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. URL as a UI. Helps RESTful & SEO.
IA/UI/UX Dont 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. 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. Well formed HTML. Semantic. Microformats. Use alt, title, label, etc. Use white space and gutters. Margins, padding or even borders?
Process Ship it! Keep it simple Daily, Weekly, Monthly milestones Build First. Refine Later. Version control, bug tracking, wiki, QA 1 great developer better than 20 bad ones. 2-3 person startups. Early on get jack of all, master of many Later on get jack of few, master of one One step build. One step publish. 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 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 I/O: memcached. ASP.NET application static vars DB: Denormalized. Add fields as needed. Hints from the UI.
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 its 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)
Strategy: Ecosystem Strategy Everyone contributes. Everyone benefits. Give to get. Microsoft has an ecosystems strategy. Partners, vendors, certifications, OEMs, OS, Office,.NET/VS etc. Needs a platform. Entire ecosystem is self sustaining. 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.
Strategy: Blue Ocean Strategy Nintendo Wii. Didnt 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 Microsofts 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 Easy to manage Can respond quickly. Can iterate quickly. Specialization is advantageous. Do one thing and do it well. Can interface directly with users. They will endorse you. 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.
Strategy: Competitive Strategy Seed it. StackOverflow seeded with industry leaders. 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 Communities: Deep engagement. Dont fraternize. Expertise. You cant build an online shoe store if you have never worked in one. You cant do supply chain if you dont know wholesalers, retailers, have credit in market. Partner or build a platform. Expertise. You cant build an online shoe store if you have never worked in one. You cant do supply chain if you dont know wholesalers, retailers, have credit in market. Partner or build a platform. Strong value proposition. Cross- sell. Up-sell.
Reach Out Email firstname.lastname@example.org 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.