A Walk Through Guide to Mobilizing Your Site

google mobile friendly

April 21, 2015….that was 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 isn’t Going to be Easy!

Assuming you’ve already run your site through that test and have seen that it failed, 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 (Too Long / Didn’t Read)

This post is quite long and may 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
4. Use display:none; for stuff you don’t need
5. Use dynamic widths for containers
6. Set images max-width
7. Remove floats
8. Make a mobile menu
9. Test, fix, repeat
10. 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!

dreamweaver logo If you’ve every wondered 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.

Just using Dreamweaver 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 make mistakes with jQuery.

toggle by device 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.

@PaulKragthorpe QOTD! “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”

— Josh Devlin (@JayPeeDevlin) March 19, 2015

Now that you know what I used, let’s go over some steps to get to the end goal. (Notice: WebRanking nor myself take any responsibility for how much you may mess up your site by following the steps that I did, that’s all on you!)

Go Responsive, Don’t Use Subdomains

If you’re going to do this, then do it right. Don’t create an m.yoursite.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).

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.

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

What’s the Minimum Width for Your Responsive Website?

Figure out what 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. 2 reasons:

1. Because some corporations haven’t upgraded past Windows XP and use old monitors that have that resolution.
2. Because tablets often use that resolution.

Don’t take my word for it, check Google Analytics! Here’s how:

Google Analytics > Audience > Technology > Browser & OS > Change Primary Dimension to Screen Resolution (if you’re reading this in the future and that menu structure has changed, my apologies.)

Once you figure that out let’s set an area in the CSS file where we can put 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 is below 1024 pixels wide, use the following styles.” All of your styles for screens smaller than 1024px will go between the squiggly 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 too 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. I think the iPhone 6 plus width is 414px. Anything less get’s a special treatment.

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 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. Here’s an example of 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 are 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.

Handle Images on Responsive Designs

For the most part, for images I just do a simple style to make sure they’re, at max, 100% width. Then set the height automatically. Like so:

img {max-width: 100% !important; height: auto !important;}

In some cases you may have a style that’s taking control of an image’s width, that’s why I threw that “!important” in there, so the stylesheet knows this is the style I want it to use for sure.

Root Beer Floats are Good….Floats on Mobile Design, Not So Much

Lately I’ve been trying to steer clear of floats if at all possible. In favor of using “display: inline-block” and styling things that way. But there are some instances where floats are necessary.

Also CMS’s like WordPress have built in styles that have floats. What I try to do (try because it may not work) is just to eliminate all floats where the width is below that 413 pixels we decided on. I do that with this

@media screen and (max-width: 413px) {
* {float: none !important;}
}

The asterisk is a wildcard, so be careful what else you use this for.

Try that out, and if things look really bad after doing it, remove that. In that case you’ll have to go through class’s and id’s that use float and if you don’t want it, use a style on those particular instances to eliminate the float.

This may be a personal preference of mine, but just take a look at the image below. On the left the image has “float:left”, on the right it has “float:none”. Which is more visually appealing?

Float image vs No Float image

Create a Hamburger Menu

hamburger menu While there may still be 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. 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, I hide my current menu. Put the class or id for your menu into that “display: none” section we had above. Done.

You may be thinking “hey now, why not just use stylesheets for this part too?” It’s just a preference. I’ve found 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, but keep the icon showing. Using a small bit of jQuery when someone clicks on the hamburger, I push the menu into view. Pushing the menu out of view when it’s clicked again.

Are you ready for the script?

It’s very simple. My menu class is 180px wide. And it’s 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 plugins or long confusing scripts necessary.

There’s tons of ways to do mobile menu’s, this is what works for me.

Test, Fix, Repeat

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, set image widths, removed floats, 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 if you’ve missed anything else.

Wash, Rinse, Repeat is important here. Again, test all your pages!

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 followed this extremely detailed and informative post (I may be biased) from start to finish, you’re probably ready to update your resume to show your new “Mobile Friendly Optimizer” job title you just earned.

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

ADD COMMENT

Comments are closed.