The Main Content Area is where you place the topic-content of your page. Examples of typical content include:
- Photos (but not slideshows)
- Design elements (ie. a collection of graphic elements that are a part of a more complete design treatment)
The York 2014 theme is based on a responsive design template. This means that the layout adjusts itself based on the screen of the device your visitor is using. (People using a desktop computer will have a different layout than a visitor using a smartphone to view your site.) This means that all content in your Main Content Area will adjust itself:
- images will not be the same across all devices;
- text line length will shorten or lengthen; and
- tables will adjust -- and must therefore be coded in a particular way.
The maximum width of the content area is 965px but can be smaller based on the devices’ screen size that your visitor is using. Use that width to plan your content and it will automatically resize to smaller screen sizes. To ensure your content is displayed properly on all devices, please ensure the items do not exceed this width.
Formatting styles for common text elements such as headings, paragraphs, links, and lists are specified in the main template stylesheet (see Special Paragraphs section for further details). Links in the main content area are red with a dotted line underneath. If there are style needs that are not addressed here, please contact Marketing & Creative Services (email) for clarification.
All images should also have associated alt text unless the image is decorative. Alt text should be 100 characters or less. Do not describe the image literally; instead, describe its meaning on the page (eg. an image of three students at a computer could be “Tutoring can help you boost your grades” on a general page, or “Students completing group classwork for COMP 3900” on a class site.) If the image cannot be described in less than 100 characters, a long description should be used.
Headers are also strongly recommended – use them to outline the content on your page. Indicate headings using H1-H6 tags (rather than bolding/underlining your text). Mark up your headings based on importance rather than on how the heading is styled.