Skip to content

Presenting Your Content

All site content should be placed within <div id="content">.

When adding content, please use properly formatted semantic HTML. There are a few built-in helper classes that you can read about in the customization section that will assist with basic site layout.


A Note on Content & Responsive Design

In April 2000, a famous essay called “A Dao of Web Design” was written. You can read it today and—aside from a few technological changes—it still rings true. In short, it advises designers to embrace the “webbiness” of the web. The web is not a printed book. You cannot align elements with pixel-perfect precision. You will never be able to get your website to look exactly the same on every device or screen. It is best to accept the ebb and flow of things and embrace the flexibility of your content in your readers’ hands.

Building web pages that rely on precise arrangements of content can get you into a lot of trouble. Designing websites that change their appearance based upon screen size can further complicate this very basic lesson.

Responsive web design is a technique that allows your content to respond fluidly to the size of the screen (or “viewport”) displaying it. When designing responsively, this fluidity must be taken into account in advance, for unlike standard, fixed-width HTML sites, responsive sites are intentionally designed to look and function differently depending on screen size. For example, when designing for a viewport, it may be necessary to anticipate and code for adjustments in the appearance and functionality of the navigation so that room is freed up on the screen for content presentation.

Happily, responsive design is built upon basic HTML and CSS and does not require that you learn new technologies.

So feel free to experiment with the layout of your content within these templates. Align images to the left and to the right, but always keep in mind that the layout will change as the screen becomes smaller or bigger.

Properly Formatted Semantic HTML?

The short definition of semantic html would be use the right tags for the right elements. A paragraph should be in a paragraph tag (<p>), a headline should be in a headline tag (<h1>, <h2>, <h3>, etc). Do not attempt create the look of a headline by using a <span> tag and applying ‘large font’ styling. For a better, more complete definition have a look at html5forwebdesigners.com/semantics.

The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.

Report an accessibility barrier