SVSU Websites Style Guide. Need help? Call the ITD Lab, x7471

SVSU Websites Style Guide SVSU Websites Style Guide Need help? Call the ITD Lab, x7471

1 SVSU Websites Style Guide Contents Writing for the Web...3 Questions to Ask Yourself...3 Who is our priority audience?...3 How do we help this audience?...3 What do we want our audience to do next?...3 How is the Web Different?...3 Writing from the Top Down and the 5 W s...4 508 Compliance and Accessibility What Does it Mean?...5 File Naming Conventions...5 Spaces and Characters...5 Capitalization...5 Sorting Affects Naming...6 Unique, Meaningful Names...6 Length of a Name...6 Folder Hierarchy...6 File Management...6 Images on the Web...6 Resizing...7 File Types...7 Ownership and Copyright...7 SVSU Digital Photo Catalog...7 Documents on the Web...7 File Types...8 Page Footers...8 Videos on the Web...8 Captions...8 YouTube...8 Using Content Types...8 Tips for Good Web Design...8 Images...8 Page 1 of 11

2 SVSU Websites Style Guide Accessibility, Usability, and Navigation...9 Content...9 Marketing...9 Resources... 11 Page 2 of 11

3 SVSU Websites Style Guide Writing for the Web Writing for the web is different than writing for print. The purpose of this Style Guide is to explain these differences and to provide a set of easy to follow guidelines for preparing your content to best suit the needs of web users. Questions to Ask Yourself Before designing, writing, or creating content for the web, ask yourself these questions about your college or department and your audience. Who is our priority audience? Every organization has multiple audiences. We recommend that you focus on the ONE audience you MUST succeed with. This may be an audience you have been charged to reach or one that your numbers tell you has not been reached by prior communications. Name your audience and picture one or more representatives of that audience in your mind. If you were in an open forum discussing your organization, what questions would they have? How do we help this audience? We know what is great about our programs or products, but it isn t great if nobody needs it. What does your audience need? What do they need from you? What does your research say about this audience s needs? Why do they visit your office? What do they ask for? Make sure these things are on your website. What do we want our audience to do next? Persuading your audience to do something usually requires asking. Present a clear call to action and your audience will follow through more often. However, first you have to be clear about the single result you want. For example, if you want your audience to apply to your college, you might say, Apply! However a smaller act may serve you better, such as contact an admissions counselor, visit campus, or view one more page of information. How is the Web Different? People tend to have different expectations of content found on the web versus print. Information on the web should be specific and easy to find. If a website has too much information and is hard to search, the visitor may get frustrated and go elsewhere, or give up. Keep in mind that just because you can find information on a website that you created, that doesn t mean that a visitor will have as easy of a time. Often it is a good idea to put yourself in the shoes of your visitor, or ask someone else their opinion of your work. We recommend using a top-down model, or inverted pyramid, when creating your pages. When the visitor arrives at your home page, the purpose of your website should be obvious. Visitors tend to scan pages rather than read them so long paragraphs tend to be discouraged while bulleted lists are encouraged. Information shouldn t be hidden. The most important information should be front-and-center with the less crucial Page 3 of 11

4 SVSU Websites Style Guide information taking a backseat. Sometimes this can be hard because we view all information for our departments to be of the utmost importance, but to make an effective website you have to take a step back and decide what your visitors need. Writing from the Top Down and the 5 W s The top-down model is an effective way to organize and deliver your content. The purpose is to get the most important information out and then arrange the details in order of importance. If someone is visiting your website, they are probably already frustrated because they need to search for information. The easier you make it, the better their experience will be. Consider the inverted pyramid when putting together your website. The most important details of your office can include your location, hours of operation, and what services you provide. The lesser details can be present on your website as well, but they may be found after clicking a link to another page, or downloading a document. When deciding what to put on your website, answer the 5 W s who, what, when, where, and why. While not all of the 5 W s may apply to every piece of information, using this model and the top-down model is good to follow. In general, your pages should be set up like this: Page 4 of 11

5 SVSU Websites Style Guide 508 Compliance and Accessibility What Does it Mean? Compliance with 508 standards should always be a priority for those creating web pages. Terminal 4, SVSU s content management system, maintains the highest levels of web accessibility compliance. By completing as many property fields as possible when working on pages and ensuring that uploaded media meets accessibility standards; compliance for most users should not be an issue. While we can offer suggestions for compliance, the legislation is constantly changing. If you have questions about 508 standards and compliance, please contact Disability Services at x7000, or email at disability-services@svsu.edu. Here are some general suggestions for compliance: Images. Include ALT-tags, or Descriptions, for all images. Be consistent with how images are named and saved. Documents. Include ALT-tags for all images and charts, and tool tips for form fields. Save documents as PDF and include a link to download Adobe Acrobat Reader. Be consistent with how documents are named and saved. Videos. Include captions on all videos. For videos that are not captioned, include a transcript. Be consistent with how videos are named and saved. Pages and Content. Complete all fields, such as Description, as appropriate. Also, use text styles, such as Heading 1 and Heading 2, appropriately when designing pages. File Naming Conventions How you name and save your documents and images on the web is important. Not only does proper naming add to the professional appearance of your pages and content, but it makes searching for files in your Media Library easier. Also, if a file is named well, often you will know what the file is or contains without needing to open it. Spaces and Characters You may have noticed that if you have a filename with a space, the space may be replaced with a %20 on different computers or on the web. For example, employee benefits package 2010.pdf may appear as employee%20benefits%20package%202010.pdf. Files and folders should not be named with spaces. Instead, consider using a hyphen ( - ) or underscore ( _ ) in place of a space. Do not use characters like \ / :., *? < > [ ] & $ when naming files and folders. Capitalization It doesn t matter if you use capital or lowercase letters when naming as long as you are consistent. The web server will view the documents folder the same as Documents or DOCUMENTS. Search engines generally don t consider capitalization when searching. Think about when you perform a web search. If you were searching for information on the SVSU Cardinals, would you type svsu cardinals into the search field, or SVSU Cardinals? In either case the same results would most likely appear. Page 5 of 11

6 SVSU Websites Style Guide Sorting Affects Naming Think about how you would like to sort your files and folders. Do you want them organized by YEAR-MONTH- DAY? If so, a document for employee guidelines may be named 2012-05-10-guidelines.pdf. Or would you rather name your document based on type? If you are posting an organization chart, you may want to name it orgchart-2012.pdf for your department s organizational chart for 2012. If you are naming a file and folder using a person s name, such as the vitae of a professor, begin with the last name followed by first name, such as smithlarry-vitae.pdf. Unique, Meaningful Names If you download photos from a digital camera, they are probably named something like DSC1022.jpg. While each file is uniquely named, it isn t meaningful. Rename your files so that they may sense to not only you, but others as well. If you have a set of photos from the SVSU vs. GVSU football game, consider renaming them svsu-gvsu- 001.jpg, svsu-gvsu-002.jpg, etc. Files should able to be identified based on their name. Also, keep in mind that other people will be seeing and downloading your files so the more sensible the name, the better. Length of a Name Keep your file names short. For example, organizational-chart-information-technology-services-june-04-2012.pdf can be shortened to, org-chart-its-2012.pdf. Notice that organizational was abbreviated to org. You can also rename files in Terminal 4 so if office file naming conventions make for a long file name, you may shorten it within Terminal 4. It is generally accepted that a file or folder should not exceed 25 characters, but some may argue that is even too long. Err on the side of brevity. Folder Hierarchy Keep your folder hierarchy simple. Don t have too many folders in between your root directory and the file you are trying to view. In your root directory in Terminal 4, most files can be organized into two folders: documents and images. Inside each of these folders, you shouldn t have to go more than a two, maybe three, folders deep to organize your content. For example, a flyer for a student event in 2012 could be found in documents > flyers > 2012. File Management Only the most current version of a file should be in Terminal 4. If a file is updated, replace the existing file in Terminal 4 with the new one. Most departments have shared drives in SVSU s network so any old files should be kept there. You may want to periodically go through files within Terminal 4 and delete old or unused files. Images on the Web You can add visual interest to your website by using photos, illustrations, clip art, etc. However, inclusion of these files should be meaningful. Images should be appropriate for the content. If you need help working with images, contact the ITD Lab at x7471, or email at avlab@svsu.edu. Page 6 of 11

7 SVSU Websites Style Guide Resizing Images should be sized down to the size that they will appear on the screen before uploading to Media Library. For example, photos from a digital camera tend to be high quality and very large in size. Even though you can view the photo in its entirety on the screen, it may be scaled down to a percentage of the original size. Examining the properties of a photo, such as the dimensions or file size, will tell you if the image is big or small. Ideally an image should be about 100K or less in file size, and about 300-400 pixel width and height, or less. File Types We recommend only using the common image file types listed below. JPG. Ideal for photographs, and features a smaller file size. Some loss of quality. PNG. Ideal for images with large areas. Supports partial transparency. File sizes tend to be larger. GIF. Ideal for images with large areas of solid, flat color, such as simple illustrations, logos, text as graphics, etc. Supports transparency. Not recommended for photos. Loses quality for high-resolution images. Ownership and Copyright The internet is filled with images. Just because you can save a file to your computer doesn t mean that you should use it on a web page. Most are copyright-protected. Obtain permission from the owner before using an image. SVSU Digital Photo Catalog SVSU has a repository of photos available to all SVSU users. Photos include logos, buildings on campus, people, and events. These photos are high-quality images that can be downloaded and used for communications on and off campus. Visit http://photos.svsu.edu and log in with your SVSU username and password. If you have questions or need assistance, please contact Tim Inman at x4086 or email at tmi@svsu.edu. Documents on the Web Documents are another means to share information on a website. Linking to a document instead of placing the contents of a document on the web can help keep your site clean and easy to navigate. Also, some information is simply best presented as a document, such as training handouts like this that a user can easily print or save, or forms that need to be filled out. Page 7 of 11

8 SVSU Websites Style Guide File Types The recommended file type for posting on the web is PDF. PDFs are not easy to edit so the information in them remains intact. PDFs also print fairly consistently across the board, and most computers can open them easily with Adobe Acrobat Reader. However, you are able to post other types such as DOCX, RTF, and XLSX, but know that your audience will be able to edit these files. Page Footers Footers are not only useful for numbering pages in a document, but you should insert additional information like the author s name, current version, and date it was last updated. This information can be helpful for a user if they are trying to determine if they have a current or out-of-date file. Videos on the Web It s been said that actions speak louder than words so it should come as no surprise that the use of videos on the web has dramatically increased in recent years. Videos are excellent for conveying information, teaching others how to do something, or entertaining. Captions In order to comply with 508 standards, all videos posted on the web should be captioned. If it s not possible to caption a video, a transcript of the video should be provided. YouTube Videos shared with YouTube can be included on pages using Terminal 4 content types. SVSU has a YouTube channel so if your office wants to share a video on the web, please contact Jason Swackhamer at x4123 or email, jjswack1@svsu.edu. Using Content Types When constructing your pages, think of your pages as puzzles. Content types are the pieces of the puzzle and include sidebar menus with links, office information, YouTube video boxes, and banner images. One page can have multiple content types, depending on how you want it to look. Tips for Good Web Design Here are some helpful tips to keep in mind when creating your pages. Images Use ALT-tags on all images. ALT-tags are necessary for compliance with 508 standards. They should be descriptive. For example, a photograph should not be tagged with Photo, but instead should read Photo: Students reading books in the courtyard on campus. In Terminal 4, ALT-tags can be placed in the Description field. Page 8 of 11

9 SVSU Websites Style Guide Limit the number of images. Too many images can cause a page to load slowly, in the cases of users with slower internet connections, or clutter the page. Use images relevant to your content. Choose images for your pages that support the content and purpose of your website. Accessibility, Usability, and Navigation Use a consistent look and feel. Websites that are consistent in their layout and design are inherently easier to use than websites that are not, plus they appear more professional. Identify your college, department, organization, etc. The purpose of your office s presence on the web is so that your audience knows who you are and what you can offer them. Reference other pages at SVSU. Often a number of offices will share the same piece of information, such as the map of the University. Don t reinvent the wheel and post your own map. Simply link to the map posted and maintained by the University. Check your links. Periodically review the links you have posted on your pages to others pages. Occasionally the owners of those pages change the content within them or locations of the pages which may require you to update yours as well. You can only control your pages, not theirs, but it is your responsibility to make sure that you don t have any broken links on your site. Keep your pages current. For many people, the internet is the first place they check for information about something so it s important that you keep information about your office as current as possible. Open external links in new windows. If you are taking a visitor off of your site to another site outside of SVSU, open that link in a new window so they can easily return to your pages. Make linked text meaningful. A link that reads, click here," isn t descriptive and helpful for users. Ideally, highlight the title of the destination page. Links should appear within a sentence, and not disrupt the flow of the page. The sentence, "Read our tuition refund policy," is more helpful than "Click here to read our tuition refund policy." Content Be clear as to what can be found on your website. Since the internet is the first place that many people check for information, it makes sense that your audience needs to know what they can find on your website. If forms are not available on your page, you may want to communicate that to your audience saying that forms are only available from your office and give additional information. Edit down your content. Your visitors want information fast and they want it to be easy to find. Tell them what they need to know upfront. Don t bury the most important information deep within your pages. Proofread, and use spellcheck and correct punctuation. This should go without saying, but is frequently overlooked. You may even want to ask a colleague not affiliated with Terminal 4 to review your pages. Marketing Know your audience. Who your audience is greatly impacts how you should present information to them. For example, websites for children are presented differently than those for adults, though similar Page 9 of 11

10 SVSU Websites Style Guide information may be communicated by both. Know who your audience is and speak appropriately to who they are. Promote your website. Often if you receive a phone call from someone looking for a submission deadline and reply that the information is on the website, there is a chance that they may not know that you have a site to begin with. Promote your website appropriately to your audience. Including the URL of your website in emails and printed materials is an excellent start. Make your website a priority. Your website is typically the first impression that your audience will have of your office. It s important that it is up-to-date and projects a good image. Page 10 of 11

11 SVSU Websites Style Guide Resources Department of administrative services state web style guide (teamsite). (2010, March). Retrieved from http://www.oregon.gov/das/state_webguide_teamsite.shtml File naming and links. (2011). Retrieved from http://wcs.wayne.edu/publishing/filenames.php Santaguida. (2010, January). Folder and file naming convention 10 rules for best practice. Retrieved from http://www.exadox.com/en/articles/file-naming-convention-ten-rules-best-practice Scanlan, C. (2008, December 08). Writing from the top down: Pros and cons of the inverted pyramid. Retrieved from http://owl.english.purdue.edu/owl/resource/735/04/ Smith. (2011, April 25). File naming best practices for digital asset management. Retrieved from http://www.damlearningcenter.com/street-smarts/file-naming-best-practices-for-digital-asset-management U.S. General Services Administration, Office of Governmentwide Policy, Information Resources Management Division (n.d.). Section 508 standards summary. Retrieved from website: http://www.section508.gov/index.cfm?fuseaction=stdssum Web dos and dont's. (2009, July 27). Retrieved from http://www.caes.uga.edu/team/web/style/webdos.html Page 11 of 11