The information below are the best practices we try to adhere to when creating web pages. Some of them are to provide a better experience with mobile devices or for users with a screen reader. Others are for general user experience and readability.
Content Layout and Presentation
-
Limit use of divs and inline styles in the body of a page to keep the look and feel consistent. Use the Remove Format tool in the WYSIWYG editor to remove inline styles from a page that has a lot.
-
Don't use tables for layout, tables should only be used for presenting data that needs to be in a table format to be understood. Tables should be set to 100% width to resize for mobile devices. Tables are an issue for both mobile devices and accessibility.
-
Remove extra space between paragraphs, even if that's how it was submitted or you find it on a page. The only exception is if you think it makes the page look better.
-
Remove extra spaces after a period in a paragraph. One space after a period. Always.
-
Resize your browser window and pay attention to how the text wraps. This will give you an idea of how the page will look on different screen sizes. Make adjustments to the page as necessary.
Image Management
-
Never stretch, make a smaller picture larger, or mirror a picture.
-
Always provide image alt text, it is required to meet federal accessibility standards. Write a short, but meaningful description of the image or photo. Don’t include “photo of” “picture of” ect. This is already implied.
-
Resize your image to approximately the correct size before uploading. It will load faster in the website if it’s the correct size.
Text Management
-
Use html bulleted or numbered list tags where appropriate, this keeps the look and feel consistent and increases accessibility. It also helps the readability of the page.
-
Use heading tags (h2, h3, h4, h5, h6) where appropriate. Do not skip heading levels, however, you don’t have to use all levels in a page. There should only be one H1 tag on the page and it is used for the page title. This increases accessibility and SEO.
-
UNI's standard is to format time as 7 a.m., 7:30 a.m., 9 – 11 a.m., 9 a.m.-11 p.m.
-
On a bulleted or numbered list, add the Paragraph (Normal) style after creating the list. It spaces the list out, making it easier to read.
-
On pages with a "-0" at the end of the URL, change the URL so the "-0" is not there.
-
Reword links that only say "Click here" or "Read more" to be descriptive of where that link goes. Screen readers create a list of links on the page, and links that say "Read More..." will mean nothing to the user.
-
Take advantage of the WYSIWYG toolbar, i.e. use the text indent button instead of using the spacebar to indent.
Link Management
-
Use relative links, e.g. “/sitename/name” of page or “nameofpage”. Do not include https://wwwdev or https://wtdev in the url. This keeps links working when the site is moved to production and the base URL changes and avoids links that go back to the dev version of the site.
-
Don't use www for links on UNI sites, we no longer use www. We redirect around it, but we still don't want to use it.
-
Underlining is for links only. If content comes in with words underlined, remove the underline. If it's a publication, book, movie or play title (or something similar), make it italicized instead.
-
Consider using a submenu instead of listing links in the body of a page.
-
If moving content between sites, are there any links that link to the old site?
