WordPress is the world’s most widely used CMS. But because of the system’s ease of use, low cost, high accessibility, wide range of easy-accessible themes and plug-ins, there are many areas for error and the integrity of your site can be easily damaged, particularly if your beautifully created responsive design is administered by somebody who has little knowledge of RWD or of your CMS.
And this isn’t just true of WordPress. Other content management systems – from Drupal and Joomla! to Refinery CMS and Mambo – can have the same problems. To put it frankly, it’s easy for somebody else to mess things up!
To avoid such catastrophes, it’s therefore important to protect the integrity of your responsive designs, so here are a few tips to help you do just that.
Images
Firstly, let’s think about size. Because it’s easy for an administrator to choose to display an image at ‘full size’, it makes sense to place some kind of restriction on width and height attributes, so that an image can never be larger than its container. Here’s how to do it:
CMS
.post img { max-width: 100%; }
JavaScript
document.getElementById(‘post-image’).
removeAttribute(‘width’);
document.getElementById(‘post-image’).
removeAttribute(‘height’);jQuery
$(“.post img”).removeAttr(“width”).
removeAttr(“height”);
{module_contentholder,name=”Blog ad”}
Featured images
Featured images are a central feature of many CMSs, and since they are called outside the main body of the site, and can be sized and named separately, you can add your own specifications and restrictions at the design stage, giving you all the control you need.
Navigation
Dropdown menus, flyouts and so on can quickly become overloaded and too many options can spoil an otherwise balanced website. To avoid administrative users of the site from adding on too many navigation items, you should consider setting a limit on menu depth.
Mobile Detect
This is a WordPress plugin created by Jesse Friedman, which makes it easy to control when content is shown or hidden, based on device or OS. Using shortcodes, this means that full-sized images can be replaced with thumbnails if the user is on a small screen. In this way, the unnecessary and unwanted download of superfluous background data is avoided, and speed and user experience improved. Set this up at the start and your administrator won’t even need to worry about it. You can find more information here.
Education
Perhaps the most effective thing you can do to prevent your site breaking in the hands of your clients is to educate them on how to correctly make changes. Demonstrating what they can and cannot do, and ensuring that they make regular backups and updates where necessary will pre-empt many problems, and keeping communication lines open will mean that they can come back to you if they need any extra support.
And finally…
Don’t forget the basics. Designing for a particular CMS, such as WordPress, is no different to any other kind of responsive design. The crucial elements of audience, purpose, usability, aesthetics, content and compatibility remain as important as ever, and you should not feel restrained in any way by your CMS. In fact, using a CMS such as WordPress means that you have a plethora of easily accessible tools and widgets at your disposal and you can let your imagination run wild with ways to use them. And once you’ve set a few limits and boundaries on what your admin users can do, you’ll be able to sit back and watch how your design grows and evolves in their hands. Enjoy the show!