Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
  
performance / stats
Country: United States
Likes Received: 2727
Featured Member: 18 times
Associates: 12660
Wall Posts: 474
Comments Made: 26656
Press Releases: 360
Videos: 2
Phone: No Calls Please
Skype:    
profile visitor stats
TODAY: 138
THIS MONTH: 4135
TOTAL: 618507
are we ibo associates?
member advertising
active associates
Brian Redding  
Last logged on: 7/18/2018


Whitney Jacqueline       
Last logged on: 7/18/2018


Nela Krangle    
Last logged on: 7/18/2018


Marty Cooper    
Last logged on: 7/18/2018


Bill Bateman     
Last logged on: 7/18/2018


Susan Ross    
Last logged on: 7/18/2018


Novica Maricic    
Last logged on: 7/18/2018


Gary Brennan    
Last logged on: 7/18/2018


Pavel Mrlian    
Last logged on: 7/18/2018


Sanjay Sarkar    
Last logged on: 7/18/2018


Micky Gramlin     
Last logged on: 7/18/2018


Rich Savwoir    
Last logged on: 7/18/2018


Gloria S    
Last logged on: 7/18/2018


Mohammed Sunmonu    
Last logged on: 7/18/2018


Keith Eaton    
Last logged on: 7/18/2018


other ibo platforms








Curtiss Martin   My Press Releases

Making Nove-Noga.com Mobile Friendly

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

FavIcon
Nove-Noga.com Where Free Means Free! Making Nove-Noga.com 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 Nove-Noga.com Mobile Friendly has been my goal. Figuring out what I needed to do has been the problem.

 

https://www.google.com/webmasters/tools/mobile-friendly/

 

https://developers.google.com/speed/pagespeed/insights/

 

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 Nove-Noga.com was still only somewhat Mobile Friendly.

In Search of Mobile Friendly Design:
I knew that I needed to make some changes to make Nove-Noga.com 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.

 

http://www.slideshare.net/zomigi/building-responsive-layouts-15508821

 

http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience?next_slideshow=1

 

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="http://www.nove-noga.com/newn-nstyle-r.css">

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. W3Schools.com 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="http://nove-noga.com/images/N-NheaderLeft240.png" style="text-align: left;" alt="Nove-Noga.com where Free Means Free! Nove-Noga is short for NOthing VEntured - NOthing GAined." title="Where Free Means Free! Nove-Noga!">

<picture>

    <source srcset="http://nove-noga.com/images/BillBoard320x127.gif" media="(max-width: 504px)">

    <source srcset="http://nove-noga.com/images/BillBoard504x200.gif">

    <img src="http://nove-noga.com/images/BillBoard504x200.gif" 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;">

</picture>

<img src="http://nove-noga.com/images/N-NheaderRight.png" style="text-align: right;" alt="Curtiss Martin, creator of Nove-Noga.com" title="Curtiss Martin, creator of Nove-Noga.com">

   </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="http://allsolutionsnetwork.com/cgi-bin/d2.cgi/CM119446/moremoney2.htm" target="_blank"  rel="nofollow">

<picture>

    <source srcset="http://nove-noga.com/images/ASNopportunity2_374x48.gif" media="(max-width: 500px)">

    <source srcset="http://i.imgbox.com/S3FJ2F2G.gif">

    <img src="http://i.imgbox.com/S3FJ2F2G.gif" style="border:1px solid black; width:auto;" alt="ASN Free Business Resources" title="ASN Free Business Opportunity">

</picture></a>

ASN Free Business Resources

Recap:
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 Nove-Noga.com 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.
Nove-Noga!


Nove-Noga.com/Learn.html
Nove-Noga.com
Nove-Noga.com
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.