Web Stuff

The Stuff You Haven’t Been Told About How To Make Your Website Mobile Friendly

25 Comments

Back in May I wrote a post talking about trying to make my sites mobile friendly. I shared some links in that post where you can check to see if your sites are ready for mobile or if they need some work. I also had a few gripes in that post; that’s because no matter what I was reading, I just couldn’t figure things out.

code101

At least my blogs were all fine, thanks to WP Touch. I use the free version because I don’t need all the bells and whistles that come with it, but it’s a fabulous program that helps WordPress blogs become mobile friendly. If you’re not using this and aren’t mobile friendly, it’s a plugin you need to check out.

For the rest of us… well, it’s basically taken me over 5 months to finally figure out what was going wrong with all that I’d been trying to do to get my sites mobile compliant, and when I finally figured it out, it turns out that the information wasn’t on any of the websites I’d been reading. So, I’m going to address some of what I discovered on my quest; some is on other sites, some isn’t, and some wasn’t explained fully. These won’t be in any particular order, but I’ll number them in case there’s some you already know and some you don’t.

1. Table coding structure

Do you see that code above in the image? All coders know that, except for a couple of enhancements, that’s the basic table coding structure for websites. This particular snippet is the code I use when I put images on my blog posts, whether they’re mine or whether I’m using the Compfight plugin, which finds free images that are allowed to be used via Flickr and Creative Commons.

Anyway, most websites use this structure to put their websites together, whether or not they also use CSS (cascading stylesheets). At least they use it as an initial basis because it’s stable and helps lock many elements into place.

The problem as it concerns mobile comes when you’re designating specific sizes that might be higher than what mobile will allow in general. I’m one of those anal types who usually set my initial tables at 90%, which means that my content would spread out over 90% of the space on someone’s monitor. I’ve always thought that helped things look pretty cool… but it turns out that it ends up fighting anything you try to do with mobile. It’s the reason this code I had found, meta name=viewport content=”width=device-width initial-scale=1″, wouldn’t work on any of my sites; ugh. What I decided to do was take out the width connected with my main tables. That helped a great deal… but there’s more (as always lol).

On some of my sites I was using the Google box ads. To make them format within my content I used the same table code.

On my medical billing site, the size of the menu on the left side and the size of the table in the content made the mobile version too big. I couldn’t shrink the size of the menu, so I had to remove the box code. That brought the pages on that site that I altered into compliance, and instead of fighting to keep the side box I switched to a different code… which I’ll come back to later.

On my main business site, I totally removed all secondary tables and went back to original coding instead, using the main table only and breaking the two columns up by using the

tag. I also altered the size of the two columns by making the width of the first td tag to 15% and the second one to 50%. I needed to go with the 65% because on that site I have two images up against each other, and they wouldn’t show properly if I reduced the size of the columns more.

2. Logo images

If you go to the page that talks about speed, it’ll recommend that you reduce the size of your images so they’ll load faster. What they don’t tell you is that you might need to reduce the width of your images as well for true mobile compliance.

On my medical billing site, the logo was 793 pixels; on my business site the combined size of the two images was around 850 pixels. That’s way bigger than the allowed size for the initial mobile size, thus you’ll never be mobile compliant that way. Although I loved the way the larger images looked, I knew I had to make a change.

Screenshot_2015-11-02-00-41-02

For the medical billing site, I reduced the width of the image to 400 pixels. On my main browser it’s definitely smaller, but still looks pretty cool. On my business site, I went a totally different direction and changed the height to 100 pixels for both images. It reduced the size of them both enough so that they would be compliant. The only problem I have is that if you look at it on the phone lengthwise the first image sits on top of the other one but I can deal with that because one, I doubt many people will be looking it up on their phone (maybe the blog), but two, if they’re like me they’ll probably turn their phone sideways, where they line up properly.

3. Google code

If you read that previous post, you will have seen my little rant that one of the issues turns out to be Google’s own stupid code. The code size that always worked the best was the 728×90 ad, which one normally put at the top of a page. Well, that 728 is way too big for mobile phones, so it looked like Google wasn’t giving us a choice of what to do.

Turns out they had made a relatively recent change that I didn’t know about, that I learned of from Lisa Irby’s YouTube channel, where she was talking about responsive ads and how one of her friends had doubled his income since switching. I don’t know about all that, but what I discovered is that if you use the responsive ad, it alters its size based on where people are viewing it. So, if it’s on their home browser they’ll get a big ad, even bigger than the 728, and if it’s on the phone and people aren’t blocking those ads they’ll show up perfectly for them and as big as they’re allowed.

I tried this out on my medical billing site and it works wonders! However, remember earlier when I was talking about using the tables for the ads within my content? For some reason the responsive ads won’t work if confined, and the table made the overall size for the phones being viewed lengthwise that it took them out of compliance. What I’ve done instead is killed that side box and put a second responsive ad at the end of the content. Since I was only running two ads on each page, and hopefully people are reading all the way to the end of those articles… all should be good long term, and I’m still mobile compliant.

4. Viewport code

Remember that viewport code I shared above? I had a couple of pages where I was having trouble with it in that form. The Google insights page kept saying to use the code as given; forget that mess. Most of today’s smartphones will handle a width size of up to 525 pixels, so what I did was alter the code and make the width 500. I had seen this figure altered on a couple of pages I visited while trying to figure things out. However, what none of them did that I did was to leave the second part of that script in there, the initial-scale part. For some reason it helped bring everything together; I can’t explain it but it worked. 🙂

By making all these changes, my pages were suddenly mobile compliant; yay! That doesn’t mean they’re perfect by any means. If I put the code into the insights page, it keeps finding recommendations to make to try to get to 100%. However, the main thing we all want to achieve is compliance, since that’s the thing Google is penalizing some of us for, and these changes overcame that.

To think, it only took me 5 months! lol Hopefully, if you’ve run into any problems this will help you solve some of them. I still have a ways to go to get to all the pages on those two sites, and I have one more site where the coding was so intensive that I’m going to have to do something drastic with it… but at least I now know what needs to be done… and you do also. 😉
 

25 thoughts on “The Stuff You Haven’t Been Told About How To Make Your Website Mobile Friendly”

  1. Oh Great, Useful and Informative article for the site/blog maintainer s. Now a days peoples don’t want to wait on site which have no mobile friendliness because you know zooming, pinching….uffffff…
    So every site owners should have a mobile frindly template and layout. And one most important thing is that design of website and user experience is compared for seo. By the way thanks for your valuable and enjoyable article.

    And yes I bought the domain for my blog keepmequiet.com . I am glad on it so you can wiss to me.

    1. First, “wiss to you”? lol Not sure what that means.

      Yeah, mobile is taking over, but I’m not sure the word got out to everyone, and it turned out not to be all that easy. I hate Google & the other search engines dragging us all into this type of thing, but it is what it is.

      1. Thank you very much for the wiss, I don’t hosted my blog now but choosed the right domain (like a brand), so that I said you to wiss. And also going to host my blog soon because of your opnion, so that I am glad. So now you know.

        I hate Search Engines for this kind of changes too because Editting templates, but If you just see both kind of templates (responsive and unresponsive) there is huge difference and responsive really looks good. This also helps users to use your blog for the long time and comes Again and again.

      3. ohhhhhh……
        that is ‘wish’ not ‘wiss’, sorry!
        This is my big mistake I every time do.

    1. Yes it does Lisa! I knew that at some point I’d figure it all out, but I was really disappointed that my normal research didn’t give me or anyone else any real ideas on how to fix things. I hope what I’ve written here helps a few more people out.

  3. Hi Mitch and thank you for making us aware!

    There are so many blogs out there that aren’t mobile responsive. As someone who is on mobile the majority of the work week, it’s imperative that I be able to read and comment easily. However, I have found some bloggers do not care to make things easy for me or the rest of the mobile world thus losing readers and potential business.

    Passing this along in hopes of spreading more awareness!

    1. Thanks Bren. I don’t hate on people who aren’t mobile compliant because it can be hard to do; that’s why I wrote this post. However, for everyone who has a WordPress blog & isn’t using WP Touch… those folks need to be educated. 🙂

      2. That may work for newer sites Brenda, but in my case my business site was created in 2002, one of my other sites created in 2005 & the last created in 2008. I didn’t want to have to recreate my sites so it came down to figuring out how to fix them.

  4. Good for you to figure it all out Mitch. I switched to WP Touch premium and it solved it for me. I am not that technical to go through each like you did. I wish I was though. In the past too I have hired Mayura to do a few things for me so I could spend more time blogging and doing the social networking without having to take hours to fixure out that darn technical stuff 🙂 Thanks for sharing, good to know it can be solved!

    1. Lisa, for WordPress blogs that’s the way to go. However, I have static sites also, and one can’t use plugins on those. lol Oh yeah, it was going to be solved! 🙂

  5. Hey Mitch,

    So are you saying that what you’ve shared here you need to do anyway even with the WPTouch plugin? I guess maybe I didn’t catch that in the post since you said that it was what you used yet you still went in search for answers.

    As you’ve probably heard me say a few times, I’m looking to change my theme in the near future. I have one that I finally found but like all technology, I’ve run into some issues trying to get my test blog set up. Totally issues on their themes part but frustrating when something so simple doesn’t go well.

    This was really an interesting post though, I didn’t know about these issues. A little over my head but what else is new right! LOL!!!

    Thanks Mitch and enjoy your day.

    ~Adrienne

    1. Hi Adrienne,

      This wasn’t for bloggers but for people who have regular websites that they had coded rather than purchased a template. The part for bloggers who use WordPress was mentioning WP Touch; that’s all they need. This is for those of us who’ve had regular websites for at least a few years; it’s even possible some of the templates out there weren’t created to be mobile friendly, since it also depends on what people put on those sites.

  6. If you have Google Analytics installed onto your websites then you can easily dig down into your stats and see what percentage of visitors are using mobile devices. It’s very interesting to then compare the bounce rate of mobile vs desktop visitors. If they are the same then people are probably handling your site OK. If mobile has a lot higher bounce rate then you need to do something about it.

    Don’t forget that Windows phones also act differently to iOS / Android phones. I’ve seen beautifully written responsive sites that work well on iOS / Android but when viewed on a Windows phone think they are running on a desktop machine and fail (base width for a Windows phone being 480 px).

    1. Keith, I don’t have an Iphone so I can only test on my Android. However, Google doesn’t seem to care; if you don’t pass their test then you just fail. I don’t get tons of traffic to my business site via phone, but in a way it doesn’t matter because I still needed to make it, and my other sites, mobile friendly anyway.

  7. WordPress websites can be fixed as easily as switching to a responsive theme. I’m surprised WPTouch is still around at this point so kudos to them.

    Static pages are where I started as well, but I have no idea how to update them using things like Google & Viewport codes. You have more persistence than I do. I doubt I would have spent more that an hour on it before begging for help from someone that already knows. Now you just became that person. lol

    I built my daughter’s cleaning website in 2005 and just got around to updating it to WordPress this year. It’s not a blog, it’s just using WP. What a pain! Truthfully, the content was almost as easy as copy and paste since it is just a few pages long.

    The redesign, overall, was very time-consuming. I’m glad I finally took the time to do it because it was a lot easier to teach her to update the content herself. Up until then I had to make every single change or update for her.

    Anyway, it’s responsive (mobile friendly) now and that’s pretty important for that niche (maid/cleaning service) since over 70% of her traffic is on mobile.

    I believe that was my last static website, other than a few simple landing pages. Now they’re all WordPress and responsive.

    1. Brian, new themes might get the job done but that wasn’t going to happen with my sites, for the reason you mentioned, the redesign part. Course, I also don’t want to take the time to change any of my blogs themes since I’m not making money from them. Actually, it looks like I might be building the website for someone locally and I told them I was going to use the WordPress software to do it to save tons of time & then teach them how to alter it whenever they want to do so.

      I just couldn’t admit defeat on this bad boy because it was too critical for me to get done. Course, my remaining site… no idea what I’m going to do with that one but I’m thinking about something drastic… we’ll see…

  8. Hey Mitch,

    Great Post Indeed! Mobile Friendliness is very important these days, as more than 50% of traffic comes from small screen sizes.

    But instead of worrying abut these points, I will pick Genesis framework or Thesis, which will do the job for me.

    1. I guess those are pretty good options for blogs Atinder, but for static websites that were created by written code and have lots of pages, this wasn’t close to being a workable option.

  9. Hey Mitch, it’s time like these that I truly appreciate my theme and the fact that its creator tries to keep up to date with things. Luckily the last update was to make it mobile friendly.

    He’s even taken the header problem into consideration. I now have two headers, the normal one and the one that mobile users see.

    1. That’s intriguing. Course, the blogs are fine with the plugin; it’s the other sites that I created and modified that this whole thing was about. You know me; I’m not into all the new work that would go into changing my sites to WordPress, especially since I have no idea what I’d want the new sites to look like.

Comments are closed.