Skip to content

Mobile: All Templates

Jump to bottom Edit New page
Rob Knight edited this page Jan 12, 2018 · 1 revision

Make these changes on all Cascade Server template files.

1. Change doctype declaration on all HTML documents

Why: To support html5 features.

  1. Change to <!doctype html>

2. Add meta viewport tag to document head

Why: Tells mobile browsers to scale the page to the screen size of the device

  1. Add this code to the <head> of the template, above everything else: <meta name="viewport" content="width=device-width, initial-scale=1">.

3. Add page and custom regions at the bottom of the document head.

Why: This adds a third scope to the head:

  • global (UNIFORM HTML HEAD)
  • site (LOCAL HTML HEAD)
  • page (PAGE HTML HEAD)
  • custom (CUSTOM HTML HEAD)

Now we can add custom code to the document head at the page level. This means all pages in a site do not need to have js libraries or css files (billboards) that are required on home pages.

4. Wrap top links and search box in a row.

Why: for layout purposes

  1. Wrap #topNav and .search in a div with a class of row with an additional class of page-top.

@question: Should search come before links in the HTML source?

5. Wrap header content semantic <header> tag.

Why: ARIA/Accessibility Landmark

  1. Wrap the first three rows in a <div> tag with role="banner" and class="site-header.

The header should look like this (some code removed for clarity):

<div role="banner" class="site-header">

  <div class="row page-top">
...
  </div>
  
  <div class="row logo">
...
  </div>
   
   <div class="row">
...
   </div>

</div>

6. Add logo class to site title bar and reverse the order of the campus logo and site title regions.

Why: Styling and accessibility: page title should come before UCSC logo in HTML source.

On all non-www templates, reverse the order of the DEPARTMENT NAME region and the UNIFORM CAMPUS LOGO region.

So this:

<div class="row">                       
  <system-region name="UNIFORM CAMPUS LOGO" />
  <system-region name="DEPARTMENT NAME" />
</div>

becomes this:

<div class="row logo">                       
  <system-region name="DEPARTMENT NAME" />
  <system-region name="UNIFORM CAMPUS LOGO" />
</div>

7. Wrap main page content in <main> tag.

Why: ARIA/accessibility: identifies the main content of the page.

The <main> element maps to the ARIA role "main" in screenreader software. Wrapping the main content in this tag allows assistive technology to parse the elements of the page more easily.

8. Wrap footer content in <footer> tag.

Why: ARIA/accessibility: identifies the footer content of the page.

  1. Wrap the last two rows in a <footer> tag.

The footer should look like this:

<footer>  
  <div class="row" id="footer">
    <system-region name="FOOTER LINKS"/>
    <system-region name="UNIFORM CAMPUS FOOTER"/>
  </div>
  
  <div class="row" id="page_bottom">
    <system-region name="PAGE BOTTOM"/>
  </div>
<footer>

9. Add a third BOTTOM SCRIPTS region to the bottom of the document.

Why: This adds a third scope to the head:

  1. To be consistent with the naming conventions in the document head regions, add a new region called UNIFORM BOTTOM SCRIPTS.
  2. Add a third, page-level region at the bottom of the document.

They should appear in this order:

  • global (BOTTOM SCRIPTS) We will deprecate this one at a later date
  • global (UNIFORM BOTTOM SCRIPTS)
  • site (LOCAL BOTTOM SCRIPTS)
  • page (PAGE BOTTOM SCRIPTS)

Now we can add page-level code to the document bottom. This means all pages in a site do not need to have js libraries or css files (billboards) that are required on home pages. This also means we can load libraries of any scope at the bottom of the document so they do not block HTML rendering--an important performance consideration.

Add a custom footer
Add a custom sidebar

Clone this wiki locally