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 (Genesis) themes, you probably know they are in the process of making all their themes responsive, but I got tired of waiting for The Genesis 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. (Update 2014: I now use the Daily Dish theme.)
Update October, 2013: Yay! The Genesis Lifestyle Theme is now 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.
How to Make Your Site Mobile Responsive — The Options
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. (Update: I now use The Daily Dish 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 This 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 Daily Dish theme.
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 forum 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.
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?
Thanks for your article, my question is can blogger also be optimized for mobile?
Hey Lisa how customizable is the theme? Especially the colors since it seems that the theme is just black and white. If I do buy I’ll be sure to use your affiliate link.
Those are just the colors I chose because I like a clean, simple look. Through the admin panel, you can change the color of the background, menu background, fonts, links and more. It’s probably one of the most customizable Genesis themes without having to go into the code.
I know you were asking Lisa, but I just bought the Genesis framework and I’m using the child theme Outreach for our church (http://realloveokc.org/). There are a ton of FREE Genesis plugins for WP too.
Hi Lisa,
This is the first time I have stumbled across your blog, I usually watch your videos on YouTube. The amount of work you put into your articles is inspiring. I am really glad I used your affiliate link for the Genesis Lifestyle theme all that time ago.
Keep up the fantastic work.
Thanks for the support, Sam!
Hello Lisa
Now a day’s most of the people used mobile device to easy access of internet. So to make a site mobile friendly is necessary for a site owner. Otherwise he/she lose some site visitor. Thanks for to share such a great post with us..
In several places, AdSense say that the goals of these changes should be to “maximize ad and user experience” – and most of their Terms and Conditions about what you’re not allowed to do still hold, so it’s clearly not carte blanche to make any changes you want.Provided you have enabled a mobile template then responsive / adaptive website design isn’t and issue which Blogger users have to worry much about – although there are some things you can and should do .A/B testing is certainly relevant- and I’ll be looking to see how much support their code offers for this.Right now, I’m not sure how relevant dynamic custom channels and minification are for Bloggers – will be investigating this over the coming weeks.See AdSense’s help-centre article for details and the specific code snippets related to the these types of changes.
The theme I am using on my blog is responsive! Very user friendly for smart phone user with little width of screen!
Nice article Lisa!!
Another Genesis theme I use and recommend is Metro. I typically use it for simple sites that get a lot of mobile traffic.
My favorite theme right now though is Jarida which can be found on Theme Forest. It looks great on every device- iPhone, iPad, Android Phone, etc. When you adjust the window size on your browser, it changes the layout of the page to fit the new dimensions. It’s definitely another responsive theme to check out.
Cool, never heard of Jarida. Now I’m curious! lol
I use to waste so much time searching for and customizing free themes. These days, I just go to Theme Forest and sort WordPress themes by the number of sales. I then pick a responsive theme with the best ratings and fewest complaints. 😉
Here are my favorite responsive themes currently:
http://themeforest.net/item/jarida-responsive-wordpress-news-magazine-blog/4309191
http://themeforest.net/item/flavor-responsivehd-magazinereview-ajax-theme/4817769
No aff links of course. 😉
Lol, I was focused all the time on the design of the desktop version of my site that I forgot all about the mobile one. I’m going to look right away for a responsive theme because according to Analytics, 43% of my visitors are from mobile (1. iOS 2. Android – surprising!).
Thanks for sharing this, Lisa!
Thank you so much for your help, Lisa. I love your information for your clarity and straight forwardness. You are inspiring and you give me hope!
Hi Lisa ,
Thank you just a wonderful tutorial , and one more questions can blog app for android platform or iOS platform will it be effective to drive traffic , as per my idea now a days people hang with smartphone more then pc
waiting for reply on this issue
The WP touch is a good idea to make your website mobile friendly.
I am curious to find out what blog platform you have been working with? I’m having some minor security problems with my latest site and I would like to find something more safeguarded. Do you have any recommendations?
Great points on having your site mobile friendly. Your advice on using WP Touch was very helpful. Thank you!
I started using WP Touch, but didn’t like the mobile looking different than the desktop. Jetpack has a mobile site feature, but I have never tried it.
Yeah that’s why I didn’t like WP Touch.
I’m using Blogger’s blog that I read mobile version, but fortunately it is very friendly.
Mobile friendly site is a necessary thing to any website because smartphone users are gradually increased in the world.So every website owner need to target on mobile users too.Thanks lisa for providing this huge and detailed post about mobile friendly design of website.
Hi
I am using Codelight theme which is a responsive theme and it works really well on small devices like cell phones and tablets, it fits the screen according to the device, Still I am confused how to use ads on it, I want to use AdSense mobile ad units in mobile view but don’t know how to implement them, do you know how to use them or any plugin?
Hi
It is wonderful post telling how to make user friendly for mobile users.as many of us get annoyed if page is not correctly fit to screen.
Most of the things do remain the same but the aspect of having a good layout and user friendly site has become the key things in my eyes. So apart from posting good quality content, we need to focus on creating a good lay out for our blogs as well.
I use WPTouch since I am not a techie and I also cannot hire any freelancer since I dont have money to pay. So, WPTouch is the best choice for webmasters like me.
Lisa, your header scales size (shrinks) wonderfully on Mobile, so it does not overtake the whole screen and it show your whole site name written on the header. Why wouldn’t Prose shrink the header the same way on my site? It only shows the left side of the full height header.
Hey Lisa!
It has been a while since I have read an article from your blog. Was too busy upgrading my skills in web design. But now that I have a brand new blog about Art and Design, I needed to catch up on my article reading and behold! Your article is about responsive web design. I am quite surprised how you have become quite good at coding 🙂 I am glad that your website is now responsive. Also that bit about Google Adsense only allowing CSS media queries for the responsive route makes sense!
Also I might be going out of context here but I was not approved by Google Adsense because of copyright material. I am suspecting stockphotos being the culprit but hey I am not the expert here. Could you take a look at my blog if you have extra time and let me know if I am right about the stockphotos?
Making my site more mobile friendly has been on my “to do” list for ages…thanks for the timely reminder to get on with it..!
These were really nice tips. I was looking for such resources and I believe that your blog is gonna help me a lot in future. Thanks a lot for sharing this useful article.
Yeah lisa well spoken i am working on creating a responsive css file for my theme because to me great themes are not responsive what i mean is that the themes i love are not responsitively made and making it responsive yourself will give you that which you desire.
Hi Lisa, Well said. Depending on what audiences your website serves, some industries are already over 50% for website views via mobile devices, and the trend only continues to accelerate. I can see the future headlines now “go responsive or go home…” Thanks!
Hi Lisa
Interesting topic on this post. I just went to check my analytics and even that I run a tech blog mobile devices is less then 20%, but as you say that will properly change a lot within the next few years. It is not that my blog is useless on a mobile device, but maybe I should take a look on the WP Touch plugin anyway.
Oh this is just what I needed. Thank you. I’m using Thesis but now I’m thinking to go with Genesis. The only thing is I spent so much time with the current design of my site. I guess that’s the way it is, though. You have to keep up with the times!
Thank you for theese fantastic tips! My website is visible on actual IOS Smartphones. But I must start a test if it is also visible on other devices.
Dear Lisa, may i ask you how to correctly create a static front page with Prose?
It does not seem to have Home wigets?
And then how to use another page Mysite.com/blog/ as a blog (that can utilize Genesis blogging functionality)
Hi Gold
I just created a “Page” and then set that page as my homepage in “Settings” / “Reading”. I haven’t tried the “blog” functionality yet. Did you try creating a blank post and using that as your “Post” page?
Ah i see.
So may i ask you how does your What’s New? page work then? It looks like blog, no? (sorry i am totally new to all the blogging!)
Thank you!
No problem. I don’t mind the questions. I created a category called “New”. So all my latest posts get tagged that category. I used the WordPress Menu feature (under Appearance) to create a custom menu. I added the “New” category to the menu so it automatically shows my latest posts. I have a video about the navigation here http://www.youtube.com/watch?v=agDX9d-4DHA
Lisa, you are an angel. Thank you.
I already have full Geneses package of themes, but i will become a good part of your independent from Google traffic!
And i will buy something (maybe Aweber) through your links, because you’re helpful.
Thank you! 🙂
The ecommerce software I’m using at the moment has a built in mobile optimised version of my store already! so helpful and handy.
Hi Ben
What software do you use? I am often asked about responsive carts but I’m not too familiar with these kinds of sites.
looks good
I agree in part re the not wanting to pinch the screen any more. It’s great to see sites that are mobile friendly from the get-go! I did find the reader option on IOS pretty good a lot of the time.
My new genesis theme was fairly responsive right off the shelf, though did require some tweeking. There’s a responsive header plugin to help. Still some things need to still be improved so the plugin you mention may be worth a look. Thanks! 🙂
I’m generating 30 % traffic via smartphones and ipad these days.
One nifty tool is ipad-emulator.org For those that don’t always have ipads handy to test. It allows you to emulate an ipad on your dekstop\notebook etc to check look and feel.
In general I find ipads render really well without much tweeking needed at all.
cheers
30% of sales! Wow that’s pretty significant. Thanks for sharing your story.
By the way, love your topic. I used to have a huge dry eye problem from not blinking enough when reading a computer. This is a good and relevant niche for today’s times!
Thanks for the kind words Lisa. Yes, dry eyes are a very real issue these days and a lot of people a desperate for answers!
Eye health is so important and it’s one of those things we just tend to take for granted.
Jamie
From a commercial perspective, If a business has a traditional website and a mobile site, a user can become frustrated by the lack of complete content on the mobile site or the inability to navigate through the full site on their smartphone. This could result in a user giving up on the search altogether. I think responsive design is the best way to go for businesses and individuals alike.
The mobile site looks really good Lisa. When I was looking for a new theme last year I wanted one that would also show my site to mobile users a lot better than the one I had at the time. I have noticed a nice rise in mobile users accessing my blog since I launched the new theme – and every month it is increasing. The best $45 I have ever spent! 🙂
Thanks, Dean! Agreed. Not sure why it took me so long.
Hey Lisa,
Well, we live in a world where technology has been in a fast phase. If we think 10 years back, no one could imagine that a cellphone can be as it is right now. We also call it smartphones rather than cellphones because this device has upgraded so much that even computer applications can be open with it. Because of the rapid upgrade of technology, web pages and the internet should also be on the same phase and thankfully, mobile responsive themes are now available to purchase so that smartphone users can easily and comfortably read web pages using their devices.
Hey Lisa… Quick question… How many times have you changed your theme in the last two years? Always in search of perfection, that’s the way to be. I just recently switched my theme (on my SEO site) to the Expand2Web Dynamic WordPress theme, which I like a lot.
But I have a demo site, that I think that I am going to install the Genesis theme on. I have always been curious about how it would work for one of my sites. Also, I have heard that Headway themes are supposed to be pretty good. What are your thoughts on this theme if any.
Have a good one…!
Lol, Themeoholic Anonymous, that is what some of us need 🙂
Yes, sign me up for the intervention! lol
I think I’ve lost count! LOL Probably three times. I’m actually not a fan of constantly changing themes but this was an important switch and I’m glad I did it. The good news is this design is not drastically different from the other (which I liked).
I haven’t used Headway yet but I’ve heard really good things about 3.0. I heard 1.0 was buggy.
Hey Lisa,
Responsive design is where it’s at. You can also do this fairly easy by simply moving the edges of your browser in and finding the breakpoints and then fixing the areas you want to fix based on the breakpoints.
I have also used the Catalyst theme framework for a few clients. It has some built in sections for the various screen sizes and you can make adjustments there. It is super easy if you know your way around CSS.
I must confess that I haven’t done anything about my responsive AdSense implementation since I posted that thread!
The way that you explained it, that the advertiser is paying for pageviews they’re not getting, really shows how important it is not to hide the ad code and that’s compelled me to fix my ads ASAP before I get banned. Plus, I’m being held accountable now with the mention.
So thank you for the link – I don’t think I would have done anything about it otherwise.
Hi Lisa,
Thanks for the article. I really like the ScreenFly tool. I think it’s hands down the easiest tool I’ve found for seeing websites on different screens.
Your blog is easy to read on my iPhone 4 but your email is not. The text in your email is too tiny to read on the phone. I can stretch it out to make it large enough to read, but then I have to scroll from left to right to read it. (Sorry to leave negative comments, but if we are going to make our websites mobile friendly, surely our emails should be too. Do you agree?
I want to say that I am going to start paying more attention to your training because I’ve been building mobile websites for clients but I’m running into some clients who also need a traditional site. Now I need to learn how to do that, too.
Thanks for all of your hard work.
Mike
Hey Mike!
Yes, completely agree! I’m actually working on adjusting my AWeber template right now. So yes, I appreciate ALL feedback. Please don’t apologize. 🙂
I appreciate the article. I recently transitioned all of my personal site to responsive themes. I try some of the free plugins at first, but I didn’t like the inconsistent look between devices. Also, WP has some decent, simple, and free responsive themes I will be using for clients to cut their cost.
Oh good point about the WP themes. In fact the default WP theme, Twenty Twelve, is also responsive. Thanks for reminding me.
Hi Lisa, great post and a real weird coincidence, I got yours just as I was putting the finishing touches to my post on exactly the same subject! So I did a quick final edit and included a mention and a linkback to this post, in mine. Check out “last of the Mom and Pop Blogs” at http://freedom-blog.org.
Glad to know we’re thinking along the same lines, though we’ve taken different approaches.
Hey cool! Great minds think alike huh? LOL Hope your option works out!
Thank you for showing us those tools! I’ m a thesis lover- the only thing I don’ t like- its not mobile friendly… so, I have to think about switching the theme… one day 🙂
Hi Lisa,
A timely article for sure.
Could you please comment on or review the Site buildit Mobilize it version of what you have done here.
Thanks,
Hi Gordon
I have yet to experiment with that yet for my SBI! site, but when I do, I’ll be sure to have more info on it.
I have been making my blog mobile for the past year. While I have dabbled in trying to create a responsive theme, it does take some time to understand all the quirks of creating a theme for multiple devices.
I have instead opted for the WPTouch plugin since I have created my own child theme. The only issue that I have had is with cache plugins. Sometimes a cache plugin can’t handle a mobile device properly and sends the non-mobile pages to the device instead.
One suggestion I can make is for everyone to test their sites on different mobile devices and desktop/laptops to ensure their pages are rendering properly. Make sure you are logged out when you do.
Thanks for the shoutout as well.
Thanks for the information Lisa, thanks for the Screenfly tip. I discovered that my website is not mobile friendly; will correct this week.
All-the-Best-in-Success!
Gloria
Hey Lisa, my long lost twin, lol, I tried switching to Prose on my site just weeks ago, but the home page (static one) won’t read any CSS. It is that minify CSS setting in Prose that seems to be setting it off. So if I want to see my home page as it should look (and not one of those old no css sites) ihave to uncheck that box. I know you run a static home page so I am wondering if you had any problems with this and is your minify setting on or off?
Hey Bran! Always good to hear from you. It’s funny that you mention that because I had this exact problem on Instant WP but I loaded Prose on a hidden site and it worked fine with the static page. So no, I didn’t have any problems live, but I did have problems in the testing platform.
Did you happen to only try this on a local platform? Maybe that’s the issue. For some reason, Prose doesn’t like local environments.
No, I was doing live site while Maintenance Mode plugin was on. Maybe I need to play with it more. I was going to switch for the same reason, just change the colors to match current design. Gotta try again 🙂
Yeah, try installing it in a new folder and nofollow the installation/site. Maybe some plugins are conflicting.
That is a great idea, I will, thanks!
i just built a new website last week from my webhost simplesite with a little sum.At the same time i came across your website title the untold story about google adsense, which really help me in my site building,the step by step guide, the word of advice in runing online business, etc, i must say you re God send to teach and enlighting many people out there who re interested in online marketing business, but doesnt have the money to buy highly priced e book, to learn from.pls keep it on, cause God will surely reward for it. I want more tutoria in the area of Affliate marketing, and hoe to drive trafic to my website.thanks pls send your email address to my mail.
Great post Lisa,very informative. I agree that mobile devices will be the next wave of internet browsing.Luckily for me my hosting company decided to optimize my site for mobile traffic without me having to worry about doing it on my own.Thanks again for sharing you always over deliver on your content.
Wow, that’s cool! Who is your hosting company if I may ask? And thanks for the compliment. 🙂
Hi Lisa,
Making my site more mobile friendly has been on my “to do” list for ages…thanks for the timely reminder to get on with it..!
And I’ve just had a look at your site on my mobile and it looks fabulous!
Hey Melanie, no problem! Good luck with your project. Thanks. 🙂
thank you
Yes you are right techblogguy,themeforest i making it easy for me to find great responsive themes to suit my need.