Template for Request for Proposal, Requirements & Design Specifications

Been cloning this document for so long, so many times…

[Title]

Synopsis

[One sentence description of what's this all about. TL;DR.]

Changelog

[Reverse chronologically]

2014-07-21: launched — forty five years ago.

Table of Contents

[Auto-generated!]

Project

[Software development lifecycle (SDLC).]

Scope

[Extent and limitations of project.]

1. Analysis and design [RFPs (written by clients) typically useless, thus my requirements and design specifications serves both as proposal and documentation, both marketing and engineering — keeps them honest!]
2. Training: specify for which workflows, or code; documentations/materials to provide.
3. Deployment: if out of scope, describe automation/scripting of deployment; probably Git based.
4. Changes and maintenance: out of scope, retainer. Everything ends.

Schedule, Milestones

1. Delivery, acceptance tests [period for corrections per spec, beyond which retainer applies]
2. Payments schedule
3. Availability, contacts

Legal

1. Open source: the only viable technology, thus all our state of the art technologies are viral open source licensed, GNU/OSI compliant.
2. IP transferred to client upon delivery.

Objectives

[Define "success".]

1. Audience
2. Marketing, growth hacking
   1. Goals
   2. Analytics, brand monitoring
   3. Ads
3. Scalability
   1. Content [how much?]
   2. Traffic: web, email, read/write ratio…
   3. Expected scale changes

Principles

1. Web standards (W3C)
   1. Valid and compatible code, official validators
   2. Usability and accessibility (a11y), WAI, ARIA
   3. Semantic Web: HTML5, XFN, RDFa…
2. RIA: dynamic, realtime, SPA, async…
3. Responsive web design
4. Convensions, best practices
5. Portability [understand app will not look and be experienced the same way everywhere, every time, by everyone!]
6. Web 2.0
   1. Hyperlinked communities: blogrolls, trackbacks…
   2. User generated content (UGC) (ordered by increasing effort): ratings (votes), link sharing, comments/talkbacks, tagging, forums, blog entries (elsewhere), Wiki edits, multimedia.
   3. Mashups, syndication
   4. Active users: sharing, trust users
   5. Folksonomies
   6. Social networks (network effect): FB, LI, G+, Twitter…
   7. Global audience
   8. Perpetual beta
   9. Long tail, freemium, emergent user behavior…
   10. Bookmarklets, Greasemonkey

Clarifications

[Attach correspondence that clarifies specifications or its evolution.]

Architecture

Components

1. Browser app (for people, as in UI/UX)
2. Server app (for bots, as in SEO, APIs)
3. Storage (no schema!)
4. Daemon (and clusters, and…)
5. [Optional] Hybrids, PhoneGap (aka Cordova)

Interfaces

Deployment

1. Hosting
2. Daemonizing, monitor/supervisor/watchdog
   1. Upstart, SysV init…
   2. Respawn, rate limit?
3. Configuration
   1. Dependencies in package.json
   2. Environment
4. Automation
   1. Installation (setup): $ git clone (or unzip?); npm install; sudo service {webapp,pollster} start or pm2 start server.coffee
   2. Upgrade (release): $ git push or pull (or rsync?); restart

Technologies

1. Node, Express
2. Socket.IO (WebSockets)
3. LevelDB
4. DSLs: CoffeeScript, Stylus, CoffeeCup/Jade, Mustache…
5. jQuery ecosystem: DataTables, Chosen…
6. WebRTC (P2P)
7. CSS: Flexbox
8. Automation and asset pipeline: Cake…

Content

Screens, Blocks, Elements

[Screens: itemize visible, user facing features. Blocks: breakdown. Elements: leaf, atomic blocks, eg: widgets.]

Wireframes, Flows

Data Model

Semantic Web

Users

1. Authentication
2. Accounts

Admin

WYSIWYG, Media, Taxonomies…

UI/UX

Foundations

1. Single page app (SPA)
2. Responsive web design (RWD)
3. Reactive, realtime
4. WebFonts, SVG
5. Usability and accessibility (a11y), WAI, ARIA
6. Mobile…

Features, Widgets…

1. DataTables (jQuery plugin): sortable, pick columns, reordering, widths, auto resize, ellipsis, filters, row selection, scrolling, colors, search, responsive features: wrap cells, wrap rows, swipe scroll, abbreviate values/labels, click/tap to expand, tooltips…
2. Lifestream (aka feed): featured (aka sticky)…
3. Menus: primary navigation, footer, related…
4. Sliders (aka slideshow, carousel), accordion, lightbox…
5. Dropdowns, popups
6. Search: full text, AJAX, autocomplete, custom queries?
7. Forms
8. Modals?
9. Breadcrumbs

Responsive

Mobile (ie Hand Held)

1. Responsive (layouts)
2. Touch, gestures, UI convensions
3. Geolocation, cameras, etc
4. Offline
5. Push notifications

Style

1. Graphic design
   1. Layout (composition)
   2. Logo (branding)
   3. Photos, drawings, animations…
   4. Favicon: 16x16 ico, transparency; optionally add large sizes with full alpha.
   5. Typography: use Webfonts (esp Google’s), maybe fallback on Cúfon. Readability.
   6. Color palette: mind accessibility/usability issues (contrast,blindness).
   7. Textures, embellishments…
2. Style guide

Special Effects

i18n/L10n

SEO

Content

[Typically part of marketing campaign, copywriting…]

1. Links (inbound)
2. Metadata: fields provided by, eg, Yoast’s.
3. Brand monitoring

Analytics

1. Tracking
2. Log analysis

Coding

1. Metadata (RDFa, XFN, microformats…), sitemap, snippets (SEO)…
2. Performance: compression, minification, combining, lazy loading, CDN… YSlow’s/PageSpeed recommendations.

SMO, Syndication

APIs

E-mail

Quality of Service

Performance

1. Latencies

Security

1. Spam

Administration

Backups

Upgrades

Development

Staging

Locals

Repositories

QA/QC