Making a website

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

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

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

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

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 ﬁnd out about it


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
‣ Deﬁnitely 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


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)


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


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
[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
[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


Wireframes in hand, we could
mockup alternative design
directions

Two different design directions (top of pages only)


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 sufﬁcient
‣ Then have the customer (BizBuzz organizers) indicate
which they prefer and use that as the base design


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 desired and expected user
interaction
*IE6, we’re looking at you


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)


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


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 speciﬁed requirements from
the project strategy phase


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!


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 ﬁrm
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


Now, with our deployment
service, we click a button to
update

Yes, please


Make sure there is a good
way for others to edit the site

This is how Django rolls

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)

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

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/

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

Making a website

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Making a website

Semelhante a Making a website (17)

Último

Último (20)

Making a website