Bar Island SwimHeader fonts can help a reader navigate a page (H3)

On this page we hope to help beginner users and remind pro users how simple webpages, with less text, can and should look.

 Sub-header fonts help organize information (H5)
  1. Bar Island SwimUsing bold: This further assists a reader’s understanding of hierarchy. It’s always good for people to be able to scan easily. That way they can find the information they need without always reading the full page’s text.
  2. Think of it like an outline: Sometimes there is so much visual information on a page, we need to think of our layout like an outline. Organizing our information makes experiencing our new site enjoyable and easy.
  3. We’re a mobile species.  The majority of our readers, overall, will be using a hand-held device to do so. Since our pages with stack from left to right, top to bottom on a phone, less is more. This also means you shouldn’t size your images to specific dimensions—making them the full width or half width of a column, means they will self-adjust on different devices. 
  4. Audience: Always remember that the main audience of our website is prospective students and their families. 

Page layout

The above example shows you what an organized page can look like. We are looking for one large beautiful image, and possibly a secondary image if necessary. There are opportunities for related links, and linking within the body of the text. In addition, we now have widgets that act as galleries for us both in the body and side bars. Feel free to contact the COA web team if you’d like to learn more about adding galleries to your pages.

Please keep in mind White Whale’s best practices in writing new text. The top box should have something short and sweet to “hook” a reader. Headings and Sub (sub) headings should help a reader navigate down the page so that when scanning, they can easily understand what that page is going to be about. 


Basic style guidelines

Header fonts

There are several great headers fonts that we can use to help us tell our story on a page. The top box on each page has a default font. We are not changing that default font.

In the example above, we have shown you how we will be using these headers in the main body and sidebars. The header fonts we are using are as follows:

  • Main Heading: Header 3 (H3)
  • Subheading: Header 5 (H5)
  • Sub-subheading: Paragraph (bold)
  • Body text: Paragraph
Punctuation

We are following these style guidelines for writing:

  • Use Oxford commas (for instance: for this course you will need brains, brawn, and a good sense of humor)
  • Use title case capitalization for news stories (for instance: Bill Carpenter’s Laurel Ceremony Remarks Wow the Crowd Again in 2015)
  • User sentence case capitalization for headers and sub-headers on pages (for instance: “Basic style guidelines”—just first letter is capitalized)
  • Italicize book, movie, play, newspaper, and journal titles
  • Use quotation marks for articles
Images

Our main aim is to have one great image on each page. That means that it can be one large image, or a half column image (as shown above). Images should be the largest/best quality you can find.

Social Media icons should be 35px x 35px, and look great in the right column. Linking images is easy. Just click once on the image (it may appear blue on your screen), and create your link.

(Please note: Images taken from our previous website should not be used. They are too small and appear fuzzy.)

How-tos

The LiveWhale Support Center can answer most, if not all, of your questions when you are first starting out. Use the links below for instructions on common functions. If you don’t find the help that you need in the support center, please reach out to the COA web team: webteam@coa.edu .

Editing a webpage

Adding a file

Adding an image or gallery  

Adding an event to the calendar