web development 101: getting your site right from the beginning (or starting over if you didn’t)
DESCRIPTION
Web Development 101: Getting Your Site Right from the Beginning (or starting over if you didn’t). Lisa Williams [email protected] Twitter: @lisawilliams. Placeblogger World HQ! (now with free coffee). Cambridge, MA. Screenshot of Placeblogger. - PowerPoint PPT PresentationTRANSCRIPT
placeblogger
Web Development 101:
Getting Your Site Right from the Beginning
(or starting over if you didn’t)
Lisa [email protected]: @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