With this release, one of our chief objectives was to reduce the time, effort, and skills required to take an existing site and make it mobile friendly.

How to Use Responsive Templates in Percussion CMS 3.3

Wed Nov 6, 2013

With Percussion CM1 3.3, one of our chief objectives was to reduce the time, effort, and skills required to take an existing site and make it mobile friendly. In this post, I’d like to cover working with our responsive templates in more detail, and exactly how they will save you time when making your site more responsive, and migrating content into templates that will work seamlessly across all devices. To learn about other features of our newest release, you can read my previous post.

What Makes a Template Responsive?

Responsive templates adapt how the page displays by “responding” to the device information regarding screen or viewport size. Rather than just shrinking the page as is to fit on a smaller screen, a truly responsive template will resize some elements, reorganize others, and display all content in the best possible configuration for a given device and its current rotation.

Built using the Zurb Foundation framework, Percussion’s responsive templates can be used to serve as the foundation of a mobile friendly website. The templates use a 12-column flexible grid that can scale to any size. Templates come with appropriate CSS, so no additional effort is needed to support various device browser sizes.

For example, imagine your current page layout looks like this:

A non-responsive page layout

Perhaps you've manually fixed the widths of your main content area or your logo and navigation are displayed in a fixed-width table. In any event, the current design is not responsive. What you would like is to migrate to something that looks like this:

A responsive page layout

In the updated design, the site would be responsive with dimensions being based on proportional relationships among elements and the size of the viewport as opposed to fixed pixel widths. On a small screen (phone or tablet) the navigation would collapse, the sidebar would flow below the main content area, and the lists would not show up at all.

Responsive Template on Mobile

Migrating to Mobile

So how do you apply responsive functionality to your pages? If you are a current Percussion customer, you can migrate your site to the new templates as soon as you upgrade to version 3.3. If you are a new customer, you can import your site using LiveFirst and then complete the steps below.

1. Create Your Responsive Templates

The first step in migrating to a responsive template is to create a new responsive template. Percussion provides a number of responsive templates. In fact the "Basic" responsive template matches the basic layout above. You would create a new template based on the Basic responsive template and then modify it to meet your desired layout.

2. Modify Your Theme’s CSS

The next step in your migration to responsive would be to modify your Theme CSS. Because Percussion's responsive templates already include CSS classes to manage the widths of regions, the classes you would need to add or modify would be to handle content that would appear different based on the browser size. For example, you might modify the CSS class for your lists region to include media queries that will cause that section to not appear when viewed on a phone.

3. Assign Pages

The next step is to assign the pages to the new responsive template. You can easily drag and drop pages to the new template and then open them to quickly preview the new design.

Migrating the pages to a new responsive template does not guarantee that the pages will now be fully responsive. If content within the main body of the page was styled with fixed widths (such as a table), those areas will still need attention to be made responsive. But the process listed above should greatly reduce the time and effort needed to move to a new responsive design.

4. Preview and Test

Integrated mobile preview is now hard-wired into Percussion’s preview window. Whether or not you’re working in a responsive template, you will be able to preview every page on your website and how it would display in a tablet or smartphone, with portrait or landscape rotation. This is a great way to identify which pages need to be made responsive first.

5. Publish

Satisfied with the look of your responsive pages? Go ahead and publish, and enjoy knowing that they will look great no matter where your site visitors are viewing them.

  

Dan Flanagan Headshot
Dan Flanigan
Vice President of Products | Percussion Software

Dan is a product management specialist with over 15 years of experience building new enterprise products and launching them successfully to market. He has extensive customer and sales facing experience, outlining product solutions that have been successful for customers from 300 to 300,000 employees. Well over 3 million users are using products he has launched. In his spare time, Dan spends his disposable income on Apple products and dreams of seeing his name in TechCrunch.