Website Planning Checklist

Transcription

1 Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even if you already have a pretty good idea of what you want your site to look like, you ll come to realize that the more planning done up front, the more time you ll save during the actual building of the site. Defining Purpose q What is the purpose/intent of your site? The clearer your intent, the more focused your website will be. Try to narrow the purpose of your website into one sentence. q What are your goals for this website? Are you providing information or a service? Are you promoting or selling? What are you looking to get out of this site? Developing specific goals will help ensure that decisions made regarding your site will help you meet these goals. q Determine who your audience is. Are you looking to attract customers, clients? Is this a portfolio site to impress future employers? What demographics should your site attract? Are you looking for people in a certain profession? What is your visitor s state of mind? Are they researching a topic? Are they looking to make a purchase? Searching for a new hire? Look at your goals from a viewership perspective could visitors be landing on your site for various purposes? Site Structure q Analyze websites about the same topic for inspiration. If you re making a site to sell your handmade clothing line, look at other small business clothing sites. How is their site organized? What kinds of pages are included? How are these pages organized/laid out? Look for consistencies and differences between websites. What do you like about their sites? What could you do better? q How will your pages link together? With your list of pages in hand, how will these pages connect to each other? It can be helpful to draw out a diagram like these examples:

2 Content & Design Planning As they say, content is king meaning that the reason visitors will stay on your site and continue to come back is because you offer something of value to them. No matter how great your site looks, if there is nothing useful for the visitor, they won t stay on your site. Therefore, planning the site s content (including text, images and other multimedia) is an important, ongoing process. q Determine what copy is needed for the pages of the site and start writing. What text is going to go on each page? Remember that web writing style is dictated by how users read the web usually by quickly scanning a page and extracting the information they need before they click to another page. For some quick information about writing for the web, visit q Plan for and collect any multimedia you ll want to include. Web sites often contain multiple kinds of media for users to view and interact with such as photos and graphics, audio, video clips and slide shows. It s helpful to know what kind of media will go on

3 each page in this planning process because you ll know that there is room left on the page for that great video you wanted to feature with the text you wrote. q Consider colors and design appropriate to your topic and audience. While content is king, an unattractive or inappropriately designed site is not going to encourage visitors to stay and browse your website. Again, looking at other websites about your topic will help you with design considerations. o Don t use an intro page it s a useless barrier that will not help you from a search engine standpoint o Don t have music automatically play when a page loads. If you must have music, let the visitor choose when to play it. Also, don t forget to offer a way to turn the music off! o Customize any pre-designed template as much as possible to prevent the site from looking too cookie-cutter o Watch your color contrast your text should be easy to read against a background color or image o Pick easy-to-read fonts and a readable font size

4 GoSquared HTML Help Sheet Template <html> <title></title> Meta tags CSS Javascript </head> <body> Content </body> </html> CSS Media all handheld print projection screen With Attribute HTML: <tag attribute=? > XHTML: <tag attribute=? /> General <body> Visible part of the page Part not displayed on page <html> Creates an HTML page <title> Creates the Page name in title bar <img src= URL >* http-equiv name Lists </li> </ul> <style "URL"; </style> <link rel= stylesheet href=? External type= text/css >* CSS link <script language= Javascript Embedded type= text/javascript > javascript <meta name="?" content="?" />* Meta info HTML: <tag></tagclose> or <tag> XHTML: <tag></tagclose> or <tag /> Links Meta Types <ol> </li> </ol> Basic Displays an image <a href= #? > Link to anchor in current page <a href= URL > Link to another page <a href= URL# > Link to anchor in another page <a href= mailto: > link Tables <caption> <table> <tbody> <td colspan=? > <td rowspan=? > <tfoot> <th> <th colspan=? > <thead> Table caption Defines a table Body section of table Table cell Number of columns cell spans Number of rows cell spans Footer section of the table Table header cells Number of columns table header cell spans Header section of table Table row Structure <br />* Line break <code> Source code listing <div> Formats structure or block of text <em> Italic text <h1>..<h6> Page heading, biggest to smallest <hr> Horizontal rule <p> Paragraph <pre> Preformatted text <span> Inline formatting <strong> Bold text <sub> Subscript text <sup> Superscript text Frames <frame> Defines a single frame <frameset>frame document <iframe> Inline frame Table Head Syntax Lists <dd> Definition <dl> Definition list <dt> <ol> Definition term Item in a list Ordered list Unordered list Forms <form> <fieldset> <input type=? >* <option> <select> <textarea> Defines a form Group of related form items Form element [see input types] <table> <thead> <th> </th> </thead> <tbody> </td> </tbody> <tfoot> </td> </tfoot> </table> Input Types button checkbox file hidden image password radio reset submit text Menu item in a select box Drop-down menu Multi-row text area Special Characters Comment  Ensures anything in between is not interpreted " & < > Non-breaking space Quotation mark Ampersand Less than sign More than sign * Does not require a closing tag. Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall 2008 Go Squared Ltd.

5 What Beautiful HTML Code Looks Like DOCTYPE Properly Declared It looks like a lot of gibberish, but DOCTYPES are important. They not only allow your code to validate, but they tell browsers things about how to render your page. Simple <html> tags don t cut it. Body IDed Putting an ID on your body allows you to create CSS properties that are unique to that page. For instance, you may want your <h2> tags to look different on the homepage. In your CSS you can write: #home h2 {} to accomplish this and not affect <h2> tags elsewhere. Main DIV for all Page Content Putting all the content of your page into one main wrap DIV gives you lots of control right off the bat. There is where you can set the width of your page for a fixed width site or maximums and minimums for a fluid width site. Common Content INCLUDED A lot of web content is common from page to page. Think menu bars, sidebars, footers, boxes, etc. This kind of content should be dynamically loaded. Either from a database or with simple PHP include statements. Proper Ending Tags You started strong, now end strong. Don t be lazy and exclude closing tags for any element, even if the page renders OK without them. Content, Content, Content This is where your content belongs, so go nuts. Remember to keep your paragraphs distinct and in <p> tags. Use lists where appropriate. Use codes like for symbols. Don t go overboard with <br /> tags, that s sloppy formatting. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <title>urban and Regional Planning</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" /> <script src="scripts/fun.js" type="text/javascript"></script> </head> <body id="home"> <div id="page-wrap"> <?php include_once("menu.html")?> <div id="main-content"> <img src="images/main-img.jpg" alt="main image" /> <div id="search-area"> <input value="search..." onfocus="this.value='';" /> <div style="clear: both;"> <?php include_once("left-sidebar.html")?> <div id="right-content"> <div id="right-sidebar"> <div class="news-box"> <?php include_once("news.html")?> <div class="events-box"> <?php include_once("events.html")?> <h1>welcome to the URPL!</h1> <h2>who we are:</h2> <p>over the course of the past 50 or so years, we in the <strong>department of Urban and Regional Planning</strong> have been active in the core missions of teaching, research, and outreach. Since inception in the 1960s, we have granted about 1000 graduate degrees and forwarded a progressive and interdisciplinary approach to the theory and practice of planning. As a department of both the College of Letters and Science and the College of Agricultural and Life Sciences, our faculty, affiliates, and students provide a bridge between the array of academic discplines and knowledge bases necessary to address key planning problems found in the real-world.</p> <h2>our Goals:</h2> <p>the department has three primary goals. First, we actively prepare qualified graduate students to become competent, creative and effective practicing planners. Second, we contribute to knowledge in the field of planning through scholarly and applied research. And third, we undertake professional planning activities and provide service in collaboration with the University of Wisconsin - Extension, a variety of public agencies, planning consulting firms and other private and non-profit sector organizations.</p> </body> </html> <?php include_once("footer.html")?> Tidy Head Section Title is set. Character set declared. Stylesheets linked (including a print stylesheet!). Scripts linked and NOT included in full. External files have their own related folders (e.g. CSS & Scripts ) Semantically Clean Menu <div id= menu > <a href= index.php >Home</a></li> <a href= about.php >About</a></li> <a href= contact.php >Contact</a></li> Important Content First It is best if your most important content, like news and events, can be listed first in the HTML. If your sidebar is just navigation or less important content, it is best if it comes last in the HTML. Code is Tabbed into Sections If each section of code is tabbed in once, the structure of the code is much more understandable. Code that is all left-justified is horrific to read and understand. Hierarchy of Header Tags Use header tags as they were designed, to create titles for sections and signify their position in the content hierarchy. No Styling! Your HTML should be focused on structure and content, not styling! Keep all of your styling in your CSS, there should be no deprecated <font> tags in site.