Welcome to your new website!

Our CLAS websites have been redesigned from the ground up to streamline and enhance the student experience while elevating the Wayne State brand. Everything from images to links and menus has been standardized to ensure accessibility, quality and uniformity of our brand and voice. We've distilled the most important items here that you'll need to be an A+ web editor.

For a complete list of marketing resources, visit clas.wayne.edu/marketing.

Editor training

Website editors are required to complete web and accessibility training to receive access to CLAS websites. Editors who have been inactive for more than six months will be subject to deactivation from their assigned sites.

Web maintenance checklist

The Communicator Audit Checklist compiles a list of checkpoints that CLAS communicators and editors should complete weekly, monthly and throughout the year.

Content

CLAS uses the Wayne State Editorial Guide (based on AP style) for all content (digital and print) writing and formatting.

Every page on your new website has been reviewed and edited for spelling, grammar, relevancy, brevity and clarity (in AP style). This less-is-more approach helps improve readership and quickly connects users to the information they're looking for.

💡 Pro-tip: Whenever you're in doubt about how to format content that you're adding/editing, compare it with similar content or pages noting the style and format precedent.

⚠️ Important: All time-sensitive site content (text/information, not pictures) is required to be updated at least each semester. Outdated content (e.g., deadlines, time-sensitive information/lists older than one semester) may be flagged with a notification sent to the department communicator(s) for correction and is subject to removal at any time.

  • Content areas

    The website's general placement or arrangement of content should be maintained in its designated areas and formats unless otherwise stated. You can modify these areas (within their standard format) but their content shouldn't be copied/moved to other areas, e.g., moving career information to the admissions page. This includes:

    Admissions information

    Admissions content, e.g., deadlines, requirements, etc. have been consolidated into the Admissions section of the website (example). This means that admissions content should not be added to the program pages directly but instead linked over from the program page back to the admissions section of the website.

    Career content

    With the exception of the career insights or brief facts and snippets, career information should be consolidated to the career outlook page (example).

    Directory and people listings

    Faculty/staff listings (especially with pictures) should not be listed or duplicated on individual pages and instead should reference the directory (example).

    Home page

    The opening sentence on the home page is a brief career blurb linking to the career outlook information. This section should remain brief (paragraph or less) and be career focused. Do not list program, advising and other information here.

    Other home page elements, such as the large buttons, should lean towards the interests of prospective students rather than current students.

    Program updates

    As our program pages are being optimized for SEO (search engine optimization) and optimal usability, please coordinate all program page changes with the CLAS Marketing Team to be in sync with these efforts.

    Student groups and learning communities

    Department/program websites can have a "Student groups" page featuring a consolidated list of groups and student orgs that the dept./program would like to feature (see example). Pages should not be created to host student org information/events but rather link to the student org's official DOSO listing (see example) or the website/social media account of their choice.

    Learning communities can be added to the student groups page as a listing but they should link to the central learning community page. Dedicated pages should not be created to host learning community information/events. Since the learning communities are primarily discovered through the central page, all relevant updates and information should be posted there.

  • Spelling and grammar

    Our marketing team uses the Grammarly (a free spelling/grammar checker) browser extension to perform spelling and grammar checks as we edit pages. Grammarly flags all content that is potentially misspelled or grammatically incorrect. Like with any spelling or grammar checker, all flags should be verified by a human for accuracy and relevancy. Be sure to install and enable this before editing your content.

    Learn more about Grammarly and link checking.

  • Editing/writing content

    Consider these points when editing/writing content on your websites:

    • Does the student/audience know what next steps to take?
    • Can anything be shortened (or added) for clarity?
    • Can I add any links to the resources that I'm referring to?
  • Text formatting

    Follow these best practices:

    • Always use sentence casing for titles. Page titles for degree pages are the one exception to this
    • Use headings to designate sections and hierarchy of content within a page (always start with h2)
    • Emphasis: Call out text within a paragraph with bold or italics rather than color (this feature is disabled by default)
    • If the information is critical, it should be preceded by the word, "Important" and in bold. This is to account for visually impaired users relying on a screen reader (screen readers don't read/interpret bold and italics). Example: "Important: Remember to speak with an advisor first prior to registration"
  • PDF accessibility

    All PDFs posted to the websites should be formatted for accessibility as the university is required to provide accessible content to impaired persons. Any PDFs not meeting this criteria (inaccessible) is subject to removal at any time.

    Our approach for PDF accessibility compliance on CLAS sites has been to use PDFs only when absolutely needed and instead convert them to HTML (where possible) which is more easily made accessible.

    Resources:

  • Style guide cheat sheet 📗

    For content audits, the university editorial guide (AP style) will be used to evaluate and make necessary corrections to pages, news articles, etc.

    • Improper nouns are lowercase including page titles, section titles, etc.
      • Example: "the math department" vs. "the Math Department," "seminars and colloquia" vs. "Seminars and Colloquia"
    • Semester designations are lowercase
      • Example: "in the fall of 2022" vs. "in the Fall of 2022"
    • Titles are only capitalized when they're before the name
      • Example: "Professor James Pickle" vs. "James Pickle, Professor of Chemistry"
    • Degrees are only capitalized when spelled out
      • Example: "Master of Science in Physics" vs. "Master's Degree"

    See the Best Practices for Content and Styling Guide.

  • Things to avoid ⚠️

    Do not:

    • Add large amounts of short-lived content that become difficult to maintain, e.g., dated content, deadlines, names listed in several pages that have to then be updated when the person transitions out
    • Copy and paste from Microsoft Word, PDFs and similar programs or websites into the web editor. This causes inconsistencies in styles, fonts, colors, sizes, etc.
    • Paste screenshots of documents into the page to serve as text. Screenshots are not readable by web pages, search engines, etc. nor do they meet accessibility requirements
    • Insert documents (Word docs, PDFs, PowerPoints, etc.) in place of page content. Example: A PDF document should be converted to a web page, e.g., College bylaws
    • Add redundant text, e.g., "For details on each of these see below." "For more info, click the button below."

 

Page structure

Use section headers to organize content in a hierarchical order. This is less about design or font size and more about structure. Do not use the header functions just to increase the font size or bold the font. Section headers are used by assistive devices (accessibility) and search engines to discern the contents of your page.

⚠️ Important: Because the page title itself uses an h1 header, do not use h1 headings in the body of your web pages as this will confuse assistive devices and search engines. Always begin with h2.

Topic (h2 header)

This is an example sentence.

Subtopic (h3 header)

This is an example sentence under the subtopic.

Sub-sub-topic (h4 header)

This is an example sentence under the sub-sub-topic.

Header styles

Design changes

CLAS websites entail the following:

  • Spacious design using a less-is-more approach
  • A stronger focus on visuals high-quality imagery
  • Homepage elements (in order):
    • Call-to-action buttons can be customized to departmental needs
    • Spotlights randomly rotates each time the page loads featuring the six most recent entries by date. Note: Events should not be posted here.
    • News items features the four latest entries by date and automatically populates an image/thumbnail if one is not provided
    • Events (lower left corner) disappears when no events are present
    • Promotional area for static image or video (lower right corner)
  • Accordions elements to visually sort information (available by request)

Modular design

Your new website is built to adapt to mobile and desktop viewing. Additionally, any empty content blocks, e.g., no current events, or no published articles, will automatically be hidden until content is populated. This helps us to ensure that we always have an active layout.

Under-menu buttons

New to this version of the site is the inclusion of under-menu promotional buttons that can be placed on any web page that has a left-hand menu. As our standard practice, Request info and Apply now calls-to-action buttons will be placed on each degree program page.

Iterative design

Evolving design elements are a staple of this class of websites. New analytics and auditing have enabled us to constantly monitor the health and effectiveness of website features and performance. With this approach, some elements have and will be implemented on a trial basis as we adapt and optimize.

Images and photos

Our new sites are very visual in nature compared to the previous design. Thus, we've implemented new image guidelines to ensure the highest quality visual presentation.

  • Images and pictures must be clear (not blurry) and sized correctly (not distorted)
  • All images and pictures not in conformance are subject to review and removal

Visit our image and photo sizing guide for free and licensed WSU and stock photos to use in your projects.

Dimensions and size

Size = width x height

  • Hero images (the first banner/header images at the top of a page). Important: Hero images should feature promotional photography, not flyers, graphics or text
    • Size: 1600x580
    • Template: Canva
  • CLAS spotlights
    • Size: 600x600
    • Template: Canva
  • News items (preview image/thumbnail)
    • Size: 770x434
    • Template: Canva
  • Event Calendar
    • Size: 600x600
    • Template: Canva
  • Advisor photos
    • Size: 417x317
    • Template: Canva
  • Faculty/staff profiles (departmental directory)
    • Size: 800x1126
    • Template: Canva
  • View all CLAS Canva templates

Hero image text

⚠️ Important: Graphics with designed text (e.g., a quote, flyer, etc.) is prohibited on hero images due to accessibility compliance issues (for people with disabilities), aesthetic inconsistencies (style and scaling across mobile devices) and search engine optimization problems. Hero images should feature photography only.

Image file size

All images should be less than 300k in file size, not dimensions. The larger the image's file size the longer load time induced on the website (this is bad).

To reduce your image file size, you can upload it to Squoosh to compress the file size for use on the website. For power users using Photoshop or another image editor, you can reduce the image quality via your export settings to reduce the image file size (under 300k).

Video

Whenever possible, videos should be embedded into the website rather than linked to (unless it's not appropriate to do so for the context of the page). See an example of an embedded YouTube video. Audio/video posted on behalf of the university must be hosted on official university accounts (e.g., no personal YouTube pages).

Accessibility

⚠️ Important: All video content published by the university must be accessible [to people with disabilities] with closed captioning. Closed captioning should be completed before, not after, the distribution of the video regardless if it is linked or embedded on the website.

See instructions for how to close caption your video:

Note: The automatic captioning is not sufficient alone for accessibility guidelines. You must edit and verify the captions, adding punctuation and capitalization as necessary and publish them to your uploaded video.

Menus and navigation

Your website's menu and page structure has been optimized for the best user navigation experience (and also search engine friendly). Because navigation is crucial to website health and performance, the CLAS Marketing Team must approve and add all new pages or remove existing ones to ensure their ideal placement with the existing content and that the overall site integrity is maintained. This also allows web editors to focus on the content itself rather than the complexities of navigation.

To request a menu change or add/remove a web page, email clas@wayne.edu.

⚠️ Important: Adding a new page without the proper URL structure or connecting it to the menu or removing a page without cleaning up its referencing links will have cascading effects across the website. Please contact the CLAS Marketing Team for adding/removing pages so that we can properly configure these.

Links

Fixing broken links

Use a link checker like Ahrefs SEO Toolbar to scan and identify broken links on a web page (which will be highlighted in red).

By default, you should set links to open in their current window.

Link formatting

Links should be embedded or clickable rather than simply typed out. Don't write out "https://" visibly on the page.

Incorrect: For more information, visit https://research.wayne.edu.

Correct: For more information, visit research.wayne.edu.

Rewrite links in context

Rewrite sentences using "click here" to incorporate the link in a more descriptive way. The link should make sense when read out of context.

Incorrect: To view the WSU Editorial Style Guide, click here.

Correct: For more information, view the WSU Editorial Style Guide.

News and spotlights

News and spotlight articles have several features:

  • Social media share icons
  • Images with captions
  • Pull quotes
  • Photo gallery slider

What's the difference between news and spotlights?

A news item is an article that answers who/what/when/where/why/how in the opening and generally just reports what has taken place. It's written in such a way that the reader can stop reading at any time and still come away with the whole story.

See a sample news article

A spotlight is a featured story or biography profile (e.g., getting to know M. Roy Wilson) that is evergreen (not necessarily time-dependent) and generally focuses on the human element, as opposed to an event, for example. Spotlights can include stories on faculty, staff, advisors or programs but are preferred to be student/alumni-centered where prospective students can "see themselves" at Wayne State. ⚠️ Important: Events should not be posted as spotlights.

See a sample spotlight

For help and inspiration on ideas for news items, see our news story samples.

View News Manager tutorial

Faculty/staff profiles

At the present time, the faculty/staff directory is set up and managed as a separate website, i.e., clasprofiles.wayne.edu, that each department website then links over to. The two websites, the directory and department websites, share the same aesthetic so that the navigation experience is as seamless as possible between them.

To add/remove faculty/staff or change positions (e.g., full-time to part-time), please submit a CLAS faculty/staff directory change request.

⚠️ Important:

  • You must submit updates/notify the CLAS Marketing Team when there are personnel changes as we have no direct way of knowing when people begin or vacate positions at the university.
  • This change only applies to the heading/section where each faculty member resides within the directory.
  • The contents of the faculty/staff profile, i.e., picture, title, office information, publications, etc. are the responsibility of the faculty/staff member.
  • For questions/assistance, please see the help guide for CLAS profiles.

The available headers to choose from are denoted as follows:

  1. Chair/Associate chair/Director
  2. Full-time faculty
    • Includes tenured, tenure-track, lecturer
  3. Adjunct, affiliated and visiting faculty
  4. Emeritus
    • Includes only active emeritus
  5. Part-time faculty
  6. Academic advisors
  7. Staff
    • Includes student assistants
  8. Research staff
    • Includes Post-doc fellow, research fellows, research engineers, research associates, research assistants
  9. Clinical staff
  10. Graduate students
    • Includes graduate teaching assistants, graduate research assistants, Ph.D. students

Email addresses and contacts

Shared/group accounts

Only official Wayne State email addresses should be listed on Wayne State websites for official university business on behalf of departments, faculty and staff. Specifically, department and faculty/staff email contacts should list an @wayne.edu email address on wayne.edu websites (when related to university business) – no Gmail, Yahoo, AOL, etc.

You can request a Group ID (e.g., anything@wayne.edu) for your needs using the C&IT Group ID Request Form. They can also assist you with email forwarding if you need this account to forward email elsewhere for your management needs.

In addition to reinforcing the Wayne State brand, using university email accounts helps delegitimize scammers using non-wayne.edu emails (a big problem here) and ensures proper account security and support through C&IT.

Formatting and aliases

When possible, always use the email alias name@wayne.edu when listing email addresses on the website rather than the default AccessID@wayne.edu.

This format is more friendly, personal and memorable. Most users have firstname.lastname@wayne.edu set up by default when the email is created in addition to the default AccessID@wayne.edu. For help with setting up your preferred email name or alias, see how to set my preferred email name.

Vanity URLs

While all departments and programs are hosted under a clas.wayne.edu address, e.g., clas.wayne.edu/history, each have a vanity URL, e.g., history.wayne.edu, that can be used for marketing purposes on flyers, business cards, etc. This and other relevant links are located in your department's marketing documentation (link included in your editor welcome email).

Faculty/staff profile URLs

You can now reserve a personal vanity URL for your faculty/staff profile or website to include on your email signatures, business cards, letterheads and more! Plus, they look so much cooler than https://clasprofiles.wayne.edu/profile/ak8629. 😃

Name Example vanity URL
First name Last name go.wayne.edu/firstname-lastname
Joshua Wilburn go.wayne.edu/joshua-wilburn

To request a personal vanity URL, email us at clas@wayne.edu.