Responsive Design Made Easy with Catalyst Theme

Responsive Design Made EasyThis week’s post continues to explore the Responsive Design functionality provided in Catalyst Theme.

In the previous couple of posts, I’ve looked at the benefits, both to you as a site owner and your visitors, of using a Responsive WordPress Theme like Catalyst instead of other options that are available for displaying websites on mobile devices.

I’ve also looked at the basics of how Responsive Design works by using the Media Queries feature in CSS3, and the main options that Catalyst provides for easily implementing Responsive Design on your site.

Catalyst Responsive Design Options

Implementing Responsive Design involves applying different CSS code for different Media Queries each of which corresponds to a given range of browser widths (the browser width being determined by the device being viewed upon).

Catalyst Theme provides three ways to implement the CSS code for each Media Query using the Responsive options in Dynamik Theme.

These are:

  • to write your own CSS code
  • to build CSS code using Catalyst’s Custom CSS Code Builder tool
  • to select from the Default Media Query Options provided by Catalyst

I’m going to look at the last of those options which should suit those people who want a Responsive site but don’t want to get involved in CSS coding.

Using the Default Media Query Options for Responsive Design

When Responsive Design is activated (in Catalyst Core Options > Content), the Responsive Options tab appears in the Dynamik menu.

This shows the six Media Queries that CSS code can be applied to when using Catalyst Theme.

For each one of these there is a text box where CSS code can be added using either of the first two options above.

However, by clicking on the Responsive “Show/Hide Options” button instead, the Default Media Query Options provided by Catalyst are revealed.

Default Media Query OptionsDefault Media Query Options

These options show six ‘areas’ of the site, to each of which you can apply a default Responsive Design option (or indeed leave as being unresponsive) using the drop down selections provided.

Selecting a particular option will result in pre-configured CSS code being applied to one or more Media Queries that will affect that area of the site as it is viewed on different browser widths.

For some areas, such as the Navbar area, there may be a choice of Responsive options, each of which will have a different effect on the site as it is viewed at different widths.

Default Responsive Navbar OptionsChoice of Responsive Options for Navbar Area

Here we can see the four alternative Responsive options for the Navbar depending on what you find most suits the site concerned.

Clicking the [?] at the side of the drop-down opens a pop up that details what the effect of each option is, and what media query (or queries) will trigger the effect described.

Responsive Navbar OptionNavbar Vertical Menu Responsive Design Option

For example, here we can see that the Vertical Menu Responsive option triggers changes to the design layout of the Navbar on both the 1st and 6th Media Queries.

That means the Navbar goes from the full width version like this:

Responsive Design Example

To this after the 1st Media Query Trigger point:

Responsive Design Example

To this after the 6th:

Responsive Design Example

A different option might produce different effects at different trigger points.

For example, the Tablet Dropdown option makes just one change which is triggered on the 1st Media Query, but also provides a totally different type of Navbar, like this:

Responsive Design Example

As I hope the above shows, the Default Media Query Options provided by Catalyst Theme help make it relatively easy to create and adapt sites such that they provide a better viewing experience on mobile devices while maintaining a consistent look and feel to your site.

Even without coding!

Have fun

David

David Pritchard is the author of the Catalyst Theme Cheat Sheet – the 250+ page guide that helps users make the most of Catalyst Theme. Licenced Catalyst Theme users can get their FREE copy in the downloads section of the Catalyst Theme forum. David also has a site with guides to using Catalyst Theme, WordPress, SEO, internet marketing techniques and other topics at http://www.FastStepInternetMarketing.com