Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb

Search Results for: readability and accessibility

Improve your digital marketing strategies Feb. 23

February 14, 2018 by Web Strategy and Development

Students taking a selfie

Join us for a free half-day session about best practices for websites, blogs and social media. We’ll offer tips and tricks for online marketing and communications. This training is a terrific opportunity for faculty, staff and students who didn’t attend the session last September.

Making your statement in a digital world

You’ll learn practical strategies for managing websites, blogs and social media. We’ll answer questions like:

  • How do we repurpose our website and blog content and distribute it on social media?
  • What do users want my website, blog or social media to provide?
  • How do we become better strategic storytellers?
  • How can we utilize the newest features of the upgraded blog themes?
  • What are some tips and tricks we can use to make sure our site is accessible for all users?
  • How do we manage messaging on multiple social media channels?
  • What are some advanced strategies to increase our effectiveness on Facebook, Twitter
    and Instagram?
  • How can we best leverage photo and video content?
  • What can we do immediately to make our digital communications more strategic?

Key details

  • What: Making Your Statement in a Digital World, a free training session on websites and social media presented by Kevin Agee and Kai Raymer
  • When: 1-5 p.m., Friday, Feb. 23.
  • Where: Karls Hall, room 102
  • Who: Open to faculty, staff and students who manage content for Missouri State University websites, blogs and social media platforms.
  • How: This event is free; registration though My Learning Connection is requested. Please feel free to bring your own laptop or tablet.

Filed Under: Social media, Training, web strategy and development Tagged With: blog, blogging, Blogs, content, facebook, Social Media, storytelling, Training, Twitter, web and new media

Recap: Making Your Statement in a Digital World – Sept. 29, 2017

October 3, 2017 by Kai Raymer

person on laptop

We recently presented Making Your Statement in a Digital World, a comprehensive training session for Missouri State website, blog and social media managers.

Still have questions or need help?

We’re hosting two post-training open labs, to answer your questions and provide support. Please join us. No preregistration is required.

Key details

  • Dates: Friday, Oct. 27 and Friday, Nov. 10
  • Time: 2-4 p.m., both dates
  • Location: Meyer Library 106 Cheek Hall 100
  • About: Both sessions will be held in conjunction with the Web Help Desk open lab.

Access the presentations

The Sept. 29 training session was presented in four parts.

  • Readability
  • Blogging
  • Accessibility
  • Social media and visual platforms
    • Twitter
    • Facebook
    • Visual (YouTube, Instagram, aggregators, Snapchat)

wideshot of people walking on campus

Key takeaways

Readability

  • Use concise text and a scannable layout to make your content more readable. Put the most important information at the top.
  • Always ask, “how does this look on mobile?” Current and future students are researching your department/program on their phones.
  • Write less, people will read more. People will read more of a 300-word article than they will a 600-word article.
  • No one wants to put extra effort into reading. Seventy percent of people read at an intermediate (middle school) level. Newspapers aim for a 7th grade reading level.
  • Headings, bulleted lists and visual elements. Use them.
  • The YoastSEO plugin for WordPress is a great tool for improving your writing.
  • Improving your content readability has many benefits, including audience reach and audience action.

Blogging

  • Does your blog tell a story? Who is speaking in your story and how are you conveying that meaning? It’s important to start in the action and develop some sort of conflict that is resolved.
  • Be sure you are defining your audience; alumni, faculty, staff, and/or students?
  • Utilize the formatting strategies from readability while adding photography and pull quotes.
  • Update your blog with engaging stories at least once a month, if not more.

Students taking photo with Boomer

Accessibility

  • Accessibility means people with disabilities can use and navigate your website.
  • There are federal guidelines for accessibility. MSU, which receives federal funding, falls under WCAG 2.0 Level AA.
  • Think of your website as a public space (i.e. a courthouse or city hall). Make accommodations for all.
  • Accessibility overlaps with readability and best practices for websites. Having an accessible website means your website is better overall.
  • Alt text, headings and descriptive links are crucial for accessibility. Our Accessibility blog series also covers these topics, and more.

Social media and visual platforms

  • Share human – don’t be afraid to act like a human and interact with your audience one-on-one.
  • Set up a Facebook business account where people can find your contact information. Be prepared to respond to their questions.
  • Think visual – when on location for an event share raw photos, but when promoting the event utilize photo services to help boost your presence.
  • Video is king across all platforms. Be sure to add captioning for accessibility and to increase views.
  • Measure your success based off the goals your team sets: more followers, increased engagement, more views, etc. Keep a log of your analytics so you can compare data from previous years.

Students in computer lab

Filed Under: Accessibility, News, Social media, Training, Web Press, web strategy and development, WordPress blogs Tagged With: Accessibility, aggregators, blog, blogging, Blogs, content, facebook, instagram, presentations, readability, snapchat, Social Media, Training, Twitter, Web, web and new media, YouTube

Improve your digital marking strategy at this free training

September 5, 2017 by Web Strategy and Development

Boomer with students

Join us for a free half-day session about best practices for websites, blogs and social media. We’ll offer tips and tricks for online marketing and communications.

Making your statement in a digital world

You’ll learn practical strategies for managing websites, blogs and social media. We’ll answer questions like:

  • How do we repurpose our website and blog content and distribute it on social media?
  • What do users want my website, blog or social media to provide?
  • How do we become better strategic storytellers?
  • How can we utilize the newest features of the upgraded blog themes?
  • What are some tips and tricks we can use to make sure our site is accessible for all users?
  • How do we manage messaging on multiple social media channels?
  • What are some advanced strategies to increase our effectiveness on Facebook, Twitter
    and Instagram?
  • How can we best leverage photo and video content?
  • What can we do immediately to make our digital communications more strategic?

Key details

  • What: Making Your Statement in a Digital World, a free training session on websites and social media presented by Erika Brame and Kai Raymer
  • When: 1-5 p.m., Friday, Sept. 29.
  • Where: Karls Hall, room 102
  • Who: Open to faculty, staff and students who manage content for Missouri State University websites, blogs and social media platforms.
  • How: This event is free; registration though My Learning Connection is requested. Please feel free to bring your own laptop or tablet.

Filed Under: Social media, Training, web strategy and development, WordPress blogs Tagged With: Accessibility, blogging, content, marketing, new media, Social Media, Training

Rewriting table elements for mobile devices

August 21, 2017 by Philip Bowles

Laptop

Considering table accessibility

The web accessibility of HTML tables is notoriously tricky to manage. As part of our ongoing campaign to increase the accessibility of Missouri State’s web pages, we’ve added functionality that adapts the table layout on mobile devices.

While this functionality is primarily intended to increase data comprehension, it also helps users avoid zooming and side-scrolling on mobile devices. Furthermore, enforcing correct semantic HTML markup improves the accessibility of tables on our site. Providing valid and predictable tabular structures helps assistive devices such as screen readers consume our content more accurately and effectively.

How might a rewritten table look on mobile devices?

The following screenshots provide an example of how a table similar to the one above might appear when reformatted on mobile devices. The first image shows the how it might look on a desktop computer. The second image shows that same table in a mobile context after the script processes the content.

An example of a table when viewed in a desktop context

An example of how reformatting a table on mobile devices can improve accessibility and readability

Example structure

The basic outline of a table structure that will be reformatted for mobile devices is as follows:

<table>
    <caption>Optional but recommended caption describing the purpose or contents of the table.</caption>
    <thead>
        <tr>
            <th>Column 1 Header</th>
            <th>Column 2 Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1, row 1 data</td>
            <td>Column 2, column 1 data</td>
        </tr>
        <tr>
            <td>Row 2, column 1 data</td>
            <td>Row 2, column 2 data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Optional footer row column 1 data</td>
            <td>Optional footer row column 2 data</td>
        </tr>
    </tfoot>
</table>

We can visualize the above HTML like this:

Optional but recommended caption describing the purpose or contents of the table.
Column 1 header Column 2 header
Column 1, row 1 data Column 2, row 1 data
Column 1, row 2 data Column 2, row 2 data
Optional footer row column 1 data Optional footer row column 2 data

Restriction and enforcement

Current and future versions of Missouri State’s common.js file contain a small script that dynamically rewrites table elements on a page when viewed on a mobile device. It does this by placing the text of the column headers (th elements) into their corresponding data cells (td elements) throughout the table as data attributes. We use CSS to restyle the content in order to make the data easier to understand.

Our script performs several checks against the structure of a data table, then decides whether or not that table should be redrawn for mobile devices. The script will refuse to process a table if that table’s structure does not conform to a specified pattern of elements. The current HTML requirements for a table to be eligible for mobile processing are as follows:

  • A table must have 1 and only 1 thead element
  • The table must have 1 and only 1 tbody element
  • The table may have 0 or 1 tfoot element(s)
  • Any th elements in the table must be used as column headers and placed in the thead element

Why are there limitations?

These restrictions are in place to avoid incorrectly processing multi-dimensional or otherwise complex tabular structures. The key advantage to this approach is that simple, informative data tables receive the added benefit of being rendered in a more readable format on mobile devices. Conversely, complex tables can be overridden to retain their specified readability as necessary. If a table violates any of the above rules, the script dynamically adds a class to that table to discourage mobile reformatting. Notably, web editors can manually add the override class (“TableOverride”) to their markup to prevent those tables from being reformatted in mobile contexts.

The enforcement of these structures is also beneficial to assistive technologies like screen readers because simple tables are easier to parse. Simplifying or “flattening” tables into smaller, more consumable chunks is better for end users and more efficient for machines.

In addition to the requirements outlined above, we also recommend using caption elements to describe the purpose of your tables. Table captions are widely accepted as beneficial to the overall accessibility of a web page.

Notes on our accessible table implementation

Currently, our script does not offer support for tables with row headers. It will also refuse to process any tables with th elements used for row headers within the tbody or tfoot elements. Our development roadmap includes plans to eventually accommodate th elements when used as row headers, most likely in conjunction with the scope attribute.

Additionally, tables may exhibit unexpected behavior when colgroup or col elements are present. At this time, the script ignores these elements during processing. However, it is probably best to avoid these tags if you wish for mobile devices to correctly display your redrawn tables. If you find that you must use colgroup or col elements in your table, you should consider adding the override class in order to discourage processing by the script.

Also, remember to only use a table for its intended purpose: displaying data to users. For design and layout purposes, it is better to use a block-level tag such as a div. In addition, our current Web Press template provides a method for organizing the layout of your content.

More information about semantic HTML elements

You may visit these links for more information about relevant HTML elements.

  • The table element
  • The caption element
  • The thead element
  • The tbody element
  • The tfoot element
  • The th element

Filed Under: Accessibility, Training, web strategy and development

« Previous Page

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Omni CMS
  • Redesign
    • Academic websites
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: August 22, 2017
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
 

Loading Comments...