Skip to Main Content

Best Practices for LibGuides at UCLA

Suggestions and guidelines for using LibGuides to best effect in the UCLA Library.

Highlight Box

Got a box that you need to stand out from the rest? Use the highlight box style.

Gallery Box

Don't forget ...

... you still have a side column ...

... under the navigation menu.

Use a gallery box ...

... to add color, variety, and motion ...

... without taking up a lot of space.

This is a badly designed gallery.

The images should all be the same size.

You Don't Need Multiple Columns!

class="box-in-box">

Boxes Inside Boxes

Why waste a whole column for sidebar content? Just put your sidebar box inside a regular box!

There are many usability and navigation advantages to using the UCLA Side-Nav Template with 1 Content Column, and you should consider it the default template for most uses. However, many UCLA guide authors are used to the multi-column format of the Tab-Nav Template, and are having trouble adapting their content to the new look. This page provides visual examples of some of the techniques you can use to break up big blocks of text, fill empty white space on the right, and include sidebar-style content that doesn't warrant a full-size box.

The single biggest change is this: More pages, fewer boxes. You can even go so far as putting a single box on each page, though that's a bit extreme.

Highlights

Is some content in your box more important than the rest?

Highlight it! Here's how.

Highlighting draws attention to a paragraph or an important link. (Or you can highlight a whole box.)

Use a Tabbed Box... plus Break Up Your Link Lists into Columns

class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="s-lib-ctab-6164655-0" role="tabpanel" style="display: block;"> class="clearfix" id="s-lg-content-12222867">

You can use a tabbed box like this one to "layer" a bunch of related boxes on top of one another. Warning! Don't use a tabbed box to replace the normal box navigation in the left column! A tabbed box should never be the only one on the page, and also not on top of the column. It's only for when you've got too many boxes on a page and want to consolidate a few. 

Be sure to check out the other tabs, which demonstrate how to present a list of links in multiple columns... all in one box!

It's the exact same list, but now in columns! But can we change the number of columns?

Yes we can! Now it's in three columns!

Image Beside Link List

YRL Research CommonsPictures and graphics are a good way to add some visual interest to a page while breaking up the big boxes. They're easy to put into a rich text segment like this, just like the one on the right.

But what if you've got a list of links with a lot of white space on the right? You can also put an image there and use css to wrap the list around it! (Books and image stolen from Kati's Hungarian Studies guide.)

 

style="float: right;">

Make Your List Horizontal

Instead of filling white space with an image, you can fill it with the list itself by switching the list to horizontal rows. This option works especially well with Books from the Catalog. Here's Kati's list again, but with the entries side-by-side rather than stacked in one narrow column.

Link Options

Scrolling Boxes

Got a box with a really long list? You have a few options.

  • Consider giving thte box its own page or sub-page. (Remember: more pages, fewer boxes.) And use columns.
    • Alternately, put it on its own page but break it up into 26 boxes, alphabetically, and use box-level navigation so people can jump to specific letters.
  • If it's mostly static content, put it in a pdf and link to that.
  • As a last resort, use a scrolling box like this one.

Why a last resort? Because users who don't like page scrolling are even less likely to scroll through pages of content in a tiny window.

And now some links to pad out this box...