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

pixelpunk logo icon

A New Year – A New Logo

A new year is approaching and I am living in a brand new city (Baltimore) so I thought I’d start it out right by designing a fresh new logo for myself.

I wanted to avoid treading down the “obvious” path by simply pixelating the wordmark, but I did want to create a stylized pixel to somehow tie it all together with the name. I went with a modified version of Century Gothic for the text since the letterforms are almost the complete opposite of pixel shaped. I customized the baselines, caplines, and meanlines to make it all my own.

Orange and black have always been my brand colors so I stuck with those, as this is more of a re-design than a re-brand. The three-dimensional pixel is a metaphor for the fact that I also do traditional print and product design in addition to digital. I faded back the top block color becasue I thought the two orange shapes started to suggest a mohawk and I wanted the viewer’s eye to complete the cube shape.

It’s clean. It’s simple. I think it works.

New Year - New Pixelpunk Logo

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.