mobile thumbnail

Mobile Search Results in Google

Think Google doesn’t care if your website is “mobile-friendly” or not? Think again. Checking up on some metadata changes I had made a few days ago, I noticed that Google is clearly indicating whether a website was built for mobile in their mobile search results pages. In both Safari and Chrome on the iPhone the text is a dark gray color so it’s fairly noticeable. I highlighted the indication in red below just in case you’ve missed it.

I did a little digging and apparently in the last recent months Google has been experimenting with showing an icon of a mobile device with a slash through it to indicate that a site was not mobile-friendly. Now they are now showing which ones are optimized for mobile, which makes more sense since most sites are not.

I’m a little surprised that Google would dedicate 15 characters in an already tight UI space, but I do enjoy and appreciate the feature. I’m using older phone and my connection is pretty slow, so having some sense of how fast a site will load and how readable it will be is definitely a factor when choosing which result I’ll pick.

We already know that Google rewards websites that load fast because they provide a better user experience, and mobile is no different. I’ve mentioned in a previous post that mobile browsing is quickly surpassing desktop browsing based on most of the Web analytics that I look at.

And speaking of search results on mobile devices, Google also shows different results depending on if you are on a mobile or on desktop, so one can assume that if your site provides a better user experience by being optimized for a small screen, you may rank higher than a competitor that does not. The fact that Google has added mobile usability reporting to it’s Webmaster Tools is yet another indication that mobile optimization will soon become a standard ranking signal…I assume it already is. They’ve also created a Webmaster’s Mobile Guide and Mobile-Friendly Testing Tool to help you get started.

Google Mobile Testing

UPDATE: As if on queue, I received an email from Webmaster Tools today indicating that a website I own was not mobile friendly and steps that I need to take to correct the errors (screenshot below).

webmaster tools mobile

F. Oliver's Map Thumbnail

Responsive Google Map Mashups and GIS (Part 1)

I was playing around with Responsive Google Map Mashups and learning about Geographic Information Systems (GIS) this morning. As an experiment, I mapped out the four store locations of my client, F. Oliver’s Oils and Vinegars in Google Maps.

The coolest part is, the data is pulled from your Google Drive account, so you can edit the map at any point and your embedded map will automatically be updated. This is great, because Penelope has this habit of opening up a new store every year or so. 🙂

You can click on the title header to reveal (and hide) more details, and each individual pin can contain it’s own unique title, description, driving directions, URL, and a photo. You can even add your own unique “pin” icon…I added an icon of one of her EVOO bottles. Super simple, and no access to Google API keys required.

How to Make a Google Map iFrame Mobile Responsive

Out of the box, Google’s embedded map snippet is non-responsive, but it’s easy enough just to wrap a DIV around it to fix that. I added the code inline right here within the WordPress editor, but best practice would be to add the following CSS rule to your website’s stylesheet. I did notice that the photos within each pin do not resize, so on my iPhone the photo entirely fills the screen and renders the map almost unusable. I did leave the photos in (above example) for illustration purposes, but in a production environment we would need to design something more useful for smaller mobile devices.

.map {
	height: 0;
	overflow: hidden;
	padding-bottom: 65%;
        margin-bottom: 1em;
	position: relative;
.map iframe {
	left: 0;
	height: 60% !important; /*pick your own height*/
	position: absolute;
	top: 0;
	width: 100% !important;

Next up….Advanced Map Mashups using Excel spreadsheets and Google Fusion Tables.

Top Mobile Thumbnail

Top Mobile Screen Resolutions

I was doing a little data-gathering on responsive mobile design and came across this resource mentioned in Joe Casabona’s book, “Responsive Design with WordPress“. I was having a fabulously lazy Saturday morning, so I whipped up this little “mini” infographic to share with colleagues and clients. Clearly, the smartphone is still king. According to predictions by Cisco, there will be more mobile-connected devices on the planet than there are people by the end of next month. CNN Money reported earlier this year that Americans are now using smartphone and tablet apps more than their PCs to access the Web. It’s time to #GetResponsive and start designing websites more responsively.

Data Source: StatCounter

Top Mobile Phone Resolutions and Dimensions