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
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
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
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
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
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
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
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
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
‣ 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
‣ 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
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
& 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
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
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)
(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
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
bennylope
toru_kubota
freee
emiki
kaonavi
cybozuinsideout
kmatsui
onk
yuyatakeyama
kawaguti
uezo
ch1aki
geeforr
kastner
jrom
cromwellryan
sstephenson
marcelosomers
colly
cherdarchuk
bcantrill
aarron
speakerdeck
destraynor
