Making Your Website Mobile – Part 3

This is part three of a four-part series that covers how to transform your website into a mobile site. Part two covered media queries and a Joomla! extension for mobile devices. This article discusses incorporating Google AdSense and analytics along with a discussion of mobile fonts. And part four will finish up with the best practices for coding in HTML5 and CSS3 for mobile sites. The first part discussed how to get started.

For examples, Here’s the mobile site I made for my content site and here’s the mobile site I made for a consulting firm.

Using Google AdSense On Your Mobile Site

Just because you’re going mobile doesn’t mean you need to lose out on any potential ad revenue. Especially if you’re a content site. Earlier in this article I recommended staying away from JavaScript. It used to be that a lot of mobile devices could not support JavaScript. That’s not necessarily true anymore. Google AdSense will soon do away with their ads tailored especially for mobile and the AdSense site currently states, “If your site is intended to be accessed by high-end devices (like iPhones and Android phones), simply use AdSense for content to generate your ad code. AdSense for content ad code uses JavaScript to deliver text, image, and rich media ads to your users’ high-end devices. You’ll be able to use this ad code for a variety of ad formats and on different platforms too, whether that’s the 320×50 mobile leaderboard (usually used for mobile sites) or the 160×600 wide skyscraper (usually used for desktop sites).”

When you’re in AdSense, Google does provide a 320×50 mobile banner ad size. You can then choose between Text, Image/Rich Media ads or both. You can then choose your color scheme and then save and get the code:

<script type=”text/javascript”><! —

google_ad_client = “ca-pub-XXXXXX-X”;

/* Mobile Ad */

google_ad_slot = “XXXXXXXX”;

google_ad_width = 320;

google_ad_height = 50;

// — >

</script>

<script type=”text/javascript”

src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

</script>

Where to Place Your Mobile Ad

Placement of your ad is important. It has been recently reported that Google will lower your search rankings if the content above-the-fold is littered with ads. They don’t go into specifics as to how many ads are too many, but if you start to see your pagerank slip then you might want to reconsider having three-fourths of your above-the-fold content being advertisements. It has also been reported that Amazon is now earning $1 billion in ad revenue simply by placing highly-relevant third-party ads at the bottom of their product pages.

It is recommended to either place your ads in a far right column, or at the bottom of your content. As noted earlier, you won’t be coding your mobile site using tables. You really just want one vertical column of content. So the best ad placement is really at the end of the article. Just make sure to provide solid enough content to keep your reader engaged enough to keep scrolling down to reach the ad.

Google Analytics Code

Don’t forget your Google Analytics code to track your visitors. Google has specific SDKs for both iOS and Android that will allow you to track visitors using low-end mobile devices that don’t support JavaScript.

However, most modern Android and iOS mobile devices do support js, otherwise you wouldn’t be running js AdSense ads, now would you?

Here’s some sample code to paste before the closing </head> tag:

<script type=”text/javascript”>

var _gaq = _gaq || [];

_gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]);

_gaq.push([‘_trackPageview’]);

(function() {

var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;

ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) +

‘.google-analytics.com/ga.js’;

var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

Adding in Your Mobile Fonts

While it is very safe for you to use Arial font for your mobile site, you might want something more unique. Thankfully, there are a ton of available, and free, online web font services. Be aware though that most Android mobile devices will default all fonts back to ‘Droid font and iOS only supports a limited number of fonts. So test your custom font to see if it will work before you go into full production mode.

One of the best places to find online fonts is Google Web Fonts. The title of my site is done in Orbitron. All I had to do was go to Google Web fonts, search for Orbitron and there it was. To add that font to my site, all I have to do is add one line of code in the <head> section:

<link href=’http://fonts.googleapis.com/css?family=Orbitron’ rel=’stylesheet’ type=’text/css’>

Or add this to my CSS:

font-family: ‘Orbitron’, sans-serif;

To be more specific:

h1 { font-family: ‘Orbitron’, Arial, serif; font-weight: 400; }

When choosing a font, pay attention to the Page Load speed dial. Google will tell you how long the font will take to load for your site.

Another site that provides fonts is called Font Squirrel and they have a @font-face generator. But they require a ton of code in the CSS, for example:

/* Generated by Font Squirrel

(http://www.fontsquirrel.com) on February 28, 2012 04:37:11 PM America/New_York */ @font-face { font-family: ‘TitilliumText22LThin’; src: url(‘TitilliumText22L001-webfont.woff’)

format(‘woff’), url(‘TitilliumText22L001-webfont.svg#TitilliumText22LThin’) format (‘svg’); font-weight: normal; font-style: normal;} @font-face { font-family:’TitilliumText22LLight’; src: url(‘TitilliumText22L002-webfont.woff’) format(‘woff’), url (‘TitilliumText22L002-webfont. svg#TitilliumText22LLight’) format(‘svg’); font-weight: normal; font-style: normal;} @font-face {

font-family: ‘TitilliumText22LRegular’; src: url(‘TitilliumText22L003-webfont.woff’) format(‘woff’),

url(‘TitilliumText22L003-webfont.svg#TitilliumText22LRegular’) format(‘svg’); font-weight: normal; font-style: normal;}@font-face {font-family: ‘TitilliumText22LMedium’; src: url (‘TitilliumText22L004-webfont.woff’) format(‘woff’), url(‘TitilliumText22L004- webfont.svg#TitilliumText22LMedium’) format(‘svg’); font-weight: normal; font-style:

normal;} @font-face { font-family: ‘TitilliumText22LBold’; src: url(‘TitilliumText22L005

-webfont.woff’) format(‘woff’), url(‘TitilliumText22L005-webfont.svg#TitilliumText22LBold’) format(‘svg’); font-weight: normal; font-style:normal;} @font-face { font-family:’TitilliumText22LXBold’; src: url (‘TitilliumText22L006-webfont.woff’) format(‘woff’),

url(‘TitilliumText22L006-webfont.svg#TitilliumText22LXBold’) format(‘svg’); font-weight: normal; font-style: normal;}

Then there’s also typekit, Fonts.com and Fontdeck for finding online fonts.

Using Adobe Shadow for Preview Testing

Finally, for preview and testing purposes, there’s a brand new tool from Adobe called Shadow. This tool allows you to view your mobile site for testing purposes. I learned about Shadow after I created my mobile site, so I have not yet had a chance to use it. But I wanted to include it in this article as it appears to be a powerful tool. You can download it here.