Philosophy

• Strategy
• Simplicity
• Standards
• Internet Explorer 6
• Roles and Responsibilities
• The Process
• SEO

• Strategy

  The first step in building a great website is planning. The five W’s (and one H) are a handy way to get yourself organized.

  Who? Who are you, and who is your audience? The first half helps you to establish and reinforce your identity. The second helps you stay focused on your objectives.

  What? What is the purpose of your site? What will be on it? (That’s content.) What will users do on your site? (That’s functionality.)

  When? This is all about visitor behaviors and patterns of usage. When will people visit your site? How long will they stay? When will they be back again? Think about ways to keep users at your site longer and to get them to return frequently.

  Where? Where will your visitors be when they’re accessing your site, and what kinds of devices will they be using when they do? Make sure your site supports the browser software your visitors will be using, including mobile devices (iPhone, Blackberry) if appropriate.

  Why? The bottom line. Why should users come to your site instead of another site? Why are you building a website in the first place? This is closely related to the “Who” question and likewise should be the foundation of all you do with your site.

  How? Once you’ve answered the five W’s, it’s time to tackle the H. How are you going to make it happen? What are the tools you’ll use? Think about design, functional development, and hosting. They all need to fit into place for your website to happen.

  Further reading: Never Get Involved in a Land War in Asia (or Build a Website for No Reason)

• Simplicity

  One of the greatest challenges with the increasing power of websites and web applications is knowing when to say when. Simplicity is more than just the latest buzzword: it’s a founding principle of good design and good software development. Stay focused on your primary objectives and don’t throw in the latest whiz-bang feature just because you can.

  A corollary to simplicity is consistency. Say it again: consistency. The biggest difference between “professional-looking,” successful websites and amateurish, “ho-hum” websites (and MySpace pages) is consistency. Consistency reinforces your identity, shows users that you’ve thought carefully about all of the pieces of your site and how they fit together, and ultimately shows your visitors that you care about their experience on your site — because you want to make it a positive one.

  Further reading: Getting Real

• Standards

  Standards generally lurk behind the scenes on the Internet. Most web users probably don’t even realize that standards exist, but they are the key to making the web work. Standards ensure that a website will look and behave consistently whether you’re using a Mac or Windows, or even Linux (which is growing in popularity every day); whether you’re running the latest release of Firefox or a 6-year-old version of Internet Explorer, or the mobile browser built into your cell phone.

  We take standards seriously, because they’re the glue holding the web together. And they ensure reliability and longevity for your website.

  Further reading: The Web Standards Project

• Internet Explorer 6

  It may seem strange that I should single out a specific version of a specific web browser for its own section in my philosophy statement. But Internet Explorer 6 (IE6) is pivotal enough to web design that such attention is warranted.

  IE6 was a boon to web designers when it was first introduced — in 2001. It was a significant improvement over the previous version (IE5.5), and it took advantage of a lot of what were then cutting-edge web technologies. Plus, at the time, Microsoft’s browser enjoyed an unprecedented dominance over the web browser market.

  But a lot has changed in 8 years. The only thing that hasn‘t changed is… IE6. Because it was the default web browser that shipped with Windows XP, it is on a huge number of computers in the world. And even though Microsoft is now up to version 8 of Internet Explorer, and is making a concerted effort to get all users to make the free upgrade, IE6 is becoming the browser that won‘t die.

  The fact is, IE6 holds back the web. A number of tremendously powerful web technologies have emerged over the course of this decade, but lack of adoption of newer web browsers — the longevity of IE6 — has held back their widespread implementation. At last, however, with Windows 7; with the surging popularity of alternative web browsers like Firefox; and with the emergence of a new class of Internet-capable devices — smartphones like the iPhone, Blackberry, Palm Pre and Android OS — IE6 has seen its market share erode into single digits.

  Many web designers, myself included, have one thing to say about all of this: good riddance! By abandoning support for IE6 — or, at least, by offering only limited support — we can at last bring the web to its full current potential.

  Further reading: Bring Down IE6

• Roles and Responsibilities

  The following is a brief overview of the typical set of roles and responsibilities in a website project. These roles have emerged over the years as a successful model for professional web design and development teams.

  Each role may correspond to one individual or to a group, or one individual may perform multiple roles, but regardless of how the roles get assigned to individuals, they represent common sets of key skill sets and the way that those skills are applied in achieving the goals of the project.

  These roles also typically correspond to the sequential (but overlapping) set of major tasks in a web project, and are therefore presented in that order.

  Information Architect

  The information architect is the “master planner” of the website. The IA will gather and document requirements, including key objectives, functional requirements and content requirements. The IA will work closely with the UX designer and the project manager, and in some cases the same person may play more than one (or all) of these roles.

  Key relationships: UX designer, QA tester and PM
  Key deliverables: Site map and requirements documentation

  User Experience (UX) Designer

  The UX designer uses the defined functional and content requirements for the site to develop a set of wireframe designs and flowcharts describing how users will interact with the site. Wireframes are “sketches” of page layouts indicating where functional elements and content will be placed on individual site pages, and flowcharts describe multi-step (and therefore, usually multi-page) processes users will follow to complete tasks on the website. The UX designer works closely with the IA in developing an overall strategic plan for building the website, and with the project manager to keep the project on target.

  Key relationships: Information architect, UI designer, web developer, QA tester and PM
  Key deliverables: Wireframes and flowcharts

  User Interface (UI) Designer

  The UI designer, also referred to as a web designer or graphic designer, is concerned with the visual presentation of the website. The UI designer may work with other graphic or print designers to coordinate the website’s appearance with related materials, or if appropriate start from scratch to develop a visual identity, including logos, fonts and color palettes. The UI designer then takes these elements, along with the UX designer’s wireframes, and develops a set of web page designs with full visual treatments. The UI designer may then turn these designs into web page templates using HTML and CSS, or may coordinate this task with the web developer.

  Key relationships: UX designer, web developer and PM
  Key deliverables: Web page designs, web page templates (HTML/CSS)

  Web Developer

  The web developer, also referred to as the programmer, builds the functionality of the website. This may include client-side scripting (JavaScript) as well as server-side scripting (PHP, Python, Ruby, ASP.NET, or compiled languages like C++ or Java). The web developer may also build HTML/CSS page templates or may coordinate with the web designer for this task.

  Key relationships: UX designer, UI designer, web content specialist, QA tester, server administrator and PM
  Key deliverables: Web application code

  Web Content Specialist

  The web content specialist is responsible for organizing, preparing and loading website content, typically using a content management system (CMS). The web content specialist typically has at least a basic understanding of HTML and/or XML, and a strong familiarity with site content and the overall business or organization behind the website. The web content specialist should also have strong copywriting and editing skills. Web content specialists may also work with media files such as audio, video or interactive (Flash), and therefore may need those skills or may work with another media specialist outside of the core web team to develop rich media content.

  Key relationships: IA, web developer, external content creators, QA tester and PM
  Key deliverables: Prepared web content, loaded into site pages or CMS, ongoing site maintenance

  Quality Assurance (QA) Tester

  The QA tester is responsible for ensuring that the website functions as intended. The QA tester will work with the IA and UX designer to determine a set of tests to be performed once the site is complete, to determine whether or not the site does what it is intended to do, and that it is free of bugs or other defects. When development and content preparation are complete, the QA tester will coordinate one or more rounds of testing, collecting feedback to deliver to the web developer for troubleshooting. This process will be repeated as necessary until the site is ready for launch.

  Key relationships: IA, UX designer, web developer, server administrator and PM
  Key deliverables: Test cases, test process coordination, feedback documentation for web developer

  Server Administrator

  The server administrator (or sysadmin) is responsible for the technical configuration and maintenance of the web server where the site will be hosted. This includes maintaining the server’s operating system (typically Linux or Windows Server), the web server software (typically Apache on Linux or IIS on Windows), and any associated database software (MySQL, SQL Server) and scripting interpreters (PHP, Python, Ruby, ASP.NET) that may be required for operation of the website. The server admin may also be responsible for deploying site updates from the staging environment or source control system to the server.

  Key relationships: Web developer, QA tester and PM
  Key deliverables: Configured and well-maintained server environment, site deployment

  Project Manager (PM)

  The project manager coordinates all activities of the various project team members, tracks schedules and progress against milestones, and facilitates communication both between team members and between the team and the client (if applicable). The project manager may be a standalone role or it may be a role taken on by one of the other members of the team. The project manager does not necessarily need to possess any of the specific technical skills of any of the above roles, but the PM should know enough about each role to be able to effectively communicate with all team members and the client.

  Key relationships: All team members
  Key deliverables: Project proposal, ongoing progress reports, general communication

• The Process

  A web project will typically involve a number of steps, which occur in a sequential but overlapping order. The roles and responsibilities as described above roughly correspond to this sequence.

  Step 1: Discovery

  First, the IA, UX designer and/or PM will meet with the client to assess the client’s goals and objectives.

  Step 2: Planning

  Working closely with the client, the IA and UX designer will develop a set of requirements documentation, site map, content outlines, wireframes and flowcharts describing how the site will function. This both assures the client that the goals and objectives are on target and provides a roadmap for the design and development process.

  Step 3: Design

  The web designer will take the design documentation and assets (logos and other graphics, fonts and color palettes) and develop a set of web page designs that will then be turned into web page templates in HTML and CSS.

  Step 4: Development

  The web developer takes the functional requirements, wireframes and (if available) web page designs/templates, and builds all necessary web application functionality.

  Step 5: Content

  The content specialist gathers all website content, prepares it (including HTML formatting, if necessary), and loads it into the CMS or individual web pages, as appropriate.

  Step 6: Testing

  The QA tester develops a set of test cases and coordinates one or more rounds of testing, giving feedback to the developer for troubleshooting and revisions.

  Step 7: Launch

  The server admin, working with the web developer and QA tester, prepares the website files, database, and server configuration to make the site available online.

  Step 8: Follow-up

  The project manager will gather feedback from the client and testing processes post-launch and review the status of the project. This will form the basis of plans for ongoing site maintenance by the web content specialist and for “phase two” planning for future site enhancements with the rest of the team.

• Search Engine Optimization and Web Design Best Practices

  “Search Engine Optimization” (SEO) is a common buzzword today, but what does it really mean? While there are many questionable practices designed to achieve first-page search result placement, these techniques are unsustainable over the long term and can degrade the quality of the website experience for users. If used excessively, they can also backfire and result in a site being blacklisted by search engines. Ultimately, a few simple principles will help to ensure your site receives proper placement in the search results of the most popular search engines, like Google, Yahoo! and Bing. Because the principles are so basic, and correspond so closely with the principles of simple, clean, well-organized web design in general, Room 34 offers these recommendations, free of charge, as a standard part of all website proposals, and incorporates them as a matter of course in all website projects.

  Title Bar

  The web browser’s title bar is easy to ignore, but a well-structured page title is one of the most important ways to ensure that your site is listed prominently in search engine results. The title should be clear, relevant, detailed, and specific. Each page of the site should have a title that accurately reflects what is on the page. The page title should begin with this specific information, followed by general information that is the same for every page: your business name, the nature of your business, and if relevant, your city and state. A sample page title might read as follows:

  About Us - Acme Widgets, Inc. - Makers of fine widgets and doodads - Minneapolis, Minnesota

  Meta Tags

  Meta tags do not appear anywhere on the web page, but they are included in the HTML code of the page to assist search engines in identifying the relevance of a web page if its textual content does not fully reflect its purpose. There are two primary meta tags used by search engines: keywords and description. Keywords is a comma-separated list of words or phrases that describe the content of your page. The description is a sentence or two that can be used in search engine results to summarize the content of your page. Meta tags should be as concise and accurate as possible. Excessive repetition of terms, or content that does not accurately reflect what is on the page will hurt search engine rankings rather than help them.

  Semantic HTML

  Semantic HTML means HTML that is built to reflect the logical structure of a web page document, with visual presentation separated into CSS (Cascading Style Sheets) rather than embedded within the HTML. Fonts, colors and visual layout elements should be restricted to the CSS. HTML tables should be used for tabular information only, not layout and positioning. The content of the page within the HTML should be organized such that the page is logical and readable with CSS turned off. Pages should be checked against an HTML validator (http://validator.w3.org) to ensure accuracy.

  Accessibility

  Building web pages with proper accessibility for visually-impaired visitors also helps to ensure a semantic HTML structure that will improve search engine rankings. All images and other visual content should include “alt” text. Content that requires Flash, JavaScript or other browser plug-ins should also include a standard fallback version to allow them to “degrade gracefully” for screen readers, browsers without these add-on features, mobile devices, and search engines. By organizing features like site navigation into standard HTML unordered (“bullet”) lists, instead of elaborate table layouts or Flash elements, pages will be both more widely accessible and more relevant in search engine results. The emerging HTML5 standard includes additional tags and attributes to assist in the development of well-structured, semantic HTML documents.

  Relevant Links

  Most modern search engines like Google use cross-site links as an indication of a site’s popularity and relevance in a particular field. By exchanging meaningful links with relevant sites in a particular field, a site can improve its search engine results. There may be a temptation here to exchange links with sites that are simply aggregators of links. This might provide a temporary boost to search engine placement, but ultimately if the links are not on sites that offer real live users a meaningful web experience, they will not provide long-term benefit. Before exchanging links with another site, consider whether or not it is a site you would visit and trust as a resource. If not, it is probably not worth the effort.

  Google Analytics and Webmaster Tools

  Google offers a pair of extremely useful tools for website developers and owners: Google Analytics employs a small snippet of JavaScript code, embedded in the footer of each page of a website, to provide the site owner with extensive analysis of site usage: how often various site pages are being visited; how long visitors are staying on the site; users’ geographical location and certain details of their computer configuration (operating system and browser software); etc. And Google Webmaster Tools provides a convenient way for website owners to submit sitemaps to ensure optimal placement in Google’s search results. Both Google Analytics and Google Webmaster Tools can be helpful in diagnosing “problem areas” of your site that may need further attention to boost their visibility in search results.

  No Magic Bullet

  There is no secret weapon to ensure top search engine placement. Many promises of search engine optimization rely on short-term “gaming” of a search engine’s relevance ranking algorithms. But just as the “gamers” evolve their tactics, the search engines are constantly being enhanced to counteract them. Ultimately the best way to ensure long-term relevance within search engine listings is to stick to the principles of well-organized, validated XHTML documents and meaningful content.