This is an example of a customized dashboard with Good Habits and Guidelines developed for the student support site editors.

 

Dashboard

Welcome

Welcome to the Student Portal This dashboard area will have the latest news about Center for eLearning’s Web design news and helpful guides.

FAU Colors and Brand

Please use the FAU color scheme for this Web site. Visit the FAU Communications Department’s Style Branding and Style Guide page.

Are you looking for images to use on our FAU Web site? Use FAU images from the Department of Communications’ Photo Gallery.

The FAU brand should only appear once in a post unless it is part of a photograph – such as a student wearing an FAU t-shirt. Since the FAU brand is at the top of each post’s banner, by default globally, there is no need to repeat it as an image in the post contents.
Please check out the FAU Communications department’s page on Best Practices for the Web.
FAU Social downloads http://fau.edu/social/downloads.php

Media Library Maintenance

Media Library Categories – This Web site has categories in the Media Library. After uploading an image, select a category (in Attachment Details > Media Categories) of where the image will be used. Example – “Post Images.” This way, the Filter bar (called “Filter By Media”) will be useful to every Editor on this site.
Duplicate images in the Media Library – If you replace an image with the same image but smaller, and no one will be using the larger image, remove the larger image by selecting “Delete Permanently” from the Attachment Details window. Be sure that your name is associated with the image by looking at the image’s “Uploaded by” area of the Attachment Details window. If your name is not associated with the image, don’t delete that image.
Deleting Images – Be sure to only delete images that have your login name in the “Uploaded by” area of the Attachment Details window.

 

Good Habits

  • Image Scaling – It’s a rewarding habit not to use image scaling in your HTML code. It will cause poor image quality in Firefox and Internet Explorer. Chrome seems to handle image scaling well and will not pixelate. When uploading photos to the WordPress Media area, be sure that the size of the image is the actual size you will be using in your post. Read more about problems with image scaling …
    The Media Library already does scaling for every image. When adding your Media image to your post, you can choose the size of the image from the Media Library dialog box. Just select the image from the Media Library and find the image size choices on the bottom right side of that dialog box.
  • Cross Browser Testing – Another good habit is to have many browsers to test your work. Chrome, Internet Explorer, Firefox and others are great to use because our visitors use those browsers too.
  • Keep Responsive Design in Mind – This WordPress site responds to the type of device that visits. Using tables in your post could cause a problem for folks using cell phones to see the entire content. Check your work and be sure that the post responds. An easy way to do this is to increase and decrease the size of your browser window. You can also use a different device to check for responsiveness.
  • Off-Site Links
    Off-site links are hyperlinks where the URL resolves to an off-site domain. Please be in the habit of making these links open to a new page by using the & target=”_blank” in your html element href attribute ( tag). For any links that do not go offsite, use target=”_self” or no target at all.
  • Font Awesome is awesome – Whenever you can use these icons instead of creating and uploading an image, use Font Awesome icons.
    • Fusion shortcodes for Font Awesome can be found in the editor’s tool bar.
    • You can also add Font Awesome fonts to your inline styles. You can use the text tab in the editor to access your code.
    • And the Fusion Builder Elements usually have a Font Awesome area that displays lots of great icons. All you need to do is go through the options in the Fusion Builder Element that you are adding and you should see a list of icons.