Responsive Web Design

Side by side comparison of the Brandeis homepage on different screen sizes

Image on the left is one way the Brandeis homepage might show up on desktop; on the right, how it might look on mobile

These website templates are mobile-friendly, or responsive. In other words, the site creates a seamless and attractive user experience across all devices (mobile, desktop, tablet). But what does that really mean, and how does it affect how you manage your website?

Flexible Layout

For content to be responsive, use the built-in features.

The new website templates utilize a number of content types that have been designed specifically for the Brandeis website. In responsive design, content needs to adjust (rearrange and stack) depending on the screen size. This ability to rearrange is very important for the responsiveness of the site, and for this reason, it's best to use the appropriate content type when building your site. This will ensure your content is formatted and aligned optimally for responsiveness. In other words, you may be able to build a table in a regular WYSIWYG editor, but it will not be responsive, so you need to create it using the Table content type.

Image Sizing

It is important to follow image size requirements.

In these web templates, images size requirements are based on the content type. It is important to upload images at the specified size, so they appear optimally on any screen size or device.

You can see how images and content change size by going to www.brandeis.edu and adjusting your browser window size.