Web Style Guidelines
Welcome to CHSSWeb’s Style Guide - your go-to resource for creating a cohesive and compelling online presence. This guide is designed to ensure consistency, quality and a seamless user experience across all web platforms. The areas that this guide will cover include SEO best practices, content guidelines, photo and video guidelines, and style/design guidelines.
Search Engine Optimization (SEO)
What is it and why is it important?
SEO is the practice of increasing the quantity and quality of traffic to your site from organic search engine results. The goal is to make it easier for visitors to find your content online. Effective SEO allows your pages to rise to a higher position in search results. Search ranking algorithms are based on a page’s content as well as how current the information is on your site. Therefore, it is imperative to update or refresh your pages every three months, to help ensure optimal SEO rankings.
SEO Guidelines
Headings and subheadings: Use descriptive headings and subheadings to organize content and improve readability.
Keywords: Incorporate relevant keywords within the first 100 words on the page to help search engines understand the context of the page and improve search engine rankings and visibility.
Text hyperlinks: Link a descriptive word or phrase, NOT “click here, “learn more,” or paste an entire link onto a page (i.e. https://chss.gmu.edu).
URL structure: Use concise, and keyword-rich URLs to enhance user understanding and search engine indexing. The page title can be more descriptive – they do not need to match.
Mobile optimization: Remember that a majority of users will be accessing your site via a mobile device. Be mindful of the length of your content (lengthy text will require excessive scrolling). Ensure all web elements are mobile-friendly for a positive user experience and improved search rankings. Check what your page will look like on a mobile device by right-clicking on a page > Inspect > Toggle device top left corner to view on mobile or tablet view or you can drag your browser window to a smaller size.
Page speed: Avoid uploading large images or videos/presentations which can slow down the page loading time, which negatively impacts both user experience and search rankings. Avoid copying and pasting content with custom styling done in other applications, like Word. This slows down the page loading time and impacts search engine's ability to effectively crawl the page. When pasting content, it is recommended to leave the default Paste as Text option enabled.
Content Guidelines
Before you publish your content, ask yourself:
- Who is my target audience and what are their information needs?
- Is this content external visitor-focused or internal visitor-focused?
- Organize sections and content according to external visitor-focused needs. Try to identify what items an external visitor would want, even if it means grouping functions from different areas together.
- What are my strategic goals?
- Is the information clear and understandable?
- Is there a simpler or shorter way to say this?
Clear and Concise: Craft clear and concise content that delivers valuable information to our audience. Use short statements and bullet points over long-form.
Tone and Voice: Maintain a consistent tone and voice that aligns with our brand identity and resonates with our target audience. Use an active positive voice, avoid jargon/technical language. Review the Mason Brand guide for writing in the Mason Brand.
Call-to-Action: Include compelling call-to-action (CTA) statements to guide users toward desired actions. All of the web pages include customizable call-to-action buttons.
Page structure: Recommend 300 words, 500 max on a page. Use headlines to create an information hierarchy. Use bullets to easily obtain information at a glance. Avoid copying and pasting pre-formatted content, use the built-in web tools.
Data section: A new optional item for your homepage or landing page. Use this to display your stats, ranging from class size to the number of books faculty have written or the percentage of graduates landing jobs.
Sidebars: Recommend using side bars for contact information, location, hours, social media, and resource links, NOT whole sentences, paragraphs or photos.
Edit: Review your web pages to ensure there are no grammar or spelling errors prior to publishing the page.
News and Events: Create a News or Event item and feature it to have it appear on your homepage, do not create a page or place a news or events item on a page as it is usually forgotten and then becomes outdated.
Mason Brand Editorial Style: Be sure your content and language adheres to Mason Brand editorial guidelines.
Photo and Video Guidelines
Copyright and permissions: Ensure all images and videos used have proper copyright permissions or are sourced from reputable stock libraries. Proper attribution includes author and source.
Quality and resolution: Use high-resolution images and videos that are visually appealing and enhance the overall user experience. Image resolution should be at least 72 ppi.
Alt text: Include descriptive alt text for images to improve accessibility and search engine optimization. Rename the file appropriate to the content of the image (i.e. Students-Horizon-Hall), NOT the camera-generated default name (i.e. DSC_564192). This is required for 508 compliance.
Consistency: Maintain a consistent style and visual theme across all visual content to reinforce brand recognition.
Photos: No clip art, flyers or imagery that includes text. Resolution 72 ppi and under 1 MB (.png’s recommended for web). Do not stretch or squash images.
Videos: Recommend videos be 1-3 minutes and uploaded to YouTube. Use central department channels, NOT personal channels. The standard video quality is 720p.
Relevance: Choose visuals that are relevant to the content and align with our brand image.
Source: Use the built-in tool to upload images. Do no link to images hosted elsewhere.
Style/Design Guidelines
Color palette: Follow Mason’s brand and color palette to maintain a consistent and cohesive visual identity.
Typography: Use Mason’s brand web-approved fonts or fonts that provide readability across all devices.
Whitespace: Utilize whitespace effectively to create a clean and uncluttered design.
Brand logo and placement: Ensure that all pages have the Mason and CHSS branding and clearly state the department/unit/program/center.
Responsive design: Ensure all web pages are designed with a responsive layout to adapt seamlessly to various screen sizes.
Body text: Try to limit body text to 300 words, 500 max. Body text should always be left aligned. Use bold/Italics sparingly. Use call-to-action buttons.
Marquee/Banner images: Use high-res, images free of text, logos or graphics overlaying.
Data section: A new optional item for your homepage or landing page. Use this to display your stats, ranging from class size to the number of books faculty have written or the percentage of graduates landing jobs.
Sidebars: Recommend using side bars for contact information, location, hours, social media, and resource links, NOT whole sentences or paragraphs.
News and Events: Create a News or Event item and feature it to have it appear on your homepage, do not create a page or place a news or events item on a page as it is usually forgotten and then becomes outdated.