Designing a Page

As a Web Editor, you will make decisions that impact how your constituents consume your section of the CalLutheran.edu website. Fortunately, Omni CMS configures most of the web design for you through its systemwide settings, page templates, and navigation menus, but there are several aspects that you have direct control over. How you curate your web content will influence its ultimate effectiveness.

To help you make informed decisions, a few key concepts of web design can guide you toward optimizing any page. Follow these principles for your content strategy, and you will be on a speedy path to success.

How to Design a Page

Understand the Structure of the Website

Before you begin to work on any individual page, it is important to become familiar with the basic building blocks of the CalLutheran.edu website in Omni CMS. At a broad level, you can think of the website as a series of nested boxes, with a smaller box  inside of each larger box. 

To help you understand this concept of nesting, review the following terms which start with the largest level and end with the smallest level:

• Website: This term refers to the CalLutheran.edu website as a whole (i.e., there is one main website at Cal Lutheran that is updated by many different Web Editors).
  • Section: This term refers to a portion of the CalLutheran.edu website that is designated for a department or unit (e.g., Admission, Health Services, Pearson Library, etc.), typically named in the banner toward the top of the screen. (Note: Occasionally, a grouping of pages within a section are arranged together in the right-hand navigation menu, which is referred to as a Sub-Section.)
    • Page: This term refers to any webpage within a section of the CalLutheran.edu website, and can be one of two types. A Landing Page (named index.pcf) typically serves as an overview page for a department or unit and is the root menu item in the right-hand navigation menu, whereas an Interior Page (named filename.pcf) typically serves as a basic page and is listed below the Landing Page in the right-hand navigation menu.
      • Content Section: This term refers to an area of a page that contains content, which can be added, deleted, or modified through the editor interface.

In your role as a Web Editor, you will typically work on different Content Sections within a Page of your department's or unit's Section of the Website. Therefore, you may also see a few couple of additional files in Omni CMS, such as file for Navigation (named _nav.inc) that controls the right-hand navigation menu, as well as a file for Section Properties (named _props.pcf) that controls various settings.

Curate for Web Consumption: Don't Just Copy-and-Paste

All content on the web should be designed for consumption on the web. While you may be working with content originally sourced from other materials, it is rarely a good idea to simply copy-and-paste the information into a webpage and publish it without arranging it in an optimal format. 

When copy-and-pasting from an original source such as a Microsoft Word document or PDF, take some time to format the information so that it is presented well for the web (i.e., follows the best practices in this article). Because your audience will consume the content on a website, it is time well spent to ensure a clean look.

Align Everything to the Left: F-Shaped Reading Pattern

As people consume a webpage, their eyes move from left to right, and then from top to bottom. They typically follow an F-shaped reading pattern, with more left-to-right movement toward the top of the page than toward the bottom.

Because of this pattern, it is best that you align everything on the left side of the screen as general rule — especially when using Headings and Styles. Keeping information on the left allows peoples' eyes to process more readily. Avoid centering information, unless you have a clear intention to break up the page fluidity.

Here is an example of a page that is strategically designed for the F-shaped reading pattern.

Make It Easy to Skim

Web user research indicates that people do not take the time to read webpages word-for-word like they read a novel. Rather, they skim to look for key pieces of information, spending 15-30 seconds per page to muddle through and find what they need. A good Web Editor understands this phenomenon and makes the important information easy to find. Consider using Headings and Styles to communicate the main points and leverage Images to create a visual hierarchy of content. 

It is also worth noting that a page can both be long and easy to skim; page length is not as much of an issue as you might initially think. Though the research on this does vary, consider that most modern web users are very accustomed to scrolling due to the effects of social media platforms. A page can be 500 to 1,000 words in length, or about a few scroll's worth of content, and still be in an ideal format for skimming.

Use Minimal Colors and Designs

Because the goal of web design is to draw the reader's attention toward what matters most, you want to avoid all unnecessary distractions. Adopt a utilitarian mindset for this; if an area of a page does not have a practical need to be visually emphasized, then it should not be visually emphasized.

If too much content is visually emphasized on a page, none of it will stand out. Likewise, not all important text needs to be in bold, and rarely does any of it need to be in color or ALL CAPS. In essence, the simplest approach to convey the meaning of content is usually the best approach.

Avoid Excess Space

Although the templates and settings in Omni CMS take care of most of the spacing decisions for you, the concept of "negative space" is worth keeping your eye on. The amount of blank space around your content plays a factor in the rhythm of how your content is consumed, and you typically don't want it to break up this rhythm for your readers.

Put simply, as long as you stay consistent with your use of space between each section of content and do not add excess space, the page will look good.

Consider a Snippet, Asset, or Component

Though most web design principles focus on minimalism, not all content needs to be provided in the format of plain text. There are over a dozen preset Snippets, Assets, and Components available for you to insert into any page, and they can provide very useful solutions for certain types of content. 

Consider inserting a snippet if you need a customizable content structure like an accordion or data table, an asset if you need a piece of official university-wide content, or a component if you need a more complex item such as an event feed or staff profile.

Use Original Content: Don't Violate Copyright Laws

The content within all pages of the CalLutheran.edu website must be created by an employee of the university or an approved content provider. Due to the serious nature of copyright laws, it is critical that you do not plagiarize content from a third party source — this applies to text, images, videos, and all other media. 

If you are unsure about whether or not to use content on your page, it is always best to play it safe. Feel free to Contact Us for consultation.

Provide a Clear "Call to Action"

The most effective webpages have a clearly defined call to action, especially if they are part of a promotion or campaign. Even if your page is not intended as a targeted campaign, take some time to recall why people visit the page. What do they want to do — or — what do you want them to do? This is the "call to action."

For example, consider a page that exists to promote an upcoming event. Your goal is to drum up excitement by pointing out the most marketable features so that people in your target audience want to register for it. In this instance, Register would be the primary call to action, and you would want to stylize this with a button Hyperlink that is prominent and easy to locate, without much visual competition.

In another example, imagine that you are working on a page that is part of a graduate admissions program. The page contains information about the program, highlighting the reasons why it is valuable to study the subject matter. Once your readers have seen this information, you want them to take the next step and Apply to the program. This call to action should be visually prominent on the page so that it is both clear and exciting to move forward.

Check on a Mobile Device

The CalLutheran.edu website has no set dimensions, which allows it to be "responsive" to different screen sizes. Rather than staying the same across all devices (e.g., desktop computers, laptops, tablets, and mobile devices), the width of a page automatically adjusts to each device it is viewed on. This is a great feature, considering that about 50% of your audience will view your page on a mobile device!

To help you visualize what your mobile audience will see when they visit your page, you can reduce the width of your browser window to be similar to a phone, or view the page on your phone after publishing.

Remember: It's an Art and a Science

Ultimately, designing an effective page on the CalLutheran.edu website is a perfect union of art and science. Rooted in research on web usability, Omni CMS provides you with an established structure for web editing. Within this structure, there are many principles that can inform your decisions related to design. The rest is a practice of artistic intuition — and a little tender, love, and care goes a long way in your web editing journey.