Template changes here and there

As you may have noticed recently, there have been several small design tweaks throughout the website. All of the changes have been made for a specific purpose and were based on constituent feedback and modern web best practices. So, let's talk about a few of them.


Maybe the most easily overlooked change would be the removal of the breadcrumb bar. The reason for this was three fold. First, most modern websites don't use them because they can end up looking messy if you're not careful. For example, a news article that appeared under the "News and Information" tab would often end up with a breadcrumb that looked something like this: "Home > News and Information > News Archive > 2014> CSUB Geology Students Receive Geological Society of America/ExxonMobil Field Camp Scholar Award." That's a REALLY long, yet not uncommon breadcrumb string. Second, the links that appeared along the string could easily become broken. Simply move a page or directory and the entire breadcrumb string becomes broken, and thus useless. Third, according to our analytics, they were seldom used. This was the nail in the coffin: so, they're gone. A simple gray bar now separates the banner area from the main content.

Left-side navigation

This area has received a few tweaks. First, any directory that has additional pages within it now includes a header over the links titled, "In This Section." I think this more readily identifies this section as navigation and not a random collection of links. Second, all pages now include the "Back to Previous Page" option (replacing the "Up to" link) and a link to the CSUB home page. In the near future, I'd like to be able to add a section home button for each site. For example, on the HR website, no matter what page you find yourself on, there would be a link on the left side navigation that would take you to the HR home page. This will take some additional tweaking at the template level, so stay tuned.

Right-side feature boxes

Maybe the most visible of the changes has been the removal of the colored boxes behind each of the right-side feature boxes. The colors generally made it difficult to make text stand out without large text, bolding, italicizing, or all three (not a good idea, by the way). In addition, under the enhanced CSU accessibility guidelines, we must now maintain a certain level of contrast between foreground (text) color and background color. When blue text appeared in a blue box, that was getting close to being out of compliance. So, the boxes are now gone and have been replaced with simple headers. Please review all of your feature boxes and make sure they're still displaying content as you intend.

Banner option added to organized links page

This is the most straight-forward change that has been made. Now, when using or creating an organized links page, you can add a photo banner across the top just like a regular content page.

Header font

The header font has been changed from Proxima Nova (a proprietary font) to Open Sans (a Google Web font) for two reasons. First, it helps create a cleaner layout without the need for excessive boldness. Second, when we start the process of making the website mobile friendly / responsive, Open Sans is much more likely to render correctly than Proxima Nova on a variety of devices.

An important change up for discussion

One change I'd like to discuss with everyone concerns the left-side navigation. Right now, everyone is putting these links in the order they think people are most-frequently accessing them. However, no one has data to support the order they’ve chosen and, usually, when visitors are unfamiliar with a website or you add additional options, alphabetical makes the most sense for first-time navigators. Much of our website assumes visitors know what they’re looking for when, generally, visitors wander around until they find what they need. We need to help visitors by putting things in a logical order.

In turn, I'd like to suggest we starting putting the left-side links in alphabetical order. I think this makes the most sense to a first-time visitor who sometimes isn't sure what he/she is looking for. But, I'm open to ideas and feedback. Please feel free to comment on this change (or any of the other changes) using the DISQUS box below.

Stacey Childress
CSUB Web Communications Manager

comments powered by Disqus