Page Structure and Layout

Well-structured content that follows established web conventions are easier to perceive and understand. Properly structured pages is easier for visitors using assistive technology to interact with and perform better from an SEO perspective.

CHSSWeb is designed to provide a standard, compliant structure for your pages. The WYSIWYG tools provide flexibility but also require you to pay attention to how your are structuring you page.

Headings

Add headings and nest them logically to label sections of web pages according to their relationships and importance. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Avoid using headings solely to create a desired visual presentation if it comes at the expense of well-structured content.

Text

Keep text within in the standard fonts, sizes and colors provided by the WYSIWYG editing tools. CHSSWeb is designed with built-in font sizes and colors that meet accessibility requirements. The standard font styles are set to match the George Mason University branding guidelines. Avoid using different font colors or highlighting to show emphasis or importance. Remember, not everyone perceives colors the same way so you might be making it harder for some visitors to view this important content. Instead, rely on using the page structure to show importance. For example, instead of using red text to draw attention to an important deadline, create a heading called "Deadlines", placing the important deadline information in that section.

Tables are for data

Tables should be used to organize tabular data, not to create specific visual layouts. Include clear labels for columns and rows and ensure the table is easy to understand without visual formatting cues.

Digital First

We sometimes see editors spending significant amounts of time trying to replicate a printed layout from Word or pdf documents on the web. When creating content that will be displayed on the web, it is better to approach that content from a digital-first perspective, creating content specifically for the web. While it is ok to bring plain text in from other sources, you should create the layout, images and any formatting using the WYSIWYG editing tools. This allows your content to take advantage of CHSSWeb's built-in accessibility tools.

Styling and formatting content in Word and then bringing that into a web page often leads to significant amounts of extra markup, making the page much more difficult for someone using assistive technologies to interact with. Complex Word documents may contain long paragraphs of text and content structured in multiple layers of nested lists, neither of which translate well to the web.