Today saw the release of Catalyst Theme Version 1.5.

In addition to some neat stuff like the inclusion of HTML5 markup and default styling changes, the main change is the inclusion of easy to use Responsive WordPress Theme design functionality.

This is a major new release of Catalyst Theme with the inclusion of Responsive Design options extending its versatility even further than before.

What is Responsive Design?

With the rapid growth of smart phones and tablet devices such as the iPad etc, many people are now viewing website content on these mobile devices.

In many cases, the layout of a website’s content does not lend itself to being displayed as well on a mobile device. This is because of the obvious difference in screen size of most  mobile devices compared to the web browser widths permitted on a typical computer display.

Sometimes the whole page is shrunk to an almost unreadable level to fit the mobile browser width, or often some elements of the page get mangled in the attempt to do so.

With a Responsive Design site though, you can determine how the website content is displayed for different browser widths using CSS code.

This allows the site layout and format to change depending on the width of the browser in use and so providing a responsive site.

Responsive WordPress Theme Functionality in Catalyst

The Responsive Design options in the new version of Catalyst Theme mean you can now make your site display different layouts for different browser widths and so look better on mobile devices as a result.

You can also adjust the size of headings, text and the styling of most other elements for the site to suit different size displays.

Catalyst Theme’s Responsive Design options are all neatly contained in one tab of settings which can be seen below and allow you to change how your site’s layout is arranged and displayed for upto 6 different instances of viewing or browser width.

Catalyst Theme Responsive Design Options

Custom CSS code can be included for any or all of the 6 different ranges of viewing width options catered for.

The custom CSS code for a layout that will be displayed for a given range of browser width can be added by hand (if you know CSS coding), or by use of the very clever Custom CSS Builder included in Catalyst Theme and which allows non-coders to build CSS code simply and easily.

Default Responsive Design Options in Catalyst Theme

Alternatively, Catalyst provides some default options for Responsive Design settings with pre-configured layouts and design styles.

These allow for things like the Sidebars to progressively stack up for example – first with Sidebar 2 moving to be underneath Sidebar 1, and then for both sidebars to move underneath the Content pane for smaller display sizes.

Or for the Header Text to automatically center itself and for the Navbar menu items to stack vertically.

In other words, you can now go from this layout for a full width browser on a computer:

 Catalyst Theme Layout for Full Width Browser Viewing

….To this layout for viewing on a mobile phone type device:

Catalyst Theme Layout for Narrow Width Browser Viewing

These pre-configured options make it easy to produce a Responsive site design, and the option to add or build your own custom CSS code too makes Catalyst a truly Responsive WordPress Theme!

Catalyst Theme Cheat Sheet for Responsive Design Options

In addition to the 250+ page Catalyst Theme Cheat Sheet that details all the existing functionality, there is now an additional 25 page guide to the Responsive Design options in Catalyst.

If you already have the main Cheat Sheet, you can find the Responsive Design Guide included as a separate file in the Cheat Sheet Members area. Just login using your previously supplied username and password and you’ll see both files available.

Click here to find out more about the Cheat Sheet and my other bonuses available when you buy Catalyst Theme through links on this site.