placeblogger

Web Development 101:

Getting Your Site Right from the Beginning

(or starting over if you didn’t)

Lisa Williamslisa@placeblogger.comTwitter: @lisawilliams

Placeblogger World HQ!

(now with free coffee)

Cambridge, MA

Screenshot of Placeblogger

placeblogger

Lisa on LinkedIn: linkedin.com/in/lisawilliams

Lisa on Twitter: @lisawilliams

I am learning to love Facebook, so friend me I need the support to stick

with it

placeblogger

Tracy!!

Who this is for

• Non-programmers who want to build a new website or add features to/extend an existing website

• Project leaders who will be working with others on their team to set up and run a website and web strategy for a project

• Site editors and admins who have a day-to-day role in building and running a community information project.

• If you ever want to step up to design, launch and run another project.

You don’t have to pay attention to this session if:

• You’ll never do anything on the web ever again.

• You’ll never ask for money from anyone to do anything with a web component ever again.

• You’ll never touch, improve, or ask for money for your current site again.

placeblogger

OK? Cool.

placeblogger

Attracting & Landing Tech Talent for Your Project

placeblogger

You’re not buying, you’re selling.

placeblogger

Where do I find them?

placeblogger

How a coder sees your project

placeblogger

What type of relationship?

placeblogger

How much should I pay?

Site Startup Capital

Tech at launch

Phase 2 tech

Phase 2 financing

Exit/Uniques

Blogher >$10k Movable Type

Drupal NBCi, Venrock

$5M

Acquisition8M

Television Without Pity

>$10k BBforum, Plone

MT, Prospero

Bootstrap, Advertisers

Acquired by Bravo

1M

TechCrunch >10k Wordpress WPMU Bootstrap, ads,

conferences

$25M (AOL)

1.8

Huffington Post

~300k Custom SixApart

MT,Rails

$5M VC investment

Acquisition2.5

placeblogger

Don’t forget to launch

placeblogger

Don’t forget to look beyond launch

What feature do you add on day 2, and how?

placeblogger

Write a spec

No, really. Write a spec.

placeblogger

Because if you tell a developer

“I want a site with citizen journalism where local businesses can buy their own ads and I want people to blog but I want to be sure that nothing gets onto the front page that we don’t want there and oh we want our twitter feed to appear somewhere and we need to link our Facebook fan page and we want people to be able to rate comments and share links and upload photos and maybe we need something that works on mobile phones…”

placeblogger

You won’t get the site you want.

You’ll get whatever the developer feels like giving you.

placeblogger

Your developer’s job is writing code

Mind reading is not in the job description

placeblogger

Resistance to writing things down

I haven’t convinced many people to write site plans

But the ones I have convinced aren’t driven crazy and their projects succeed

Not writing a site plan• Is the single biggest risk you can take with your

project. • Is entirely unnecessary. • Keeps you from really digging into your project

and finding out what it’s about – writing a site plan is about THINKING IT THROUGH and DISCOVERY.

• Keeps you from building the kind of project momentum that is crucial in winning over board members, community organizations, partners, and volunteers.

placeblogger

If your site is already live, you don’t need a site plan

That is, if you never want to get any more money for it.

placeblogger

Without a site plan you can only succeed by accident

Succeeding on purpose is SO much more fun. Here’s how.

Entry points

• Pitch• Team Bios• Influences• User Stories• Tree Diagram/Sitemap• Wireframes• Feature List

Entry points

• Pitch• Team Bios• Influences• User Stories• Tree Diagram/Sitemap• Wireframes• Feature List

placeblogger

Write a pitch

One sentence that describes your project in a clear, concise, and

compelling way.

placeblogger

Team Bios/Project Inspiration

Developers want to know who they’ll be working with, and why this project is cool and important

placeblogger

Influences

List other websites that have been influential in your thinking about your project as well as

sites you use everyday, and sites whose design you like

placeblogger

Tree Diagram/Sitemap

A tree diagram showing your main page and the major landing pages of your

site (don’t forget admin pages!)

placeblogger

Feature List

The big long list of features. Some people start with the list and then do wireframes,

others do wireframes first and then list everything you can click on and write down

what it does.

placeblogger

User Stories

3-4 one paragraph descriptions of typical users of your site, why they

come there, why they’d stay

placeblogger

Wireframes

Simple sketches of the front page and landing pages on your site

What is a wireframe?• A wireframe is a grid with boxes suggesting the layout of

a web page. • Inside each grid is a UI element called a “design pattern.”• We encounter familiar design patterns on the web every

day:• Search bar, calendar picker, search results, tabs, login

box. • You can present the same data in different ways –

stories could be in a list or in a carousel (one story is shown, with left and right buttons to scroll through stories)

placeblogger

I ♥ Wireframes

They give you an excuse to go out and buy cool office supplies

UI pattern sites show you examples of common web design patterns

QUICK GET A PEN!

• UI-patterns.com• UIPatternFactory.com• Welie.com/Patterns• Yahoo! Design Library• Flickr.com/groups/ilovewireframes

• Share back – put your wireframes and design patterns out there

Hang it on the walland back up

placeblogger

Placeblogger’s original site plan was 14 pages long and

had 8 wireframes

Screenshot of Placeblogger

Accessories for the fashionable site plan

• Launch plan – what will you do on Day One?• Content plan (how many items per day, what

type, how many tweets, FB posts, who will do what)

• Metrics plan (you should share this with your developer up front so they can build in whatever analytics you’ll be using)

• Support/Operations How often do you back up? Who do you call when it crashes? Who removes spam? Who moderates content on what days of the week? Etc.

Resources

• “Painless Functional Specifications,” by Joel Spolsky (READ THIS IT’S GREAT; IT’S ONLINE AND FREE)

• Original site plan for Placeblogger (14 pages plus 8 wireframes) is on the Basecamp

placeblogger

Thanks!

Lisa Williamslisa@placeblogger.com

twitter.com/lisawilliams