If you’re reading this post on your phone, you probably noticed something a little different about my blog.
You no longer have to pinch and zoom to read my content.
I finally have a responsive design. That simply means it adjusts to fit small screens better.
(Yes, I know…. took me long enough, right?) 
If you use The StudioPress themes, you probably know they are in the process of making all their themes responsive, but I got tired of waiting for The Lifestyle Theme to get its makeover.
I was willing to wait until I emailed customer support for a time estimate and discovered it would be some time before the project was complete for all themes.
So I made the decision to switch to the Prose theme (yes, that’s an affiliate link) — which is one of their child themes that is already responsive.
If you’re not a techie, don’t worry. There’s no code you have to edit to make your site responsive. It’s part of the theme.
Now if you’re not interested in buying a theme, you don’t have to. I’ll talk more about that below.
Have You Checked Your Site’s Analytics?
Depending on your visitor demographics, it is quite possible more than half of your visitors are viewing your site on a mobile device today (especially if you get a lot of social media traffic).
And if you have a site with a lot of forms (which can be a pain to complete on smaller screens), you really should consider going responsive sooner than later.
Some predict we are only a couple of years away from mobile browsing beating desktop browsing, so ensuring your site displays optimally in all resolutions is more important than ever.
Options for Making Your Site Mobile Responsive
As I stated, you don’t have to get a new theme if you don’t want to. There are plugins that will do a pretty good job of making your site responsive.
WP Touch is probably one of the most popular ones because it works with most themes — and it’s free!
I didn’t want to use a plugin because then I would be relying on a script outside of my theme to work properly. Plus, I wanted the mobile version of my site to look similar to the desktop version.
WP Touch strips out all your styling and uses the same template for all sites. But I will say, it does handle AdSense ads very nicely.
Using a plugin is not a bad idea, but I think it’s best to actually have a site that is coded to adjust for mobile devices.
That’s why I went with the Prose theme.
And of course, there are other companies that make mobile responsive designs — such as PageLines, Themeforest and Headway to name a few. (No affiliation since I’ve never used any of these themes.)
What About Outsourcing?
If the above options don’t meet your needs, you can always outsource the project.
In fact, I did just that for my HTML site, but I made a big mistake that I hope you can learn from.
I found a designer on Elance to do the job. He quoted me a very reasonable price of $75.
At first, he was going to charge $250, but when he realized he wasn’t going to build the site from scratch, he lowered his quote — which I appreciated.
Within two days the job was done and even though I was pretty happy with how my site looked, there were some tweaks I wanted to make later.
I was headed out of town and didn’t want to hold up the job any longer. In other words, I rushed the process.
Since I’m pretty good at tweaking CSS code, I paid him the $75 and planned to make the remaining edits myself.
Well after I started editing his code, I still couldn’t get the site to look like I wanted.
Instead of rushing, I should have taken my time and made sure it looked exactly how I wanted BEFORE I paid him.
The guy was nice enough. I probably could have contacted him for more tweaks after I paid him. But it was my fault for not ensuring the site looked how I wanted before paying him.
So here I am, out of $75 and still unhappy with how my site looks on certain mobile devices. 
Hello Prose!
I decided to give up on the static site for the time being and focus on this blog since I knew StudioPress (Genesis) has some responsive themes.
So I browsed their site and decided upon the Prose Theme. It looked a lot like my previous theme, and it also has a lot of admin panel design options so you don’t have to edit the code to change the font styles, sizes, colors, etc.
It sort of reminds me of Thesis 1.0.
So I took advantage of the “current customer” discount. I bought Prose for only $26 and had the theme up and running in just a few minutes.
I even learned how to tweak the stylesheet to hide certain sections of the site in lower resolutions.
Look out!
Could I Use The Prose Theme on My HTML Site Too?
Then I got really bold. I wondered if I could somehow use the code from this theme on my NON WordPress site too.
Just out of curiosity, I grabbed the source code from this blog, pasted it into Dreamweaver and low and behold the site displayed perfectly in my software!
So I made some tweaks (actually I made a lot of tweaks that took me a couple of days) and figured out how to work the code into my existing layout.
Quite honestly, I would NOT recommend this route if you’re not familiar with code. Either switch to WordPress or hire someone to do the responsive design for you.
Whew, what a task that was!
Nevertheless, both of my sites now use The Prose theme and are responsive!
Hiding Certain Site Elements in Responsive Mode
One cool thing about responsive design is you can opt to hide certain parts of your site when viewed on smaller devices.
For example, if you want to remove the footer widgets from the Prose theme in smaller resolutions, you simply add a line of code to your theme’s custom.css file. See the highlighted text below…
So basically, you can take any element (#header, #sidebar, etc.) of your site and apply your own style for the responsive view or remove the element completely by adding the display: none attribute.
AdSense and Responsive Designs
I have to give a shout out to my forum member, Charlie, from CodeConquest.com for bringing this up.
If you use AdSense, it’s very important that you never, ever hide your AdSense ads in a responsive design. It’s against the terms and conditions.
As my moderator, Paul from Technically Easy explains, even though you are hiding the ads from readers, the javascript still runs.
That means it’s registering as a page view so advertisers could be paying for page views that they aren’t receiving because you’ve hidden the ads.
So please, please do not hide your ads or you could be in trouble with AdSense.
On a slightly different note, Google has officially modified their “Modifying Ad Code” policy. Now you can edit your AdSense code to make your units adjust accordingly when your site is in responsive mode.
But don’t take my word for it. Read it on the official AdSense blog.
Here’s a more in-depth tutorial on how to make your ads responsive.
I have yet to test this, but looking forward to experimenting now that Google has modified their policies.
What Does Google Say About Responsive Design?
You may be wondering what Google has to say about making websites mobile friendly. Here’s a quote taken right from their Developer’s site.
Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices (as opposed to having a mobile and non-mobile version) and using only CSS media queries to decide the rendering on each device.
That is exactly what the Prose Theme does out of the box.
Now, don’t let the techy jargon throw you. A media query is just a statement in your theme’s style.css file (stylesheet) that says, “Hey, if someone is viewing this page on a resolution that is less than X, display the layout this way.
Back in the day, (which is only about 5 years in Web time), people would have completely separate sites designed for mobile devices. But thanks to CSS3, you can now use media queries.
So when it comes to WordPress, themes that are considered “mobile responsive” simply add those queries to the existing stylesheet or use a separate one to tell the browser how to behave.
How to Preview Your Site on Multiple Devices/Resolutions
If you want to see how your site looks in multiple resolutions, here is a cool tool that I have become very good friends with in the past week. You can also use ScreenFly.
Just put your site URL in the blank and see how it looks on smaller devices.
If your site is not responsive or “mobile friendly”, it will look as if it’s cut off in the lower resolutions. Don’t worry, most devices will just size the layout down to show the full site.
Users can pinch and zoom to adjust the size of the text.
What Do You Think of The Responsive Trend?
As trendy as responsive websites seem to be now, some critics believe it’s all hype. They say most people don’t mind pinching and zooming when browsing a site on their phone.
While that may be true for many content websites, browsing certain sites is a complete nightmare when they aren’t responsive.
Sorry, but I am NOT going to pinch and zoom my way around an order form where the drop-downs or certain features are nearly impossible to select.
For certain kinds of sites like ecommerce or gaming, a responsive design is almost a must today.
In my case, one of the reasons I was slow to adopt the responsive trend is I didn’t have a very large percentage of mobile viewers.
But I’m starting to see those percentages creep up. I’ve even received some comments about how difficult it was to read my posts on certain phones.
Also, my own preferences began to change.
Two years ago, I didn’t really mind pinching and zooming to view a site’s content on my phone.
But as more sites started going responsive, I got spoiled and began to really appreciate it when a site loads nicely on my iPhone.
So I jumped on the bandwagon.
I still have some tweaking to do with regards to my sidebar content, but the overall site is much easier to read on smaller devices.
What about you? Have you gone responsive? What theme are you using? If not, why?
