What is Google Mobile Friendly, #mobilegeddon, Responsive Design and more.

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 tag. This is example will work<br />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/><br />

3. Analyze your Layout<br />

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.<br />

4. Percentages are your friend<br />

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.<br />

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%”><br />

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.<br />

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.<br />

Using percentages is a necessity with responsive design. But what if you want to have things statically designed?<br />

5. Fix static widths with Media Queries in CSS<br />

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,