Make Your Website Mobile Friendly

MobileIf you are going to be a successful online affiliate, the usability and quality of your website has a direct correlation to how successful you will be. If you offer your potential customers the information they are looking for chances are you will succeed, but your potential customers must be able to access that information and your website.

With the increase in mobile traffic you must make your website mobile friendly and mobile responsive. More and more people are now surfing the Internet with their mobile phone or some other type of mobile device and if your website is not mobile responsive chances are you are missing a lot of potential customers/visitors.

Your website being mobile friendly also can also affect your traffic flow. Google is now offering a “mobile usability” tool in Google Webmaster Tools and if your website is not mobile friendly Google will rank your website accordingly for mobile search. In other words, if users cannot expect a good experience using their mobile, Google may no longer rank your site for mobile users. For these reasons you want to make your website mobile friendly (responsive) and if you are not sure how to do that we have laid out the steps below.

How to Make Your Website Mobile Friendly

When we were converting our first website to be mobile friendly, we could not find very many resources on how to do it. We found plenty of articles explaining why you should make your website mobile friendly, but we couldn’t find a good resource which listed the proper steps on how to do so.

If you are using a Content Management System (CMS) like WordPress it is very easy to make your website mobile responsive. Simply choose a theme which is mobile responsive and your done! It really is that easy. You may need to re-arrange some of your content and use some of the theme options to make certain parts of your website look good when being accessed by a mobile device, but the coding and CSS files have already been completed for you. This is exactly what we did for one website, Mobile Casino Listing, since we couldn’t find much information on the Internet.

If you are not using a CMS you have a little more work to do, but once you understand how the mobile website will work it is easier than you may think. We will show you how to make your website mobile friendly and also explain why you are doing certain things so you understand the code and style sheets so you can make your site look even better.

Step by Step Instructions to a Mobile Friendly Website

To make your website mobile friendly you must configure a viewport and alter your CSS files to make your website appear correctly on a mobile device. Before starting the below, we highly recommend you first check your website font sizes to make sure your website uses EM’s as the unit of measure for your font size. If your website is not using EM’s, we recommend converting your font size to EM’s and the below instructions will be much easier and your final mobile friendly website will look much better. See another article “Using Proper Font Sizes” for more information and to see a table to convert your current font size to EM’s.

Set Your Viewport: <meta name=”viewport” content=”width=device-width” />

Add the above meta tag to every page in your website which you want to make mobile friendly (do not copy and paste the above code, manually type the code). This meta tag will go directly below your opening “head” tag on every page. This tells the browser when it accesses the webpage to display it at the device width. Looking at the above tag it says “viewport shows content at a width of equal to the device width”.

If you are using WordPress but did not want to change themes, the “head” tag will most likely be in your header file. Access the file via the editor to add the above meta tag to all of your pages at once.

Add Media Query: @media screen and (max-width: 640px) {}

Add the above code to your CSS file. We add it at the bottom of the file so we can easily can find it. Here the max-width is going to be at the width you want your website to appear in its “Mobile Friendly” version. So any device which has a screen of 640px or less will show the mobile website. The above code basically says, for any media screen which has a width of less than 640px show the mobile website and in particlular use the style below this code which I have set (see below).

Add Your Mobile CSS Attributes: Now add the styles for the mobile site in your CSS file in between the starting { and the ending }. For elements that will change in mobile view, add their new styles here while still keeping the original styles as they were. You only need to add the elements that will change. In most cases the sidebar, content, header, footer and/or navigation.

Example:

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

#column_r {
width:100%;
}
#column_l {
width:100%;
}
}

For the above, column_r is our sidebar and column_l is our content area. This tells the browser when a device has a width of under 640px use these styles for the associated elements. So now in mobile view, both column_l and column_r will be displayed at 100% of the width of the device.

Now check your website using a mobile device. Does it appear correctly? You may need to tweak certain elements so they appear correctly in mobile view but your visitors will have a much better experience when they access your website with a mobile device and Google will not penalize your website for mobile search.

If your website is not appearing correctly, one thing you may need to do is set your “content” area to a max-width in your CSS file. If your content has the width expressed in pixels, change the “width” to a “max-width.” For example, your content element may have a width of 1000px, if that is the case simply change the “width:1000px” to “max-width:1000px”. This way the content area will shrink to the width of the mobile device but will not get bigger than originally set in case someone views your website from a very large screen.

If you are not changing the header, navigation and/or footer and are not adding special instructions in your CSS file, make sure these elements widths are not set in pixels. You will want to change the width to a percentage so it renders correctly for mobile devices. See more on this below in “Making Your Website Fluid”.

Making Your Website Fluid

You may or may not want to make your website “fluid”. By making your website fluid means the size of your elements will change based on how wide the browser is. Below is a brief explanation on making your website fluid if you so wish to do so. Basically all you need to do is change the width of your elements to percentages rather than pixels.

To get these percentages you do have to do a little math, but it is relatively easy – just divide the width of the element by the width of the container. You may also want to keep your original width in pixels and set them to a “max-width”.

Ex. If my container is 1000px, column_l is 740px and column_r is 250px, you must divide the elements width by the container width. I may also have margins or padding which also need to be converted into percentages. In this example I will have 10px of right margin for column_l. To make sure you have all the elements which make up your website, add the sizes of the elements width together and the total should equal the number of pixels for the width of the container. In the above example, column_l = 740px + column_r = 250px + margin = 10px = 1000px. All the elements equal 1000px which is the same as the container so we know we have everything we need.

Column_l:  740px/1000px = 74%

Column_r: 250px/1000px = 25%

Margin: 10px/1000px = 1%

The total of all percentages should add up to 100%.

Your CSS file should look like the below for the above example. You can also add in any other styles you want to use. If you have a background image or text attributes you can add these just as you would for the desktop site.

#column_l {
width: 74%;
max-width: 740px;
margin: 1%;
}

#column_r {
width: 25%;
max-width: 250px;
}

Any padding within column_l or column_r will also need to be converted to percentages. Remember to divide by the width of the element you are using. Ex., if you had 10px padding for inside column_l, it would be .135% (10px/740px).

Now your website is both mobile friendly and fluid. We hope these instructions were useful in helping to make your website mobile friendly. Mobile friendly or mobile responsive websites are a must in today’s world of ever growing mobile device use. Below we have also included a screen shot of our CSS file for a mobile friendly website. It shows the @media screen query as well as the styling for column_r and column_l. You will also notice other styles added for other elements in our website. While these are meaningless to you, it does show an example of other elements you may need change in order for your website to appear correctly when being viewed by a mobile device.

Also see other pages we have put together such as Affiliate Marketing 101, Promoting Online Poker and Promoting Online Casinos to help you be a successful online affiliate. Check back here often for more tips and tricks on being a successful online affiliate.

Mobile Friendly CSS File Example

Mobile Friendly CSS File