How to Build a Mobile Responsive Website With WordPress

image of StudioPress responsive design logo

The critical importance of mobile content marketing is in full swing, and every serious online publisher is working to find a way to make that transition as painless (and profitable) as possible.

The marriage of online content and responsive web design isn’t optional anymore, because a larger and larger part of your audience is visiting your website from a mobile device.

The good news is, you don’t need to invest in multiple versions of your website to automatically deliver the best possible experience to your audience … across all devices.

You can finally meet your audience on any digital device they choose to use, exactly when and where they need/want you most.

If you’re ready to harness the power of a responsive website right now, we’ve got 17 out-of-the-box mobile responsive designs (with more coming all the time), all built on the Genesis Design Framework for WordPress.

Why should your website be mobile responsive?

Simply put, because that’s where your audience is.

They’re on their phones and tablets, running from place to place, or kicking back in bed at the end of the day, just like you. Mobile is how we’re starting to work and play online now, and this mobile lifestyle is growing exponentially.

You need one rock-solid website, automatically displaying itself in multiple versions (check out how your site looks on different devices right now), all representing your platform flawlessly and without further effort from you.

This makes it a snap for you to deliver high value to your audience, without costly ongoing developer fees, or having to learn any confusing code.

And it makes consuming your content easy and pleasing to your audience — whether from a desktop, laptop, smartphone, or tablet.

What does it really mean to have a mobile responsive website?

For your audience this means …

  • No more pinching and tapping for the right view
  • No more microscopic fonts or unreadable calls to action
  • No more mistaken clicks, taking them away from what they want to read
  • No more wondering if they’re on the right site due to horrible layout and design

For you this means …

  • No expensive app development and maintenance
  • No secondary mobile site to spend time and money on
  • No worries that your content won’t work well on a phone or tablet
  • No need to rely on — and update — poorly designed mobile plugins

How to build a mobile responsive website that works

So, how do you get all this done without breaking the bank, or wondering if the underlying code of your site is a total mess, or spending hours figuring it all out?

The easy answer is to take a look at the mobile responsive ready themes from Copyblogger’s WordPress theme division, StudioPress.

In the future, all of our StudioPress themes will be mobile responsive, but until then, we’ve got you covered with a handful of ways to easily build a mobile responsive site.

Here’s a quick look at a few of them …

Are you mobile responsive?

We’ve said it before, but the dirty little secret of mobile content distribution is that you only need one website to serve every device.

And, because you’re delivering one, unified, optimized site to the search engines, you keep all the SEO benefits of publishing to the open web.

All you need to do is create great content, and hit “publish”. A truly responsive design will take it from there, automatically displaying your site correctly for your audience, every time, no matter where your they view it from.

We live in the most amazing time for content distribution ever. You see them, the mobile devices are everywhere, is yours a mobile responsive website?

About the author

Kelton Reid


Kelton Reid is Director of Multimedia Production for Copyblogger Media, and an independent screenwriter and novelist. Get more from Kelton on Twitter and .

Print Friendly

Smarter is Better Solutions for Smarter Content Marketing

Here’s what we’ve got for you:

  • 15 high-impact ebooks on content marketing, SEO, email marketing, landing pages, keyword research, and more.
  • A 20-part Internet marketing course that lays out a comprehensive path for your own online strategy.
  • An organized reference guide to the “best of the best” of Copyblogger.com, and how it all profitably fits together.
Free Registration

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet us over on Google+ or Twitter to join the conversation right now!

Comments

  1. Since StudioPress started to make the child themes responsive I build all the sites using them.

    What I love most is the fact that I don’t have to spend hours making a theme responsive, but just make the extra bits added responsive.

    I usually take the theme, make it mine by adding a custom design and then make those changes responsive.

    Easy as pie!

    • Hi Eugen,

      I learnt this after hours of frustration … just build and then fix the mobile responsive elements later. At the time of writing, not all sorted on my site … still a few design elements to finish, but once done, we can sort out the responsive elements. Wish I’d read your idea before I gave myself a headache, but it’s refreshing to see someone else make that suggestion.

      All the best.

  2. I chose a mobile theme for my kale smoothies site because I knew that I didn’t want to futz with CONVERTING it later, and I’m fairly happy with it as it is.

    However, right off the bat I noticed some conflicts with using different plugins at the same time, so maybe I need to switch to something more stable, like a StudioPress theme.

    How hard is it to port your content to another theme? Do you have to just rebuild it from the ground up? I’d like to have the most solid theme possible, going forward.

    • Paul, it really depends on what kind of content you have and what your layout currently is. At quick glance of your site, it appears you’ve got the “Pinterest-style” layout. Believe it or now, I’m currently developing a theme called Pin This which is pretty similar to that layout.

      My hope is to make that responsive, assuming I don’t run into any issues with the couple scripts we’re using to pull of that type of layout. If I don’t run into any problems, moving off your current theme to that theme shouldn’t take much effort.

      Obviously you’d need to do some CSS/style changes if you want different colors/fonts, but content-wise you should be good to go.

  3. Great resource and thanks for the samples and demos too. Perfect timing as I have been working on what to upgrade on my own site!

  4. I really don’t know what I’d do without StudioPress themes. Been using them for about 5 years and I’ll never use a theme from anyone else, ever. I would also never use a theme now that wasn’t mobile-responsive. It used to be a nightmare checking how a site looked on every device, at every resolution. Now I just know they always look right.

    Personally, the eleven40 theme is my favourite. I use a slightly modified version of it on every single one of my blogs at the moment!

  5. Thank you for sharing, Any technique to customize the Sample Genesis Child theme to be mobile responsive website?

  6. Hello!

    Excellent tips and I am using Genesis Framework from quite a long time now. Its been really amazing and easy to customize.

    I was struggling to get the Mobile Responsive concept but this post have been cleared lots of things from my mind.

    Thanks for sharing great valuable content :-)

  7. Thanks for sharing the information. This is actually a perfect timing as I have been working on what to upgrade on my own site! I really love the ideas; keep it up!

  8. Nice post on building a website with word press. I actually love the idea.

  9. I am using Genesis from quite a long time now. Its providing great responsive design for all kind of mobile devices. Thanks for the information. Keep it up :)

  10. Just a question? Does the mobile friendly theme switch properly using caching plugin? I came across some where caching causes mobile pages being displayed on desk top browsers

  11. Excellent post, Kelton! Being mobile is what today really has become and as a marketer, I’m very glad to have come across this article. It’s good to know that there’s a wonderful, available, ready tool to help me (and my clients) develop an all-in-one website to reap SEO benefits. Thank you for putting together these information.

  12. Hello Kelton… I noticed that the Lifestyle Child Theme is not on the list of the responsive child themes. Is the latest version of Lifestyle child theme responsive at this time?

    if not yet… do you have any recommendation on how to make it responsive? Any recommended plugins or perhaps a service for converting it to mobile?

    Thanks