Web Development 101:

bammobInternet and Web Development

Dec 4, 2013 (3 years and 8 months ago)

71 views

placeblogger

Web Development 101:

Getting Your Site Right from the Beginning

(or starting over if you didn’t)

Lisa Williams

lisa@placeblogger.com

Twitter: @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

Acquisition

8M

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

Acquisition

2.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 wall

and 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 Williams

lisa@placeblogger.com

twitter.com/lisawilliams