responsive design/media queries and templates

lauren.fraser's Avatar


24 Jun, 2014 06:04 PM

We've got a new design and I'm working on breaking it down into a template for Cascade. Sample pages here:

It uses media queries to display different divs based on screen size. I was hoping to get some input on best practices for cutting this up for a template(s).

Am I better of to make a system-region for each view/media query breakpoint? On some of our pages, the content will differ for smaller screens. So I think I would need those extra regions. So there would be a system-region DEFAULT for the full width experience, then system-region TABLET, and system region MOBILE, etc.

On the pages where it doesn't differ, wouldn't I be able to use velocity to populate the different divs? So I wouldn't need the separate system-regions for the breakpoints.

This seems like it would work, but not the most convenient for our end users. If I had our data definitions set up to include areas for all of the content, end users could edit in one place, then the velocity would take care of what is shown or hidden based on the media queries.

Thanks in advance for any input.

  1. 1 Posted by Eric L. Epps on 24 Jun, 2014 10:16 PM

    Eric L. Epps's Avatar

    What I've heard many people do is to have a Data Definition on every page. There's a default content area and a separate Mobile field. If the Mobile field is empty, the Default content is displayed in both places. If there's content defined in the Mobile field, Default content is served to larger screens and Mobile content is served to smaller screens.

    Multiple regions would also work, but I think perhaps the above approach might be easier for end users.

  2. 2 Posted by lauren.fraser on 26 Jun, 2014 04:38 PM

    lauren.fraser's Avatar

    Thanks Eric!

  3. lauren.fraser closed this discussion on 29 Aug, 2014 02:34 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac