You are now in the main content area

Responsive Templates

The responsive templates consist of a mix of flexible grids and layouts. Responsive components are used to create responsive layouts and content within your pages.

Simply put, responsive design means that as a browser window changes size, the content is able to adjust accordingly, scaling down images, navigation styles, buttons, etc. in order to make the website user-friendly for the device (phone, tablet or desktop) it’s being rendered on.

Content created in a legacy template CANNOT be displayed in a responsive template using the Reference Component. This prevents non-responsive content from being displayed in responsive pages.

Template options

Working in responsive template

  1. Navigate to your root folder
  2. Find “inheritedContent” file 
  3. Open file   
  4. Double click on the area “Sample Site Title” to open the component – don’t click on the text “Sample site Title” (it’s a link!)
  5. Change title to reflect site’s name e.g. About Ryerson
  6. Create new or new predefined footer
  7. If you have site content for the right or left sidebars, this can be added within the left or right sections; it will then display on all pages within your site
  8. Click OK
  9. Close file

Related:

  1. Navigate to your folder via Site Admin
  2. Click once on folder name in tree view (left pane)
  3. Click “New”> “New page” in horizontal toolbar
  4. In window: Add Title

     Choose a descriptive title; The title will become your Page Title, navigation label and the H1 on your page.

  5. Add filename (name)
  6. Tick the "Show In Navigation" checkbox (optional)
  7. Select template type
  8. Click OK

For each new file you create, have the following information available before you begin:

  • Title – this is a required field; it will become your Page Title (important for SEO; is viewed in browser), your H1 and your default navigation label (if shown in nav)

  • Name – this is the filename that will display in your URL  e.g. ryerson.ca/your-site/file-name.html

Is this file shown in navigation?

  • Organize your content; keep in mind that navigation is determined by your site organization
  • By default, the file will be hidden. If you want it to display, go to the page properties and select the checkbox for “Show in Navigation”

Do I need a navigation title that is different from my Title field?

  • If yes, go to page properties and type in label in “Navigation Title”; otherwise, your Title will become the label that is displayed in navigation

If available, have the following metadata:

  • Tags/Keywords (these are predefined in CQ and are most useful for news and event lists)

  • Meta Keywords (user-defined)

  • Meta Description - this description will display on search engine results pages but can also be used as information to display in page lists.

Related:

 

Use layout components to customize your page:

  • Open your new file
  • On your page, Right and Left sidebars can be hidden or viewed – note space taken by each
  • Go to Sidekick> Components Tab
  • Select Layout
  • Choose the layout component suited to your content page
  • Drag component on page
  • Add other components to your page

Related:

Template differences: Responsive vs legacy

Responsive Templates
 Legacy Templates
No index files Index files are used in most sites (no longer required)
Root folder is site's homepage (homepage template)
 Homepage is an index file contained in root folder
Navigation is based on site structure Navigation created in Header file, and in some cases via page properties (see 750 template)
Page titles, navigation labels and H1 are determined when page is created
 No H1 present in legacy templates
Web style guide and colour palettes available
 No standard colour palette; user-defined
No external CSS, JavaScript or other code permitted CSS/Code permitted in header (not supported by Digital Publishing)
Inherited Content
 Right/left/footer files