Style Guide & Formatting
The Division of External Relations Style Guide provides a unified and approved style for use in communications. For items not referenced in the document, consult a recent edition of the Associated Press Stylebook. For any questions about writing style, contact the LAI web team.
LAI Style Guide
GW Libraries and Academic Innovation
Use on first reference with audiences external to LAI. Use GWLAI as an abbreviation on second reference to external audiences. Libraries and Academic Innovation on first reference and LAI on second reference to internal audiences.
A division of Libraries and Academic Innovation. GW Libraries refers to the organization. Only use Gelman Library when referring to the specific building.
When referring to the Libraries website in your text, don’t include the “http://”
Writing for the Web
Cut your text in half. And then cut it in half again.
The most important thing is to be concise. The rule of the web is to cut half of your text, read through it, then cut it in half again. This is especially true as we move increasingly to mobile where screen size can make long-winded pages unreadable.
It's tempting to be thorough, but please understand that for the vast majority of our visitors too much information is worse than not enough. They want simple short answers written in plain language. And the more you write the more of it will become outdated.
Another solution is to start pages with short sentences that link to more content below when needed (or to another page). You might think of it as an executive summary.
Know your audience
In keeping with plain language, please remember that our audience is varied. The vast majority of our site's visitors are part of the GW community, but they still range in age, experience and language skills. Many of them will be trying to get quick answers on a mobile device. Others will be spending hours on our site at a desktop. All of them should leave our site feeling like they got what they needed with a minimum amount of effort.
When linking, providing a context in the link to where the user is going when they click it. E.g., “learn how to create a page.” Do not use “here” when linking to other content, e.g., “read our page Creating and Editing a Page here.” This makes it challenging for users using screen readers, who are tabbing through links to understand what the link is for.
If you are linking to a page not on the Libraries website, choose New Window (_blank) under the Target tab when are creating a link. This will help people return to our website later.
SEO: Surfacing Your Content
Search engine optimization, or SEO is methods of ensuring that search engines, such as Google.com rank our content appropriately. Presenting clear, concise information is one of the best ways of doing this. This applies to your page title and section headings as well. Make appropriate use of heading tags (h2, h3, h4) to provide contextual structure for the algorithms and screen readers accessing the page. Use alt tags with every image (this is an accessibility requirement). Make your page alias (URL) follow your group's naming strategy and match the page title as best you can to the last part. E.g., "My Excellent Library Page" = /my-excellent-library-page
Alt Tags for Images
You may not think of these semi-hidden pieces of code as writing style, but they are important (and required for accessibility). They help search engines and screen readers understand the context of your images. Is the image decorative or important to the understanding of the page? Is it a unique representation of a collection that should show up on image searches?
- Make your tag simple and to the point unless the image needs clarification: "image: student studying under tree" or "image: tapestry depicting Sack of Constantinople from GW Libraries Crusades Gone Wrong Collection".
- Start common image types with "book cover:" or "logo:" to give context, like "book cover: Moby Dick" and "logo: Washington Regional Library Consortium".
More on alt tags:
It's important that our pages maintain a consistent appearance. We are continually making tweaks to the appearance of the website to ensure it serves our users’ needs and reflects the university’s unified web presence. This consistency makes for a better user experience as people click between departments and organizations in the GW community -- as well as within the site itself.
The site will automatically format your text, lists, horizontal rules (<hr>), and page titles.
Font and text
- Paste: Do not paste from a Word document, Google Doc, or any other writing tool (or the web) without using the Paste as plain text option. Using the generic paste will insert errant formatting onto the page that may cause an unexpected look and feel for the page.
- You can use the “eraser” icon to remove formatting when needed.
- Font-size: the site will adjust font-size as need. For section titles use the Heading formatting options (see below) and do not increase the font size.
- Font styling: to call attention to text, use the bold or italics functions. Many audiences interpret underlined text as a link.
- Use a single space between sentences. This is the web standard and flows much better on screens (can cause display issues when the lines wrap).
Don't change the font. Unless you are embedding foreign characters or a short chunk of stylized text (maybe as an example) you shouldn't set a font. The site will do it for you. Be sure to paste using the "paste as plain text" option whenever possible.
Headings (H2, H3, H4)
Use Headings for section titles. Select the text and then use the Format dropdown menu to choose Heading 2, Heading 3, etc.
Heading 1 is reserved. The page title, for instance, is using Heading 1 and there shouldn't be anything with that priority below it.
Headings are hierarchical and they help search engine algorithms and screen readers better understand the organization of your content. Heading 3 should only appear under a Heading 2. Typically, you would have a couple Heading 3 sections under a Heading 2.
Text is aligned left by default, only use centered or justified text for special circumstances, which you will need to do with style code in the HTML source view. Contact the LAI web team for assistance with this.
Do not use spaces to align text; it will cause the text to align differently on every screen. Use indents, lists, or centering instead. Contact the LAI web team for assistance with this.
Highlight the text you want in a bulleted list and select the “bullet” icon. You can also indent and outdent using the icons next to it. In order to use a numbered list, put your text in a bulleted list. Then go into the source and change the unordered list (<ul>) to an ordered list (<ol>). For assistance with this, contact the LAI web team.
Avoid tables when possible. Tables will often break the page when it tries to re-flow to smaller screens/windows. Tables were never meant for formatting, just data.
If you use tables, please apply one of the following stylesheet classes in the Table properties:
- fluid-table-50: two-column table
- fluid-table-33: three-column table
- fluid-table-25: four-column table
- table-padding: add 5px padding to the table cells
- table-full-width: stretch your table to the full-width of the available window
Paragraph Breaks and Line Spacing
Hitting enter or return on your keyboard starts a new paragraph, which is automatically formatted to have a little space above it. If you want to place some text on the next line without creating a new paragraph hit shift and enter at the same time. This will create a line-break instead (in HTML it's a <br /> tag instead of <p></p>) and wrap the text to the next line inside the same paragraph.
Responsive Design and Mobile
As you work on the format and placement of items on your pages remember that this site will change depending on the device being used. The site "responds" to the current size of its window and whether or not it is being displayed on a touch device. On compliant browsers (Chrome/Firefox/Safari) you can grab the corner of your browser and shrink it to see the page re-flow.
When the page width drops below 640 pixels, the page drops the right sidebar completely. Use the right sidebar for "value added" content, like "Are you a student? You might find..." or Twitter/Facebook widgets.
HTML and CSS (advanced)
Advanced users can click the Source button and edit the code directly (note that some user roles will restrict this).
Inline styles can be used sparingly to achieve the desired effect. Don’t overwrite global CSS style that can cause issues when the LAI web team makes theme changes. When in doubt, contact the LAI web team to understand the best way to communicate to your audience.
In addition to the CSS classes for tables listed above, you can also use the “box-out” class to create a thin light gray border with some padding around a <div> tag.