Skip to Main Content
Chat With Us

LibGuides Standards and Best Practices

:

Responsive Design & You

Why responsive design?

Responsive design across a desktop, table and mobile device.

Websites with a responsive design make it easy to read content across a variety of devices.

It allows for interaction without needing to resize or scroll because the content is placed in a flexible grid that flows based on screen size.

Responsive design also removes the need to design separately for mobile devices since every device is served from a unified design.

Column layout & responsive design

Responsive design helps you make beautiful web sites! Yet, attention should be paid to where content is placed in your guides because it can get rearranged to suit the screen size of the user.

This means your guide will appear differently across various devices. A beautifully designed multi-column layout created on a desktop computer will appear as a one-column page on a student's mobile device.

Take, for instance, this three-column page layout where the highlight of the page is centered in the top-center of the page.

Responsive design on a desktop computer example

Now consider this same layout on a mobile device.

Responsive design on a desktop computer example

Notice how the main content is not on top anymore. This important content might get overlooked since it is buried further down the page.

There is a predictable pattern for how columns get rearranged. 

  • The top box will always display first.
  • The left column will display second.
  • Additional columns will wrap around below the top box and left column in order from left-to-right.
  • The footer box will always display last.

 

How to place content

  • Place your most important content in the left column or top box since this is guaranteed to always be at the top of the guide.
  • Break up content so there is a natural flow when the columns are rearranged.
  • Group similar or themed content closer together in a column so they don't get separated.
  • View your guide on multiple screens (or resize your browser window to activate the responsive design scripts) before publishing.
  • Don't use empty columns to take up space.

The Homepage

The home page should use a 2-column 75/25 layout. An 80/20 or 70/30 layout is also acceptable. 

wireframe for homepage layout

The following boxes are recommended for this page:

  • Purpose: what the guide aims to do should be clearly stated on the first page. Limit this to 1-2 sentences.
    • Box placement:  either in the Top Box or upper left column.
  • Profile: a profile box for the author. Additional Profile boxes can be added for multiple authors or subject specialists.
    • Box placement:  top right column.
  • Recommended Resources: a box with links to additional recommended guides or resources.
    • Box placement:  at the bottom of either column.

Other Pages

Pages should normally be in a one- or two-column layout. Avoid three or more columns.

  • One-column layout for pages with a few boxes of content that flow better as full page content.
  • Two-column for all others. Consider a 50-50% layout for balance and good responsive design.
  • Three and more should be avoided as the content will move around a lot with responsive design.

Profile boxes should only be used on the home page. Don't use a profile box to take up space!