Look, a beautiful header image. Good start!

This page will serve as a good example of how to format your content to be in line with the style of drew.edu. By following this layout, you can be sure your page is optimized for readability and search engines as well. There is actually a lot of content here for a single page, but because of the way it’s laid out, it’s still readable and professional looking.

Start Headings at 2

Level 1 is reserved for the title. Don’t use headings to make a sentence stand out. They’re too big and too bold, and that doesn’t make contextual sense. Typically after a heading you’ll always want to have a little text to describe the new subtopic of the page you introduced. If the topic would benefit from a further subdivision, then…

Use a Heading Level 3

While you shouldn’t overuse headings, they are a logical division of content topics. They’re automatically formatted to fit with the fonts and styles we’re using consistently across Drew University branding.

When you want body content to stand out, use bold text. Please don’t overuse bold text however. Think of it this way, when everything is bold, nothing is bold. As I also just demonstrated, italics are another way to add emphasis to content, likely why the html tag is <em>, short for emphasis.

All Headings, H2-H4 Should Use Capitalized Case

This will further define them as section headings, and fits in with the consistency of the rest of the site. When the site’s content is consistent, it looks far more professional.

hillUse Photos (Like This!)

Photographs are of course a great way to add visual emphasis to your content. Typically you’ll want to align these left or right, though center is sometimes a valid option.

You’ll want to re-size your photos to be reasonable within your page. 500 pixels wide max is a good rule of thumb for landscape photos, 350 pixels wide for portrait. This will make them substantial for desktops, but also scale well on smaller devices.

Header Images

The header image on this page is a little tougher to create. It requires a specifically horizontal orientation, and must be at least 1093 pixels wide and a max of 450 high.

Picture Galleries, and Shameless Self Promotion

Say you run obstacle course races for charity, and to get the word out you have a set pf photos you want to display. A gallery is your best bet.

Optimized for Responsive Layouts

You may have noticed that drew.edu is now a responsive layout. This means that the site displays differently based on your screen size and/or device that you’re viewing it on. Go ahead and take a look at this page or any part of the site on your desktop, then on a smartphone or tablet. You’ll notice photos become full width rather than aligned right/left, columns stack, and more.

Grouping Content in Tabs

When we have a few pieces of content to group together, tabs are an easy way to convey that information. Learn how to make tabs on the shortcode guide.

General Formatting

Don’t be afraid to use bullets, and/or numbered lists. They are easily readable an look much better than just leading numbers or letters on sentences. Here are a few other guidelines:

  • Never underline text. This is a style reserved for links only.
  • ALL CAPS should never be used unless it is the proper name of something like UKNOW.
  • Never make a link that says “click here.” Instead add context to your links by describing what you’re directing people to.
  • Use alt text on photos, captions only when appropriate.
  • Only use tables for data, not layout.
  • No font colors.
  • Single spaces after periods, not double.  <-This is too many spaces.
  • Phone numbers should be in the form 973-408-3000, so that enabled devices see them as real numbers and are able to dial them.

Pasting Content

This is the eraser tool!
This is the eraser tool!

When you copy and paste content from another source such as an email, word document, webpage etc., you often drag with it unwanted formatting. You might not notice it at first, but it could appear as a font not normally on our site, extra or incorrect spacing, underlines, on and on. There’s a pretty simple fix for this 95% of the time, use the eraser tool.

Sometimes content will persist even after the eraser tool. In that case, contact the webmaster if you need help.

Videos

Videos are easy to put into your pages, and a great way to get a point across. The video shortcode one of the easiest.

Columns Are a Great Way to List Links/Information

Got lists of content you need organized? Columns are for you.

Links I Want You to Click

The first col has a little sentence, and some links I want you to use.

  1. Link 1
  2. Link 2
    1. Link 2a
    2. Link2b
  3. Link 3
  4. Link 4

News, or Something Else

Perhaps this column has some event I want you to know about. I’ll write up an exciting teaser here!.

Fake Event

Monday, July 35, 25pm
Nowhere Hall, Drew University
Register Now

The Last Column

At this point, I’m out of ideas. But you might have need of a third or fourth column. The page will fit up to four, but keep in mind they will get progressively thinner as you add more. As our site is responsive, you should ideally be thorough and re-size your browser window to see how your page looks. Once you reach a certain size the columns stack however and this won’t be a problem.

In Closing

There are lots of ways to format your pages. The ideal configuration really depends on the content and what you’re trying to accomplish. If you want to rethink things on a larger scale such as overall structure, flow, or something not covered in training, feel free to set up a meeting with me.

If you need help with basic WordPress functions or something covered in the training, take a look at the guide (which includes step-by-step video tutorials) and see if you can walk yourself through it. If you still need help, contact its@drew.edu for additional WordPress training.