Responsive design is no longer a future trend. It is a current requirement for most new projects and we’ve gotten good at it. Every once in awhile a project comes along that really challenges you and pushes your skills to their limit. For LightSpeed, our recent work on Alpha Media Holdings (AMH) – the largest independent publisher in Zimbabwe – was such a project.

It made us re-evaluate our development methods, our tools of choice and tested our Publisher Suite in ways it hasn’t been tested before. It marks a push forward for our Responsive design and hosting abilities and is a project that we are very proud of.

In this Case Study I will take you through the challenges we faced in making these high trafficked sites responsive and the lessons we learned from this development.

AMH’s requirements

The Zimbabwe Independent and Standard websites were developed about five years ago on Joomla.  The NewsDay site was on a custom-built platform which in many respects did not give the client adequate control on the back end.

The Alpha Media Holdings titles

AMH required the redevelopment  of their news websites to:

• Modernise them to improve user-experience;
• Expand their digital footprint to include mobile capabilities;
• Increase the size of their digital audience and build communities around their websites;
• Integrate social media tools in design;
• Facilitate for easier upload of content; text, photos, videos, PDFs etc
• Offer a platform for greater interaction with the reader
• Allow for easy uploading of ads.

Our Publisher Suite fit the bill.

*All Responsive Screenshots have been taken by using the Responsinator http://www.responsinator.com/

Responsive Design / Responsive Design for a high trafficked site

Responsive Design means designing your website to adapt to the user’s viewing environment (mobile, tablet, laptop etc.). Our resident mobile expert, Iain Coughtrie flexed his mobile muscle and pushed the boundaries of our responsive design capabilities for the AMH news websites.

The sites adapt to different mobile devices

As usual we applied WooThemes’ Canvas theme to the needs of this project. Iain added a function to include and call layout.css (Canvas’ default responsive template) from the child theme. He then edited this stylesheet as per the responsive requirements for each site.

The Independent and The Standard have weekly updates to their content and clock a weekly average of +30k visits per week. Due to the incredibly high amount of traffic on the sites, Iain had to make the child themes as light and lean in resources as possible. Here’s how he did it:

• He added functions to remove some default Canvas includes. The only front-end templates included were header.php, index.php, a few template parts for the various home page loops, and footer.php.
• Every image has a specific image size defined in the functions file. This means that the thumbnails served are of the exact size required, and the full images with much larger file size don’t need to be loaded. For eg, NewsDay has image size defined for the featured images under the slider, the bigger thumbnail at the top of each category on home, the smaller thumbnails underneath, and the medium thumbnails on category archives.
• Iain approached the styling with great care, using as few style rules as possible to achieve the intended results.
• I added a few functions to prevent Canvas from loading any more than required for the sites to work.
• All unnecessary scripts and css prevented from loading.
• Copied the theme options styling to the stylesheet once I was happy with the settings, and then added a function to remove the call to check styling in the theme options. This significantly improved performance.

Beyond these changes Iain also realised that WooSlider was a bit heavy, and sought out a much lighter solution. He came across Swipe – http://swipejs.com/ – a solution with a slightly more limited offering than WooSlider in terms of fade effects and such – but the perfect mobile solution. Swipe uses very little resources and is touch/swipe sensitive.

For the most part, the sites are powered by Canvas, with the child theme only customizing certain elements where necessary. This is how a good child theme should work

Conclusion

The AMH project has been a fantastic project to work on. All our normal techniques and technologies that we usually implement on projects – such as WooThemes’ Canvas, WPtouch Pro – did not suffice for this project and we were forced to rethink our methods and come up with innovative new solutions to problems.