Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
  
performance / stats
Country: United States
Likes Received: 2751
Featured Member: 18 times
Associates: 12662
Wall Posts: 474
Comments Made: 26744
Press Releases: 360
Videos: 2
Phone: No Calls Please
Skype:    
profile visitor stats
TODAY: 85
THIS MONTH: 4323
TOTAL: 560418
are we ibo associates?
member advertising
active associates
Mobolaji Ajibola    
Last logged on: 12/15/2017


Craig Barmore    
Last logged on: 12/15/2017


Wesley Sin    
Last logged on: 12/15/2017


Mohammed Sunmonu    
Last logged on: 12/15/2017


Lawrence Rinke    
Last logged on: 12/15/2017


Ken Burwen    
Last logged on: 12/15/2017


Evon Folkes    
Last logged on: 12/15/2017


John Madeira    
Last logged on: 12/15/2017


Allison King    
Last logged on: 12/15/2017


Aleksandar Aleksic    
Last logged on: 12/15/2017


Emmanuel Mba     
Last logged on: 12/15/2017


Wyndham Rees    
Last logged on: 12/15/2017


Roger Eddy    
Last logged on: 12/15/2017


Todd Treharne    
Last logged on: 12/15/2017


Ian Henderson    
Last logged on: 12/15/2017


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.