Skip to main content

URMC Logo

URMC / Web Services / Style Guide / Content Formatting

Content Formatting

Here are some general rules of thumb for you to keep in mind as you go along building your web site. For more information about any of these concepts see the Contribute and Kentico support materials.

Display Modes

All templates now have three separate display modes: Desktop, tablet, and mobile. Each mode is triggered based on the screen size of the user. The thresholds for each mode are shown below.

  • Desktop: Screen width > 1024px
  • Tablet: Screen between 1024px and 641px
  • Mobile: Screen width < 641px

Tables are for Data, Not Layout

Examples of well-formed tables and tables that will and will not be made responsive can be found here.

Tables should be used for tabular data only, not for layout of content. While sometimes it is easier to create a specific layout using a table, it creates problems. For one, users who are visually impaired and who use screen readers to browse the web will not see the content of a table in the same order that you do. For another, in this mobile age, tables do not collapse nicely on small screens and can make your site difficult to use. Nevertheless, there are times when tables are appropriate, and should be used.

Tables consist of rows and columns. Some tables may use a header row or column with data labels that describe the content below or next to them. In HTML, spacing can be applied to different aspects of the table: The border, cell padding, and cell spacing. In the URMC template, spacing and borders is handled automatically with stylesheets. You should leave these settings blank when creating new tables.

If you do find yourself struggling to place parts of your content on your page in a particular layout, contact us and we can help!

Images Need Alternate Text

Whether you are using Contribute or Kentico, when you insert an image into a page, you will be prompted to add "alt" text. This alternate text appears on some browsers when a user mouses over an image, and it is also a visually impaired user’s only way to know what the content of the image is. Always write alternate text as though it were a caption for your photo. It doesn't need to be long (it should be less than 250 characters), but a user should be able to understand your image without being able to see it.

JPEGs are for Photos, GIFs are for Line Art

We recommend that you use JPEG for photographs and images with gradient or continuous tone because they support millions of colors. Use GIF for line art, such as logos and charts. GIFs also support transparent backgrounds, where JPEGs do not.

Linked Text Should Match Destination Page

Always make sure that the text you link accurately describes the page you will be linking to, and use relevant keywords wherever possible. Using link text like “click here” or “learn more” does not improve your ranking in search engines because you might have dozens of these throughout a site. In addition, they do not inform screen readers of the link destination; a visually impaired user will know only that a link goes to “click here.”  

For an excellent summary on link text best practices, read Writing Hyperlinks: Salient, Descriptive, Start with Keyword, an article from the web experts at Nielsen Norman Group.