Responsive Design for WordPress – Best Practices

Responsive Design for WordPress – Best Practices

Stuart Holmes

Responsive design is all the go, and for good reason. Meeting the growing population of users accessing the internet via their phone is only possible by becoming responsive. Given that Google registered more searches from mobile than desktop in 2015, it’s now at the forefront of design.

Site’s must be just as easy to navigate on a hand held device as they are on a large desktop screen. While it may sound simple, it’s actually rather complex. There’s plenty to learn in this new age of design, but tried and tested best practices keep us all on track. If you’re going responsive, be sure to follow these tips to create a fluid user experience whether on smartphone, tablet or computer.

Use a wireframe tool

Before you jump straight in, why not plan the entire design using drawing software? It gives the chance to create multiple layouts with ease, testing each one for the best functionality. Wireframe tools such as Axure and Pidoco offer endless options where you can create large sitemaps. The interactive HTML mock ups can then be viewed on your phone using an app. It’s a great way to ensure an optimum layout before getting into the laborious building stage.

Opt for a ready-made program

The novice WordPress user could save themselves a lot of time and stress by making use of the ready-made responsive design themes. Not surprisingly, with the current shift towards this layout and functionality, they’re now plenty of options to consider. Some of the most popular include Thesis, Moboom, Headway and OptimizePress2. Simply choose the one which best fits your concept and tweak it slightly to make it your own.

Beware of images

An engaging website wouldn’t be complete without images. They may be an essential piece of the puzzle, but it’s time to start thinking with performance in mind. Mobile users are more susceptible to poor internet and a lack of bandwidth allocation. As such, all images should be limited in size to ensure the most optimum loading time. Fail to meet this requirements and users will certainly look to the competition for speed of navigation. Rather than reducing images, other solutions include utilising CSS instead, or combining this with bitmaps. Either way, you’re aiming for a load time of no more than 3-seconds.

Make it easy to navigate

Navigating the internet with fingers and thumbs is far different than using a mouse. This needs to be considered at every stage of design. A site which is too small and compact will be impossible to use on mobile and tablet. Instead, be sure to make links easier and larger to click. That may require not placing items too close to each other. Hover screens are a big no-go and users should still have access to all sections of the site found on the desktop version.

Always test

As with any form of design, testing is an integral part of the process. For responsive design, this can be especially in-depth as you’ll have to test functionality on multiple formats. Make it easy on yourself by using a testing tool such as Screenfly. This allows you to view and use a website at different screen resolutions from the comfort of your desktop. This means you won’t need a tablet to hand each time you want to check a change in design.