Search This Blog

Best practices: Columns or tables?

On the new CSUMB.EDU website, editors have a new tool for presenting content: Columns. Columns can look great and help pages from getting incredibly long on desktop displays, and can be very helpful in grouping information. But you'll want to think carefully about how you set up your page when using columns, and....

Remember Mobile

Because the new site is responsive, think about how your content will look on a phone-sized screen. At some point, it is all going to be displayed as one column, and your columns will be stacked. Column A will appear first, then Column B, then column C.

Does the relationship you set up between columns work for mobile?

In this case, no.

Someone viewing the content on a phone would see a list of all the employers, followed by a list of all the industries, and finally a list of websites.

So how to fix this?

Sometimes it takes re-imagining your content. Does this really need to be a table? What is most important to the end users?

In this case, we grouped the content differently. Each industry became a heading, with the employers representing that industry listed below. Rather than list the websites separately, we just hyperlinked the names of the employer to the website. Finally, we moved these groupings of content into columns to maximize the space available on desktops.

This resulted in a cleaner interface that works on mobile as well as desktops, and conveys all the same information.

Switching the body text to a sans serif font increases legibility, which is a measure of how easy it is to distinguish one letter from another. Characters in a sans serif typeface don’t have the tails that serif typeface characters have, which adds space between characters making them easier to read.

Changing the header font to a wider sans serif typeface improves legibility because header characters are no longer compressed, which makes characters difficult to read. We also adjusted the font size of all headers to improve readability, which refers to how easy it is to read words, phrases, blocks of copy such as a book. With…

On Monday, May 22, 2017, Web Services will improve its editor used to create content in csumb.edu.

This will be the first significant improvement to the editor since we launched the last redesign in February 2015.

In addition, we will provide some significant updates to how we create and display key elements, including:Improving how events get made, shared across campus, and displayed on the page.Enabling the ability to "clip" content from one CSUMB site and used on another.Improving how news is displayed on a page.Introducing several new content blocks that will provide more functionality.
Test the new editor
You can test the new editor on a separate site with duplicated content. Our internal user experience team is testing as well and we encourage you to play with it until it breaks. Then tell us about it at webservices@csumb.edu

We will also hold presentations at upcoming Technology Open Labs starting May 5 and running through May 19. Each lab will hold a presentation at …

Coming on Monday, May 22, when we go live with the new editor , you will see a new editing block called “clipping.”

You will be able to clip individual blocks on a page and insert them into your own page. This allows you to publish content that belongs to someone else, and when they update it, the content updates on your page as well.

Screenshots
To start clipping start by adding the clipping block to the page where you want the content of another page.

After adding the clipping block, begin clipping by clicking the begin clipping button.

After clicking "Begin clipping" you will now be in clipping mode. You can navigate to the page with the content you want to clip by using the site's navigation or if you already know the URL you can enter the full URL.

When you are on the page you clip by clicking the "clip part of this page" button to be able to select the blocks you want to clip from the page.