The Web Development Process for Newbies

Are you a Communications Director or Campaign Manager who has just been asked to take care of getting your organization a new website? Never done this before and not sure why it’s part of your job? You’re not alone! At least once each week I talk to someone in your position who seems lost and not sure where to start. So here’s your guide, glossary and reading list to get started.

The web development world is a big place with lots of terms not used in other areas of the advocacy world. (And then there are words like “development,” which has nothing to do with fundraising here in the Advomatic office.)

The Web Development Process

The web designer will tell you that the look of your site is most important to its success. The Systems Administrator will say without good hosting and support you won’t get anywhere. The marketing strategist will tell you the message should be your priority. And developers will go on and on about the code and technology that powers your site. We think every phase of the project is key. Dedicate time and energy to each step and you’ll end up with the best finished product.

At Advomatic, we break down the web development project cycle into the following phases:

  • Discovery
  • Plan
  • Design
  • Build
  • Integrate
  • Test & Launch
  • Maintain

Discovery
Whether you are planning a major redesign of your organization’s website or starting from scratch, planning ahead is key to success. Some of this work will be done by your web development vendor, but there is internal work you should do first. Read more about the right questions to ask in this presentation I gave at Organizing 2.0’s first conference back in December:

Plan (aka User Experience Design)
Even when redesigning an existing site, it’s important to step back and consider the overall structure of the site. Can your target audience find what it is looking for? Well thought out information architecture is crucial to your site’s success, no matter how you measure it: traffic, donations, sales, registered users. This phase of your project will produce blueprints for each page (wireframes), diagrams of complex web applications (workflows) and technical specifications that can guide any development team. You can see a variety of sample wireframes at I ♥ wireframes. (Also see slide 12 in the above presentation.)

Design
The next step is what most newbies think of as the meat of the project: designing the visual elements of a website, including fonts, colors, buttons, header graphics and more. It’s not the meat, but it’s just as important as any other phase. We’ve all seen websites with bad design. It can ruin an otherwise stellar website. When selecting a designer, ask to see previous work and check references. Also ask how the designer’s thought and creative process applies to your project.

Build
The technical heavy-lifting, or development. In this phase, the development team (or developer) will use the documentation produced in the “Plan” and “Design” phases to actually create and code your website.

Integrate
Many organization’s sites need to pull or push information from/to external sources, such as a CRM, blog, news media or social media. You need to address these needs earlier on in the Discovery and Plan phases, and then make sure they happen correctly in development.

Test & Launch
What happens when you launch your site and it’s full of errors and typos? It’s very embarrassing and you, not the web development vendor, are likely to take the blame. Be sure that your vendor does extensive quality assurance and browser compliance testing and actively participate in the process. Also be sure to budget a lot of time to write your site’s content. Those little “About Us” blurbs take a lot longer to edit than you think. (I learned that part the hard way when we redesigned Advomatic.com in 2009.)

Maintain
It’s not enough to launch your site and just move on to the next project. Good websites are like puppies; you need to take care of them regularly to keep them alive. What does that mean on the web? Check that your hosting provider is handling the incoming traffic and that you don’t have down time. Stay current in updates to your CMS or CRM. And if you have the budget for it, do some usability testing and tweaks to improve the site a few months after launch.

Reading List

“Wait a minute, you want me to read three books!?!? I already have a full-time job and a family!” Yes, I’m asking you to read three books before you embark on this process. All three of them are quick reads. Steve Krug’s Don’t Make Me Think is written to be read cover-to-cover in a mid-length plane flight, or a few hours.

All three of these books are written by Information Architecture and Usability experts, people who spend all day, everyday thinking about how to best organize and phrase content to be easily understood. Those skills translate very well to these books.

  1. Jesse James Garret’s The Elements of User Experience: User-Centered Design for the Web
    A great introduction to the philosophy behind and process of modern web development. Today, Jesse James Garrett runs one of the world’s leading user experience design consultancies, Adaptive Path, and is considered a thought leader by the industry.
  2. Dan Brown’s Communicating Design: Developing Web Site Documentation for Design and Planning
    Nope, sorry to disappoint, but this one has nothing to do with that other Dan Brown, who wrote the Da Vinci Code. Dan M. Brown’s book focuses on the documentation you will read at each step of the process. Each chapter focuses on a different type of documentation you may see as a client, including wireframes, site maps and personas. You don’t have to read the entire thing, just the chapters that are relevant to the work produced by your chosen web development vendor.
  3. Steve Krug’s Don’t Make Me Think: A Common Sense Approach to Web Usability
    Don’t Make Me Think is without a doubt the most recommended book for newbies to the web development/project management industry. And for good reason. It’s a very quick read and written using common-sense language. If you read only one of my reading list selections, it should be this one.

Glossary

The web development world has its own vocabulary and many acronyms. To make sure you stay on the same page as vendor and consultants, you should learn and know the following terms.

Application Programming Interface (API)
An API is a special interface that allows one database/website/software application to talk to another. We’ve used APIs on countless projects, including to pull legislative and campaign finance data for MAPLight.org and DMI’s TheMiddleClass.org. Many CRM tools have APIs to integrate with your site seamlessly.

Content Management System (CMS)
A Content Management System will allow multiple users to create and add new content to a website without needing a developer’s expertise to code. At Advomatic, we’re partial to an extremely powerful open source CMS called Drupal. There are countless CMS options, both open source and proprietary, available today. Examining your needs early in the process will help you select the right one for your organization.

Customer/Constituent Relationship Management (CRM)
A web or desktop-based database application that is used to manage records. In the non-profit world, we use CRM solutions to manage donors, event attendees, volunteers and email subscribers. Popular CRM solutions for non-profits include Democracy In Action’s Salsa, Convio, CiviCRM, Kintera/Blackbaud and Salesforce.

Development
In our world, “development” is the technical work that goes into building a website. This can be coding, installing and configuring a platform like Drupal or working with APIs. Many professional developers will have undergraduate and/or graduate degrees in Computer Science.

Feature Creep (or Scope Creep)
Feature creep is adding new functionality to a website once the project is already in development. Even after extensive discovery and strategy up front, many clients fall into this trap. Feature creep is the fastest way to go over budget and and miss launch deadlines. Before committing to add new features this far into the project cycle, be sure to ask yourself are these changes “must have” or “would be nice” and also how many hours will they cost us?

Information Architecture (IA)
Peter Morville’s recent contest to “Explain IA” will do a better job than I ever could: <a href="http://www.flickr.com/groups/explainia/pool/"Explain IA Pool on Flickr Be sure to check out the winning entry: A Dinosaur Family Explains Information Architecture.

Open Source
Open Source is a methodology for developing web and desktop software. An open source product has code that is open to the public and a community/team of developers collaborate to improve and add on to the product. Read more about how the open source movement is changing business, technology and even government at Open Source for America.

Section 508
Refers to US accessibility laws that govern information technology and web standards. A 508-compliant site will be easily understood by screen readers and other tools used to aid blind, deaf and disabled users.

Usability
Usability of a web site refers to how easy users find it to reach their goals or achieve specific tasks. If you visit a website with great usability, the interaction and experience is simple and just “makes sense.” Steve Krug’s book listed above gives a great introduction to this concept.

User Experience Design (UX)
Every time you click on the “Search” or “Donate” buttons of a website, a UX designer, or someone, somewhere decided where to put that button. Same with navigation. Someone decided where that link should take you and what should be on the destination page. UX is the umbrella term for Information Architecture, Interaction Design and User Interface Design.

Wireframes
Wireframes are “blueprints” of a website. The common metaphor in web development is building a house. You hire a UX designer to create wireframes and a visual designer to create design composite files, just as you hire an architect to make blueprints and an interior decorator to pick the carpets, wallpaper and furniture. The UX designer uses wireframes to label where the doors, windows and electrical hookups will be and how many rooms your “house” will need.

World Wide Web Consortium (w3c)
W3C is the leading international organization for web development standards. All modern (good) websites are expected to be valid (compliant) with w3c’s standards.

Conclusion

Like any successful project or campaign that isn’t a website, you need to plan, execute and then check in after the hard parts are over. If your prospective web vendor isn’t telling you about their entire process or thinks that planning is unnecessary, ask for more information, and if they won’t provide it, it may be time to start looking elsewhere.
—-
Coming later this month from our Director of Development, Dylan Clear, will be a guide to how you can work with your vendor’s Project Manager to get the most of the client/web vendor relationship, in terms of cost, time and quality.