The document summarizes the process for designing and building a website for a communications and marketing event called BizBuzz. Key steps included identifying goals, requirements, and content; designing wireframes; developing templates using Django; testing throughout; and deploying the site using a good hosting system. The resulting BizBuzz site met the goals of providing information about the event and being editable without assistance.

1. Making a
website
A short case study to understand how a website is
designed and created

2. If you are hiring out a web
site designer/developer,
know the practices to look for
‣ A process to identify the goals and requirements,
and to sketch out a lot up front
‣ Design based on a solid understanding of the web
‣ Pages created with modern practices, and a
development style responsive to changes
‣ Platform (application) and template testing & QA
‣ Repeatable and observable deployment
‣ Maintainable with little to no developer assistance

3. A lot of this is stuff that you
probably won’t see
‣ You just care about
getting a site that looks
good and works like
you want!
‣ But if you ignore it,
you’ll end up with a
mess
‣ Know how the sausage
is made

4. BizBuzz is a communications
& marketing event
‣ Presented semi-annually by the Arlington Chamber of
Commerce’s Communications Council
‣ A panel of peer experts share their experience on topics
such as relationship marketing, brand management, and
generating buzz
‣ Naturally, an event about generating buzz needs its
own buzz machine
‣ As Communications Council members, we volunteered
to create a website. Here’s how we did it, making sure it
looked great, worked right, and didn’t kill our budget

5. Strategize Design Develop Test Deploy Update
First we identified the
primary goals of the site
‣ Example goals for a business site: sell the product,
educate customers, get online leads, sign people up,
provide authoritative reference
‣ Identifying the primary goals has to be done with the client
‣ Choose as few goals as possible for “primary” goals
‣ BizBuzz goals: (1) provide all the necessary information
about the event in one place and (2) provide an additional
entry point for people to find out about it

6. Strategize Design Develop Test Deploy Update
Then we asked about the
specific site requirements
‣ It’s an event, so we need to know when and where it is, and
let visitors add the event to their calendars
‣ There are speakers, so we should know who they are, a bit
about them, links to their sites, and maybe head shots
‣ Definitely want a catchy write up about the event
‣ Nobody should have to come to us to make changes - the
event organizers should be able to make edits

7. Strategize Design Develop Test Deploy Update
Enumerate and record these
requirements!
‣ For a complex site or web app
we use a development tool called
PivotalTracker
‣ Use a project management tool
or even a shared spreadsheet
‣ This was a small, quick project -
we just used notes (that’s how
we recorded the data
requirements you see here)

8. Strategize Design Develop Test Deploy Update
Organize as much of the site
content as possible before
starting headlong into design
‣ Acknowledge that the content will change, but do it
anyhow
‣ Prepared content might change the approach to layout or
navigation design
‣ Content readiness is key to launching on time, not being
ready can delay launch of a site for weeks or months
‣ For the BizBuzz site we had an event description and
basic snippets ready before designing

9. Strategize Design Develop Test Deploy Update
Once we knew what was
required we could plan the
designs with wireframes
http://clients.home/nwra/wireframes/content.html 6/4/10 4:42 PM
Member!Log!In Newsletters Events Contact!NWRA
‣ Blueprints for web pages
Home!> ![Section!Title]!> ![Content!Title]
Logo
Est.!1932
[Content!Title]
[Content!Subtitle]
Issues
May!7th,!2010
Author!Name
About!NWRA
Not design, but help the
Tags:![Tag!1],![Tag!2],![Tag!3]
‣
NWRA!Members
[Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elit
[Page!Title] vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque
convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque
designer and the
ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus
[Page!Title] condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.]
[Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elit
[Page!Title] vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque
convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque
[Page!Title] ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus
condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.]
customer understand the
[Page!Title] [Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elit
vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque
convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque
[Page!Title] ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus
condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.]
Back!to!Top
[Upcoming!Events]
page
Western!Water!Seminar
July!28"30,!2010
Snow!King!Lodge
Jackson!Hole,!WY
Read!more
Add!event!to!your
calendar
‣ Pictures make discussing
Contact!NWRA [Sign!up!for!Weekly!Reports]
National!Water [Sign!up!for!our!"Weeklies"!—!read!the!latest!news!articles,!press
Resources!Association releases!and!discussions!about!western!water!related!issues]
3800!North!Fairfax
Drive,!Suite!4 Name:
Arlington,!VA!22203
http://www.nwra.org
concepts easier
Tel:!703.524.1544
Email:
Fax:!703.524.1548
Add!NWRA!to!your
Organization:
address!book
Send!NWRA!a!message
Sign!Up
[*!See!our!Privacy!Policy!and!Terms!and!Conditions.]
‣ Gets expectations right
Member!Log!In Submit!News Contact!NWRA Sitemap
A layout-oriented example Page 1 of 1

10. Strategize Design Develop Test Deploy Update
Wireframes in hand, we could
mockup alternative design
directions
Two different design directions (top of pages only)

11. Strategize Design Develop Test Deploy Update
The purpose of mockups is to
convey the core design
elements
‣ Show as many or all of the features, including page layout,
type, and user interactions
‣ Typically includes only a few pages for smaller projects -
design is craft and lots of design time is expensive
‣ For this project, one-page design directions were sufficient
‣ Then have the customer (BizBuzz organizers) indicate
which they prefer and use that as the base design

12. Strategize Design Develop Test Deploy Update
The templates are designed
with the web in mind
‣ Responsive layouts are used so that the site can be
meaningfully viewed on a large screen PC or a phone
‣ Progressive enhancement is used so that visual
effects can be applied without ‘breaking’ older browsers*
‣ The pages are coded to be accessible to viewers with
disabilities (e.g. using screen readers) and easily understood
by search engines (a component of search engine
optimization)
‣ Layouts take into account into account desired and
expected user interaction
*IE6, we’re looking at you

13. Strategize Design Develop Test Deploy Update
To build the BizBuzz site, we
chose to use Django
‣ Every site is built and served on something - plain HTML
pages, WordPress, Drupal, Ruby on Rails, custom scripts
‣ Django is the web application framework for
perfectionists with deadlines - we can build the site
exactly as needed, very quickly, using the (well crafted)
HTML we want
‣ Brilliant stuff built-in, from security to the admin
interface and it scales down (individual blogs) and up
(The Onion, Disqus)

14. Strategize Design Develop Test Deploy Update
We simultaneously began
developing the site and
finalizing the designs
‣ Once you know what is going to be required on the site
and on what pages, you can start constructing templates
and the database
‣ The site should be designed so that the visual design is
distinct from your content - adding content and updating
the look should have no mutual effects

15. Strategize Design Develop Test Deploy Update
Make sure things work by
testing early
‣ We didn’t rely on a one-shot testing phase at the end of
the project, each feature was tested as it was
developed and before it’s added into the project
‣ This is a good place for automated testing (critical for
web apps)
‣ We only knew what to test for both functionally and
visually because we had specified requirements from
the project strategy phase

16. Strategize Design Develop Test Deploy Update
Make sure the site looks okay
across different systems,
browsers, & devices
‣ Older browsers with
lesser capabilities won’t
show all the visual candy
‣ While IE6 (bottom
right) eats your designs
alive!

17. Strategize Design Develop Test Deploy Update
We set up on a good system
that we could customize
‣ Cost is a poor excuse not to use a
good web host - we used a virtual
server courtesy of Ascend
Technology
‣ This allows features unavailable
on, say, a domain registration firm
moonlighting as a webhost lol, servers? I don’t
care, just show me
‣ For security and performance we
the damn site!
used Ubuntu Linux running the
(Yeah, we know)
very fast nginx web server

18. Strategize Design Develop Test Deploy Update
Now, with our deployment
service, we click a button to
update
Yes, please

19. Strategize Design Develop Test Deploy Update
Make sure there is a good
way for others to edit the site
This is how Django rolls

20. Assessing the BizBuzz site
and the project goals
‣ All of the requisite information about the event is available,
including topic, people, venue, and an add-to-calendar link
‣ The site is a separate, search engine accessible site, with
links back to the Chamber of Commerce site
‣ Event organizers can edit and add information without
special assistance
‣ And it’s extensible, allowing us to modify the functionality
and add features like a BizBuzz blog
(Success)

21. The super-fast summary: how to build a
good web site (or app)
‣ Know who your audience ‣ Build on platforms that
is at all times make you productive
‣ First plan with the client ‣ Have a deployment plan
and system in place
‣ Then design for the client
‣ Be responsive, accessible,
and standards compliant
‣ Test throughout
‣ Use a good source
control system

22. Credits
‣ BizBuzz logo design: Clear Sky Creative
‣ BizBuzz event sponsorship: Arlington Chamber of Commerce
‣ BizBuzz event organization: Arlington Chamber of Commerce
Communications Council (co-chairs Joey Tackett and Shannon Swahn)
‣ Web site: Wellfire Interactive
‣ Web site hosting: Ascend Technology
‣ Mess pic, #3: http://www.flickr.com/photos/midnightcomm/2193512120/
‣ Server pic, #16: http://www.flickr.com/photos/epitti/2371715992/

23. About Wellfire Interactive
At Wellfire Interactive we design and build web sites
and applications for our customers with their
business – and their customers – in mind.
Our clients include non-profits advocating to better
democracy and businesses working to bring new
services to life over the web.
We often use Django, we always use standards based
markup, and we definitely like a challenge.
-Falls Church,VA
wellfireinteractive.com