Skip to main content
School of Medicine IT

Responsive Design

Responsive design ensures your website content automatically adapts to different screen sizes and devices, including desktops, laptops, tablets, and mobile phones. Visitors should be able to read content, navigate pages, and interact with features without needing to zoom, scroll sideways, or rotate their device.

Traffic to School of Medicine websites is evenly split, with roughly 50% of visitors using mobile devices and 50% using desktop computers. For this reason, all content must be added in a way that supports responsive design to remain accessible and usable for all visitors.

The School of Medicine White Coat theme has been built to be responsive by default. This means the theme automatically adjusts layout, navigation, typography, and spacing based on screen size. Editors do not need to design separate versions of content for desktop and mobile.

However, the content you add must also follow responsive best practices to ensure it works correctly across all devices.

Responsibility of Editors

While the theme handles responsiveness, editors are responsible for:

  • Adding content using built-in tools and styles
  • Avoiding fixed widths, inline styles, or copied formatting
  • Ensuring images and embedded content adapt to different screen sizes
  • Previewing pages at different screen sizes to test responsiveness

If content is added correctly, the theme will take care of the rest.

Responsive Images

Images were once one of the most common causes of layout problems on mobile devices. To prevent this, images on School of Medicine websites are designed to fit within the space where they’re placed. This means images will automatically scale down as needed so the page layout remains intact and visitors aren’t forced to scroll horizontally.

For example, if you add an image that is wider than the main content area of a page, the image will shrink to fit within that space.

Images will scale down as needed, but they will not scale up any larger than the size at which they were added to the page.

How to Test for Responsiveness

It’s important to check how your content displays on different screen sizes before publishing.

Resize Your Browser Window

The quickest way to test responsiveness is directly in your browser:

  • Open the page you’re editing.
  • Gradually resize the browser window.
  • Watch how content adjusts as the screen size changes.

As the window gets smaller:

  • Text should reflow naturally.
  • Images should resize to fit the available space.
  • No horizontal scrolling should be required to read content.

If you have to scroll left and right, something on the page is too wide and needs to be corrected.

Test on a Real Mobile Device

When possible, view the page on an actual phone or tablet. Real-world testing helps catch issues like:

  • Images appearing too large or too small
  • Buttons that are hard to tap
  • Content that feels cramped or hard to read