Madison Area Technical College. MATC Web Style Guide

Madison Area Technical College MATC Web Style Guide July 27, 2005

Table of Contents Topic Page Introduction/Purpose 3 Overview 4 Requests for Adding Content to the Web Server 3 The MATC Public Web Template Using the Starter Files Server Side Includes General Practice Points Cascading Style Sheet URL Naming Conventions Content Formatting Text Writing for the Web How to write technical terms Design Aspects Logo Look and Feel Images Accessibility Common Mistakes Frequently Asked Questions Dreamweaver MX 2004 Hints How to Apply the Default Style Sheet to View Available Styles During Design Time Definition/Terms 2

Introduction/Purpose The primary goal of the Madison Area Technical College Web site is to deliver services and information online in an efficient and friendly manner. Web sites must be accessible to the widest possible range of audiences, browsers, and platforms. A second goal is to create a positive image for MATC. It is critical that the enterprise provides guidelines and standards for a common look and feel for online MATC web based services. For many people, their first interaction with our college will be through the Internet. It is our goal that all visitors who go to the MATC Web site find the information they need with a minimum amount of effort. The purpose of the MATC Web Style Guide is to assist those responsible for maintaining or designing Web pages on MATC web servers either using the official template or those involved in creating content for the community inside MATC by providing guidelines on style and usage. As a matter of policy, the public template may not be altered or imitated without permission from the Web Advisory Committee. This guide, which will be updated as circumstances dictate, should be used when designing web pages for the MATC web site using either the MATC public template or when creating web sites for inside MATC (internal audiences in Blackboard). Questions or concerns about this guide or about any web policy within the guide should be directed to Web Strategies Burea via webmaster@matcmadison.edu. All change requests to policy or guidelines will be reviewed and decided by the Web Advisory Committee. Overview The goals of the MATC Web Style Guidelines are: To be consistent in the use of design elements, languages, formatting, appearance, and functionality. To use the MATC templates for the development of external and internal web sites which will make the sites useful to visitors, easier to maintain, and comply with Section 508 of the Federal Rehabilitation Act. Section 508 standards seek to eliminate barriers in information technology for the disabled. Requests for Adding Content to the Web Server Adding content to the web server must be done by contacting the Web Strategies Bureau via the initial Web Publishing Request Form at http://development.matcmadison.edu/matc/employee/guidelines/webrequest/default.asp. All requests must have prior approval by the manager from which the request is coming from. Web Strategies will assist you in coordination of content additions. Content requests will be considered either small or large in size. If a project is deemed large, a Web Publishing Request form will be filled out by the requester and the project will be considered a Service Request in Clientele. Small requests will be taken directly emails sent to Webmaster and also logged in Clientele. Web issues will be considered a Call in the Clientele system. The criteria for project size are determined by amount of content needed to be posted and the amount of resources needed to complete the project. All projects will be logged into Clientele and can status can be checked through the Help Desk at x6666. Requests will also be assessed for Public and Inside MATC. That determination will allow users to follow guidelines for each type of site or content. 3

It is strongly suggested that you sign up for Dreamweaver training in order to keep up your Department s web content. If this is not possible, you can work with Web Strategies to create a plan for updating your content. The MATC Public Web Template The MATC public web template is divided into five areas or zones. Area 1: Area 2: Area 3: Area 4: Area 5: Area 5a: College banner and top college navigation. This cannot be modified for general Web pages. Exceptions can be made for a different graphic banner only in the case of an entire Department Web site or for a specific content area where the banner will help improve the presence of that area. Exceptions must be approved by the Web Advisory Committee. The graphic will comply with current look and feel of the Public Web site. Graphic creation will be supplied by IMPR. College left navigation. This cannot be modified for general Web pages. Exceptions will be granted for a proven business need such as a Department Web site. Exceptions must be approved by the Web Advisory Committee. The left navigation will comply with current look and feel of the public Web site. Footer banner with major navigation. This cannot be modified. Individual Subnavigation. This will be modified for each area s use in the college. This is the file given as part of the Starter File Set. Styles are in place for this area. H1 will be used for the initial heading. Links are placed 3 across with links being alphabetized top to bottom and then left to right. Body of Text. This will be modified for each area s use in the college. This is the file given as part of the Starter File Set. Additional Navigation: This will be used for additional navigation for each subnavigation area. This is places within the body text of Area 5. 4

Additional Files: Meta.htm will be given to all users to modify for their area s web presence. When used, this file will enhance the user s pages to be searched better by a search engine. Starter files that are sent to a Web author consist of: default.shtm Main html page which consists of includes for top, left, subnavigation, body, and footer files. This file consists of all areas listed above. inc_default.htm Include file which consists of the main content of the page (Area 5). inc_subnavigation.htm Subnavigation (Area 4). default.css Current copy of the MATC style sheet for use in development only. meta.htm Initial meta file to be used to add your Meta content such as key words and description to each page. The template has a fixed width of 800 pixels wide. Since the MATC site utilizes server include pages, files for only area 4 and 5 will be given to the web author. If areas are approved for changes on the left navigation, that file will be included in the starter file set as well. All html mark up should be XHTML compliant. No font tags will be used. All html mark up will use the default style sheet. Additional styles will be added to the default style sheet approval of Web Content Management Specialist. All html mark up will be 508 accessible. This is discussed in the section on Web Accessibility. 5

Using the Starter Files Most web authors will generally use only the starter files to create additional files. The starter files will be used like templates and you will choose the Save As feature to create new pages. The Save As feature can be used to save additional.shtm pages, additional includes for main text and subnavigation. You may even use the Save As feature for the include meta tag files. You will then be able to modify those for more specific use on your web site. Web authors must always use the default.shtm file as the initial file (home page) for each section/folder within their web site. The server is setup to look for those pages as a default home page. Web authors must use the default style sheet for the MATC public web site. Some departments may be using their own style sheet. No matter what style sheet is used, please use those styles. Styles can be added to the default style sheet on approval basis. Requests can be made to the MATC Webmaster group. You can view the style sheet list to see what styles are currently available for the public web site. Server Side Includes The MATC web site uses a technology called server side includes. The files and their structure can be viewed in the section MATC Public Web Template. A typical main web page (.SHTM) calls additional web pages to display within it (.HTM). This is the use of server side includes on the MATC web site. The starter files given to web authors are the server side include files that they will need to manipulate for their content. Additional include files (top header, left navigation, and footer) will not show when they are working in Dreamweaver but appear once the pages are published to the development and production servers. Again, it is the use of the server that pull these pages together and paint one main web page in the browser. General Practice Points Initially, Web authors should create all pages on the development server and move into production once they have the proper sign offs. Linked titles match the titles of pages they link to. Every window has an appropriate title in its title bar. All pages use the metatag keywords and description either as a file include (meta.htm) or coded into the header of each page. Minimum keywords and description that is required is the name or heading of the page. The PDF properties area will be filled out with a title and description. All downloaded files such as PDFs, TXTs, DOCs will include a descriptive and file size behind the links. I.E. (PDF, 100 KB). A link to the MATC 3 rd Party Download page will be included for users to obtain the browser plugins for these file types. Term Click Here will not be used. Authors will find alternative ways to link content. For example View or Download are alternatives suggested. Content is written in brief paragraphs (called chucks). Authors should be aware of current Web writing trends to keep information simple and to prevent long scrolling pages. XHTML Code will be present on all pages. This code will be placed prior to the <title> tag in the page header and includes the initial HTML tag. The example code is: <?xml version="1.0" encoding="iso 8859 1"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Pages on the public Web site must be linked to the MATC Style sheet. Example code is <link href="/matc/css/default.css" rel="stylesheet" type="text/css" > and is placed in the <head> tag of the file. The Web page must contain meta tags for description and keywords associated with the material to assist the search engine. An html include file can be used for ease of use and future changes. 6

Cascading Style Sheet (CSS) The MATC Starter Files use the MATC default style sheet (default.css) to format the appearance of the text. This means that you will have to work very little to get your text to conform to the MATC style, because the global style sheet takes care of all that behind the scenes once you upload your pages. This means that you do not apply any font faces, font sizes, or font colors to your text. Doing this will create an inaccessible web site and your pages will not conform to the 508 Web Accessibility Standards. IMPORTANT: While working in Dreamweaver, your text s font and size will not show styles unless you apply your style sheet to show during design time. To apply your style during design time, see below the section Macromedia Dreamweaver MX2004 Hints How to Apply the Default Style Sheet to View Available Styles during Design Time. For information on how to apply styles in Dreamweaver, see the section Macromedia Dreamweaver MX2004 Hints How to Apply a Style to your web page. For information on how to apply styles to html code see the Frequently Asked Questions How do I write a CSS style in my html code? If you have a business need for an additional style that you feel would help the entire college web site, that request can be submitted to Webmaster email. If you have a business need for a style that will use on a onetime basis, the style should be written in the header of your html file, not as an in line style. URL Naming Conventions Web site addresses, or URLs must meet the following standards: They are as logical and clear as possible and make sense to people. E.g., registrar, not registr. They are as short as possible, not exceeding 20 characters/numbers. They do not repeat matc unless it is necessary for marketing goals. E.g., contacts.shtm, not matccontacts.shtm. If MATC is needed for a name to make sense, place it at the end or the middle of the url. E.g., alumni_matcevent.shtm not matcalumni_event.shtm They contain no spaces and use underscores for fill in. Underscores are used at a minimum. E.g., alumni_giving.shtm not alumni_giving_event.shtm Remember to name your content include file to match the.shtm name. For example alumni_giving.shtm content include file would be named inc_alumni_giving.htm Please see the Web Policy and Guidelines for direction on URL conflicts or custom URLs. Content Formatting Text This is one of the hardest concepts to wrap your mind around, especially if you are use to print design or desktop publishing: On the web, you cannot completely control how the text will display to users. Individual users can set their own browser to display text any way they want it to look. The best we can do 7

is to set a style using the style sheet so that it will display as close to how we want it in as many browsers as possible. Trying to control the font size, font face, and font color will cause accessibility issues and our site needs to be in compliance with the 508 Accessibility Standards (government established mandatory guidelines for web pages that make them accessible to people who are visually impaired). Do not put in line breaks (shift returns) in the middle of a paragraph to drop something to the next line! Changes are that even if it looks OK on your machine, it is not going to look OK on others. Example: This is what you want it to look like so you add a line break <br /> tag after the word at : You can contact the office at (608) 000 0000 for more information. Here is how it could appear for many web users: You can contact the office at (608) 000 0000 for more Information. How your text looks to you in Dreamweaver is NOT how it is going to look when it is in the web browser. Once it is posted, screen size, resolution, the applied style sheet, etc can change how it will appear. Learn to be less concerned with how text looks in your Dreamweaver layout and more concerned with content and structure. If you are having issues with how your pages are showing, see the Frequently Asked Questions section Why are my pages not showing up with the applied styles? Writing for the Web Creating content to place on your web pages is the most important task. Content must be written differently for the web than for printed materials. It is better to review your content than just pasting printed material content into your web pages. Content should be written in short, concise paragraphs called chunking. Pages should be kept to a minimum of scrolling. Authors should be aware of current Web writing trends to keep information simple and to prevent long scrolling pages. Using terms like Click Here or View this will not be used. Authors will find alternative ways to link content. For example, it is suggested that you use the terms View or Download with additional descriptive text to what the link really is. You will create accessibility issues if you use terms such as Click Here. It is important to keep your link titles matching the titles of the pages that they go to. Mismatched links and titles can be confusing to users. Searching Google for additional information on writing for the web may be helpful to get you started. Other suggested sites are W3c.org or useit.com. How to write technical terms CD ROM desktop ebusiness ecommerce e mail etech College of Wisconsin 8

file name helpdesk home page Internet, Net ISP (Internet Service Provider) LISTSERVE Online screen saver style sheet, CSS username web web based web server webmaster web page web site WWW (World Wide Web) Design Aspects Logo MATC Logo look and feel is protected under guidelines set forth by the college. You can contact the Department of Institutional Marketing and Public Relations for these guidelines. Look and Feel MATC encourages a consistent look and feel, including navigation, across all web pages. Detailed design requirements regarding the common look and feel can be found in the MATC Web Guidelines and Policy Document. Common design and navigation will be used throughout the MATC site for ease of use, navigation, and accessibility. Images Image creation can be requested through Web Strategies by using the Webmaster email. It is suggested that images are with a files size of 30 KB and are no larger than 400 x 400 pixels in size. By using an image editing software such as Photoshop or Fireworks, you can convert images for web use. Photos deemed unacceptable by the Web Advisory Committee will be removed from the web site. Accessibility <<Content in work>> Common Mistakes <<Content in work>> Frequently Asked Questions How do I get a web site? For official academic or administrative departments, fill out the Web Request form found online at: http://development.matcmadison.edu/matc/employee/guidelines/webrequest/default.asp. There is additional 9

information in the Web Policy and Guideline document. For staff or student web sites specifically for Blackboard, contact the BlackBoard Administrator at: blackboard@matcmadison.edu. Can my site have a user friendly name or URL? If you have a business need to have a shortened url or different url name than has been assigned, requests are made to the Web Advisory Committee through the Webmaster email at webmaster@matcmadison.edu. The Web Advisory Committee will expect a written business reason for the request. What equipment (software/hardware) will I need to start updating my own content on the web site? Web authors will need a copy of Dreamweaver which can be ordered through the HelpDesk at x6666. Dreamweaver can be used on either a MAC or PC. You may want to have additional software to create PDF files (Adobe Acrobat) and image files (Photoshop or Fireworks). How do I create a new page with my starter files? To create a new file based on your existing starter files, open both the default.shtm and the inc_default.htm files in Dreamweaver. Choose the default.shtm file and choose Save As and choose a new name (pertinent to the info that will be on that page) to name your page with a.shtm extension. Choose the inc_default.htm file and choose Save As and choose a inc name that matches the.shtm file you just created. Example: You saved your first.shtm file as alumni.shtm, your inc_default.htm will be saved as inc_alumni.htm to match the newly created alumni.shtm file. Open the newly created alumni.shtm file and choose the content area. In the properties area within Dreamweaver, change the name of the include file from inc_default.htm to inc_alumni.htm. Save the alumni.shtm file. Load the alumni.shtm and inc_alumni.htm file to the development server. Can I have an e mail form on my page? Yes, a form can be created in Dreamweaver. A request can be sent to Webmaster via an email to request the asp code to be added to the form. All forms should be created on the development server and tested thoroughly prior to putting into production. See the Web Author Checklist for details of publishing web pages. Are there any MATC graphics available to me? Yes, you can contact IMPR to look at their catalog of available images. All images used must have a release form signed by the person who appears in the photo. If you are a department, you can request a specific department banner that is in keeping with the current look/feel of the web site. IMPR can help you create that banner as well. What do I name my main page of my web site? Default.shm, and the content include page is called inc_default.htm. If you are using dynamic content, your pages would be named default.asp and the include would be called inc_default.asp. How do I add additional links to my inc_subnavigation file? Open your inc_subnavigation.htm file. Type in the link name you would like to add. Make sure that the links are in alphabetical order top to bottom and then left to right. 10

You will need to even out the number of links out between all three columns. If you have an odd number of links, place more links towards the left hand columns. When you are typing in the path name (link) of your new item, use the relative path name for the server not the exact http: path. For example type your link as /matc/alumni/alumni.shtm not http://matcmadison.edu/matc/alumni/alumni.shtm. Also, if you are linking to a default.shtm file, you do not need to list out the name of that file and the link can be written as: /matc/alumni not /matc/alumni/default.shtm. How do I write a CSS style in my html code? Styles can be written several different ways. If you want your style to appear with an HTML element such as a paragraph tag it would be written like <p class= indent30 > The word class calls the style indent30 which will set your paragraph in 30px. You can also set a style in line (within a line of text) by using the span tag. If you want to choose one word to be bolded red, you would write the tag as follows: <span class= redbold >Red Bolded Text</span>. See the CSS Guide at http://development.matcmadison.edu/matc/webauthors/css_examples.shtm for more information on what styles are available. Why are my pages not showing up with the applied styles? If you are having problems with your pages not showing up properly (or not at all) in the browser, one thing to check is to make sure that Dreamweaver didn t insert improper DOCTYPE code. You can find this code by viewing your page in code view and at the very top of the page your code should look like this: not this: The first DOCTYPE statement is the appropriate. You should also convert the code on your page to XHTML. You can do that in Dreamweaver by choosing File, then choose Convert, then choose XHTML. 11

If you do not specific this doc type and covert your pages to XHTML, they will not always show the appropriate layout and styles. Macromedia Dreamweaver MX 2004 Hints How to Apply the Default Style Sheet to View Available Styles during Design Time To view the available styles in Dreamweaver, it is best to download a copy of the current MATC Default Style Sheet to your local copy of your Dreamweaver web site. Do do this, put the following address in your web browser: http://matcmadison.edu/matc/css/default.css and choose Save and save it to a location where you keep your local copy of your web site. 12

While you have a web page open in Dreamweaver, right click your mouse (different on a MAC) and choose CSS Styles and then choose Design time. 13

You will get a pop up box asking you for the location of your style sheet on your hard drive (local copy). Choose the + button above Show only at design time: Then find the location of your css on your local copy (hard drive). 14

Once you have choosen OK on the screen above, it will take you back to the screen where it asked you to find the location. On that screen, you will choose OK. Now your styles will show in the dropdown box in Dreamweaver and are ready to be applied. Please use the style sheet documentation so the styles are applied properly. You can view current documentation at: http://development.matcmadison.edu/matc/webauthors/css_examples.shtm 15

How to Apply a Style to your web page First highlight the text that you want to apply the style to. Here the Last Modified line is choosen: The in the properties box, choose the LastModified style. This will add the style to the paragraph. 16

Definition/Terms URL: Directory: the address of the web page, as typed into a browser. Example: http://matcmadison.edu/matc is the URL of MATC home page. like a folder on your hard drive. A directory on the server contains html and image files that are part of your web site. These directories work just like folders on your computer s hard drive (there can be folders within folders). For example: for http://matcmadison.edu/matc/alumni/images/carlos.jpg, alumni is the main directory folder for your web site, images is a directory within alumni, and Carlos.jpg is a file within the images directory. Path Name: Area 1: is the address of whatever you are linking to, without the http://. The path is relative to whatever you are in. Example: writing a link to another area with the MATC web server would be written as: /matc/alumni/images/carlos.jpg. All hyperlinks within your web site will be written this way. the area reserved for the college banner and top college navigation. See MATC Web Template above for additional information. 17

Area 2: Area 3: Area 4: Area 5: the area reserved for the college s left navigation. See MATC Web Template above for additional information. the area reserved for MATC major navigation. This cannot be modified. the area used for department s subnavigation. See MATC Web Template above for additional information. the area of a MATC web page where you would put your content. Area 5a is where you would place additional navigation for that already existing subnavigation area. File Naming Convention: file names should not be more than 20 letters plus the.shtm, asp, or.htm extension. All files must end in.shtm (main pages),.asp (dynamic pages), or.htm (include pages). All images must end with.gif,.jpg, or.png..gif an image which is generally line art.jpg an image which is generally photo like. MATC Web Server: The web server that hold all web sites hosted at MATC, including public, department, and some faculty web sites. URL: The full domain name and path to any given web site or file accessible through the web. Custom URL: A domain name that represents a separate point of entry into a site other than the primary point of entry through the public web site. Virtual URL/directory: or redirect URL is like a custom URL. A virtual URL is a name change to shorten an address to point to a directory deep down in a folder structure. Both Custom and Virtual URLs must be approved by the Web Advisory Committee. A business need must be presented for a custom or virtual URL. It is a path following the domain name. E.g., matcmadison.edu/athletics 18