Web Style Guide & Best Practices
This style guide is intended to give you information about the general writing styles that you should use when editing pages on the BSOE web site. This page is indended to augment the University Relations Style Guide. If something is not listed specifically here, please defer to the University Relations Tone and Style Guide or Editorial Guide.
Common style guide issues related to commas, capitalization, and more are covered in the UC Santa Cruz Styleguide Cheatsheet.
Please note that the layout of the BSOE web site is controlled by the webmaster. You should not try to circumvent the layout in any way. The inclusion of page-specific CSS or other style information in web pages is to be avoided.
- When abbreviating the School of Engineering, use BSOE, not SOE or JBSOE.
- Per UCOP naming document and associated policies pertaining to the naming gift by Jack Baskin, UCSC shall refer to the engineering school in all official correspondence, media, publications, both internal and external, as the Jack Baskin School of Engineering. Understanding the need for flexibility, the donor has agreed to allow the following exceptions to be used as appropriate. However, the Jack Baskin School of Engineering should never be referred to while excluding the name "Baskin."
- In order of formality:
- Jack Baskin School of Engineering
- Baskin School of Engineering
- Baskin Engineering
- Phone numbers should be formatted as 831-459-XXXX or similar. Remember, many people looking at our web site are coming from off-campus and don't know about UCSC extensions or our area code. Don't use parenthesis or periods in phone numbers. If you need to include an extension, please use the format 831-459-XXXX x 1234.
- E-Mail or e-mail should be used in place of Email or email.
- Whenever possible, don't use PDF files on the web site. Instead, convert the PDF to a web page and take the time to make sure that the information transferred correctly. Remember, one of our objectives is to make the site accessible to users with disabilities, and PDF files are generally not very accessible to people using screen readers or other means of reading a web page.
- Don't use ALL CAPS. Instead, use proper capitalization of titles and names.
- Don't change the meaning of a page. For example, if you create a page for the 2016 Staff Picnic, when it comes time to post the 2017 Staff Picnic, don't re-use the 2016 page. Instead, create a new one and leave the old content alone. As a rule of thumb, if you have to change the title of a page (other than to change spelling, grammar, etc) you probably should be creating a new page rather than changing an old one.
- A course is something that we teach each quarter - for example, AMS003. A class is a particular instance of a course - for example, AMS003/Fall17. When entering class/course information on web pages, please be sure to recognize the distinction.
- When copying content from another source and pasting into a web page, remove all formatting, using the eraser icon ("Remove Formatting") in the toolbar. Then apply formats and styles within Drupal.
- When displaying lists, use bullets (not dashes). This ensures that Google recognizes the content as a list.
Use Drupal 8 and Existing Themes Provided by BSOE
We encourage the use of BSOE web templates, to ensure a consistent look and feel across the sites. The templates were designed to be as flexible as possible. They are also mobile-device friendly, which means the content adapts to mobile-device screen sizes.
There is also some level of support available for Drupal 8 sites from the web developer (email@example.com) and from the communications team (firstname.lastname@example.org)
Provide A Web Page/Site Contact
All web sites should include a reliable method for contacting a person responsible for the site (e.g. a “This site is maintained by...” line, generally at the bottom of the page, which includes at minimum the e-mail address of the web page/site author). This allows users to provide feedback on your site, submit inquiries and notify you of any errors they find.
Keep Content Current And Accurate
Content should be updated, edited, removed and augmented as needed. It is important to keep the sites current. Incorrect and outdated information is usually worse than no information at all. We will send reminders to check your site and verify that the content is current, but it is up to each content owner to keep the content current. As a general rule, it is good practice to follow the schedule below:
Monthly Or Quarterly
- Check for and fix broken links
- Check for 404 (Page not found) errors and fix link or set up redirect
- Add new content
- Ensure any dated content is up to date
- Review all contact information
Quarterly Or Semiannually
- Review each page of your site for content accuracy
- Test any forms on your page/site
- Test site on new browsers
- Remove unneeded, expired, inactive content
Make Content Accessible
An accessible website means that it can be viewed by the widest audience possible. Accessibility not only refers to people with physical disabilities (such as blind users), but also people with cognitive, learning or motor skills disabilities, and people who access your site with mobile devices or old, outdated technology. The following easy fixes can greatly increase the accessibility of your site:
- Use alternative text for images
- Use headings and lists consistently
- Use meaningful link text
- If you use alternative media formats, make sure this content is accessible to users who can’t see, hear or otherwise access videos, audio, etc.
- Keep the design clear and simple
- Using the recommended Drupal CMS will help achieve most of the accessibility goals without any additional work on your part.
Images should generally be rotated, re-sized and cropped before being uploaded to the site. Photographs of people may require a model release from the people in the photograph before we post it on our web sites, particularly for students. You may not use pictures from other web sites unless you have express written permission from the copyright holder. There is a campus repository of photos that are available for use at http://photos.ucsc.edu
The Baskin School of Engineering also maintains a repository of images, videos, slide presentations, and logos. The Google folder with these media assets is available here.
Include Copyright Information
All official and department web pages should include a copyright notice as follows (minimum acceptable wording):
Copyright © (year) The Regents of the University of California. All rights reserved.
For each Engineering Event, include the following information:
Basic information (Title, Location, Speaker Name, etc. per template).
*If copying and pasting text, remove formatting by highlighting text and clicking the Tx icon.
Abstract (use Heading 2 on "Abstract")
Speaker Bio (use Heading 2 on "Speaker Bio)
URL for more information on speaker or topic (optional)
For each Engineering News Article, include the following information:
Title: Short and engaging
Date: Date the article is published
By line: Author
Summary: Very short summary piece intended to attract readers. The summary appears on the site.
Example: "UC Santa Cruz researchers are developing new materials for a wide range of devices and products, from solar cells to surfboards."
Body: The main article, with quotes and any external links. Format the text properly. If cutting and pasting from other sources, remove source formatting. The news article should be complete in itself, not requiring the reader to link to an outside source. External links are acceptable for additional information. The article should follow the standard accepted format for news releases/articles.* The article should clearly convey the significance of the story, and should highlight and promote BSOE research and education. It should not be used for marketing.
Image: Each article should have at least one image. Make sure the image is sized appropriately to fit in the space provided in the layout on the home page news feed.
Headings: If your article is organized into sections, use headings and subheadings as needed. These should be formatted using the Heading 2 (primary heading) and Heading 3 (subheading) and not formatted with Bold/Italic keys.
This website is maintained by Karyn Skemp (email@example.com), Communications Director, Baskin School of Engineering