Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
performance / stats
Country: United States
Likes Received: 2711
Featured Member: 18 times
Associates: 12657
Wall Posts: 474
Comments Made: 26566
Press Releases: 360
Videos: 2
Phone: No Calls Please
profile visitor stats
TODAY: 124
TOTAL: 643082
are we ibo associates?
member advertising
active associates
Whitney Jacqueline       
Last logged on: 10/17/2018

Nigel Welford    
Last logged on: 10/17/2018

Terri Pattio    
Last logged on: 10/17/2018

Sandy Blomstrom    
Last logged on: 10/17/2018

Andrew Larder    
Last logged on: 10/17/2018

Doug Blomstrom    
Last logged on: 10/17/2018

Richard Mathiason     
Last logged on: 10/17/2018

denzil ward    
Last logged on: 10/17/2018

Sandy Hall    
Last logged on: 10/17/2018

Ake johansson    
Last logged on: 10/17/2018

Jean Fountain    
Last logged on: 10/17/2018

Mobolaji Ajibola    
Last logged on: 10/17/2018

Elizabeth Zeringue    
Last logged on: 10/17/2018

Cosmos Parris    
Last logged on: 10/17/2018

Starr Lucas     
Last logged on: 10/17/2018

other ibo platforms

Curtiss Martin   My Press Releases

Making Mobile Friendly

Published on 1/11/2016
For additional information  Click Here

FavIcon Where Free Means Free! Making Mobile Friendly:
“Awesome! This page is mobile friendly.” That’s what many of us have been looking for. This is the message you want when you visit the Google® Mobile Friendly Tool. Everyone knows that more and more online content is being accessed from Mobile Devices. Last spring, 2015, Google® let us know how our sites were doing and gave us a couple of tools to see if our sites were Mobile Friendly. Making Mobile Friendly has been my goal. Figuring out what I needed to do has been the problem.


Mobile Friendly CMS:
Many of the Content Management Systems offer Mobile Friendly options. You can use the links above to test yours.

HTML5 is Not Enough:
HTML5 and CSS3 are what you need to use to write Mobile Capable sites. But, even though you used HTML5 and CSS3, that may not be enough. You need to be able to build your sites using responsive design. I went as far as I could last Spring but was still only somewhat Mobile Friendly.

In Search of Mobile Friendly Design:
I knew that I needed to make some changes to make more effective. Recently I spent quite a bit of time exploring MobiRise. It is a Drag and Drop, WYSIWYG tool for creating mobile friendly sites. Unfortunately, in order to control your HTML you have to buy the HTML Module. It is probably a good buy at $69 but it is not the kind of tool I generally support.

Nove-Noga. Where Free Means Free!
That is what Nove-Noga has become. Except for my site hosting, purchased through my ASN Links, I don’t use anything but Free Tools.

Back to the Design Board:
Based on what I learned from exploring the MobiRise Tool and some extensive reading, I decided that what I needed to do was restructure the site into a single column format. Doing that simplifies a great many problems. Instead of designating the width for your elements in pixels, you designate it as percentages.


New CSS file:
The benefit of CSS, cascading style sheets, is that you can set the definitions for all of the common elements that you use throughout the website. My most recent stylesheet has been designated “-r” for ReVision. It is really only the fourth iteration of my stylesheet.

  <link rel="stylesheet" type="text/css" rel="nofollow" href="">

Primary Change: Removing static width settings. Using 100% where possible.

Making Your Site Fit on All Screens:
In the evolution of Nove-Noga during the Spring of 2015, I wound up setting the Viewport Metadata as follows. Observe the specified width and the Maximum Scale. This caused the entire width of the page to be displayed regardless of the viewport size.

<!-- Viewport metadata -->

  <meta name="HandheldFriendly" content="True" />

  <meta name="MobileOptimized" content="962" />

  <meta name="viewport" content="width=992, maximum-scale=1" />

<!-- * -->

To make the site Mobile Friendly, I changed the Viewport Metadata to the following. Note that the width is now determined by the device width and that initial-scale is set to 1. *Note: This won’t solve all the problems (Internet Explorer requires some changes.) but it is a good start.*

<!-- Viewport metadata -->

  <meta name="HandheldFriendly" content="True" />

  <meta name="MobileOptimized" content="320" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- * -->

Making my Header More Flexible:
A big problem remained even with these important steps. My Header Image was way too wide for most formats. Even if I divided it into three parts, the middle one was too wide. to the rescue. You can use media queries to select the right size background image. Or, you can use a picture element with a media reference to present the right size image for the device in question. *Note: This same technique works for providing an alternative to 468x60 banners that will fit on 375 px screens.*

Header image divided into three parts and set up to provide alternative image for screens smaller than 504 px (width of widest piece).

   <div id="header">

    <!-- Header -->

<img src="" style="text-align: left;" alt=" where Free Means Free! Nove-Noga is short for NOthing VEntured - NOthing GAined." title="Where Free Means Free! Nove-Noga!">


    <source srcset="" media="(max-width: 504px)">

    <source srcset="">

    <img src="" alt="It is a Simple Philosophy. We are Responsible for the Choices we make. We can continue as we were. Or, we can choose to change. Nove-Noga!" title="Nove-Noga statement of Philosophy." style="width:auto;">


<img src="" style="text-align: right;" alt="Curtiss Martin, creator of" title="Curtiss Martin, creator of">

   </div><!-- END Header -->


Sample Code for 468x60 Banner:
You may notice that I set the image change at max-width of 500 px. I did this to make verification of the size change easier. I left it at 500 px because it works.

Changed Content over 375 pixels:
<a rel="nofollow" href="" target="_blank"  rel="nofollow">


    <source srcset="" media="(max-width: 500px)">

    <source srcset="">

    <img src="" style="border:1px solid black; width:auto;" alt="ASN Free Business Resources" title="ASN Free Business Opportunity">


ASN Free Business Resources

Building your own website is not for everyone. For many, the best approach is through a CMS or a WYSIWYG tool like MobiRise. But, if you want to Know what goes into your website, the best approach is to build it yourself. Making Mobile Friendly has been a lot of work. I hope that you will agree that it was worth the effort. Please take a look and let me know what you think.
All Solutions Network
© 1/11/2016

Member Note: To comment on this PR, simply click reply on the owners main post below.
-  Copyright 2016 IBOsocial  -            Part of the IBOtoolbox family of sites.