Best Practices


Think Globally

Is what you're doing applicable to this page exclusively or should it be applied to all pages?

  • You've created a page but noticed that there should be more space under the page title.
  • Images you place on the page need some kind of border.
  • Tables on the page could use space underneath them.

These are some examples of issues that can be "fixed" by the author, but probably shouldn't. It is often that case that a "fix" for one page could be needed on some or all other pages. If so, then a developer can provide a site-wide solution - which is always the best way to go, and also the most consistent.

Before you apply a fix, take a second to think if it could go beyond the scope of the page. if your fix applies to more than one page, it may be a good candidate for a global change. If so, consult a developer and let them know what you're trying to do.

The Clear component

Use it *sparingly*. Please.

Many or One?

it is not uncommon to have a page with multiple paragraphs on it. But does that mean one text box or a bunch? Usually, it means one. Use the text editor to delineate sections with a header (just like this text box is built). This way if you need to edit the text on the page you have one click and one save. The only time you would want to break up the page into separate boxes is if you wanted to reference those individual paragraphs in other places of the site using the reference component.

Which Header?

Headers (and their content) should be though of in terms of heirarchy. Header tags (h1 - h6) help define content structure. h1 is the page title and only one of these can be used per page (though this is changing). h2 would be a sub-header (think something like News (h1) > News Story Title (h2) ), etc.

By default, text box headers are "section" headers (defined with an h3 html tag). If you define a section header, every header in the box should be an h4, though the option for h3 is available. Try to keep content in a heirarchy. In this section, there is one section title, but many h4s.

and ps

that is an h5 tag under an h4, usually used as a paragraph header.

h6 is available too, with no extra space around it.

Keep related information together

For example, one text box should not contain information about a class schedule and a quote from a former student. Try to segragate unrelated information.

On the other hand, if you've got an image, a table and some text that are all about the same thing, you may want to put them in a plain box component. It is not necessary to do so, but it does help if you need to reference that content elsewhere on the site - you would reference the box and all three elements would show from the reference.

To Nest or Not to Nest? 

FOR ALL PAGES using the Box component:

There is an "End of Box" indicator beneath the box "Add or drop components here". It was too easy to inadvertently nest boxes. And while boxes can be nested, be careful - too many nests can force CQ to stall or the page to crash. Plus, instead of having the ability to reference each box, you'll only be able to reference the top parent. Make sure that each box contains only what it should. Nested boxes should be very rare. For a trick to see what a box contains, use the Box admin tab and type "border:1px solid red;" in the CSS Style area.