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.
- 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 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.
Choice 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.
Navbar 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:
To this after the 1st Media Query Trigger point:
To this after the 6th:
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:
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!
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