Quick Summary As a veteran designer, developer and project manager for more websites than I can count, I’ve identified a common problem with many Web projects: failure to plan. The same issues come up repeatedly in my work, so I’ve written this guide in order to help clients, other designers, businesses and organizations plan and realize successful websites. This guide is written in relatively non-technical language and provides a broad overview of the process of developing a website, from the initial needs assessment through the launch, maintenance and follow-up. If you’re building a four-page website for your family reunion or a 5000-page website for a Fortune 500 company, then this guide might not be for you; it will either be too detailed or way too short, respectively. As a veteran designer, developer and project manager for more websites than I can count, I’ve identified a common problem with many Web projects: failure to plan. The same issues come up repeatedly in my work, so I’ve written this guide in order to help clients, other designers, businesses and organizations plan and realize successful websites. Further Reading on SmashingMag: • • • • This guide is written in relatively non-technical language and provides a broad overview of the process of developing a website, from the initial needs assessment through the launch, maintenance and follow-up. It is appropriate for: • Small and medium-sized businesses; • Organizations; • Institutions; • Web designers, developers, and design and development firms. If you’re building a four-page website for your family reunion or a 5000-page website for a Fortune 500 company, then this guide might not be for you; it will either be too detailed or way too short, respectively. Important questions and answers. (Image by ) Why Plan? Planning is essential for most businesses and organizations. In practice, many people fail to plan their websites. Sometimes the ever-busy, dynamic nature of running a business is to blame; there are so many operational demands that proper time is not allotted to projects. But this often happens because people fail to recognize that planning for the Web is just as important as planning for anything else in a business. The (Lengthy) Deck Example Consider the example of building a deck. If you want a deck for your house, you probably won’t call several carpenters and ask, “How much is a deck?” If you do, you’ll get the smart answer: “It depends.” In order to provide you with an estimate, a carpenter needs some details about the project: • What kind of wood? • Where exactly will the deck go? Are there any obstacles to work around? • What height will it be, and how many levels will it have? • Do you want benches, railings, built-in planters? • Do you have clearance to bring special equipment into your yard? Here are the key elements in planning a website’s structure. Other design elements that appear throughout the website, consider making separate templates for them. Tom's Planner web development template, an example of how to use our tool when developing a website. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they're looking for. When we talk about the architecture of a website, we're talking about the hierarchy of its navigation and its structure. We're not talking about graphics,. Then there is the host of other things for the carpenter to consider: scheduling, building permits, inspection, maintenance, etc. That’s why a smart carpenter will answer your simple question with “it depends.” Be sure to plan your way to success. (Image by ) It makes sense to meet with more than one contractor to address the questions above and more. When you choose a carpenter, they should provide a detailed plan that you both sign. Throughout the building process, the carpenter should check in with you periodically and discuss potential challenges and snags. Surely all of this makes sense, but consider another scenario wherein there is no clear plan: “Hi, Jennifer Carpenter. It’s Juan Homeowner. I need a 20 × 30-foot cedar deck in my backyard. I want it built in two weeks.” “Okay, Juan. I’ll pick up the materials and get started tomorrow. If you have any questions, just see me in your backyard while I’m working.” Jennifer Carpenter gets started by drilling post holes for each corner of the deck. She assumes that Juan Homeowner has secured a building permit from city hall, because that’s how most of her previous jobs have worked out But there’s no building permit. Carpenter starts framing the deck, she notices that Mr. Homeowner has put a large hose reel against his house and connected it to the faucet. Based on where the deck will sit, the hose reel will have to go. She’s not sure if he will want to move it somewhere else or have his outdoor faucet replumbed to reconnect it and put it on the deck, which is two feet off the ground. She stops building and waits to ask Mr. Homeowner when he gets home But it turns out that he’s on a business trip for three days. When he gets back, Ms. Carpenter reaches him by phone. He’s not happy that his faucet will have to be moved, because it adds unplanned expenses to the project. But that’s not Ms. Carpenter’s fault. She’s not the plumber. She’s just putting the deck where he asked. ![]() Once the deck is framed, she starts building a railing for one side. This wasn’t discussed, but she sees that there are small children around the house and thinks this is a good safety measure. Homeowner comes home one day and is happy to see the great progress on his deck, but he notices the railing. Homeowner: “What’s this?” Ms. Carpenter: “I added a railing to the side because you have kids. It’s a good safety feature.” Mr. Homeowner: “I don’t have small children.” Ms. ![]() ![]() Carpenter: “But I saw them playing in your front yard.” Mr. Homeowner: “Oh, those are the neighborhood kids. My kids are in high school.” Ms. Carpenter: “Well, a railing is still a good feature.” Mr. Homeowner: “Fine, but can you make it shorter and put a bench next to it?” Ms. Carpenter: “I didn’t buy enough wood for a bench, and the railing is already drilled and attached. I’d have to remove and recut it. Also, we didn’t talk about a bench.” Mr. Homeowner: “Well, I’d like a bench here.” Ms. Carpenter: “That will take more time. I won’t be able to get this done by your two-week deadline if we add the bench. Plus, I’d have to charge you for the extra wood.” What began as a simple project has become a series of headaches, all due to a failure to plan. From a Web professional’s perspective, developing a 50-page website for six unique stakeholders is far more complex than building a rectangular deck. A deck is a physical structure built in stages. You can look out the window and see the progress. In contrast, a website has a number of technical and administrative steps that aren’t visible to all. A Caveat, and the “Waterfall” Method of Development When I worked at an insurance company, business analysts from the information technology (IT) department would write project charters: long, painfully boring documents that attempted to outline every possible aspect of a website. I hated these documents and preferred to work by the seat of my pants. My reasoning in part was that websites are flexible, unlike print material. That is, their content can be changed at will. The idea that every aspect of a website could be pre-planned on paper was ludicrous. IT departments that handle large projects often use something called the “waterfall” method of development: specify absolutely everything, down to the point size of the type, the line length of page headers and exactly how a simple photo gallery will work. See what is relevant and react. (Image by ) This is my view of the waterfall method: if you’re building a banking application that transfers money in and out of customer accounts, you’d better be sure your code is perfect. When dealing with debits and credits, there is zero allowance for error. For projects this critical, it makes sense to specify everything you’re going to do in great detail before writing a single line of code. However, as I said, websites are flexible. So how do we reconcile the need for clear and detailed specifications with the inherent flexibility of the medium? We do this by splitting the difference. By following the process I’ve outlined below, we can create a set of content and design specifications that greatly reduce the likelihood of mid-project glitches, while creating a framework that allows the website to grow with time. In fact, we can plan for expansion by allowing, for example, a news section to handle 10 news items or 200. When these specifications are properly implemented in a content management system (CMS), the website will give its editors the flexibility to swap out key photos, change titles and headers, reorder content, etc.—all within the framework established by proper planning. The Value of Planning and Needs Assessment I am frequently approached by prospective clients who want estimates for building their websites. Sometimes they have a general idea of what they want and possibly a simple website map. Others, especially organizations, will submit a request for proposal (RFP). In most cases, none of this gives the designer or developer enough information to generate an accurate proposal. Even a multi-page RFP usually does not have enough detail from which to create a proposal and estimate. If a prospective client just wants a ballpark figure, I can usually do this, but much more information is needed in order to arrive at an accurate cost. Ideally, prospective clients would hire either a designer, developer or project manager to do a thorough needs assessment before requesting a proposal. However, clients don’t necessarily understand the efficiencies gained by up-front assessment. Ten hours spent on a needs assessment can save 30 hours of development time. Discovering the needs of a client halfway through a project is a recipe for headaches, extended development time, cost overruns and missed deadlines. As you’ll read below, failing to recognize and pay for proper planning creates big problems. Common Results of Failing to Plan • The designer or developer is forced to make assumptions, which may or may not be correct, about how certain content will appear on the website. • The amount of back-and-forth communication about trivial matters can be multiplied many times over. • Backtracking causes delays and missed deadlines. • Work that falls outside the original scope of the project creates cost overruns. • Confusion and client dissatisfaction are byproducts of a shoot-from-the-hip process. Needs Assessment Important things to remember: • Unless you’re building an intranet, the website is not for you and must meet the needs of your client. • A website is not an event. It is a flexible, extensible communications tool that reflects, negatively or positively, on the business. Now we could potentially start using business-speak, as in “Assemble your key internal stakeholders.” That’s another way of saying: “Get everyone together who has something valuable to contribute.” Aligning the Website With the Marketing Campaign The website must work in concert with the overall marketing plan. The needs assessment for the website might overlap with the other efforts and approaches of the marketing department, which is fine. This is outside the scope of this article, but note that the established branding and marketing of the business should inform the structure and design of the website. Roles: Who’s Doing What? Every project is different, but these are the typical roles in a sizable Web project: • Internal stakeholders (aka “clients”), who represent all primary aspects of the business; • Project manager; • Copywriter or editor; • Web designer (graphic design, illustration, Web design); • HTML coder (HTML, CSS, JavaScript, Flash); • Web or CMS developer. Keep in mind that one person can play multiple roles. The number of participants does not necessarily bear on the quality of the result. In some cases, a series of one-on-one meetings between company principals and an experienced designer can yield a great website. Determine Website Content Who’s Responsible? As you prepare to add content to the website, think about who will contribute. In a five-person business, it might be just two of you, and that’s fine. In a large business or organization, 5, 10 or 15 people might be contributing content. The time required to edit and proofread both copy and visual content grows exponentially in proportion to the number of people who contribute content. Clear the fronts and distribute clear responsibilities. (Image by ) Content Is Not Just Text Unless you are creating the dullest, most technical website imaginable, your content should consist of more than just plain text. By using one or more of the following multimedia elements, you’ll greatly enhance the appeal and usefulness of the website: • Images; • Documents (usually PDFs); • Audio; • Video (i.e., embedded from YouTube or Vimeo, or self-hosted); • Adobe Flash files; • Content feeds (from other websites, for example); • Photos (from Flickr perhaps); • Twitter stream; • Facebook “friends” list; • RSS feeds. The Value of Good Photography Like other elements of a website, photos communicate the brand of the organization. If you’ve just moved into a beautiful new building or storefront, you may have snapped some pictures of it and your staff on your $150 digital camera. In most instances, unless you have bona fide photography skills, these will not be quality photos. Try to budget for professional photography. You don’t necessarily need a lot of photos, just good ones. Twelve professional images is better than fifty amateur snapshots. If your budget doesn’t allow for a pro, then contact your local art school or community college and ask for a recommendation. A budding student photographer with a good eye will work for cheap in order to build a portfolio. If you have no budget at all, then take the photos yourself, but pay special attention to lighting, framing and focus and hope for the best. In some cases, when generic images will suffice, stock photography can be used. But there is no substitute for quality photos of your staff, storefront, products or services. The Value of Good Writing Good writing, like good photography, requires a skill that not everyone possesses. Writing for the Web is different than writing memos, policy papers and technical documents. You might write great technical manuals for precision machining tools, but that doesn’t mean you can write well for the Web. If your organization doesn’t have someone who can write clear and concise marketing copy, hire an expert. If you can write reasonably well but need some guidance, consider hiring an editor to polish your output. Quick Writing Tips Consider your audience and write accordingly. Try to see the business from the customer’s perspective. What do they care about? Avoid business-speak, confusing acronyms and dry details. Your customers do not work at your shop, office or widget factory; they are the ones purchasing your products or services. Speak to them accordingly. When appropriate, write in generalities, and save the hardcore details for multi-page PDFs (as downloads). This approach is especially useful for product information, white papers and copy that approaches or exceeds 1000 words. Here is a useful approach when writing for the Web: • Write your first draft, • Cut it in half, • Cut it in half again, • Add bulleted and numbered lists where possible, • Send it to the editor. Reading on a screen is fatiguing. A screen, whether a massive 26-inch monitor or a diminutive smartphone, projects tiny points of light at your eyes. Consequently, reading long stretches of text on it can be very tiring. Users will scan for key points in the text, so short blocks of copy and bulleted or numbered lists are helpful because they’re easy to spot. Don’t style the content. Most writers prefer to work in Microsoft Word or a similar program. This is fine, but Word is notorious for outputting messy code. Don’t worry about colors, fonts and alignment. Just write well. Style will be applied later at the level of each Web page. Determine Your Website’s Structure Here are the key elements in planning a website’s structure. Site Map Your site map could be structured like a flow chart and built with software such as Visio or a free tool like Gliffy. Alternatively, you could create an outline with bulleted lists and indentations that indicate pages, sub-pages and other structural breaks. Content Definition Some content will be easy to define. A contact page, for example, is generally expected to include a business name, a location, contact information, hours (if applicable) and, often, a simple form. Other types of content require more consideration. This is another point when failing to carefully define the content will create headaches for you later on. Structure your content. (Image by ) Perhaps you want to put a photo gallery on your website. Good idea, but what exactly will the gallery consist of? Will it be 20 images in a grid of thumbnails with a nice pop-up overlay when you click on one? Or a multi-page gallery with 1000 photos, individually categorized and tracked with meta data? Should users be able to rate the images? Comment on them? Download high-resolution versions? Email them to friends? This is but one example of why defining each type of content is so important. If you don’t, then the developer will make their best guess as to what each type of content should be. Content elements like an event calendar, staff directory or blog might provide a general frame of reference, but they require clear direction: what exactly do they need to accomplish, and how will they be used? One way to help define content is to simply observe the functionality of other websites and see what might suit your purpose. Content Checklist Here is a list (though not exhaustive) of common types of content. A sitemap is a tool that can be used to visualize the structure of a website. While it lists the web pages or the content of a website, it helps you identify the information your website should consist of, remove redundant or duplicate content and make sure it has easy navigation and is user-friendly. Basically a sitemap is a tool that can be used to plan a website, its design as well as its development. Listed below are some sitemap templates that will help you start on your website’s sitemap quickly. These templates are made using the professionally designed sitemap icons available on Creately. Simply click the image to edit the template online or export it directly. • • • • • • • • • • • Content Website Sitemap Template Presented below is a basic sitemap for a content website. There are for cluster pages, future pages, locked pages etc. Available in the app. Click the image to start editing it right away.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |