CMS Tip: Check the Page Layout in Different Browser Sizes

Posted on 8/25/2016 12:46:38 PM

This is part of a series of tips for web maintainers. The Web Team posts hints and tips about the CMS, MyIUP, IUP Mobile, and the interactive map each week.

When designing CMS pages, remember to check the layout in different browser sizes to ensure it will look good at other screen sizes. Simply make your browser window larger or smaller to simulate other screen sizes; you’ll see the content adjust as you do.

The iup.edu site has been updated to be responsive, which means that content adjusts, or “responds,” to the screen size. Virtually all elements of the page—such as text, image, font, and location and display of navigation—adapt to the screen size of the device on which it is being viewed. For instance: the font size may increase on a smaller screen so it is easier to read, images may be smaller so you don’t have to scroll as much, and navigation collapses so it is out of the way. Content is displayed in the most readable, accessible layout, providing a better experience.

Content is like water

Content is like water, by Stéphanie Walter ( http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/, CC BY-SA 3.0)

Responsive in Action

The page you are currently viewing is responsive. If you viewed it on a phone, tablet, or desktop computer (or even a widescreen TV), you are going to see all of the same content, but it will be arranged a little differently in each view. Font size, image size, even placement of the menu and other navigational elements are different from view to view.

In contrast, if you look at a nonresponsive page on those same screens (such as any unconverted IUP.edu page) you are going to see the same exact layout on each screen size, and you will have to “pinch and zoom” on smaller devices.

What do you have to do to make your pages responsive?

Just use the formatting and styles that are available in the CMS and PageBuilder editors! Check out the current how-to’s for page layouts for more details. But remember, your page’s layout will change depending on what screen size your visitor is viewing it on, so keep that in mind as you work.

Also look out for additional how-to’s for advanced layout options in PageBuilder coming in the future.

Jessie Groll