WordPress Plugins for Responsive Functionality

WordPress Plugins for Responsive Functionality

While 2013 has been the year of responsive web design, not everyone has been able to switch their existing WordPress site to a more mobile friendly design.

Maybe you are happy with your current theme, or just can’t face the idea of migrating to a new theme or framework in order to cater to the growing number of web users who browse on their tablets and smartphones.

If that sounds like you, then the following plugins covered here will help you bring some responsive functionality to your current site without having to switch to a fully responsive WordPress theme.

Responsive Design

Plugins for Responsive Images

One of the most impressive features of most responsive themes and sites is the ability to resize images on the fly, to fit the screen size the site is being viewed on. We all marvelled at the first websites to start using full width background images that scaled up or down depending on the screen size.

Inserting images into your posts that fill the entire width of the content column container, no matter what its width is a great effect to have on a site. Also, having them automatically resize to suit the dimensions of the screen can make browsing on smaller devices more of a painless experience, helping to keep your readers engaged.

WP Fluid Images

This plugin strips out the standard height and width properties which are added to an image when it is uploaded in WordPress and inserted into a post. While this standard WordPress functionality is great for precise pixel perfect designs and layouts, it’s no so great when it comes to delivering a fluid and responsive design.

WP Fluid Images

The WP Fluid Images plugin is free and after installing and activating it, there is nothing more required of you. It just works away in the background making your images fluid.

Download this plugin

Simple Responsive Images

This is another free plugin that deals with creating responsive images for WordPress sites. Simple Responsive Images requires a little more input than WP Fluid Images as you can set the breakpoints, or the points at which your images will resize, or display a different version.

Simple Responsive Images

The breakpoints are the container width, which when reached; a different image will be used. In the above screenshot, when the width of the page is reduced, and reaches 640px, then the medium image with a width of 300px will be shown. When the next breakpoint or width of 320px is reached, then the thumbnail 150px image will be shown, and so on.

Download this plugin

  • If you are working with videos, then the FitVids free plugin can help you add responsive videos to your site.

Responsive Slider

If you need to do more than just show single images, making use of a WordPress slider is a great way to showcase multiple images and add an engaging navigational device to your site.

The free Responsive Slider plugin is one way to add such functionality to your site and thanks to its responsive capabilities it will resize to match the width of its container.

Download this plugin

Soliloquy Responsive Slider

If you need more features than the above Responsive Slider can offer and don’t mind paying for it then the Soliloquy Responsive Slider is just what you are looking for. With three pricing plans, starting from $19 it’s certainly affordable for professional sites. There is also the lite version which is available for free.

Sololiquy Responsive Slider

This plugin comes with a good selection of addons to enhance the power of the sliders you can create. These addons include things like Instagram and Pinterest integration, additional themes, adding a lightbox and over 25 filters that can be applied to your images on the fly.

Designed to make the task of creating responsive sliders a breeze, this plugin is certainly very hand to have around when building attractive WordPress sites.

Download this plugin

Plugins for Responsive Navigation

If you want to upgrade and enhance your theme’s menu, then one of these plugins should do the trick. They are responsive in design so they will work with your theme to deliver multi-screen size compatibility to your website.

UberMenu – WordPress Mega Menu Plugin

This is a great value premium plugin that allows you to build mega menus for your WordPress site.

 

You can put more than just text links into your menus with this plugin. Inserting recent post lists, post thumbnails, contact forms and even Google Maps into your menu is simple with this tool.

It’s highly customisable and comes with over 20 style presets for helping to ensure it fits in with the look of your site. The menus are of course fully responsive so you don’t have to worry about them being difficult for mobile users to get to grips with.

Despite the many features of this plugin it is surprisingly easy to use, and shouldn’t be a problem with anyone with a bit of WordPress experience.

Download this plugin

Responsive Select Menu

This is a free plugin that displays a responsive, mobile friendly menu for your site when it is viewed on a small screen device.

Responsive Select Menu

It employs a select box for the menu which takes up less space than other options while still being functional and easy to navigate. You can set your own breakpoint, the screen size at which this menu will replace the default one, and you can also select how many levels to show in the menu.

This is a great little plugin that quickly brings responsive navigation to your WordPress site for free.

Download this plugin

Plugins for Responsive Post Layouts

If you want to add columns to your posts then these plugins enabled you to do that while also ensuring the grids are responsive.

Responsive Column Widgets

This free plugin allows you to insert columns into your WordPress posts and pages that are responsive. The plugin uses shortcodes to achieve its aims and users can easily specify how many columns their layouts should include.

Responsive Column Widgets

The main point of this plugin is that it allows traditional sidebar widgets to be inserted into the columns, enabling them to be displayed horizontally in posts, rather than vertically in the sidebar.

This is a pretty good idea for a plugin and while the process for creating and inserting the widgets isn’t completely intuitive, it does only take a couple of steps to be completed.

If you want a responsive layout for your posts that can accommodate sidebar widgets then this free offering is just the ticket.

Download this plugin

WEN’s Responsive Column Layout Shortcodes

This is another free plugin that allows you to insert responsive width columns into your posts and pages.

Wen's Responsive Columns

Like the Responsive Column Widgets plugin it uses shortcodes to insert the columns into posts, but this time it doesn’t support the insertion of widgets into posts. This means it’s a simpler plugin to use and makes creating columns in WordPress posts very easy.

Download this plugin

Others

As well as inserting responsive images and layouts to your WordPress sites, you can also make use of other responsive page elements, even if they weren’t included in your current theme.

GPP Shortcodes

GPP Shortcodes is a great free plugin that adds lots of responsive features to your WordPress site.

GPP Shortcodes

Not only can you insert column grids for responsive layouts with this plugin, but you can also insert a whole host of other responsive features such as flat buttons, icons, boxes, accordions, toggles and tabs to name but a few.

Download this plugin

Responsive Mobile-Friendly Tooltip

This plugin displays a mobile friendly tooltip that appears for words you choose. The tooltip popups up when the cursor moves over a certain words. Thanks to its responsive design it picks the best size and position depending on the screen size of the user.

Download this plugin

One to Watch

The Responsive Plugin is currently in development but it is being built to convert any WordPress theme into a responsive theme. It’s a pretty ambitious task and we are looking forward to seeing if they can pull it off.

To find out more visit the Responsive Plugin homepage.

Conclusion

Ensuring your site works well on a range of devices, especially increasingly popular ones such as tablets and smartphones is always a good idea. While using a fully responsive theme is a good approach that takes most of the work out of your hands, it’s not always the easiest option to implement.

If your theme isn’t responsive at all, or only partly so, some of the plugins above can help make it that little bit more mobile friendly and prevent you leaking too many visitors due to the obstacles they face finding their way around your content.

Image credit: Pravda, CrossRoad