Responsive is a term you will have seen mentioned often in the descriptions and promotional material for WordPress themes and frameworks. It’s a popular and relatively recent development in web design that is sweeping not just the WordPress community but all progressive areas of online design.
As the term slowly becomes ubiquitous in web design and WordPress circles, it can be easy to forget exactly what it means and what the benefits and practicalities are of implementing a responsive design are. So to help everyone get up to speed on responsive design for WordPress and beyond, this article hopes to be a useful reference point.
This article on responsive web design (RWD) for WordPress is for those of us who are:
- Unsure of exactly what responsive web design means
- Wondering what RWD has to do with them and their site
- Interested in the benefits of adopting a RWD
- Want to know how to make their WordPress site responsive
- Looking for business opportunities relating to RWD
What is Responsive Web Design
If you’ve spent any time looking at WordPress themes, or web design in general over the last few years, then you will have at some point, come across the term ‘responsive web design’.
Sites that can be classified as being responsive in design use a fluid layout that reshapes to best fit the screen size of the device they are being viewed on. The website determines the user’s screen size, and then displays the site in the best possible way for the dimensions in use.
The aim of RWD is to ensure that the site will be just as easy to view, use and navigate on a smartphone as it would on a desktop computer and any sized screen in-between and beyond.
As well as the width of the site being fluid, other characteristics of responsive sites include:
- Flexible images which resize to fit the changing layout and dimensions of the page, including featured and background images
- Reorganising and repositioning of menus, widgets and other page elements to make the site more useable on smaller screens
- Multiple CSS style sheets that are selected depending on the browser and the screen size the site is being viewed on
- Incorporating mobile specific navigational features such as touchscreen sliders and interfaces
The benefits of employing a responsive design on your site include:
- Removes the need to create and manage a mobile-only parallel site
- Ensures your site is equally accessible on a range of devices
- Adhering to the recommendations from Google on building mobile-optimised websites
Why it’s Time to Get Responsive
2014 has been billed as the year of responsive web design and with the best part of the year over already, it’s high time you got on board with responsive web design.
Here are some mobile device usage stats to help make the case for going responsive:
- 56% of American adults have a smartphone (Pew, May 2013)
- 35% of American adults own a tablet computer (Pew, May 2013)
- 63% of adults in the UK access the internet on the go (ONS, 2013)
- 1.083 billion smartphones in use worldwide at end of Q3 2012 (SA, 2012)
- 28% of online purchases are made using a tablet (pwc, 2012)
Hopefully these stats covering online mobile usage have convinced you of the importance of having a mobile friendly WordPress site.
Whether you use WordPress to power an eCommerce store, run your business website, or publish your blog, by failing to make use of a responsive design, you are potentially excluding a large portion of global online users.
How to Get Started with WordPress Responsive Web Design
Perhaps the best thing about WordPress is the sheer number of themes available for the platform. WordPress users can choose from an ever increasing number of themes that are designed for all manner of purposes from blogs, news sites, eCommerce stores and personal portfolios, to name but a few.
Thankfully WordPress theme designers have wholeheartedly embraced the on-going RWD revolution. This means that the best premium and free themes for the platform now feature a responsive design.
Upgrading to a Responsive Theme
If you’ve yet to embrace a responsive design then upgrading your theme to one that is responsive is probably the easiest route to becoming mobile-friendly while also avoiding the need to create a parallel mobile-only site. Not only is upgrading to a responsive WordPress theme an easier and more efficient approach, it is also the preferred method of delivering a site that is variable screen size compatible.
With so many excellent responsive WordPress themes out there, there has never been a better time to choose a new theme.
Converting an Existing Theme
If you are happy with your current site design, making an existing WordPress theme responsive might be an option available to you. However, depending on how complex or feature-rich your theme is, this could be a major undertaking.
Unless you have considerable CSS skills and knowledge of web design then it might not be the best use of your time. Hiring an experience developer on a site like Elance might be a better option for converting a non-responsive WordPress theme.
Business Opportunities for Web Designers
The increasing number of users accessing the internet via small screen devices has created a new set of problems for business owners who created their online presence more than a year or so ago.
Business owners, and those that market their services online, with older sites, are highly unlikely to be making use of a responsive design due to the age of their websites. This means that they are turning away potential customers who cannot view their website on a mobile device.
Like all problems, those who can provide a solution will find their services in demand. For the web designer who understands how to deliver a responsive website, now has never been a better time to find new clients since the first rush to get online.
Offering a responsive WordPress site is a simple way to market your services. This is because you are offering a valuable solution to those with non-mobile compatible sites that has a tangible benefit to their bottom line.
While preparing for the responsive revolution might seem like a headache for some, it also presents a great business opportunity for those who understand it and are able to harness its momentum.
Check out the article on previewing WordPress sites on mobile devices for tips on identifying problem sites.
Smartphones, tablets, and other mobile devices are here to stay. Ignoring their popularity amongst web users could see your current online readership and customer base shrink considerably, if you fail to offer a mobile-friendly design for your site.
For WordPress users, the best way to get on board with the rise of the smartphone and other small screen devices is to make use of a responsive theme. For those still attached to their existing non-responsive theme, converting it is another option.
However, for those ready to embrace change and make the switch to a responsive WordPress theme, now has never been a better time to refresh the appearance of their website and welcome the growing number of internet users who surf on the small screen to their site.
We hope this article helped you understand what exactly responsive web design is. You may also want to check out our list of best WordPress Plugins to Make your Site Mobile Responsive.