For Staff: Resources: Web Design Guidelines

Editing Web Pages DO NOT remove the #includes. If you download the Web pages onto your computer for editing, do not download them using a Web browser-- connect directly to the server to copy the files using FTP, AFS mounting, scp, etc. This will keep the #includes in tact. Opening the page in a Web browser and saving it to your hard drive will remove the #includes by replacing them with the content of the included files and in the end, defeat the whole purpose of having templates and modular Web pages and ultimately, make the Web site that much more difficult to keep up to date. Return to top Page layout/templates Use the templates at the bottom of this page as a starting point for your Web pages. This will not only start the page layout, but it will automatically add the correct stylesheet, ResComp, AComp, and SULAIR branding, header and footer bars, and if inside a manual, the navigation bars on the side. This also makes updating the design of the entire Web site easier since we only have to update the included files in each of the individual Web pages. Return to top Colors, fonts, and other design elements The primary font used on the Web site is Verdana and if unavailable, Arial, Helvetica, or sans-serif. The main colors for the Web site are: Color Web RGB #990000 164/0/29 #C2B7A1 194/183/161 #EDE8DD 237/232/221 For other compatible colors and general Stanford design guidelines and resources, visit the Stanford University Design Guidelines Web site. Return to top Navigation, the sitemap, and directory structure The directory path leading to your Web page should appear the top of the page. For example, starting at the topmost level of the Web tree, this page appears in the /staff/resources/web/ directory. Therefore, the page title appears as it does, linking back to each section of which the page is a part. This gives users the ability to navigate back up and out of the section, allows them to view other relevant pages in the same section, and gives them a context in which to place the current Web page. If you create a new directory (which you should do with great consideration and planning), you should make sure you create an index.html file for that directory and that file should contain a listing of the main files and subdirectories contains in that directory (that's why it's called an "index" file). If you create a new directory (always) or Web page (only ones of great importance), you should add a link to it to the sitemap. Return to top Links Links to directories (including root directories) should including the trailing slash: http://rescomp.stanford.edu/ instead of http://rescomp.stanford.edu or http://rescomp.stanford.edu/directory/ instead of http://rescomp.stanford.edu/directory. Links to content within the ResComp Web site but outside the directory the Web page is in should be absolute. For example, a link from inside the RCC Manual to the email troubleshooter should be to /staff/manual/rcc/troubleshooter/email.html instead of troubleshooter/email.html. This makes life easier when a Web page is moved. This is especially important when you are editing a file that is included in another file, such as the right-side navigation bar in the RCC manual. Since it is included on all of the manual pages and manual pages appear in more than one directory, it is important to have absolute links so that a link in an included file works in both the instructions and clusters subdirectories. Return to top Email addresses, names, and contact information Person-specific references should be kept to a minimum. This means that if you want to include your contact information, your name, etc., you should use your job title and/or your generic email alias. Since phone numbers generally do not change job position, you can include your office phone number. Current email aliases are: Position Email alias Cluster operations clusterops Network Administrator netadmin RCC Manager rccboss Software Development development System Administrator sysadmin Office Manager officemanager Head of Residential Computing head When linking to any email address, yours or otherwise, you should spam encode it using the tool available here. Return to top Password protecting (WebAuth) Password protecting a Web page or a directory by putting it behind WebAuth should be done using a .htaccess file. (Only in rare instances should directories or files be put behind WebAuth at the Web server level.) For more information on how to create a .htaccess file, click here. ResComp access groups are located on the rescomp server at /opt/www/apache/conf/.htgroup.webauth. Return to top

Quick Links Editing Web Pages Page layout/templates Colors, fonts and other design elements Navigation, the sitemap and directory structure Links Email addresses, names, and contact information Password protecting (WebAuth) Templates Main Web page template RCC Manual Tech Manual Developer Manual Webapp