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

Macaw - A Visual Responsive Web Page Editor

Tue, 07 Jan 2014 23:10:18 +0000

Macaw is a new web editor for web designers and developers. It was one of the first visual RWD (responsive web design) editors available. It came out to Kickstarter backers on December 31, 2013 and debuted to the public in 2014. It is based on the same style of design as graphics tools like Photoshop to help you “draw the web” rather than code it. This should make it easier for web designers to use to create decent HTML, CSS, and even JavaScript to pass on to developers or post directly to the web.

About Macaw

Operating Systems: Macintosh and Windows
Publisher: Macaw, LLC
Price: $79

Best Things About Macaw

It is very easy to create responsive designs with multiple breakpoints.
There is a shortcut to add placeholder text that is really easy to use. (type “lorem_#_p” where the # is the number of paragraphs you want, then hit the tab key and that number of paragraphs of placeholder text will appear in your document).
Macaw generates decent looking HTML, better than you might expect for a WYSIWYG editor.
Macaw allows you to choose what elements, classes, and IDs to use.
It is reminiscent of image editors like Photoshop, making it more familiar to designers.

But There are Some Drawbacks

It can be slow to respond at times.
Extra container elements were added that I didn’t expect.

I enjoyed using Macaw. I built a 3-breakpoint simple responsive design website faster than I ever have in the past, and that includes the time it took me to figure out how to use the tool. This, in itself, is pretty amazing to me.

Some of the Features I Really Enjoyed

Resizing elements based on the grids was easy.
Grouping elements and then giving the resulting container a name like HEADER resulted in HTML5 semantic code much more easily and quickly than I thought possible.
I was able to create a responsive design with three breakpoints in very little time.
I loved the outline view. Like with Photoshop layers,it was really nice to be able to show and hide elements just by clicking the eye icon. This also helped me see how the code would be written.
I chose a random font from the list that was included, and they automatically added the web font code from Google for me. I could also use my own fonts, but there were a lot of choices (even if most of them seemed to be sans serif…).
I love that they have a shortcut to add multiple paragraphs of placeholder text right in their text tool.
The CSS and HTML it generates can still be a bit more DIV heavy than I would write, but with the outline tool, it’s possible to see that and get rid of some of the extraneous tags.

Get Macaw!

It’s a cool web editor.

RWD on HTML5 in 24 Hours