Skip to main content Skip to navigation
Web Communication Spine Parent Theme 0.22.0 Released

Spine Parent Theme 0.22.0 Released

Version 0.22.0 of the Spine Parent Theme has been released and deployed to the WSUWP Platform. This is actually the 9th release since the last announcement of 0.20.1. We’re still working on our workflow for release posts and many of the changes are back-end or very minor. All are included here.

  • Provide a filter (spine_get_campus_home_url) to override the campus home URL in child themes. (0.20.2)
  • Refactor handling of Open Sans fonts so that only one request to Google for font files is made vs the previous configuration where multiple requests may have been possible. (0.20.3)
  • When using the Bookmark theme, do not show the gray WSU background on the home page. (0.20.3)
  • The class section-wrapper is now attached to any section wrapper by default in addition to the wrapper class specified in section configuration. This will help target all wrapped sections in a page. (0.20.4)
  • Add filters and actions so that child themes can alter how sections are built. (0.21.0)
  • Add support for custom section IDs in each section’s configuration. (0.21.0)
  • Link article thumbnails to their respective article. Previously there was no link. (0.21.1)
  • On some imported content, featured images may not be available. In these cases, we should not output the HTML markup for handling these images unless an actual source exists. (0.21.2, 0.21.3, 0.21.4)

New Features in 0.22.0

Columns in the page builder have always had their titles output as H2 elements. In 0.22.0, these titles can be configured through the column’s configuration to display as H2, H3, or H4 header levels. Column titles will continue to default to H2.

In the notes for 0.20.1, we announced that background images could be assigned to sections with the caveat that JavaScript would be required for them to actually work. As of 0.22.0, this JavaScript runs in the theme by default. If you provide a full image URL for “Background Image” when configuring a section, this will be converted to an inline CSS background image property after page load. In the future we’ll provide support for mobile detection and image handling as well. For now, the same image will appear on both.

The foundations of clear navigation

An emerging design trend hides a website’s navigation when viewing the desktop version. The menu is activated by clicking on an icon which design insiders call the “hamburger”.

Hamburger menu icon

The hamburger is useful for mobile sites where the screen real estate is small since it hides the navigation until the visitor taps it. However, using it on desktop versions presents usability challenges. This is an example of “just because you can, doesn’t mean you should”.

 

Time magazine home page
Time magazine’s desktop version of the home page. All major sections of the site are hidden behind the hamburger.

 

Time home page with menu
Clicking on the icon causes the navigation to slide out. Once a link is selected, the menu slides back and the main navigation sections are hidden from view once again.

» More …

Intentional Acts of Randomness

We’ve provided a number of utility classes in the Spine Parent Theme, among them, oxymoronic though it may be: intentional randomness. There are surely other applications for these random classes, but perhaps the most common use case is to provide imagery or styles across a whole site without having to target every page specifically. So, for example, one could design five header graphics that are then displayed randomly on twenty pages. Here’s how it works. » More …

Styling around the WSU Spine with custom CSS

The WSU Spine was built to provide a consistent brand framework for use throughout the University. It exists in sort of a balancing act trying to allow great flexibility while maintaining a familiar look and feel for visitors to WSU web properties.

The Spine is structured as such:

Screen Shot 2015-06-05 at 5.46.58 PM

The primary site navigation and brand elements are inserted as part of the #spine container. All content appears in the main element.

It is important to keep this page structure in mind when styling a page through CSS. The Spine provides default styles for many different elements to establish the initial consistent look and feel. It also relies on some of these styles to properly display a consistent experience in the Spine area itself.

Screen Shot 2015-06-05 at 6.00.36 PM

If you look at anchor (a) elements specifically, you’ll see a few default styles in the Spine. The above two are pulled directly from spine.css. All anchors are set by default to have no text decoration and to be crimson. Anchors inside the #spine container are set to be gray, but they retain the other default property applied to all anchors on the page of text-decoration: none.

A common custom style here is to add underlines or other properties with the intent of changing the anchor elements in the page content. When dealing with general elements such as anchor, some specificity is required to make sure only the intended styles are modified.

Screen Shot 2015-06-05 at 5.58.06 PM

Prefixing the rule with main applies the intended style and leaves the #spine container as is. Not prefixing the container causes the Spine to lose its default display properties with unintended consequences.

If you’re targeting a specific page, let’s say this current post, you can still use main in addition to other body classes.

Screen Shot 2015-06-05 at 6.07.53 PM

Anchors in the Spine will remain without underline, those in the main content area will have an underline, and those in the main content area of single pages will have a dashed underline and a lighter font.

Being aware of the Spine structure and targeting elements with the appropriate specificity will go a long way in maintaining the consistent look and feel that visitors expect. We’ll also continue working to provide more explicit defaults for crucial parts of the Spine to help prevent accidental overrides.

If you’d like to dive any deeper on this or have thoughts to share, we meet weekly on Friday mornings for open lab where this discussion would be perfect. 🙂

Web/Video accessibility slides

Presentation Slides

Round Robin presentation – Web, Video, Online Course Content

We will come back and have a more formal writeup about the presentation soon, but didn’t want to wait to post the presentation and video notes.

Video notes:

In Marketing our goal is to deliver a message to an audience

We spend hours crafting that message—but what if our audience cannot receive the message we are sending, or can’t understand it in the form we’ve sent it?

This can happen when our viewer has a disability…

VISUAL IMPAIRMENT

6% of the U.S. population is considered visually impaired=21,000,000 people

Everything from blurred vision to color blindness to full blindness

Mandated by FCC in 2010—a portion of all programming must be accessible programming.

All PBS programming must be accessible to people with both visual and audio disabilities

AUDIO DESCRIPTION

Hunger Games with audio description:

Audio descriptive services can run between 40.00-60.00 a finished minute to produce

SIGN LANGUAGE

http://www.btistudios.com/british-sign-language.html

20.00-50.00/hr for an ASL provider, plus recording and editing costs.

HEARING IMPAIRMENT

13% of the U.S. population is considered hearing impaired=30,000,000 people

One of the fastest growing issues—Know why?

Aging population

Hearing loss due to damage from ear buds

TRANSCRIPTION—a word-for-word translation of audio content into a text file. Available for downloading prior to watching the video

CLOSED CAPTION

http://www.btistudios.com/closed-captioning.html

Closed captioning software: Mac/Windows

Telestream

Individual user 1200.00

to institutional user 15,000.00

10.00-15.00 per finished minute of video, plus a setup fee—usually 50.00-100.00

Version 2.01 of the Media Access Generator (MAGpie)– free, do-it-yourself captioning, subtitling and audio-description software for digital multimedia developed by the CPB/WGBH National Center for Accessible Media (NCAM)– is now available to download at http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/magpie

Placement—Lower thirds or bug

Rae Photo

Key points to remember about CC:

Use one or two lines of text.

Caption the exact wording of speakers, including slang and grammatical errors.

Caption sound effects that contribute to the understanding of the content.

Synchronize captions with the aural content.

Use a simple sans-serif font, such as Helvetica, and proportional spacing.

Ensure high contrast between the text and background.

Use both uppercase and lowercase letters.

Open Captioning vs. Closed Captioning—Open is always on-screen, Closed can be turned on/off by the viewer and requires either built in technology in the monitor or a separate break out box.

The key with any of this is start early—all these steps take time and cost money—they need to be considered in the pre-production and/or idea phase of any project.

WSU Spine 1.2.4 Released

The latest version of the WSU Spine framework has been released as 1.2.4.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

Please visit the WSU Spine release page for a list of all changes made in this release. Thanks!

Spine Parent Theme 0.20.1 Released

Version 0.20.1 of the Spine Parent Theme has been released and deployed to the WSUWP Platform. This is actually the 7th release since the last announcement of 0.19.0. Many of the changes were quickly made during the development of the new WSU home page and are minor. I’ll include those as well!

  • Fix a non-working featured image meta box. (0.19.1)
  • Fix a misspelled filter for BU Navigation controlling the “Overview” text in the Spine. (0.19.2)
  • Fix an issue in which duplicate HTML titles were displayed (0.19.3)
  • Add the ability to assign section labels to page builder sections to aid with organization of sections that do not have column titles. (0.19.4)
  • Fix the Twitter account used when sharing via Twitter. Previously, the configured account would not have appeared. (0.19.4)
  • Apply mobile unfloat to large images so that text wraps properly. (0.19.4)
  • Add awareness of an individual article’s image status with has-background-image, has-featured-image, and has-thumbnail-image classes at the article level. (0.19.4)
  • Adjust main header styling when bookmark style is in use. (0.19.4)
  • Allow for use of parts/footers.php inside main by child themes. (0.19.5)
  • Navigation menus other than site and offsite will retain all custom classes. Previously, we would strip everything except for those expected by the Spine. (0.20.0)
  • Site and path classes are now applied to body to help maintain common styles throughout multiple sites. Path is the root path of the site, not the current path being viewed in a site. (0.20.1)
  • All singular page views now have single applied as a class to body. All not singular views have not-single applied. (0.20.1)
  • Add proper current and dogeared classes when BU Navigation is active. (0.20.1)
  • Add a customizer option for future support of “open by default” search behavior in the Spine. (0.20.1)
  • Hide Open Sans details when off. Show when on. (0.20.1)
  • Update signature link to HTTPS for wsu.edu. (0.20.1)

One other very interesting feature that was added in 0.20.0 is the ability to assign background images to sections. While it will be excellent in the future for various uses, it is currently in early stages and you’ll need custom Javascript to take advantage of this near term. As an example, we’re using this on the WSU Home page to handle the delayed loading of the fixed backgrounds as you scroll through the page. An option is also available to add a separate mobile background so that bandwidth can be limited. As this feature is expanded, we’ll talk more about the possibilities.

Your help requested proofing list of your schools, departments, programs, centers, offices, units

WSU UComm Web Team needs your help and expertise for about 3-5 minutes, please.

Attached is a link (see below) to a rough-draft list of schools, departments, programs, offices and units at WSU. The WSU Ucomm team is trying to create a list that is as current and complete as possible, so that these items can be incorporated into WSU’s universal analytics program, which is about to come online shortly.

Despite many searches, we know there are a number of items missing, so we are asking you to help us catch those that apply to your area.

REQUEST: Please take a few minutes to review this list, to add, delete or edit items that have been overlooked, and/or misnamed. Just insert your corrections, save the document, and email it as an attachment to rfrank@wsu.edu.

Please note, we have intentionally deleted that tags that go with these names, like “office of” or “school of” or “center for.” (The names of Campuses, Colleges, and Extension units are a separate list.)

The MS Word Tracking program has been turned on, so, your edits will appear in color, allowing us to identify and include them.

Thank you in advance for your time and help!

Here’s the link to the file on Dropbox  https://dl.dropboxusercontent.com/u/57009809/wsu%20schools%20departments%20programs%20offices%20list.rtf

Google Analytics naming and structure

google analytics logo

Just a quick heads up regarding Google Analytics.

University Communications is making some minor changes in the naming structure of central  Google Analytics accounts and a few other accounts that we help manage. This will NOT affect any of the data, it will just look slightly different.

For example, the preferred format for college account names will be the name followed by “– College”.   E.g.   “Arts and Sciences – College” or “Voiland – College.”

We’re trying to create a consistent format, so the new universal analytics will work smoothly with the accounts and data, and so the accounts will be grouped and named in a logical order/format.

There has not been a consistent account/property structure in the past, so it’s currently a bit chaotic.  Some are named using only urls http://XXXXX.wsu.edu, some use “WSU College of XXXX”, some “College of XXX”, some just the abbreviated college name, or acronym.

A full description with all the details will be presented next couple weeks, after the details are fully tested. Meanwhile, we just wanted everyone to know there might be some minor changes to central communication account names, and not to be alarmed.

If you manage your own college or campus Google Analytics accounts, we’re hopeful that you will choose follow the preferred naming and organization structure in the future, so we can employ a consistent format universitywide.

Thanks in advance for your help. Have a great week.

Open Lab Recap – February 20, 2015

This is a recap of topics covered in our weekly open lab, held every Friday morning from 9:30am-11:30am in ITB2025.

We talked about the Overview link automatically created in the Spine navigation when a section label is itself a link to a page. There is a way to change the actual text of “Overview” by setting the title attribute in the WordPress menu management screen. You can also add a generic link to the menu with “#” as the URL. This will create a section label without automatically generating an Overview link. The behavior of this is something that should be better documented on this site. We’ll work on getting something up in the near future.

External links in the Spine navigation and general content have Google Analytics campaign data attached to them. Not every URL accepts this parameters nicely. We need to look at whether external links should have campaign data to begin with. This will be tracked under issue #20 on the WSUWP Analytics repository.

Links marked to open in a new tab do not always respect that setting, even when using cmd-click to open the link. It appears this is an issue with the scripting we’re using for Google Analytics and it will be fixed in a future release under issue #225 on the WSU Spine repository.

It would be great if you could convert one layout to another on the fly in the page builder. At the moment an entire new section must be added and content copy/pasted to the new area. This will be tracked under issue #177 on the Spine Parent Theme repository.

The Carson College of Business home page was having some issues when we tried using the new Duplicate and Merge Posts plugin. I’ll be taking a closer look at that to find any bugs. Also, proper styles should applied to category specific calendar pages.

There should be a way to exclude labs from the labs.wsu.edu landing page until they are ready. Most of this will take care of itself when we have a better landing page that shows off recent posts from all the labs that are active instead of links to the labs themselves. This will be tracked under issue #2 and issue #3 on the labs.wsu.edu repository.

The WSUWP Content Syndicate plugin can pull in posts from other sites using the WordPress JSON API, but not yet with RSS. We should have a shortcode that will pull in an RSS Feed and display it as well.

The last modified date seems to be 8 hours off in the list table for posts and pages. This will be tracked under issue #22 on the WSUWP Admin repository.

Previewing a page builder page that contains an iframe does not work in Safari. It does work fine in Chrome. This is tracked under issue #154 on the Spine Parent Theme repository.

We also talked about text not wrapping properly around left aligned images. We’re working on exploring that a bit in issue #178 on the Spine Parent Theme repository.

Beyond bugs… 🙂 I also showed a brief example of the new interface that we’re working on to assign Active Directory editor groups to pages and posts. This work is coming along nicely and a first release will be available soon.