LibGuides: Best Practice guide: Page Design

• Tab names should be concise using the fewest context words possible
• Tabs should be a contrasting color from the background 
• Homepage should be labeled Suggestions are: Home, Start Here, Introduction
• Use a dark tab with light text, and light tabs with dark text

• Visual media (videos and images) should contribute to the purpose of the guide and enhance text content
• Provide an alternative text (image description in Libguides) for images
• Images must give attribution to the person that created it
• Image and video width should be less than the column width on the page
• Try to keep dimension images 700px X 700px or less
• Libguides will resize image dimensions, but this does does reduce image file size 
• Resize images in an image editor to make them load faster, large image files load slowly 

• Linked items should open in a new window 
• Create links in these boxes: Rich Text, Simple Web Links, and Links and List Box 
• Links in Rich Text / Dynamic boxes are not checked by the link checker tool
• Use the link checker in the Tools on your Menu bar to find dead links
• Links and search boxes should include a short description of what the user will find there (1-2 sentences per annotation)
• Create links to related guides and web sites in a “Related Resources” box
• Create a box with links to all of the tabs with descriptive text about what you find there

• Put main content in the center column. Put secondary content on the right
• The most effective page layouts use either two or three columns 
• Home pages may work best using a three column layout. For example you can put navigation links on the left, main content in the middle, and contact information in the right column
• Don’t add a page unless there is enough content to fill all columns
• Avoid empty columns by starting with two columns and adding a third if needed
• Content should fill columns from left to right. The far right column should be shortest 
• Organize white spaces to guide readers through the content, provide stopping points to reflect on content, and prepare readers for upcoming content 
• Scrolling should be limited as much as possible A rule of thumb is that pages should not be longer than 1 1/2 screens
• Design pages for reading on the web. People scan web content in an F-shaped pattern 

• In general be consistent in naming boxes.
• Using the correct box you can track content, distribute documents, and link to internal and external resources and content
• Put the Ask-A-Librarian widget on at least one page
• Reuse content whenever possible by linking to existing boxes, pages, or links
• Rich text boxes are the most flexible. These allow you to do add text, images, tables, and JavaScript. Anything you can do in HTML, you can do in a rich text box
• Simple Web Links boxes are just that: simple lists of links If you add a description, it appears as a tooltip cloud when a user hovers over the link
• Links & Lists boxes allow you to add more content: you can add a description to the page as well as a "more information" pop-up window
• Interactive poll boxes allow you to create quick, simple polls to add to your guides as a gauge to see if a guide has been helpful
• Documents and files boxes let you upload documents & other files for your users It's a quick way to distribute links to download files Files you can upload include Word, PowerPoint, Excel, other Office files and PDFs

Box Types and Uses 

In general be consistent in naming boxes, and page titles Using the right box you can track content, distribute documents, and link to internal and external resources and content.

• Check out the Steal This Box guide for some useful pre-designed boxes
• Put the Ask-A-Librarian widget on at least one page
• Reuse content whenever possible by linking to existing boxes, pages, or links
• Simple Web Links boxes are just that: simple lists of links If you add a description, it appears as a tooltip cloud when you hovers over the link
• Links & Lists boxes allow you to add more content: you can add a description to the page as well as a "more information" pop-up window
• Interactive poll boxes allow you to create quick, simple polls to add to your guides as a gauge to see if a guide has been helpful
• Documents and files boxes let you upload documents & other files for your users It's a quick way to distribute links to download files Files you can upload include Word, PowerPoint, Excel, other Office files and PDFs
• Rich text boxes are the most flexible. These allow you to do add text, images, tables, and JavaScript. Anything you can do in HTML, you can do in a rich text box