Making a website

Making a websiteA 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

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

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


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‣ Blueprints for web pages

‣ Not design, but help the designer and the customer understand the page

‣ Pictures make discussing concepts easier

‣ Gets expectations right

6/4/10 4:42 PMhttp://clients.home/nwra/wireframes/content.html

Page 1 of 1

May!7th,!2010

Author!Name

Tags:![Tag!1],![Tag!2],![Tag!3]

Home!>![Section!Title]!>![Content!Title]

[Content!Title][Content!Subtitle]

[Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elitvitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisqueconvallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisqueultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phaselluscondimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.]



Back!to!Top

Contact!NWRA

National!Water

Resources!Association

3800!North!Fairfax

Drive,!Suite!4

Arlington,!VA!22203

http://www.nwra.org

Tel:!703.524.1544

Fax:!703.524.1548

Add!NWRA!to!youraddress!book

Send!NWRA!a!message

Sign!Up

[Sign!up!for!Weekly!Reports]

[Sign!up!for!our!"Weeklies"!—!read!the!latest!news!articles,!pressreleases!and!discussions!about!western!water!related!issues]

[*!See!our!Privacy!Policy!and!Terms!and!Conditions.]

LogoEst.!1932

Issues

About!NWRA

NWRA!Members

[Page!Title]

[Page!Title]

[Page!Title]

[Page!Title]

[Page!Title]

[Page!Title]

[Upcoming!Events]

Western!Water!Seminar

July!28"30,!2010

Snow!King!Lodge

Jackson!Hole,!WY

Read!more

Add!event!to!yourcalendar

Member!Log!In Newsletters Events Contact!NWRA

Name:

Email:

Organization:

Member!Log!In Submit!News Contact!NWRA Sitemap

A layout-oriented example


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 sufficient

‣ Then have the customer (BizBuzz organizers) indicate which they prefer and use that as the base design

Develop Test Deploy UpdateStrategize 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

Develop Test Deploy UpdateStrategize Design

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

Test Deploy UpdateStrategize Design Develop

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


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!

Strategize Design Develop Test Deploy UpdateStrategize Design Develop Test

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

‣ For security and performance we used Ubuntu Linux running the very fast nginx web server

lol, servers? I don’t

care, just show me

the damn site!

(Yeah, we know)


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

Yes, please

Strategize Design Develop Test Deploy UpdateStrategize Design Develop Test Deploy

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 is at all times

‣ First plan with the client

‣ Then design for the client

‣ Be responsive, accessible, and standards compliant

‣ Test throughout

‣ Use a good source control system

‣ Build on platforms that make you productive

‣ Have a deployment plan and system in place

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/

http://www.flickr.com/photos/midnightcomm/2193512120/

http://www.flickr.com/photos/midnightcomm/2193512120/

http://www.flickr.com/photos/epitti/2371715992/

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

http://wellfireinteractive.com/

http://wellfireinteractive.com/