Today saw the release of Catalyst Theme Version 1.5 for WordPress.
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 Theme
The Responsive Design options 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.
The 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.
Or you can take the easy route and choose from pre-configured default options provided!
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 main Catalyst Theme Cheat Sheet, I have now produced an additional 25 page guide to the Responsive Design options in Catalyst.
- How different layouts and effects (such as font size, or indeed anything) can be made dependent on the width of the browser (i.e. device) being used to view the site
- How to determine the layout and style for each type of display manually using Catalyst’s automated CSS builder (this part of Catalyst is so easy to use and so cool it’s untrue!)
- The default options provided for Responsive Design in Catalyst – what they are and how to use them
- Examples of Catalyst’s Responsive Design in action – and how easy it is to implement a responsive design so that your site looks good anywhere, on any device!
The Cheat Sheet guide to Responsive Design is included as a further bonus when you buy Catalyst Theme through this site.
If you already have the main Catalyst Theme Cheat Sheet, don’t worry – you’ll get this guide too, and at no extra charge. It can be found as a separate file in the Cheat Sheet Member’s area.
If you haven’t yet got it, then you will if you purchase Catalyst Theme through our bonus link.
Click here to find out more about this great guide and my other bonuses available ONLY when you buy Catalyst Theme through links on this site.