This is the accordion body, which can accommodate text, styled text, and additional formatting tools like lists and images.
Using Headers
Just like in regular page text, headers can help guide your reader through the content in an accordion.
Web Style Guide
Every webpage should have a few larger sentences at the top—like these—that describe what will be covered on the page.
So: we're here to provide guidelines and styles for the Bowdoin College website.
Why have a website?
Our webpages are here to provide helpful information to our visitors. College websites are not designed to be archives or storage areas for everything your department has ever produced. Just like a garden, they require regular weeding and feeding—so make time at least twice a year to check on your content and how well it's helping your audiences.
Did you know? You can schedule reviews for your pages and you'll be reminded when it's time to update them!
This is a great feature for pages that contain data that updates regularly: like costs, office hours, or schedules.
Using Text
Text areas are the most common element of your webpages. They will contain tools that are familiar to you if you've used Microsoft Word, Google Docs, or other writing and editing software.
It's important to guide a reader through your page by using visual cues: no one likes a giant wall of text! In addition to using headers like the one above, you can style your text, add lists and links, and insert helpful separator items like horizontal lines.
Other Helpful Tools
In addition to the features found in a standard text area, there are several other ways to guide your visitors to information that they need. We'll cover these below.
Using the content type "Callout Panel" will add a gray background to the area, which can help you break the page area into sections.
Featured Link
Featured Link
Think of these as very pretty buttons. They allow you to link to another page using an image, rather than just text. They have a few important rules:
- You can select whether the text on top is black or white, depending on if your image is light or dark. The CMS will automatically lighten or darken the image slightly, to help make it easier to read, but you may need to use images that aren't very busy.
- Try not to cover any faces with text! If you have great photos with lots of faces—like group photos from a conference or trip—consider another use for those.
- The number of characters you can use is limited, to ensure that these don't get distorted. If your link title is very long, you may want to use another tool or shorten the text.
- If you have a lengthy word that's pushing the boundaries, you can toggle between text sizes—normal and small—to help things fit better.
Accordions
Consider using accordions to group similar items that might have lengthy details, like:
- descriptions of clubs or student groups,
- fellowship requirements, or
- policies.
Never put emergency or critical information inside an accordion! Put yourself into the shoes of your reader: you wouldn't want to use an extra click to find an emergency phone number or a timely weather update.
Related Links
This content module creates a special list for links, rather than depending on links within paragraph text. These are used to link to other pages on the bowdoin.edu site: we're helping our visitors find what they need, even if it's not on our own pages.
The options for related links include the ability to display them in one or two columns, and you can choose from the following category headers:
- Related Links
- Related Departments
- Related Offices
- Related Forms
Using horizontal line breaks and columns is another great way to break up information on the page.
There are two automated content types that you can add to your department or office homepages: Stories, and Events. Each of these content types will pull data from another source—like the campus calendar or the news site—and put the relevant information on your page.
Ready to move from Website 101 to Website 201?
Let's talk about photos and photo galleries, or colors and typography.