Wednesday, May 9, 2012

Catalyst Theme Coupon: Catalyst Theme for Mobile Devices


Last week’s post looked at why taking the approach of using Responsive Design when designing online solutions for mobile devices is so effective compared to alternatives, such as using plugins to generate mobile versions, or creating additional mobile specific sites etc.

That discussed how using a Responsive Design approach, such as Catalyst Theme provides, means that you’re in control of how your site looks – and at all times on all devices, mobile or otherwise.
This is not the case with the plugin options which usually utilise their own mobile friendly themes.  Likewise, using Responsive Design means there is just a single site for your visitors to bookmark, remember, and link to, (with all the SEO benefits that entails) which is not the case with a separate, mobile specific, site.
That means you can focus on providing great content for all your viewing audience in one place – your site. That’s what you want, it’s what your audience want. It’s easy for you to manage, and easy for them to view wherever on whatever.
Responsive Design, Media Queries and CSS Code
Although the Responsive Design functionality provided by Catalyst Theme is extremely powerful, it’s also very straightforward to use and implement.
The Responsive Design functionality utilises the concept of Media Queries (a feature of CSS3).
A Media Query allows specific CSS code to be used to display the site when it is being viewed with a specific browser width (or range of widths).
CSS code is what determines the style and layout of your site, so using different code for different Media Queries means you can get a different effect for each browser width.
This means, for example, that the CSS code for a Media Query for a browser width between 480 and 767 pixels might specify one size of Header Text, and the code for a Media Query for a different browser width specifies a larger Header Text size.
That’s really about the most complex bit!

Media Query Options in Catalyst Theme
Catalyst Theme caters for six different Media Queries – meaning that your site can have a specific design and layout presentation for each of six browser width ranges to suit viewing on different types of device (from full width desktop down to smartphone).

Implementing Responsive Design with Catalyst Theme 
Catalyst Theme makes implementing the CSS code for each Media Query very straightforward with three main options for doing so.
The first option is for those that know CSS code. Select the desired Media Query from the graphics (as shown above) and enter your custom CSS code as you wish into the CSS code text box below it. There is one such CSS code text box per Media Query.
The second option is very similar and suits those who know the effect(s) they want, but not how to code for it. In this case, select the desired Media Query again, and open the CSS Custom Code Builder to automatically build the CSS code as you select the style and design options you want. Then just copy and paste the code it generates into the CSS code text box.
The third option is to use the Default Media Query Options where Catalyst provides several pre-configured selections that implement CSS code for certain of the Media Queries. These can be switched on individually to determine how things like the Header area, Navbars, Sidebars & Content areas, Footer area etc respond for different Media Queries. No coding required!
As always, Catalyst Theme’s approach to Responsive Design is one of simple power and flexibility



"Article taken from catalysttheme.com"

No comments:

Post a Comment