By default, we set the guides with vertical navigation to make it less confusing when the layout changes when viewing it on a mobile device. The boxes don't follow the left-to-right rule, but rather by column.

Since the guides are one large column, try to prevent the chance of having to scroll down the page too far. You'll lose the reader's attention.

• Chunk your information into multiple pages, making steps to a process.
• Use different box types to make the page more eye-catching and less list-like scrolling.
  • Standard
    Great for directions and basic content.
  • Tabbed
    Great for grouping like-items.
    Prevents endless list-scrolling.
  • Gallery
    Great for grouping like-items that have a visual element, like book covers. 
    The settings allow for multiple rows of contents and auto-scrolling features. This allows the viewer to passively explore the content.

ISBN

• Use this to easily get the bibliographic information and book cover.
• After the fields have filled, delete the ISBN field.

Title Field

• Include the title and subtitle
• Include the modality in parentheses (Print) or (eBook)
  This is for us and the end-user to easily identify what format the book will be in. We use it to easily select which copy we want to reuse.
  We typically avoid keeping the publication dates and other bibliographic fields because it adds more lines and text that students will not read.

Publication Date

• Delete

Call Number 

• Use only when it is a print book, as necessary.

URL

• Enter the catalog page URL for print books.
• Enter the permanent link for the ebooks.

Description

• Use only if necessary. Students are not likely to read.

Create a Media/Widget instead of linking out to videos. This diversifies the way we present content on the page.

Make sure to have a small descriptor of what the asset is: How to Study (video). This makes it easy to know when we are looking to reuse content what it is.

When you want an embedded item, like a video, to be center-aligned in the box, you can add a little code int he widget asset.

<iframe width="560" height="315" src="https://www.youtube.com/embed/OdfEmLOy4sM" frameborder="0" allowfullscreen class="center-block"></></iframe>

Rules for Alternative Text

Alternative text is so that screen readers can let the user know what or why the image is being placed there. The main rule are as follow:

• Spell out numbers. 2 becomes two and (Forest, 2002) becomes open parentheses Forest, two thousand two close parentheses
• You must write out symbols if they are not just denoting the punctuation of the sentence. "Like In the Forest." the period can just be a period but in a math equation like 2.3 + 4.001 (7.50) you must write it out like two point three plus four point zero zero one open parentheses seven point fifty close parentheses.
• Keep it simple when describing a picture. A portrait or photo can just be a portrait of PERSON. You do not have to put 'Image of three cows in a field'. It can just be put as 'Three cows in a field'.
• If it is short hand like for chemical elements like Fe or Iron, you can either put Iron or uppercase F lowercase e. You must make your best guess on which would work best to get the information across to the student. Be mindful of chemistry and math images since they can hold more meaning than what is normally said. However, it is not required that you put everything down. For example, you can just put what the picture equation is so that the student can ask their professor later. You can also ask the Tutors if you need help understanding what is shown.

Should you need to use the class="sr-only" to add alt text after a long image you can test it in the Chrome browser reading mode or in FireFox if the extension has been added. However, in Firefox you must highlight over the blank space for it to be picked up. The default Read aloud in Edge doesn't read it as it is not a proper screen reader. (Side note: I have not tested Safari yet. When I do, I will update it.)

Please be aware that if you see a blank Rich Text/HTML box to make sure it is not being used as it will not show the screen read text unless you click on the Source button on the bottom of the editor. It will show if you try to update the HTML. It is best to use Edit > Source as the code is validated. It is not validated if you just use the HTML editor.

Helpful websites for other guidelines and good practices for Images from the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).

For optimal user experience (UX), use the minimal amount of text possible. People skim pages and are not likely going to read full paragraphs of information.

• Use bullet points were needed to break up the information.
• Break information up with headings.

Below are the Lone Star branded colors. Red and blue are the main colors.

Campaign Colors

Typography

These are the six fonts used in LSCS branded communications.

• Trajan Regular -Trajan Regular is a Lone Star College font.
  This is only in all capital letters and is used for headlines.
  Large and small caps may be used.
   
• Futura Bold - Futura Bold is a primary Lone Star College font.
  This is used in upper and lowercase letters for headlines and subheads.
   
• Futura Book - Futura Book is a primary Lone Star College font. 
  This is used in upper and lowercase letters for text on printed items. Futura is preferred over Arial.
   
• Arial Black - Arial Black is a primary Lone Star College font.
  This font is used if Futura Bold is not available.
   
• Arial Regular - Arial is a primary Lone Star College font.
  Use Arial regular if Futura Book is not available.
   
• Garamond - Garamond is a secondary Lone Star College font.
  Use this serif font on large and text-heavy booklets and documents.

Other Design Fonts

In rare cases, when designing for special audiences such as children, other fonts may be used in headlines and titles. Consult the Public Information Council member at your location. See also “Performance Posters” elsewhere in this style guide.