Contact Us Tel: +27 21 448 9843
Responsive Design for WordPress

Responsive Design For WordPress

BY Guest Blogger Leah Messiter

WordPress is one of the most popular platforms used for developing and managing website content. Responsive design (building sites that respond to the specifications of the end users browser) is one of the most popular topics about so let’s combine them and discuss the tools, pitfalls and opportunities a WordPress webmaster faces when trying to ‘go responsive’.

“Traffic stemming from mobile devices to a dozen web sites in various industries, including retail, accounted for 13% of total web traffic in the fourth quarter of 2011, up from 6% in Q4 2010, finds a study by marketing and public relations firm Walker Sands Communications.”
Internet Retailer Magazine

Responsive Design for devices

When Is It Time To Plan For Mobile And ‘Go Responsive’?

Right now. When about one in every eight of your visitors is using a mobile device you can’t really afford to wait any longer. A suboptimal browsing experience for that many users is simply going to be unacceptable when you come to review your marketing strategy and sales figures.

Even more important to consider is the early mover advantage. Two sites with a similar user-base competing heavily might currently have little ‘edge’ over each other. However the first to capture a truly inspiring mobile experience will have the opportunity to win those users over – potentially forever.

Failed Design And Homogeneous Sites

Nobody wants a homogeneous Internet founded on a bunch of cloned sites and identical solutions to a problem. These solutions are a symptom of our failure as a design community to embrace suitable solutions. Blog owners (who aren’t designers) and browser coders (such as the Opera Mini designers) adopt these solutions because design is so poor and offers such an unacceptable mobile experience that they have no choice.

One of the most popular solutions for WordPress is WPtouch. Webmasters who have purchased a design in the past (or a template) that doesn’t really support mobile can install WPtouch and it will deliver a more acceptable user experience.

“WPtouch automatically transforms your WordPress website into an application-like theme, complete with ajax loading articles and effects when viewed from the most popular mobile web browsing devices like the iPhone, iPod touch, Android mobile devices, Palm Pre/Pixi and BlackBerry OS6 mobile devices.”
WPtouch

Learn more about WPtouch Pro »
This solution is exactly that – a solution to a problem: just like reputation management cleans up some bad press, this plugin cleans up some bad design. It produces a nice way to display WordPress to mobile users. Articles and headers are laid out well and some of the layout can be customised. Visit a few dozen sites using WPtouch, however, and you will soon realise there is little to distinguish the sites.

advertisment

Embracing The Difference

Truly adapting our WordPress site for mobile users involves much, much more than simply installing a plugin with a default mobile template that fits ‘most’ sites’ general strategies (display some articles). This line of thinking should remind you of the beginnings of WordPress when detractors would say that every blog looked the same and no ‘real’ sites could ever be hosted on WordPress. Looking back that seems ridiculous as thousands and thousands of beautiful sites are hosted on WordPress. Many of them extremely unique and with fresher and more powerful features than any of the old sites that were once better than the plain old blog.

Now designers face, once again, the exact same challenge. The easy solution is provided by the WPtouch developers of this world. The tough solutions – the ones that will allow you to develop a unique and stylish mobile experience – come from responsive design.

Basic Responsive Design Principles For A WordPress Site

Many sites on WordPress will be blogs – often extremely content rich. One of the first areas the designer will need to think about is how to display that content in a manner that’s optimal for mobile users. Loading huge picture files then simply squashing them down to a more reasonable size using ‘max-width: 100%’ or a similar attribute to your images won’t necessarily be optimal – further reading on images is can be found in our resources at the end.

Having said that, this leads us to the beauty of responsive design. A site with a responsive template and a team of writers no longer needs to concern the writers with sizes of photos, videos and other items. They can be crafted by the editing team and scaled by the template to perfectly fit all screen sizes, devices and users.

Most WordPress templates feature a sidebar; many homepages have a content slider and a huge header and footer area. All of these standard features are lost if we simply take a WPtouch style approach. Instead, think about how to adapt the header as screen space becomes smaller. Perhaps the logo can become the size of a letter instead of a quarter of the screen! Adapt the menu from a wide single line of buttons into a multi-line menu with large, finger friendly buttons. Combine sidebars, footers and additional pop ups and information into a seamless flow of information under the articles or blog listing. Controlling your content this way will allow you to optimise your unique graphics, squeeze pages and other content to deliver optimal results on mobile.

Even more importantly your unique site might just stick in the minds of our readers – unlike the ten homogeneous sites they also visited today.

Further Reading On Responsive Design

http://unstoppablerobotninja.com/entry/fluid-images/
http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/
http://www.w3schools.com/css/css_mediatypes.asp

Example:

@media screen and (max-width: 777px) {
.
.
your css here is for users up to 777px wide browsers
.
.
}

We received an e-mail a few weeks ago from a freelance writer who wanted to contribute a guest post to our blog.  We told her we were happy to post anything that was on topic and she sent us the following article.  If you’d like to contribute to our blog, contact us, we welcome any contributions that are relevant and add value to our readers.

Comments are closed.