The Lazy Way to Mobile-Friendly

Sat, 18 Apr 2015 17:26:23 +0000

Or How I Made a Simple Change on a Bootstrap Site to Please Google

Like most web designers I know, I am frantically trying to get many websites mobile-friendly in time for Google’s deadline of April 21st. Knowing that Bootstrap is a very mobile-friendly framework, I have been migrating a lot of the sites I manage into it. This has worked great, but as the deadline looms ever nearer, I have been cutting more corners in getting the sites ready.

And at this point, most of the sites that I’ve left hanging are my own.

So today, I decided to check my branding site http://htmljenn.com/. And as I suspected, even with Bootstrap, it came up as not friendly.

](/images/screenshot515.jpg) I knew that header image was too big!

As you can see from the picture, my headline graphic is way too large for most mobile screens. I knew this, but I was probably hoping it would fix itself overnight or something. It didn’t.

Luckily, Bootstrap offers a feature that makes it easy to get rid of the offending graphic (for now) and replace it with text that is mobile-friendly: The Bootstrap responsive utility classes.

There are 16 classes you can use in Bootstrap to show and hide content from different sized devices. They are:

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

You may notice that I only listed eight classes above. That’s because the .visible classes each have three variations:

.visible-*-block
.visible-*-inline
.visible-*-inline-block

Since I realized that most likely the real problem with the mobile site was that the banner image was too big, I decided to hide it (for now) on smaller screens. Instead, I would show them the site title in an <h1> tag.

So I added the <h1> site title (<h1>HTMLJenn</h1>) and then added the class .hidden-md to it. This would hide the site title from any devices of medium size or larger.

Then I hid the banner image by adding the class .visible-md-block to it. This makes it visible only to devices of medium size or larger.

After I uploaded these simple changes, I tested on Google and got:

[caption id=“attachment_1131” align=“aligncenter” width=“300”] It’s mobile-friendly!

Hooray! My site is mobile-friendly. Now to work on making it look less ugly! But that can wait until I’ve finished fixing all my other sites!

What To Do to Make Your Site Mobile Friendly

Test your site to see if Google feels it is mobile friendly.
If it isn’t, don’t panic. Google will not delist your site. This bears repeating. Just because a site is not mobile friendly does not mean that it will not show up in Google search. It just means that when someone on a mobile device searches Google, your site will not rank as well as a similar site that is mobile friendly.
If it isn’t already, add your site to Google Webmaster Tools and follow the instructions in the Google Mobile SEO

There are many ways you can make your sites more mobile friendly. The Bootstrap framework is one way to get a responsive web design fairly quickly.

More Help with Bootstrap, Mobile-Friendly Design, RWD, and Google’s Change to Search Results

Order my book Sams Teach Yourself Responsive Web Design in 24 Hours
Get Bootstrap
Pre-order Sams Teach Yourself Bootstrap in 24 Hours by Jennifer Kyrnin
Read Mobile First Responsive Web Design by Brad Frost
Test your site with the Google Mobile Friendliness Test from Google Webmaster Tools
Read Finding More Mobile Friendly Search Results from Google Webmaster Central

Responsive Web Design on HTML5 in 24 Hours

The Lazy Way to Mobile-Friendly

Or How I Made a Simple Change on a Bootstrap Site to Please Google

What To Do to Make Your Site Mobile Friendly

More Help with Bootstrap, Mobile-Friendly Design, RWD, and Google’s Change to Search Results