Responsive web design is the new age technique for designing websites. This technique uses CSS3 media queries to render web pages, which ensures that your website adapts (resizes) itself automatically to fit the resolution of any device on which it’s being accessed.
Starting April 21, 2015, if your site is not optimized for mobile devices, then your mobile traffic may get affected because of Google’s latest mobile friendly update. This particular update is applicable on individual pages of your site and affects search results in all languages globally.
You can check the mobile friendliness of your site using this official testing tool from Google. All you need to do is to enter the URL of any page of your site and click on Analyse button:
If your site is mobile device friendly then you will see Awesome! This page is mobile-friendly message in green as shown in above screenshot. In case your site is not compatible with mobile devices (both the desktop and mobile version of your web pages are the same), then you will see a error which says Not mobile friendly in red:
Some important things about this update you need to know:
1. This update has no affect on searches that are performed using a desktop or laptop computer. Unless someone is using some sort of user agent switcher add-on on their computer, the search results won’t be affected.
2. This update is a page-level update, not a site-level update. Suppose your site have 20 pages in total and 15 of them are optimized for mobile devices and 5 aren’t. After this update, your 15 mobile friendly pages might get ranking boost in search results, while the remaining 5 pages may not get expected rankings.
3. If you have already added your WordPress site (and its XML sitemap) to your Google Webmaster tools account, then you can also visit Mobile Usability Reports Page to check for any site errors. You may find following errors on this page:
- Viewport not configured: All your site’s pages should specify a viewport using meta viewport tag (Example: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>), as because this tag tells mobile web browsers how to adjust the page’s dimension and scaling to suit a particular device.
- Touch elements too close: This report will list all those web pages in your site where touch elements are very close to each other. For example if your site logo and navigation are too close, then a user might not be able to easily tap navigational links with his finger without also tapping the logo! In order to get rid of this problem you (or your developer) need to correctly size and space your logo and navigational links.
- Small Font Size: Make sure that your page’s fonts are not too small when it gets resized on a mobile device with a smaller screen. You can increase the font size of all pages in your site either by using your theme’s framework/options panel or using CSS.
- Content not sized to viewport: If a particular web page of your site is using absolute value in CSS declaration and horizontal scrolling is necessary on a mobile device to see its content, then this particular webpage should use relative width and position values for CSS elements, and its images should scale as well.
- Fixed Width Viewport: This report will list all those pages where you or your developer has set the width of your page’s viewport as fixed.
4. Make sure that Google Bot user agent for crawling smartphone content isn’t blocked via .htaccess or robots.txt of your site. If it’s blocked from accessing your site, then you need to remove such blocks manually or contact your host. When testing your pages using mobile friendly test tool, the tool may list all the resources that are currently blocked from Mobile bot:
5. If you externally link to some other site that is not mobile friendly, then such type of linking won’t affect your site rankings in anyway. However always try to link to an external website that is mobile friendly for providing better user experience to your mobile visitors.
With a Responsive WordPress Theme you can be sure that your site will look and work great not only on computer web browsers, but also on mobile web browsers like Opera Mobile, Opera Mini, default Web Browser for Android, Chrome, Safari Web Browser for iPhone, iPad and iPod Touch etc. In this post let’s take a look at some of the best free and paid Responsive theme designs for WordPress.
List of Best Free & Paid Responsive Templates for WordPress
1. Basic (FREE)
Let’s start this list with a Free Responsive WordPress Theme! If you are completely new (newbie) to Responsive Web Design, then Basic Theme from Themify can be used as a starter theme for your blog. This theme comes with minimalistic layout/styling and you can directly start configuring the theme from its options panel. From the options panel you can easily customize almost every element present in the theme, without any need to touch its PHP/CSS code.
Basic theme comes with following features:
- Grid layout options.
- Customizable Footer widgets, Menu and Text: You can easily insert your own text/image in the footer area of this theme using widgets section of WordPress. This theme also supports custom menus, so that you can enter your own custom menu items/pages on all pages.
- Shortcodes: Shortcodes are also known as short cuts in WordPress! You are required to enter a short snippet in your post’s/page’s content to create/embed fully featured objects/files. For example, if you type gallery inside  shortcode in WordPress’s post/page editor, it will integrate an image gallery in your post/page.
- 5 additional theme skins: You can always customize the look of your site with additional skins.
- Full Support for Child Themes, HTML5 & CSS3. Child themes allows you to inherit the properties and functionalities of a Parent theme. All the editing/customization that you do in your blog takes place in the Child theme and the Parent theme is not modified in any way.
- Social Media Icons: Your WordPress blog is useless if it doesn’t have social sharing buttons. This theme comes with integrated social media icons which you can insert anywhere (top and bottom) in your post/page.
- Scroll to Top Button: Scroll to top button is generally displayed at the bottom of a web page. This button when clicked/tapped instantly takes desktop/mobile users to the top of a page without any need of manual scrolling.
- Optional RSS Feed Icon and Search Field: You can always insert an inbuilt RSS feed icon and Search field from the options panel. Keep in mind that the search field will use the default search feature of WordPress.
2. Shopo (Paid)
Do you have a Responsive Shopping Cart WordPress Theme in mind? If yes, then Shopo is one of the best responsive e-Commerce theme that runs on WooCommerce, which is a free plugin from WooThemes!
WooCommerce allows you to easily transform your WordPress blog into an e-commerce store where you can sell digital as well as real products and goods. It also allows you to integrate payment gateway of your choice like PayPal, Simplify Commerce, BACS etc. so that your site could accept payments from Credit Card, PayPal account etc. Following are some of the popular payment gateways that you can use with this theme using WooCommerce:
- Authorize.net and DPM.
- PayPal Express, Pro, Digital Goods, Advanced and Adaptive.
- CCAvenue Gateway – Very popular payment gateway in India/South Asia.
- Chase Paymentech.
Shopo comes with many different promotional areas like Dual Navigations in the header, customizable welcome message for your visitors, Slider for your featured products etc. This theme is an AJAX based shopping cart using which your customers can add/remove items from the cart without being redirected to any other page! The theme will resize itself automatically depending on the screen resolution of your potential customers!
Some salient features of Shopo Themes are as follows:
- WooCommerce functionality has already been integrated within this theme. You can easily customize the layout of your WooCommerce shop.
- Header widget for displaying banner Advertisement of your choice. You will be able to easily insert scripts from Google AdSense, BuySellAds etc. in your store.
- Various list and grid view layout options for blog. You can also insert your custom text and logo in the footer area of your site.
- Animated back to top button: This button allows you/your visitors to go to top of the page without any need of scrolling on desktop/mobile devices.
- Full Support for Child Themes, HTML5 & CSS3. The theme also comes with a total of 7 skins.
- Optional RSS Feed Icon and Search Field.
- Social Media Icons.
- Multiple Theme Skins to suit your/your customer’s taste!
3. Responz (Paid)
As the name suggests Responz is a Responsive Magazine Theme for WordPress with a 3-column layout which is generally used by news and editorial websites. In case you’re not comfortable with 3-Column Layout, then you can always choose from 2 sidebars, 1 sidebar or full-width from the theme’s options panel. You can also align the sidebar either to the left or to the right of the screen as per your requirements.
Some great features of Responz are as follows:
- Header and Footer Slider: These sliders work on mobile devices as well.
- Multiple sidebars, with an ability to set 2 sidebars, 1 sidebar OR Full Width.
- Dual Navigation Menu, which can be easily customized.
- In-built Lightbox gallery.
- Full Support for Child Themes, HTML5 & CSS3. The theme comes pre-packed with 8 skins.
- You can insert up to 4 widgets in the footer area of your site using WordPress’s inbuilt widgets feature. Apart from widgets you can also add your own custom footer text and logo.
- Optional RSS Feed Icon and Search Field.
- Social Media Icons.
- Multiple Theme Skins to suit your blog/editorial/news website’s needs!
4. Pinboard (Paid)
If you are an addicted user of Pinterest and are looking for a Responsive Theme which resembles Pinterest’s design and functionalities, then look no further as Pinboard is the best theme for you! This theme has got an auto stacking layout with infinite scrolling (new posts will automatically start loading as soon as you/your site visitors hit the bottom of the page both on desktop and on mobile) functionality as seen on the official website of Pinterest!
This theme also supports multi-site integration, so that your blog visitors can register an account for themselves and post content to your site.
Some great features of Pinboard are as follows:
- Auto stacking layout just like Official Website of Pinterest. The stacking layout works on mobile devices too no matter what is the screen size.
- You can either choose infinite scroll or numbered page navigation from theme’s option panel.
- Lightbox integration on homepage as well as on all other posts/pages. You can also post videos and create beautiful photo galleries.
- 3 post layout options viz. small, medium and large grids.
- Homepage featuring Recent comment list with commenter’s avatar.
- Complete compatibility with HTML5 & CSS3, along with Child Theme Support.
- Upto 4 footer widget columns.
- Optional RSS Feed Icon and Search Field.
- Social Media Icons.
- Custom welcome message for your site visitors.
5. Bizco (Paid)
Bizco is a Responsive Template which is mainly targeted at businesses and product based websites. The theme is great for showcasing your featured products as well as pages. Using the theme’s custom panel you can change the display/appearance of your pages and posts very easily.
Some salient features of Bizco are as follows:
- Threaded comments and custom menus. Threaded comments feature allows you as well as your readers to directly reply to other comments on a particular post/page.
- Feature slider handled by WordPress custom post type. This slider works on mobile devices as well.
- Homepage highlights using custom post type.
- Control the visibility of your sidebar in various posts and pages as per your requirements.
- Full support for WordPress Shortcodes and Columns.
- 6 Theme skins to suit your business and product related needs.
- Full compatibility with Child Themes.
- The theme comes pre-packed with 4 additional homepage layouts and footer widgets. You can also insert your own text in the footer area of the theme.
6. Viewport (Paid)
Designed by Orman Clark, Viewport is a clean, crisp, responsive and well structured theme suitable for online publishers, who wants to post different media formats like images, galleries, audio and videos to their blogs.
Some great features of Viewport theme are as follows:
- Change the colour of your theme instantly without touching a single line of code.
- Featured post slider that works on mobile devices as well.
- The theme has got inbuilt SEO options that allows you to optimize your site for search engines. Keep in mind that if you use this feature of Viewport theme then you will have to disable any third-party SEO plugins that you are using with your installation.
- Allows you to upload your own logo. The theme also supports simple text based logos for starters.
- Translate into multiple languages using the included .po/.mo files.
- PSD files are also included with the package. No need to pay extra for PSD files.
- Uses ZillaFramework.
7. Volumes (Paid)
Volumes is a very different looking theme suitable for creative freelancers or agencies. This theme comes with filterable portfolio, custom widgets, custom page templates and much more. If you’re a freelancer or an agency, then you can use this theme for showcasing your talent using the inbuilt portfolio feature. Your site visitors can also filter your work by discipline (category).
The theme has got full support for Custom Widgets and Page Templates, and also allows you to upload custom theme background. The theme uses ZillaFramework and all its features are same as Viewport theme discussed above.
8. Responsive (Free)
As the name suggests itself, Responsive is a Free WordPress Theme that you can download from the official theme repository of WordPress. Responsive is a highly popular theme which comes pre-packed with following features:
- 9 Page and 6 layout templates: Choose your own page/layout template as per your site requirements.
- 10 Customizable Widget Areas: This theme uses the default widgets feature of WordPress and allows you to easily insert static images, text, ad code, social sharing buttons, Facebook like Box etc. at different locations.
- 4 Menu Positions: The theme has got full support for custom menus and you can position your menu at different positions as per your requirements.
- Allows you to upload your logo easily.
- Fully compatible with WooCommerce.
- Supports WPML (while writing this post the theme is available in 24 different translated languages) and RTL languages.
- Retina display ready: Your site will look great on High Definition (720p/1080p) Screen of mobile devices and Retina display of various iOS devices and Mac.
- W3C Markup validated and fully optimized for search engines.
- Allows you to upload custom background image of your choice.
- Full support for Sticky post and custom header.
The theme is highly rated on the repository and if you are just starting with Responsive Templates, then feel free to consider Responsive as your first theme design!
Important note: We will update this list with more mobile and Google friendly themes in upcoming days. If you have a great theme in mind, then feel free to post its name in the comments section below.