Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making a website

A3b1bb5e498495de407c0a2547982139?s=47 Ben Lopatin
October 12, 2011

Making a website

A short case study about designing and creating a basic website.

A3b1bb5e498495de407c0a2547982139?s=128

Ben Lopatin

October 12, 2011
Tweet

Transcript

  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. 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
  6. 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 Strategize Design Develop Test Deploy Update
  7. 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) Strategize Design Develop Test Deploy Update
  8. 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 Strategize Design Develop Test Deploy Update
  9. 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 PM http://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!elit vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.] [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 ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.] [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 ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus condimentum!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!your address!book Send!NWRA!a!message Sign!Up [Sign!up!for!Weekly!Reports] [Sign!up!for!our!"Weeklies"!—!read!the!latest!news!articles,!press releases!and!discussions!about!western!water!related!issues] [*!See!our!Privacy!Policy!and!Terms!and!Conditions.] Logo Est.!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!your calendar Member!Log!In Newsletters Events Contact!NWRA Name: Email: Organization: Member!Log!In Submit!News Contact!NWRA Sitemap A layout-oriented example Strategize Design Develop Test Deploy Update
  10. Wireframes in hand, we could mockup alternative design directions Two

    different design directions (top of pages only) Strategize Design Develop Test Deploy Update
  11. 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 Update Strategize Design
  12. 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 Develop Test Deploy Update Strategize Design
  13. 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) Strategize Design Develop Test Deploy Update
  14. 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 Update Strategize Design Develop
  15. 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 Strategize Design Develop Test Deploy Update
  16. 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 Update Strategize Design Develop Test
  17. 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) Strategize Design Develop Test Deploy Update
  18. Now, with our deployment service, we click a button to

    update Yes, please Strategize Design Develop Test Deploy Update Strategize Design Develop Test Deploy
  19. Make sure there is a good way for others to

    edit the site This is how Django rolls Strategize Design Develop Test Deploy Update
  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 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
  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