image description

A Walk Through Guide to Mobilizing Your Site

April 21, 2015….that’s the deadline. Google has flat out said “mobilize your site now or we’ll kick you off the Internets!”

OK, so maybe they didn’t say it like that verbatim, but more or less. My favorite co-worker with a name that starts with C, Chris Lister, covered Google’s announcement and what it means to you in depth with his post “Google’s New Mobile Friendly Algorithm Update“. So I won’t bore you with those details.

What I will bore you with is what we (and by we I mean I) did to our own site to make it pass the Mobile-Friendly Test. If you’ve got what it takes, you can follow along and attempt to do it on your own site.

Forewarning! This is Going to Suck!

Assuming you’ve already run your site through that test and have seen that it failed miserably, what can you do? Well if you don’t know anything about HTML or CSS…nothing…you’re screwed. Close down your business, it’s washed up.

I kid of course. You can always hire someone to do it for you OR if you want, you can attempt to do it yourself. And assuming that’s what you’re going to do, that’s what this post is for.

TL/DR Means Too Long / Didn’t Read

I bet you didn’t know what TL/DR meant! Either way, this is a notice. This post is quite long and probably going to confuse you. Let me put it in a nutshell for you.

1. Use Chrome Inspector
2. Don’t Use Subdomains
3. Create an area in CSS for your mobile styles
3. Use display:none; for stuff you don’t need
4. Wonder why Paul just wrote 3 twice
5. Use dynamic widths
6. Make a mobile menu
7. Test and fix more stuff
8. Test and fix more stuff
9. Ask your boss for a raise, you deserve it!

That’s all you gotta do, for real! If you want to get into details, proceed.

Tools of the Trade

It took me roughly 10 hours from start to finish…probably more like 6 but when you factor in breaks for checking Facebook, and taking my usual Monday nap at 12:30….hey it all adds up!

If you’re wondering what I used for testing and coding, today is your lucky day! I use Adobe Dreamweaver for all my coding. It makes life easier with closing tags automagically, and color coding things. It also has built in FTP, so as soon as I have an edit, I can put it to the server and see it.

That by itself would take a long time. Make a change, post, refresh, look, fix change, post, refresh, look…..and so on. So to eliminate that stress, I use Google Chrome’s built in code inspector. It allows you to make changes to anything on your site. CSS, HTML, and it even gives you errors for when you suck at jQuery.

Chrome has the additional benefit of using their “Toggle Device Mode” so you can view your page live as it would look on a multitude of mobile devices. For the most part I just use the iPhone 6 Plus view, cause I could care less what the site looks like on an Android.

Now that you know what I used, let’s go over some steps to get to the end goal. (Note: I take no responsibility for how much you’re about to f up your site by following the steps that I did, that’s all on you!)

Subdomains Are For Pansies

If you’re going to do this, then do it right. Don’t create an m.yourpooratemptatmobile.com site. You’ll end up with a bunch of duplicate content issues, or you’ll forget to copy over an important page. There’s just too much risk! Use your CSS style sheet to make your current site “responsive.”

Before we dig in to the CSS, there’s one important piece of code you need to add to your head section. (That’s between the <head> and the </head> in the code. Not the header, which is where your logo and menu are on the site).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" >

I throw that just below the <title>My Website Rocks More Than Yours</title> tag. I’m like 82% sure that code makes it so you can’t zoom in and out when you’re browsing on your phone. Correct me if I’m wrong. Or just believe me because I’m probably right (just ask Susan, my co-worker…don’t ask my wife).

Now that your site knows not to let your phone mess around with your junk. Let’s get to the nitty gritty.

Mark It Off With Police Tape

Figure out what width will be the minimum width you want your current site to be viewed at. For most people it’s going to be a resolution of 1024×768. Because corporate America is too cheap to buy their employees current computers and monitors, you likely still have people coming to your page with that resolution. Don’t take my word for it, check Google Analytics! (Reporting > Audience > Technology > Browser & OS > Primary Dimension: Screen Resolution…. if you’re reading this in the future and that’s changed then I can’t help you)

Once you figure that out let’s mark off an area in the CSS file where we can put most of our code. To do this, you’ll use this tag:

@media screen and (max-width: 1024px) {}

That basically tells the browser “listen up, if the visitors screen width sucks, use the following styles.” All of your styles for screens smaller than 1024px will go betwixt the brackets.

Now if you’re going to get really fancy, then you can have different sections for all kinds of different widths. I’m not fancy, so I just used one other one cause I found just a couple things that weren’t playing nice when I went that small:

@media screen and (max-width: 413px) {}

Don’t ask where I came up with 413… I don’t remember. It’s not important. Let’s move on.

Hide It If You Don’t Need It


Hiding things is the philosophy I take when creating CSS for printing a page, I figured it would work well for this mobile thing too. Look around the site and if you see anything that you don’t need to be showing to people, if it doesn’t help them figure out what the crap you do, then don’t show it.

I have a large list of classes and ids that don’t need to be shown. I put them all right at the top of the section I just created so they’re easy to find (I mean hide…but not find…this doesn’t make sense!). Here’s what that’ll look like:

@media screen and (max-width: 1024px) {
#ids, .classes {display: none;}
}

Simple, right? That’s the easiest thing you’ll do during this whole process. If you run into something that just isn’t looking right, or is too difficult to figure out how to make it look good on mobile, hide it!

Fixed Widths Ruin Everything

Next up, you’re going to have to do some investigating. What you need to look for is any fixed widths that are going to make the page too wide. The Chrome toggle by device tool is great for finding these. If it loads your page, and there is a shady grey area that goes beyond the viewport, you basically know something is fixed width. This is hard to describe without seeing it…so video time!

I hope that explains that. We want to steer clear of fixed widths that are larger than the viewports. Switch them to percentages. You can always use the max-width in your css to make sure your image doesn’t get blown out of proportion on slightly larger screens.

This was what took the longest for our site, and it’s still not fully finished as I haven’t made it through all the blog posts yet. But one day they’ll all be done. The main pages are good, and that’s what’s important.

Cheeseburger Menu Time!

Yeah I know they’re called hamburger menu’s, but I like cheeseburgers. Sue me.

Anyhoo, while there is some debate to using the hamburger icon as a menu, I personally like them. And the big names like Facebook…and other big names I can’t think of for some reason…use them in their apps. So people are starting to catch on. If you’re going to use it though, just throw the word “Menu” under it. Makes it stupid proof. You can see it if you load our site in a mobile browser.

The menu is tough in Mobile. You have to decide on how you want it to display. If you want to show the entire menu. What’s for lunch later today. There’s so many things to think about when thinking of the menu. For the most part, I forego sub menus in mine and only include the most important links. Everything else should be able to be navigated to via other pages anyway. Once you decide on what you want in the menu, it’s time to code it.

First off, hide your current menu. Put the class or id for your menu into that fun display: none section we had above. Done. There’s probably someone who’s like “hey now, why not just use stylesheets for this part too?” Because it’s easier for me to just hide the other menu and make a new one!

Now code your menu and the functionality. This is where I get fancy. I code the whole menu and use the hamburger icon on the far left of it. Then I push the menu all the way off the screen to the right. Using a small bit of jQuery when someone clicks on the hamburger, I push the menu into view. Are you ready for the script?

<script>$(".menuTab").click(function() {$(".mobileMenu").toggleClass("shown")});</script>


BOOM!

I know. Mind blown, amirite?!

OK, so it’s not earth shattering. It’s very simple. My menu is absolutely positioned at the top of the page, and pushed off with a right: -180px style. The jQuery adds the class “shown” which has a right: 0 style. No crappy plugins or long scripts necessary.

Not Sure What To Call This Section

WebRanking.com Mobile Friendly Test

Google’s Mobile Friendly Test

Now that you’ve gone through your site, fixed the things that are too big, hidden the things you can’t figure out, and made a nice mobile menu, time to go through the whole site and do it again! Make sure you check every page and fix any small things that may have been missed.

Once you’ve done that, now you can go check with Google’s Mobile-Friendly Test and see that you’ve missed something else. Go fix that, and test it again.

I Don’t Know How To End Blog Posts

You’ve done it! High fist bump to you (let’s not spread diseases people). Your site should now be mobile friendly. If you follow this extremely detailed and informative post from start to finish, you’re probably ready to update your resume to show your new “Mobile Friendly Optimizer” job title you just earned. But wait, there’s one more thing…

If you’re like what you’re supposed to be like, and your blog is a slightly different design, you’re going to have this all over for your blog pages! You forgot to check those, didn’t you!?

Have fun with that!

If you like this post and want to find others related to it, then follow me on Twitter:

Like this post? Rate it, Save it, Share it!

Post Rating: 5.00
based on 2 rating(s)

Click a star to rate:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
ADD COMMENT
  • Boost CTR Best PPC blogs
  • Techipedia Best of 2010

WebRanking Newsletter

Sign up to stay up to date on the latest digital marketing news, trends and strategies.



No thanks I don't to stay up to date

image descriptionWe started working with WebRanking about 11 years ago and they have been amazing. Read More...
Joe Geng - Superior Glove

GET HELP GROWING YOUR BUSINESS

Or complete the form below






Subscribe to our Newsletter