How-To Guide for Responsive EDU Webpages

A "responsive" webpage means that the content will respond/rearrange depending on the device or screen size that the page is being viewed on. This means that content on pages is now more fluid, and there are new ways to handle things like layout, image sizes, and use of tables in Web Manager. 

This guide is only for websites using the main, EDU web template.


Web Manager Templates 

Web Manager now has templates that you can choose for laying out the content on your page. These templates will adjust your content depending on the screen size it is being viewed on. 

Steps for Using Templates:

  1. If your page is a simple, one column layout, then there is no need to use a template.
  2. For pages that are more complex and need multiple columns, select a template in the Web Manager Toolbar.
    Templates Icon
    Options include:
    • Two Columns 50/50
    • Two Columns 75/25
    • Two Columns 25/75
    • Two Columns one-third/two-thirds
    • Two Columns two-thirds/one-third
    • Three Columns
  3. Insert your content into the columns.
  4. Columns will stack when viewed on smaller screen sizes, the LEFT column will always come first and the RIGHT column will shift beneath the left. 

    Desktop View of Columns:
    Template Columns

    Mobile View of Columns (stacked): 
    Template Columns

  5. Use a new WYSIWYG block for each set of columns on your page.
    • This will help keep your sections separate when editing.

Preview

You may have already noticed this, but when you preview a page you have device (or, screen size) options to preview your page. This way, you can make sure that your page looks how you want it to when it is being viewed on a desktop, tablet, or mobile phone

Here's what it looks like:

Preview Options


Images

With responsive webpages, images behave differently than they would on a desktop-only webpage - they adjust in size and shift with the content so that they never run off of the screen.

Sizing Images

  • Size images before uploading them into File Manager.
    • Dimensions for headers uploaded in the WYSIWYG are: 955px x 300px (height can vary, but length must be 955px).
    • View the image sizing tutorial.
  • Make sure the "width" and "height" options in Image Properties are blank.
    Image Properties

Page Properties for Headers

Some header images are uploaded through Page Properties. You will see this preview of the image in Web Manager if this method is being used:

Page Properties

Items to note:

  • Using Page Properties for headers will place the image above all of the page content - including the navigation set and headers. 
  • Only the Web Content Team has access to the images in Page Properties, let us know if you want to change/add an image on your page.

Tables 

Tables are always tricky, but on responsive webpages, they can make your content completely illegible on smaller screens. 

Here's what you need to know:

  • Avoid using tables altogether. 
    • Never use a table to layout your webpage, use a template instead. 
    • For complicated tables with a lot of information, consider other options such as a column template or headers with paragraph text. 
  • Only use tables for simple content, such as a contact section with icons and simple/short information.
    • Always set the table width to 100%. Dimensions for cells also need to be in percentages.
    • Make sure to preview the table in mobile view to ensure it is legible and not running off the page.

If you're having issues with tables, contact the Web Content Team for solutions.