Going for a responsive web design is a very strong consideration when developing web pages these days. Responsive web design allows a website to render perfectly regardless of what browser or device is used to access its pages.

Today, more and more people are using smart phones and tablets to view pages over the internet. How does your website display on such devices? That is why businesses are challenged to convert their existing websites to be more responsive to the newer browsers used by the equally new mobile devices and gadgets.

Shifting to a more responsive web design may be a little too expensive to some web owners. But the investment is very much worth it. Marketing experts say that companies are best to put their money on a fully integrated marketing program in order to produce a higher ROI. In a recent survey, it shows that 78% of teenagers all over the world own a mobile phone. And almost half of them have smart phones to boot. What more of adults with a higher purchasing power? The mobile market is indeed too meaty to be ignored. Those consumers have 24/7 access to the internet wherever they are. That alone makes the shift to a more responsive web design a very sound decision indeed.

Opting for a responsive web design is more ideal than having to maintain different versions of your website for different devices. The latter would cost you more money in the long run. If you shift to responsive web design instead, your website will detect whatever browser or gadget your visitor is using for viewing your pages and adjusts all elements accordingly. Your website will render perfectly on a mobile phone screen as it would on a desktop computer. Responsive and interactive is the current trend in web design. How good does your website fare?

Author: Petar Rastovic is an entrepreneur and internet marketer who writes for 1DigitalAgency.com, website Design Company that specializes in WordPress, Volusion and BigCommerce custom design.

Hey Folks!

Just a real quick one today, but still pretty useful. I’ve had a few people ask me about this problem so I thought i’d pop a super-fast tutorial together and then people can access it whenever they need it.

On WordPress 2011 theme when you create a single post, you’ll notice that by default it comes up with just one column and without a sidebar. Now, this is fine if you haven’t got useful stuff (or ads, affiliate deals etc) to show people on the sidebar. However, if you’re getting a lot of traffic to some specific single posts, it would be a great idea to let those visitors know about the rest of your content.

Here’s how to add a sidebar to the 2011 WordPress Theme

1. In the Theme Editor (Dashboard > Appearence > Editor), go to single.php and add the following:

<?php get_sidebar(); ?>

In a new line just above the footer code at the bottom of the file:

<?php get_footer(); ?>

Next, go to functions.php (Theme Functions) and find the following at the bottom of the file:

add_filter( 'body_class', 'twentyeleven_body_classes' );

Comment it out (by adding 2 forward slashes // at the beginning of the line) and it will force WordPress to stop differentiating between normal and single post pages.

Simple stuff, but useful nonetheless… Have a great day all!

OK this drove me NUTS! and searching online it’s driving a lot of other people nuts too, so here’s the answer:)

Now, I’m a big fan of WooThemes and Plugins (In fact, You’re looking at Woo’s Canvas right now) – They probably have the slickest looking themes on the market today and 99.99% of the time they’re just plug-and-play and everything works like a dream.

However, today I ran into an issue using the Daisy Theme (Not Woo BTW) with the WooCommerce Shopping Cart Plugin. My thumbnail images were being used as main images and stretched too large giving a blurry effect to all the products. Not Good.

After a good few hours of firebugging and code searching, here’s how to sort out your image blurring problems in woocommerce (I’m using it with the Daisy theme at http://www.popemusic.co.uk)

*************************************************
in wp-content/plugins/woocommerce/assets/css/woocommerce.css

change…

img{border:1px solid #ddd;background:#f5f5f5;padding:6px;display:block;width:100%;height:auto;}

to…

img{border:1px solid #ddd;background:#f5f5f5;padding:6px;display:block;float:right;}

*************************************************

In fact, if you go to wp-content/themes/(your theme)/css/ and edit the css files replacing all the {width:100%;height:auto;} with just { } …

To read more, click the Tweet or Google +1 Button below.

Thanks for clicking folks!!

...The above code hack will sort out all the image resizing / blurring issues and problems you’ve had with the WooCommerce Theme

If you want me to have a look at your site if you're still having problems, drop me a comment below with your URL and i'll have a peek at the code.

NB: Now, i’m not saying this this is the cleanest code hack ever, but it works like a charm and hey, whatever works right?

PLUS! Make sure you’ve sized your images correctly beforehand.

This may well work with other themes, but it is untested… and ALWAYS back up before making any changes.

If it works for you and you’d like to say thanks, show some love with a comment or a Like/Share

Thanks folks and good luck!