Why You Need Responsive Design for Your WordPress Site
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
You've probably heard of Responsive Web Design (RWD),, the idea that your website will adapt to the screen on which it's being viewed. Can you believe the first article published on it was written in 2010? The iPhone was 3 years old, Android was just picking up steam, and the iPad was about a month old at the time. Mobile interactions were important, but not completely in-your-face important. Now it's the end of 2013 and designing for mobile could not be more important. There are countless articles, books, conferences, and stats to back up the fact that people are using the mobile web. We need to develop responsive sites no matter what platform we are using, weather it be static sites, a platform like Squarespace, or a Content Management System (CMS) like WordPress.
Some Stats
WordPress is an incredibly popular CMS; so popular in-fact that it powers almost 20% of websites. There are over 73,000,000 websites on WordPress.com alone-- that’s not counting people who host their own version of WordPress. It’s estimated that in 2014, one quarter of new websites will be powered by WordPress. Finally, in a study of 100,000 websites using CMSs, WordPress was used in over 50% of them. For comparison, the second most popular CMS was being used by 17%. So lots of people are using WordPress, but what about mobile?
Luke Wroblewski has some very recent stats about Thanksgiving and Black Friday online shopping that are really telling about the ever-growing use of mobile. In comparing 2012 to 2013, he says:
- In 2013, over 50% of e-commerce traffic was mobile. In 2012, it was under 30%.
- In 2013, over 25% of purchases made were on mobile. In 2012, it was 14%.
- 2012 was the first time $1 billion was spent online on Black Friday. This year, $691 million was spent on mobile alone.
(source: http://www.lukew.com/ff/entry.asp?1837)
What does this tell us? Well, for one, people aren’t just looking up information or playing games on mobile devices. They are browsing websites and spending money. Between these stats and that fact that WordPress powers one fifth of the web, I think we can say that doing RWD on WordPress is pretty important. But even more important than statistics is this:
Clients Are Asking for Responsive Sites
If you are a web developer today, RWD is unavoidable; not only because people are using mobile (those people being your clients’ users), but also because your clients now want it (probably because their users want it).
This year, I’ve worked on quite a few projects where I was asked by my clients to give them a mobile presence without first suggesting it myself. When I explained what RWD was, they loved the idea; RWD enables them to maintain their current website without creating something completely new or giving them a new system to have to work on, while enabling their users to view the site on whatever device they want. Further, I was also hired to design a mobile web application for a conference I also attended. The conference organizers liked the idea that instead of taking time, resources, and money to develop two native applications--one for iOS and one for Android--they could have a simple mobile website that worked across any platform and device. And the kicker? The app was powered by WordPress.
How Is WordPress Different?
Now that you’re totally convinced that you need to make your WordPress site responsive, you’re probably wondering, “How would this be different from any other responsive project?” I’m glad you asked!
There are a lot of great things you can do with WordPress regarding RWD. So much that I could write a book on it; and that’s exactly what I did. In my latest book, Responsive Design with WordPress, I take you through an in-depth look at RWD, WordPress theming, and the things WordPress as a platform does to make Responsive Web Design easier. Because with WordPress you’re often handing the keys to the client, the content is a lot more unpredictable that with a static website, or even a dynamic site with a small amount of content. And because WordPress is so flexible, users can create all sorts of different content. However, it’s that same flexibility that developers like us can take advantage of when creating a responsive site.
CSS
One reason WordPress is different is because it generates a slew of CSS classes for its elements. This might sound bad on the surface, but in actuality it gives you a lot of fine-grained control over all of the automatically generated areas. This includes archive areas, comments, the post body, and more. Knowing these classes and when they are generated can help you apply the best styles to your themes on any screen size.
Auxiliary Areas
Elements like navigation and sidebars can also pose interesting problems in WordPress sites; users can add whatever they want to either of these sections, so we need to make sure they scale well on smaller screens. Again, the same flexibility that allows users to add any content allows us to style and even completely change these areas depending on the screen size.
Images
One of the best examples of this responsive images. There is a fantastic javascript called picturefill.js that allows you to define different sized images to display to the user based on screen width. For example, if you have a 2000x3000px image, you can choose to display the full version on a desktop-sized screen, but can show a shrunk-down, 200x300px sized version on a smartphone-sized screen. In normal circumstances, you would have to use a photo editor to create 3 or 4 different sized images. However, with WordPress, this is done automatically.
These only scratch the surface! There are a whole slew of tricks and techniques you can use in making responsive themes and plugins for WordPress.
Conclusion
With more and more people using mobile for everyday activities and WordPress being more popular than ever, it’s imperative to make your themes and plugins responsive. You’ll be prepared to offer your clients great sites that look good on any screen size.