How Mobile-Friendly is Your Site’s Design? Tips for Beginners!

responsive design 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 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.  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…

display widgets

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.

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?


Comments

  1. I am also using Genesis Prose theme for my blog.It is really awesome.Good theme for bloggers who loves good content.

    • I have just bought Genesis framework and all of its child theme. I know Genesis is very responsive to mobile devices. The problem I am facing current now is that Genesis shows all of my post to grid. I don’t like this. I want to show my posts in homepage as single posts. I can’t figure out how to do that? Anyone, please help me.

      Thanks Lisa for your wonderful post. It forced me to buy Genesis framework.

  2. having responsive template is a must for every business website. As in the mobile world, people prefer to use mobiles and tablets on the go. A responsive template keeps your users happy and attracted to your content on every type of mobile devices.
    While making a template responsive, one should check the live preview through http://www.studiopress.com/responsive module.
    I noticed a great boost in traffic of one of my online MBA courses website after adding custom mobile templates to it..

  3. Thank you Lisa for this insightful post. Unfortunately I have found out that my website is not mobile responsive. Think I’m gonna try Genesis themes. Just had a quick glance at the themes, and all of them are slick and really beautiful.

  4.  techton77

    Appreciate the tips. Will look forward to follow them accordingly.

  5.  farmvillpk

    Hey lisa.. i am using a responsive theme on my blog but it loads a lot slow… can you give me some tips on making it super fast?

  6. thank you Lisa I have been chasing my tail for years now following this and that and really getting nowhere but now that I have the time to be patient with myself I can learn and get a niche to build on securely I like your info site and look forward to learning lots more Thanks for having such a welcoming site

  7. I love your articles Lisa, this is the second time I read this article alone on “Mobile Friendly Sites”. And have referred this article and your website to several people, as great reading. Great work, keep it up. I’m going to keep browsing your site, see what’s new. Thank you, Xavier

  8. Lisa you know the key that how to entertain your readers with your really attractive articles. Last month I designed mobile friendly theme for my blog but as am not expert with CSS so its shows in normal text mode

  9. I dont like to create differents pages for my Site on Multiple Devices/Resolutions because this way you can really confirm how you site will open in each new device that is coming new every day, but i know is really needs and just let me do it the best way.

    That’s from your tips one more time!

  10. I think the most important thing for one’s success is insisting. One may fail, may fall behind the others. But if he keep insisting, all the new knowledge he will finally learn and all the difficulties he will finally beat.

  11. I want to make money on Google Adsense i need help.

  12. I am also using Genesis Prose theme for my blog.It is really Good

  13.  MatthewPLudwig

    Love Genesis’ new responsive child themes! They load super fast too! I think migrating your site to a responsive theme is one of the top 3 foundational on-page SEO moves you can make right now

    •  2createawebsite

      Me too! Just installed Magazine Pro on another site and absolutely love, love it. Can’t wait until all of their themes have converted over to HTML5 and responsive.

  14. Hie Lisa,
    Good Post, Thankyou Lisa for giving such useful advice, after reading your post i thought OMG, what i was doing? I never thought of these things that you’ve told your website theme should be Mobile/Cellphone responsive, you literally opened my eyes thanks a ton again :) now m gonna look for these things as soon as possible.

    -Piyush Dhiman :)

  15.  HowtofindWFH

    Hi, Lisa!
    Just wondering what you have done about converting your theme to HTML5 with the Genesis 2.0 upgrade. (Yours may be one of the themes that has already been converted.) Poor person that I am, lol, I converted the sample child theme to use on the Genesis framework and now I am facing having to convert the theme myself, which I am loathe to try to do. Any easy way to do this?

  16.  fross30

    I would love your feedback of my site.

  17.  SamGalaxyS5

    Great content About responsive blog or website.I think now everyone should make their blog or website responsive because it is going to help the user in all aspect and user feel happy when he or she open a website or blog in mobile and it open normally as in laptop .

  18. Thank you, Lisa!

  19. i am using a responsive theme on my blog but it loads a lot slow… can you give me some tips on making it super fast?

  20. Hi, Nice post for me, Thanks for sharing. I have changed my wallpapers blog theme to responsive as I have noticed that a lots traffic is from mobile and tablet. Thanks again.

  21. Hi Lisa,

    I have the latest version of prose and I uploaded a custom header. However the header image is not responsive on mobile devices, it gets cut off. Did this happen to you? How did you fix it?

  22. Hello Lisa,
    I receive more than 75 percent of traffic from the mobile users. And one thing is definite that if the blog is not optimized for mobile version then there will be lots of loss in traffic as well as conversion of blog. Great article, thanks for sharing.

  23.  VanHoveDesign

    More than half of web browsing is *not* done on desktop monitors anymore. I have been designing responsive-only since 2012 and am glad I did!

  24. thank you for info Lisa

Speak Your Mind