Survive Mobilegeddon: Make your Art Blog Mobile-Friendly

By now you’ve likely heard of the “Google Mobilegeddon.” Google announced earlier in the year if sites were not mobile optimized by late April 2015 they would be penalized in search rankings.

This caused a lot of people to scramble to get their sites mobile optimized. You don’t want to get your site demoted in search results, do you?!

If you do a search from your mobile device, the Google Search Engine Results Page (SERP) will show whether it is Mobile Friendly, and mobile-friendly results are given greater prominence in the results list.

Fortunately I had to add only one line of code to my site because I had already made it responsive. Google has a Mobile-Friendly Test that evaluates your site and shows you what you need to do, but it isn’t always easy to decipher what is going on if you don’t know the lingo.

But why should I care what mobile optimization is?

Basically, when you view a site on a mobile device, it rearranges the content to fit the screen. A mobile screen is a lot different from a desktop screen.

This matters because an ever-increasing amount of web traffic is on mobile devices — phones, tablets, and the like. It’s more than 50% in some cases. I know many people who only ever access the web on a mobile phone nowadays. Your phone is always with you. The Internet is in your pocket or your purse, not on some big computer in an office.

And for artists, a mobile-optimized site is a must. If someone sees your work in a gallery and they want to know more about you, they can pull their phone out of their pocket or purse and Google you right then and there. They can find out more about your work instantly.

This means two things:

  1. avoiding Flash on your website (it won’t work on most mobile phones)
  2. making your site mobile-friendly.

Okay, I get it. Now what?

You or your developer need to add mobile responsive code to your site’s cascading style sheet file(s), or CSS.

Responsive means it responds to how wide the window is. If the window is larger than, say, 800 pixels my site doesn’t change. If it is less than 799 pixels, columns will move under main content, the navigation moves under the logo instead of beside it, and so forth. Basically, it goes from a 3 column layout to a 1 column layout. The next breakpoint is at 480 px (standard iPhone width) and it behaves a little differently.

(I admit, when I wrote this I discovered I needed to go back and modify my CSS so images that stick out from the main blog text fit within that container if it shrinks. As of early May 2015 if you viewed this on a mobile device the wide items stuck out from the text and you had to scroll sideways. Not good. So I made a new CSS rule that made all images inside the .entry div fill the width of that container. Viola! No more stick-y out-y pictures.)

So how do I fix this?

First, in the head of your site, you want to add this line:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

This will ensure mobile devices pick up the responsive CSS. Otherwise it will be responsive in a normal browser window, but not on a device. This is the problem I had.

Then, create the responsive styles.

At the end of your CSS file, start adding your breakpoints. The break points mean if it is under so many pixels, it will rearrange the content in a certain way.

Start by considering some standard device widths. Tablets run around 768 pixels wide in portrait mode and 1024 pixels wide in landscape mode. So I’d add the first breakpoints there. Because of the cascade, the last line is given priority over the line before it. So if the last line contradicts the first line, the browser will pay attention to the last line instead. So you want to start with the widest view, and go narrower from there. In other words, your code will go from the widest scenario (desktop) to the narrowest scenario (iPhone).

iPhones resolve to 480 pixels wide, so that’s your smallest breakpoint.

Find something in the middle to average it out, like 650 pixels,  and put it in between the two. Or just have everything fit at 100% in one column when your viewport is less than the tablet width. That’s the simplest way to do it. It might not be the prettiest, but it will get the job done. “Pixel perfect” isn’t so much the ideal it used to be.

Once you’ve established your breakpoints, start modifying the CSS for various columns, floating them under previous columns or making them disappear altogether. If it makes sense, you can change your text size.

It’ll take some trial and error to get it just right, but it’s pretty easy once you get started.

Let’s take a look at some of the CSS for the header of my site.

@media screen and (max-width: 800px) { #nav, #main, #intro, #updates, footer {float: left; clear: both; margin: 0; width: 100%; padding-left: 10px;
}

header h2.logo {

clear: both; padding-bottom:40px;
}

What is happening here is if the site’s containing window is 800 pixels or less, the navigation floats to the left instead of the right and goes under the header. Since normally the navigation scoots itself up 40 pixels to align with the header logo, the logo has a bottom padding of 40 pixels. I want it to keep doing this at all sizes smaller than 800 pixels, so I don’t need to revisit this again for smaller sizes.

Is your site mobile-friendly?

The time has come, the Walrus said, to make your sites mobile-friendly.

Is your site mobile-ready? If not, what’s holding you back? Get to it!