Skip to main content
UNC School of Medicine | School of Medicine IT

Responsive Design

Web Pages Are Not Like Print Documents.

In print (like a PDF, Word document, or brochure), everything is fixed. The layout never changes, and every viewer sees the same thing.

The web works differently. Web pages are designed to be responsive, meaning they automatically adapt based on:

  • Screen size (desktop, tablet, mobile)
  • Browser window size
  • User settings (such as zoom or larger text)

If content shifts, stacks, or resizes when the screen changes, that means it’s working as intended.

What Responsive Design Means

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 without zooming
  • Navigate without scrolling sideways
  • Interact with features easily on any device

Traffic to School of Medicine websites is evenly split, with roughly 50% of visitors using mobile devices and 50% using desktop computers. Because of this, all content must support responsive design to remain accessible and usable for all visitors.

The SOM Web System is Responsive

The School of Medicine (SOM) White Coat theme has been built to be responsive by default. It automatically adjusts layout, navigation, typography, and spacing based on screen size.

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

The Mindset Shift

A common frustration for new editors is expecting pages to look exactly the same on every screen.

Instead of trying to control exactly where everything goes, try to structure content so it works well on any screen.

Avoid trying to “force” layouts. Fixed positioning and manual styling often break responsiveness.

Responsibility of Editors

While the theme handles responsiveness, editors are responsible for adding content in a way that supports it.

  • Add content using built-in tools and styles
  • Avoid fixed widths, inline styles, or copied formatting
  • Ensure images and embedded content adapt to different screen sizes
  • Preview pages at different screen sizes to test responsiveness

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

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