Elements of the University Website Design

Responsive Design

Responsive means that the site is designed to change format according to the device or screen size it is being viewed on. Our site looks one way on a large desktop screen, automatically changes format if you're using a tablet device (or size your desktop browser window down to tablet width), and changes format, again automatically, for smaller mobile devices like phones. This means that you need to be familiar with how your content appears in these various orientations to best plan how to share your information. For instance, the optional feature section at the top of the page disappears entirely in the mobile version.

Page Layout and Content Tab Sections

page features

At the top of the page, and first item you can edit in the CMS content tab, is the optional Page Feature section. This allows you to add one or more features at the top of the page above the page title and content areas. The feature section must have an image (599x398), and provides space for a title, a limited amount of text, an optional link to another page for more information, and an option to play a video in the feature space.

If you add a single feature, the image will display to the left and text to the right. With two or more, the text appears over the image as the cursor rolls over in the desktop orientation. On a tablet, the text automatically appears over the image, as there is no rollover functionality available. And in the mobile version, the feature area disappears entirely, which is important to remember depending on what content you're including in this section.

page intro

The Page Intro section is a new optional section you can include at the top of the page, below the Page Header and above the main Page Content. This section appears in a different and slightly larger font than the body text, and can be used for a subtitle or a small amount of text you want to highlight at the top of your page.

photo gallery

The photo gallery section appears at the top of the content area of the page, below the Page Header, but above the page content. You can upload as many photos in this space as you need, and the CMS will crop them to the appropriate size (524x348) when you save and publish the page. There is an upper limit to the size of the photo you should try to upload through the CMS. If your file is huge, the CMS may not handle it. We recommend uploading images that you have rights to (nothing borrowed off the Web) that are 2MB or smaller in file size, 1500 pixels wide or less. If you have a huge image that needs to be altered, and you don't have PhotoShop or a similar photo editing tool, you can contact our office to have the image re-sized before uploading.

page content

The Page Content section is where you can type or paste in the bulk of your content. The formatting toolbar at the top of the Page Content section gives you options for formatting your content within the context of the site stylesheets and templates.The Formatting on the Web section gives some guidance on using the formatting features in this section.

You can also create links in this section, upload files, and add images inline with the text. You can find information on how to perform these functions in the How Do I section.

content blocks

The content blocks are optional colored blocks you can add to the bottom of your page to feature specific content. If you add more than one content block, all the content blocks on your page will be sized to the same size as the largest content block, which means you may need to do a little content balancing to make sure the page looks nice. Most people will want to use the Flexible Block, which can create:

  • A text-only block;
  • A text-only block with one or more links;
  • An image (402x260) with text;
  • An image with text and links.

The Content Block also offers an optional Subtitle option that allows you to put a heading on the top of the block. This can be useful if you want to categorize your content blocks. Once created, all the content blocks can be re-arranged by dragging and dropping them in the Content  Block section.

Note that the content blocks appear below the content area in all formats, desktop, tablet, and mobile, though in the mobile version they are stacked single-file rather than two abreast.

Right side callouts

The Right Side Callouts allow you to add additional elements on the right-side of your page below the navigation section. Once added, these elements can be re-arranged by dragging and dropping them in the Right Side Callouts section. Each type of callout requires different content, with the general-purpose ones outlined below.

This callout should be used on the main level page of a department, and any other pages where you feel contact information is important. You can enter other important information, such as hours, in this section if desired, as well as creating links.

This callout allows you to add links to content related to the current page content without adding them into the navigation section. Add individual links with their URLs; re-order as needed.

This callout feeds the latest university tweet by default, or allows you to enter your department's Twitter handle to feed your own tweets.

This callout allows you to add an image to the right side with a title that links to another Web page. The image crops to 289x233.

This callout allows you to highlight the social media avenues that the public can you to connect with your department and the university. You add only the items that pertain to your needs, entering a title, link, and class for each type of social media. The class is the lowercase name of the service with no spaces. For instance, Facebook (title), http://www.facebook.com/univpugetsound (link), and facebook (class).

This callout allows you to feed the latest post on your blog onto the right side of your page.

This callout pulls up to three stories from the Puget Sound Stories hub that includes stories about this place and the people here. If there's a story or two in the hub that relates to your department, you can add the Puget Sound Stories callout to the right side of your page to display a callout to those stories. It can also be set up to randomly pull stories from the Stories hub.