[caption id="attachment_576" align="alignleft" width="300"]
Google Mobile Friendly Test[/caption]
Earlier this year Google announced that it would be making a preference for mobile sites when searching from a mobile device. On 4/20/15 Google's update went live - meaning sites that weren't mobile friendly would disappear from mobile search results. This is kind of a big deal since most people search from mobile devices throughout the day. As a web developer and designer this means making sites that work on multiple devices. It really isn't that hard to make a site mobile friendly. Here are some steps which will help you get your site in to Google's Mobile Friendly Good graces.
1. Test your site
Goto https://www.google.com/webmasters/tools/mobile-friendly/ . Check your site. If Google says that it is mobile friendly then "HOORAY" You can stop! Nothing to worry about!
Remember: Just because your root domain url (http://www.domain.com) is mobile friendly doesn't mean the rest of your site is. If you have multiple templates or page designs you will need to test each page url. The mobile friendly tool doesn't check the whole site - only the url you submit.
2. Meta Name Viewport
The first step to making your site mobile friendly is setting the viewport meta tag. This tag lets your device know what size your devices screen is. This tag will go in the HTML at the top of the page near the <title> tag. This is example will work
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
3. Analyze your Layout
Hopefully you have designed your website with CSS and not statically laid out in tables. If your site is not laid out with <div>s then you may just need to call a designer / developer and get a new site constructed.
4. Percentages are your friend
The way we are going to make your site Mobile friendly is by making it responsive. The easiest way to make something responsive is to use percentages to set widths instead of setting a static widths using pixels. You will need to plug in percentages anywhere you have a static pixel width. This means any CSS or HTML. You'll need to check styles you have or parameters on things like <img> tags, <div> <table> - anything that has a width defined. Google will look at the site and if there is anything popping over 350 pixels it will think the site isn't mobile friendly.
For example: <div style="width: 500px;"> should be changed to <div style="width: 100%;">. or as a parameter <img width="500"> to <img width="100%">
This works fine if you want things to take up 100% of your screen. You can also have multiple columns or <div> float next to each other and use widths like 50% (<div style="width: 50%; float: left;">) which will allow two divs to collectively take up 100% by floating next to one another.
You can also use percentages to describe things like margin and padding. I've found 2% to 5% is a good amount of margin for things like images and divs.
Using percentages is a necessity with responsive design. But what if you want to have things statically designed?
5. Fix static widths with Media Queries in CSS
So Media Queries in the CSS are what gives your browser the intelligence to change how it displays the page depending on the device. The media queries will look at how big the browser window is and change the way it displays the content. This is how we will change how the screen displays content if it is on a wide screen like a monitor, or change the content to look good on a small screen like a phone.
I like to have a static width once the screen is larger than 600px - text areas larger than 600px are hard to read since the line length is so long. The way that you can handle that is with a media query.
A media query says - "display this content with these styling parameters at this screen size, and display the same content with these different styling parameters at this other screen size".
For this specific issue, making your site Google Mobile Friendly, we need to have 2 sets of media queries - 1. How to display your site at a mobile friendly size. 2. How to display your site at something larger than a mobile screen size.
Media queries can be declared in an external CSS style sheet or they can be declared in the head of your html between your style tags. The way I set up my media queries in an external CSS sheet.
A media query looks like this:
@media (max-width: 799px) { .box { background: red; width: 100%;} }
@media (min-width: 800px) { .box { background: green; width: 800px;} }
what this says is that when the screen is under 799px wide display it at 100% of the screen, but once it hits 800px then change the color of the box to green and only let the box reach 800px width regardless of how wide the screen is.
You can have as many class descriptions as you would like inside the media query. For example I could have:
@media (max-width: 799px) {
.box { background: red; width: 100%; height: 100px; }
.box2 { background: blue; width: 100%; height: 100px; }
}
@media (min-width: 800px) {
.box { background: gray; width: 400px; height: 100px; float: left; }
.box2 { background: pink; width: 400px; height: 100px; float: left;}
}
What this example shows is a red box and a blue box that take up the entire screen until they get to 799px screen width, but then as soon as the window gets larger than 800px the boxes change color to gray and pink and they set next to each other.
If find that it is best to have 3 media query sizes - small, medium, and large. That way your layout will look good in almost any situation. It would be possible to have even more.
General Rules to follow
- Anything below 500px needs to be 100% width
- On small screens make sure your anchor tags display large enough for a finger to touch them. Also it is good to display: block; on them
- If you have a logo or buttons make sure they are in a <div> using the background parameter and use width and height parameters to display them. If they are buttons or image links, just make sure there is an <a> tag in them that has 100% width and height and is display: block; This way you can use your media queries to change them out. If you keep them as html tags then you will need to use javascript to detect the window size and rewrite the code using .innerHTML (It is easier to just use the CSS Media Query Method)
- Use the CSS overflow: hidden; or overflow: auto; to keep content from pushing over the page limit.
- You can use percentage 100% on images, divs, spans, body, table - pretty much any tag.
Full working example
- mobilefriendly HTML
