The way you fill the space on your web page will drastically impact navigation and accessibility. In order to create consistency for your audience, please use the editable regions on the web page. These regions can be turned on or off depending on how you want to design your page. However, by using the editable regions, your content will take form on the page with background HTML that ensures a clean design across all devices. After all, over 50% of MSU’s web traffic now occurs on mobile devices.
A web page is comprised of editable regions, which are illustrated in the following image:
- The banner at the top of the page is called the header and the resources available at the bottom of the page comprise the footer. These two regions, highlighted in green in the image above, are fixed and cannot be customized.
- The navigation sidebar and contact information to the left of the page are customizable, but are set by the _sidenav.inc and _contact.inc files at the root of your site respectively. These areas are highlighted in orange.
- The small text just below the banner represents your page’s breadcrumbs. While this is customizable, in most cases you shouldn’t need to edit this text as it will automatically follow your website’s page structure as you create and edit pages. This region is also highlighted in orange.
- The remaining space on your web page consists of editable regions. You may add a number of these regions to the page or keep it limited to just a few. The above example shows two editable regions that are highlighted in yellow and include the title of your page as well as the main content.