Web Strategy and Development Blog

Template deprecation plan

by

It’s important to remove outdated code and images when we make updates to the web template. As a result, we are adding a deprecation procedure to make sure users have time to make necessary changes.

These changes automatically apply to Web Press and the MSU Magazine Pro theme. However, standalone sites and applications may need additional review.

Deprecation procedure

We will use the following procedure to reduce the number of update-related issues:

  1. Identify outdated, non-secure and non-relevant code and images
  2. Mark these assets as “deprecated” in a blog post and other relevant locations
  3. Keep the deprecated code and images in production for 90 days after notifying users
  4. Assist as needed any units who need help with updates
  5. Remove the assets from production after 90 days

Example

The following example may help:

Web and new media determines an outdated footer with old branding needs removal. Therefore, we note it as “deprecated” in a scheduled blog post as well as additional locations. Next, we make the changes public, giving users 90 days to make any necessary changes. Finally, after 90 days, we remove the deprecated footer from production.

Questions

If there are questions or concerns, contact the help desk via phone at 417-836-5271 or email at webpress@missouristate.edu

Recap: Web Accessibility Summit

by

Web and new media staff attended the inaugural Web Accessibility Summit last month. The conference focused on website accessibility for professionals in higher education.

Key takeaways

Universal design considers the needs of a diverse human population. We must consider these needs during every step of the project. From backbone (code) to the voice (content). It’s much easier and less expensive to design for accessibility from the beginning.

Poor heading structure and lack of video captioning trigger the most user complaints.

Alt text reminder: Context matters. Ask yourself why the image is on the page. You’ll write better alt text that way. 

An OCR (Office for Civil Rights) complaint is not a lawsuit; it’s an opportunity to resolve a complaint. Open communication between legal counsel and the OCR is key.

  • Users can request accessible document alternatives. We have five business days to provide one.
  • We should remove old/outdated, inaccessible documents from the web. We actually risk more complaints and legal issues by keeping them on your site.

Crafting strong content is as much a vital part of good accessibility as anything else.

The W3C WAI-ARIA Authoring Practices document offers examples for creating accessible widgets.

An accessible modal dialog must: 

  • Show independence from the rest of the page,
  • Trap keyboard focus within the modal only, and
  • Be closeable via a button and the escape key.

The mission of higher education and accessibility are hand-in-hand. We are making education and information usable for all people. Being passionate about one is being passionate about the other.  

Slides

The Web Accessibility Summit schedule links to the session slides.

Faculty and staff free portrait day is June 19

by

Update your MSU employee photo on faculty and staff free portrait day, June 19 at Meyer Alumni Center.

From 9 a.m. to 4 p.m. in Room 504, Photographic Services will take your photo, free of charge.

You can park in Lot 40 or Lot 42, which are across the street from Meyer Alumni Center along East McDaniel. The Meyer Alumni Center parking garage is closed for repairs.

Attending this event ensures you an appropriate profile photo on university websites.

This is a great opportunity for new faculty and staff members to have their pictures taken.

Preferred attire is professional or business casual. Pre-registration is not required.

Contact Chuck Busby, office of the provost, at 836-6495 if you have any questions.

Key details: Free portrait day

  • Who: Missouri State University faculty and staff
  • When: 9 a.m. to 4 p.m., June 19
  • Where: Meyer Alumni Center, Kenneth E. Room 504
  • About: No pre-registration or cost required. Park in Lot 40 or Lot 42; the Meyer Alumni Center parking garage is closed for repairs.

Choose the photo you want

MSU employee posing for photo during free photo days
MSU employees have the opportunity to get a professional headshot taken by Photographic Services during faculty and staff free portrait days. Photos by Jesse Scheve/Missouri State University

You’ll review and select your photo on-site at the event.

Then, Photographic Services uploads your photo to the university directory – with no extra effort on your part.

Within a few days of the event, you will also receive the photo you selected via email.

Your photo is free. You can use it for other professional purposes.

Global stylesheet links to be changed

by

As we continue to make monthly updates to the template, one aspect that has received a lot of focus by our team is our global stylesheet. We originally utilized ASPX files in a way similar to media queries to serve up the final stylesheet based on device type (desktop/tablet, phone, etc.). This certainly created a very efficient stylesheet, but at the cost of additional maintenance and a blurring of style and structure.

As a result we have decided to switch to a more versatile, easier to maintain and still very efficient stylesheet architecture. We are also deprecating the current global.aspx and wp.aspx stylesheets.

What is marked for removal

Global.aspx and wp.aspx as well as their related CSS files have been deprecated and are marked for removal on Sept. 28, 2018 (version 2018.9.0).

This includes the following within /styles/2015/:

  • global.aspx
  • wp.aspx
  • global_base.css
  • global_desktop_and_tablet.css
  • global_iossafari.css
  • global_phone.css
  • global_sgf.css
  • global_wp.css
  • whichstyles.aspx

The following pattern-specific styles will also be removed along with the global styles as they have now been rolled into the main architecture:

  • Directory_Abstracts_Profiles.css
  • peopleprofile.aspx
  • peopleprofile.css

This does not currently affect sites referencing the 2010 and 2013 style sheets.

What you need to do

Web and new media-maintained platforms

There is nothing you need to do if you are using the following platforms to manage your site or blog:

  • Web Press
  • MSU-maintained themes on WordPress (for example, MSU Magazine Pro)

Beginning June 2018, these platforms will directly link to the new stylesheets.

Manually-managed and third-party sites and applications

For sites and applications outside of Web Press (including third-party applications) that currently link to the global styles, you will need to update the following link within the <head>:

<link rel="Stylesheet" media="all" href="https://missouristate.info/styles/2015/global.aspx">

Use one of the following new links based on the campus styles you incorporate:

    • Springfield:  <link rel="Stylesheet" media="all" href="https://missouristate.info/styles/msuwds/main-sgf.css">
    • West Plains: <link rel="Stylesheet" media="all" href="https://missouristate.info/styles/msuwds/main-wp.css">

Need help?

If you have any questions regarding this change or need assistance with how to update your styles, please contact the web and new media help desk.

Recap: Web Accessibility Clinic

by

Brian Heaton and Kristeena Laroue recently conducted a Web Accessibility Clinic. It was a comprehensive training session for identifying and correcting common accessibility issues with websites, including a screen reader demonstration.

Access the presentation

Key takeaways

Headings

  • Headings are an outline of your content.
  • Do not select heading level based on resulting visual presentation style.
  • Page title is heading level 1 (h1); first heading in your content will be h2; subtopic will be h3; etc.
  • Do not use bold paragraph for heading.
  • Avoid centering headings.
  • Headings should make sense out of context.
  • Headings divide your content into consumable sections.

Alternative text for non-text content

  • Provide alternate (alt) text for non-text content.
    • Images, including poster/flyer images (infographics).
    • Alt text should convey in text whatever meaning is conveyed by the image/flyer.
      • If the image has a lot of information, charts, diagrams, etc., the alt text should contain 1) a short description conveying the essential information presented by the image, and 2) a long description following the image or on another page.
        Bar chart displaying cost comparisons as detailed in the following paragraphs.

Link text (descriptions)

  • Very critical to the page containing the link and the destination page.
  • Links should make sense out of context.
  • Do not use meaningless or incomplete text like click here, learn more, download, etc.
  • Do not use URLs for link text.
  • Optimal link text is typically 2-6 words.
  • Each unique destination should have unique link text.

Content structure

  • Use paragraphs, unordered and ordered lists appropriately.
  • Write for your target audience.
  • Do not use a heading or bolded paragraph for announcement or notice. Use “Intro” or “Notice” markup instead.
  • Do not add blank paragraphs to generate separating space.
  • Do not create manual lists (e.g., starting lines with a hyphen).
  • Do not bold or italicize entire paragraphs, even one-line paragraphs. Treat just the important words.
  • Do not use all capital letters.
  • Avoid centering content.
  • The template is spacious by design; do not try to circumvent vertical spacing.

Tables

  • Used for presenting organized data.
  • Never use for layout (e.g., two columns).
  • Should always have headers (th). No need to bold or specify header as a heading style.
  • Do not combine multiple tables into one with embedded description row preceding each table.
  • Precede with descriptive heading, paragraph or include a table caption.

Screen readers

The screen reader demonstration showed typical page navigation and how page headings and links are frequently processed in a list. This emphasized how lists are consumed without benefit of the surrounding context, highlighting the importance of clear and complete heading and link text.

Hear your site on a screen reader

The testing center, located in Meyer Library Lower Level, room 010, has screen reader software installed and will have limited availability during the summer, with advance reservation. Please contact the testing center to make an appointment.

More assistance

Future sessions

Early in the fall and spring semesters a weekly open lab session will be focused on web accessibility where you can get one-on-one assistance with identifying and fixing accessibility issues on your website.

  • Friday, September 7, 2018, 2 – 4 p.m. Cheek 100
  • Friday, February 1, 2019, 2 – 4 p.m. Cheek 100