Mobile Friendly

My special interest is computers. Let's talk geek here.
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

Hi Yogi

I am changing my meta tag from follow to don't follow, because my index.html and the pages it link to all pass as mobile friendly. The ones the indexed pages link to, where my content is placed, do not.

I agree on the tools to help with the work. I've downloaded several to try, Komodo Edit, Blue Griffon, Google Web Designer, Bluefish, Mercury Editor and Maqetta. Of those Bluefish is the one I'm using, it saves some typing, and makes hopping between pages fast and easy, it also has hover pop-ups with the elements, selectors, property, and values. All of these features are a great help, it also lets you know if a property or value does not work with that selector or element.

I do make good use of the 'web developer' features of web browsers, as well as a third party program which works similar.

Needless to say, when I rewrote my website from HTML4 to XHTML-STRICT, I really had to mind my Ps and Qs and get it just right. I understand (to a certain degree) how INLINE vs BLOCK and how everything relates to the parent element, which takes precedence. This is why we use div ID= and div CLASS= rather than assign some properties to the parent element.

I hope you don't mind if I give a little lamentation here regarding the tutorials. Maybe it will help explain one of my more serious difficulties. I'm overlooking something, but what I don't exactly know. Here goes.
Using the W3C HTML5 Tutorial: They only teach using the element they are teaching on the html page, along with the CSS to control it where necessary.
OK: They give a lesson and place the code between <section> elements. If I use a blank page with the proper info at the top, including head, etc. Basically a standard generic html page I can use to try their examples. Or even if I use my own html page it doesn't matter.
The lesson they give between the <section> elements always works perfectly, IF it is the only thing on the page.
If I leave the first lesson on my page, close the </section> open a new <section> below it on my page to do the next lesson. Many times, what I place in the second <section> does not work unless I remove everything we did in the previous <section>...
By my understanding, if your container is unchanged and only set up using the default settings, e.g. <body> </body>
Then it should not have any influence, on the <sections> other than limiting their width.

I can place a line of text and three small two inch square images, or 150px x 150px images, side by side as style {display: block float: left} and on a desktop they appear INLINE, but when you shrink the page, because they are block they move under each other as expected, and the text stays the same size but wraps. If I shrink beyond the margins, the pictures themselves shrink to fit the page screen width. So far so good right. This is what it is supposed to do, and is Mobile Friendly.

However, if I use a 600px x 600px img, and even include in the CSS max-width: 100%.
When I shrink the page, the text gets smaller instead of staying the same size and word wrapping, and the pictures remain at 600px x 600px and fall off the screen. This is NOT Mobile Friendly, and unreadable.

Taking the same code that works perfectly above, and only replacing the images with the larger images, nothing then works. The pictures do not fall outside of the <section> boundaries they are contained in.
if <body> width is 800px, <section> width is 700px, and <img> width 600px. It should not change how the page works.
Why is the text now shrinking instead of staying the same size and wrapping?

I have a viewer in the web developer which shows what my site appears like on different screen sizes.
Using the 150px square images, and viewing the page even down at 320x480 it looks right, image under image, and shrunk to fit the screen width, text wraps and remains large 16px I think.
Only changing the pictures to a larger size, even if I use half-size 300 x 300 images I still have problems.

The <picture> element is not yet supported in HTML5, I saw no difference in the display on any web browser using <figure> in lieu of making a <div>.

One caveat, if you use <section> it MUST HAVE a header line, aka <h2> to prevent an error message.
I can use <figcaption> with <figure> but since I am using <section> with <figure> inside of <section> I use an <h3> for the title over the image. Then close </figure> </section> as I should.

For the life of me, I cannot figure out why using 150px images work, but 300px and 600px totally break everything, the entire page is broken. Oh it passes W3C with zero errors. But Mobile is totally messed up. All I see is the left side of the page and only about 320px of that, nothing shrunk, not even text.

FWIW: The defaults for using <figure> are: display: block; margin-top: 1em; m-bottom: 1em; m-left: 40px; m-right: 40px. With the 'm' written out as 'margin' of course. I can override the defaults by adding the property and value.

On Layout.
I always place my tags in the order of appearance on the page. <doctype> <html> <head> <body> <div> (container) <header> (top of page header) (contains) <figure> </figure> </header> <nav> (breadcrumb) </nav> <section> <article> </article> </section> <section> </section> <footer> </footer>, </div> (closes container) </body>, </html>

Now you said something about the CSS which might be an important issue I may be overlooking. Although I don't think it applies, since I'm very careful not to duplicate selectors.
I've always known CSS reads from top to bottom just like HTML, however, I don't think I realized it reads the LAST selector as the most dominant. I know many of the properties MUST be listed in a certain order within the selector.

But, if I'm understanding what you are saying, even if I have a CLASS or ID to separate certain <sections> if I have <article ID="page-top" CLASS="small">
CSS style #page-top width: 100px; height: 40px;
even though I'm using an ID, the fact the ID is in an <article> means it interacts with the parent child relationship, meaning it could cause the <section> the <article> is in to pick up the properties named for #page-top, even though page top is used only once.

I do know if I set properties for <section> such as 'center' and I have an <article> inside the <section> the <article> is also centered. However, I can set an ID or CLASS for the <article> and use the selector with a different property and value and it works. Now that I think about that, it doesn't work all the time though. Or if it does, it may affect other things on the page higher up on the page or the whole page. It is for this reason I will often use a <div> around a <section> to isolate the <section> and lock it within in a <div>.

That being said, I have to set <div> to {display: block;} or it could blow everything I've tried to achieve.

As you can tell from some of my previous comments, I'm picking back up on the code, so all was not forgotten.
It just irks me when the samples given in the tutorials only work if they are stand-alone. When combined on the same page, they often do not work, for me anyhow. I've watched tons of videos where they use numerous <section> tags and they all work as they should. If I have nothing different in my code than what they showed, why does mine break the whole page if I only make one minor change. For E.g. change <p img="dog.jpg"></p> to <p img="doghouse.jpg"></p> dog.jpg is 40px square, doghouse.jpg is 100px square. There are no property values applied to the p img element.

It is these types of things that are driving me nuts. I know the elements are plenty wide, as you can look up using programs like web developer which shows you the box models they reside in. If an image does not spill out of the content area into the padding area of the box model, then there should be no problem.

One last thing before I quit bending your eyeballs.
I cannot use the <hr> element to draw a line on the page. I've had to revert back to my <div CLASS="line" /div> to get what I want. The class .line is structured in the CSS to have width, margins, etc.
You cannot place two <hr> elements after each other without getting a line break.
Whereas using my Class Line with the right width setting, I can place the same code twice to get a thicker line, and three times to get a thicker line yet.
I played with trying to use <hr> for over an hour with no success.
One problem with using <hr> is the line it makes was relative to the element it was contained in. So if you use an <hr> in the <body> and want to place an <hr> in the <section> between <article> elements, the line comes up short, even though <section> width was not given, the default I guess makes it smaller than the <body>.

I may be wrong, but I thought the whole idea of HTML5 was to do away with the use of <div> with ID's and they selected the most common ones used by programmers and made them unique across browsers and mobile.

I don't think any comments are necessary for all my above ramblings. Unless you see where I may be going wrong, hi hi...

Thanks Yogi

TTUL
Gary
User avatar
yogi
Posts: 9978
Joined: 14 Feb 2015, 21:49

Re: Mobile Friendly

Post by yogi »

You are into HTML5 much deeper than I have ever tread. However, what you are describing is understandable. It wouldn't take me long to become familiar with the elements I've never used, but as of this post I have no need to use them. I will make an offer nonetheless. If you can send me a copy of all the code and the images that works with the small images but not with the larger images, I will use that as a starting point to learn more about HTML5 than I currently know. Hopefully, in my learning process I will be able to duplicate your dilemma and then come back with an explanation we both would understand. :badpc:

Post the code here, or message it to me, or attache it to an email to the site admin. Just make sure you include everything you are using when the error occurs.
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

Hi Yogi

I can let you off the hook, for now anyhow.
I didn't get done with my page until 2am, and it still has one minor glitch to fix. Apparently I've got a Content Box inside the same Content Box somehow on this new issue.
However, my image and Mobile Friendly problems seem to finally be solved.
I don't know if it will pass W3C tests or not yet, but it should pass Google Mobile Friendly with ease.

As you know from when all this first started, I went through my pages and resized each image to EXACTLY the size display box it was contained in. I took images that were 250x250px but displayed at 110x110px as I was instructed, then I ran the 110x110 image through a compression program to reduce them from like 30k to 2.6k, all of this makes for faster loading. So far so good.

Larger images which I wanted to display at 861px width, I followed W3Cs rule of ALWAYS SHOWING the width and height in the img element. This is also so to prevent double html calls. Without showing the width and height, it will have to grab the image first and then make the space for it, then call the html back again. By giving the width and height, it makes the space for the image in one html call. Makes sense, speed things up.
However, W3C never says anywhere in all of their documentation that the HTML overrides the CSS.

To make images responsive, we have two choices, leave out the height and width from the img element statement, which is considered bad practice, OR use a height and width based on a percentage of your Containing element.
So, if you have an image that is 500px wide on a 1200px wide containing element, you would divide the 500 by 1200, then multiply by 100 to get a percentage. Although you can place this in the CSS as width:41.66%; height:auto; and leave the info off the html page. If you want to prevent flickering or double html calls, place the info in the img tag on the html page.

You would never believe the types of information I came across. Most of which were what I was trying to prevent as Bad Practices. One fellow I spoke with via e-mail told me he makes ALL of his images TWICE the size he uses them, then uses things like set background-size: 50%; that way they look great on those wide retinal screens too.

I did the right thing by sizing my images to the native display size and then compressing them. But to be Responsive and Mobile Friendly, you have to tell the devices they are a percentage width of the container.

My 100px left margin container is no problem, nor the float image. When everything else is right, it shrinks also.
The text now wraps properly while staying at 16px unless I used a percentage to make it larger or smaller.

Now, I only need to figure out how to fix my Header image, which has text contained within it.

Bootstrap was NOT the way to go, and there is no need for JavaScript for what I wanted to do. I just needed to ignore what W3C said to do, or the Tutorials which used them as the basis for their examples, and rewatch the video's of those who write html5 pages for a living. Needless to say, most keep things as simple as possible. But I found a Tutorial where a guy builds a Magazine, and although he used all the client side scripts, he explained WHY he did each thing the way he did.

As soon as I figure out this Header problem, I'll go ahead and post my html and css, or to save space here, I will be uploading to the Comcast Server as well, to make sure I'm Mobile Friendly.
I may make the April 21 deadline after all. I just hope they mean MIDNIGHT of April 21, hi hi...

Later I will try to figure out how to use a simple html file which does not need to be duplicated.
I sorta was trying this with my current html page, by moving things into the CSS instead of having them on the html page itself.

On my personal web page, I have an Navigation Box on the left, same as I do on my Authors website. Same home-made template. The problem is, if I want the pages these links go to, to look like the index.html page with the Navigation box on the left, I have to duplicate this on every single index fed page. Where I should be able to have one page with it, and simply add the Container Data on another html page. Some day I will figure out how to do this. Yes, I know about the iFrame method.

I also have pages with PDF files on them I will have to figure out how to make mobile friendly as well.
I'll just block all of those for now, if I get an error message with them, not caused by the convoluted header.

Thanks Yogi! I gleaned a lot from the things you mentioned, and searched out each thing you said to study.

TTUL
Gary
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

One Quick Vent - HTML5 Sucks Canal Water...

Finished my one html page I was working on as the basis for a new template.
Finally got it working, looked great an all mobile, tablet, laptops and desktops.
Checked it with Google Mobile Test, passed with flying colors.
Tried it out on Firefox, Chrome, Chromium, Iceweasel, Epiphany, Safari, Opera, and even IE.
Looked great. Ran it through the W3C HTML5 test, it failed miserably. Over 20 errors.

MOST of the errors had to do with my changing image height and width from a px value to a percentage.
HTML5 does NOT allow percentages for width and height.

I should have done this earlier, I turned to Bootstrap. Whipped out several great looking pages really fast, after spending hours learning their codes that is. They too have loused up Tutorials. The keep harboring on the fact your Rows MUST equal 12. Yet, very few of their examples total up to 12. And they are only horizontal rows, vertical rows, ha.

Then when I went to duplicate how my page looks. I think I'm the only person in the world who has BROKEN the Bootstrap web developing program. Looked great until I went to check the mobile views. Showed full-size, like sliding a small box over an entire web page, no shrink, no sections stacking up as they should.
Around 3am this morning I finally got it tolerable, but went to bed, have not added an image to the header yet. Which will probably break everything all over again.

Rather than trying to get things looking the way I want them to look. Today I'm going to make a simple third tier html page, and copy to it the text and images if any, from my other tier three pages and upload them.
Kindergarten level web pages until I can work it out.
As you said, if you get the FAIL button from Google, it will not be easy to get off. So anything that passes is better for right now.

I'm still having a whale of a problem with Bootstrap too. What 3rd party bloggers show, on how to do something, apparently only works if you have Bootstrap running on your own server, not client side or CDN links.

I have sixteen hours left. Hmm., and with only four hours sleep. I have a hunch their will be a few monitors down at the road for the garbage man to haul away before today is over, hi hi...

Google Web Designer is NOT a program for writing html, it's for making banner ads and animated stuff. It can be used, but it's purpose is to make 3D and animated boxes. Very complex also.
At least Bootstrap is for creating website pages and it is done mostly because of their CSS and <div class= names>
I just hate relying on something I don't have control over.

TTUL
Gary
User avatar
yogi
Posts: 9978
Joined: 14 Feb 2015, 21:49

Re: Mobile Friendly

Post by yogi »

My only reaction to all your woes is that W3C failures will not affect your Google search engine ranking. As you pointed out, your original work passed all the tests outside of the W3C scrutiny. Does it really matter if you are not using correct grammar? You are not being graded by W3C. Having said that, I also understand your need for perfection. And you should not lower your standards. But, if you can meet the Google I'vdeadline without being perfect, maybe you should put that part of the rewrite off until some other time. Also, just because Google set a date for their transition, that does not mean your web sites will be the first ones they crawl. It may take days or even weeks for them to get to you. Of course it's prudent to not risk being tagged as unfriendly, but I don't think Google's standard indexing goes three links deep into a web site. If you had a site map, then they would. But as I recall you don't have such a thing.

My understanding is that BOOTSTRAP does not need server support above and beyond the ability to read HTML and CSS. It's a package of pre-written tools, but all their techniques employ standard stuff. I didn't see anything proprietary in there when I looked at it. Unless you write your own code from scratch there is always a risk that you will break what somebody did for you. They make assumptions and require dependencies that are implied. Good luck with trying to guess what they are doing and why.

I've used the Google developer site as a reference, but not as the Bible for HTML. Like you, I can't always understand what they are doing or why. It's a nice resource, but not anything to rely on for actually building a web site.

FOOD FOR THOUGHT: http://foodwatch.com.au/blog/additives- ... ients.html
You would not want to eat the crap these guys are talking about, but look at what they did to their web page. It has everything you want in a modern web site, plus it's mobile friendly. I'd give them 5 stars for web page design.
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

Hi Yogi

One page down, 53 to go. But I finally got it, so go whoo hoo, hi hi...

I managed to get it very close to the original, and it is mobile friendly for EVERY size all the way down to 320.

It passes W3C for HTML5, and my part of the CSS passes, but Twitters bootstrap.min.css has hundreds of errors in it.

All of my tier one and two pages pass mobile friendly, even if they don't look like it. This is one of my tier three pages.

Have a gander! http://home.comcast.net/~dutch-rhudy/ht ... tions.html

Now that I have the base down pat, I can get the rest up to snuff.
I had to do something the bootstrap rules say you cannot do, but it worked, so I dooed it.
Not minified yet so easy to read.

TTUL
Gary
User avatar
yogi
Posts: 9978
Joined: 14 Feb 2015, 21:49

Re: Mobile Friendly

Post by yogi »

The amount of effort you put into this shows in the finished product. You have something you can be proud of there. I hope you finished the project on time :mrgreen:

I took the liberty of looking over the code for the page link and was impressed by it's simplicity. I didn't see anything particularly HTML5 other than the doctype. It's all pretty straight forward as far as coding goes.

The styling, however, is another matter. I can see why you experienced some challenges. I can also see what prompted your question about how much of the script file you actually need to load. The bootstrap script on your server is way way way overkill. It will only slow things down on the server side by a few microseconds so that it's not a big concern. All you really needed to lift out of that file is something like this:

Code: Select all

 .carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{
	display:block;
	max-width:100%;
	height:auto
}
And even there you seem to only use the img-responsive class. Then again, if you don't know exactly what the script is doing (and I don't), you did the prudent thing by uploading it all. The web page I found to describe BOOTSTRAP broke it down into task sections. It was easy enough to pick and choose only what was needed. That's one reason I wasn't overly impressed. You would have come up with the necessary style on your own if you had enough time to tinker.

In any event, congratulations. I can't wait to view the entire site.
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

Hi Yogi

I intend to do exactly what you suggested.
Right now, I'm thinking, TIME is of the essence, and I have at least a dozen more pages to do NOW, and then update all the rest later, because they do look bad on a mobile, even if they do pass the mobile friendly test.

I agree on the BLOAT of the bootstrap.min.css, and am not sure if I am using js or ajax, but left those lines in for not.
I'm using CDN for the those, but decided to upload the bootstrap.min.css as part of my client side files. I uploaded the others also, even though they are not doing anything.

bootstrap.min.css produces 39 errors on the W3C CSS validation. So to alleviate this problem, as I learn more, I will only pull those lines from the CSS that I need.

As far as carousel, I may make use of it on one page where I have book covers.

I'm still not 100% happy with the new page, and why something they say I cannot do (use TWO <div> containers) is making it do what I want, aka my left column, as long as it works and passes W3C html5 test, I'll keep doing it.

I managed to get five of my 18 or so tier three pages finished and uploaded last night.
Today I will finish the easy ones, then tackle what to do with the PDF files.
Not sure if I can force them to display by using iFrame or not, haven't got into it yet.
Mobile devices don't have PDF viewers like desktops. And I'm not about to try and convert PDF to HTML, it never comes out right.

I did learn something on one of the forums, how accurate the information is I don't know.
As you said, the web crawlers are slow, so I may have days before my pages are found.
The scuttlebutt online is, unless someone visits your page using Google Search to find it, Google will be ignoring those pages. But if someone does do a search for your page, and it is not flagged as being tested for mobile friendly, the page will be tested at that time, and indexed as mobile friendly or not mobile friendly.
In other words, if you do a Google search it is doubtful if more than one or two sites on your first page of search hits will have the Mobile Friendly tag appended to it, if no one ever clicked to visit that page, before the web crawlers find it on their own, which could take three weeks or longer.
I guess today is the deciding day to see what appears on the Google Searches, hi hi...

I wish I would have reconsidered bootstrap when I first encountered it. I would LOVE to know how they make the "image-responsive." I'm sure there is much more to it than a single line of CSS coding. Heck, it may use more than one CSS code, since they are all interactive with each other.

Take my breadcrumb for instance. Don't know if you saw a gray bar across the page or not.
I used "background: none;" and it went away. Later it was back again. So I moved the Style Line to a different location.
Which brings up some other quirk. We are supposed to be able to use our own CSS by naming it either Custom.CSS or something else. Every time I tried it, following exact directions, I get an error message saying, cannot load custom.css, and it didn't matter which one I called first in my Link files, I still got the error.
I did move remove bootstrap.min.css from being a CDN to having it as a local file. But was unsure about the other two, since I could not find one of them in the folder. If I hide the line from my <head> then my page does not display right, so it must be being used somehow.

Still much to learn and many pages to go.
I appreciate all of your help Yogi!

TTUL
Gary
User avatar
yogi
Posts: 9978
Joined: 14 Feb 2015, 21:49

Re: Mobile Friendly

Post by yogi »

Gary
There is no rule I can think of regarding nested <div> tags. Calling them a container is an arbitrary statement. The name itself means nothing as long as the markup syntax is followed correctly. Nested <div>'s might be a problem for mobile rendering, but I can't think of a good reason why. Whoever told you it can't be done knows something the rest of the world never heard about.

You inspired me and I decided to update my own personal web pages. They are infinitely more simple than what you are doing which made them good candidates for getting my feet wet with pure HTML5. The solution to making images responsive is pretty much the code I lifted from BOOTSREAP. I downloaded it and it was tricky finding the code, but I'm persistent. Here is the CSS from BOOTSTRAP that I put into my web page:

Code: Select all

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 0 auto;
}
The pictures resize as expected and they are horizontally centered on the page. However, you must understand (and I don't) how this all works in conjunction with the @viewport CSS at-rule. You have to pick a starting size for your image view and then configure the CSS to respond properly on various sizes of mobile devices. As I said a couple times already, the device itself has a lot to do with determining the responsiveness of your images. Covering all bases is a nightmare because @viewport is an agreement that not everybody agrees on, and it is not a standard (yet). Thus you might fiddle around to get it to look good on iPhones but anything seen on IE 10 or greater will fail because MS doesn't recognize all the agreements (yet). You end up needing to use two variations of the @viewport descriptor:

Code: Select all

@-ms-viewport {
  width: 640 px;
}
@viewport {
	width: 640 px;
	zoom: auto;
}
Guess which one fails the validation tests. :grin:
There are more descriptors than what I have in my examples, but the down side is that not every browser recognizes all of them. If you can scale your images for all mobile variations, then you will have accomplished maximum image responsiveness. From where I sit that's a lot of trial and error, and I don't have the mobile devices on which to check out all the possibilities. Perhaps you have already run across this in your research. It gives a breakdown of what you can specify (in Mozilla) for @viewport. https://developer.mozilla.org/en-US/doc ... /@viewport

Apparently viewport was a metatag at one point but is now being ported over to CSS. As I was doing some in-depth investigation into meta tags I discovered something very interesting. Apparently the "expiration" time can be set by you if you use the proper meta tag: http://www.metatags.org/meta_http_equiv This would be great news if it was actually useful, but it's not. You need to use the meta http-equiv="expires" tag in order to set it all up. However, that tag is discouraged and will fail the HTML5 validation tests. Once I removed http-equiv I cut my error messages down to zero. Of course I can't specify expiration times, but I'm taking the attitude that it's not MY problem.

This web site has a bevy of search engines crawling all over it every day and nearly for the full 24 hours. That means we would get tagged pretty quick by the major search engines. I don't know if my personal web site was ever indexed and it's been up for a decade already. I think the word on the street is correct. Google keys off the search queries first and then it takes into account what it finds on it's own. Bottom line is Google is not watching you unless it has reason to.

Dennis
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

Hi Yogi

There are so many Selectors, Properties, and Values no longer allowed in HTML5, it can drive you bonkers figuring out other ways of doing the same thing.

I almost have all of my tier three pages done. I would have gotten done if I just left them the way I had them and added only what I needed to to force them to work. But you know me, I had to try to do it the suggested way.

I have a few html pages which display PDF files in a PDF viewer.
I forget now how I did it in the old HTML4, but when I upgraded to XHTML-CSS I used the <object> tag.
Here is a sample of how I did it in XHTML.

Code: Select all

<object width="880" height="500" data="../pdf/130810tac.pdf"></object>
<div class="line"></div>
<div class="centered">
<h3><a href="#blurb" class="returntail">Return To Top</a></h3>
</div>  <!-- closes class centered -->
Needless to say, this does not work in HTML5

Here is the suggested method to display a PDF file, as shown by both Twitter and W3C for Bootstrap.

Code: Select all

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="../pdf/131012tac.pdf"></iframe>
</div>
<h3 class="text-center"><a href="#pagetop" class="returntail">Return To Top</a></h3>
<hr class="hr1" />
It does work IF you only have ONE iframe on the html page.
But if you want to place six or twelve on the page, the first three iframes show the same pdf file.
Also, you cannot adjust the height of the PDF window inside the iframe. I tried for two hours using every combination I could come up with.

Someone who had the same problem put the following solution up. But apparently it is incomplete.

Code: Select all

<iframe id="131214" width="98%" src="../pdf/131214tac.pdf"
    onload="document.getElementById('131012').src=document.getElementById('130914').src=this.src;">
</iframe>
<iframe id="131012" width="60%"></iframe>
<iframe id="130914" width="30%"></iframe>
​​​​​​​​​​​​​​​
Since I could not get it to work the right way, I fell back on using <object> and worked with the lines different ways until they pitched no errors, and after a little more tweaking I finally got exactly what I was after. AND it is Mobile Friendly too!

Code: Select all

<object data="../pdf/131214tac.pdf" style="width: 100%; height: 400px; display: block;" class="img-responsive"></object>
<hr class="hr1" />
<h3 class="text-center"><a href="#pagetop" class="returntail">Return To Top</a></h3>
As you can see, it is a very simple single line of code. Despite the fact the whole html document is supposed to be "display:block;" it took adding it into each line. And of course the class="img-responsive" is Bootstraps way of making it mobile friendly. Although HTML5 no longer supports scroll bars, I managed to get them on all the mobile sizes.

Normally, I used to be able to just go around to different website looking for a feature I wanted, and see how they did it. Since so many websites are produced using PHP, and many of the things they do use JS or JQ or other things, I really am totally lost at figuring things out.

I do hope if you are doing some HTML5 work, some of my problems and solutions are beneficial to you. I'm glad to share how I did each thing, whether it is Kosher or not, hi hi...

Here is a direct link to the page I've spent all night trying to work out. But at least now I'll be able to get the other pages for 2014 and the current blog done tomorrow. If you care to take a look that is.
http://home.comcast.net/~dutch-rhudy/ht ... c2013.html

Hitting snags and working them out is how I learn things. But since I don't use it all the time, it is amazing how fast we forget how we did something.

I do have one question you may know the answer to.
I know Comcast does not allow passwords, etc. on personal accounts, since they use .htaccess to work.

But in the process of studying HTML5, besides all the conflicting information I pick up, it appears to me that some things I thought were impossible are actually doable on client side. And it appears fairly simple.

As an example: If I created a Form or box, or guest book, for a visitor to my website. I always though you had to be running on a hosted server with server access to maintain a database. Maybe you still do?

If I'm reading the various pieces of documentation properly. If I have a box for someone to enter their name or e-mail address, it will check to make sure the box is not empty, also if e-mail it will check to make sure it is the right format for e-mail, which still could be false. But just as you fetch an html page from a folder, if I understood what I'm reading, it uses a post function to write to an html page you keep in a folder called data-append, or any name you want actually. It is like a database of sorts, but only a document where each new entry gets added to the document, appended on the next line down. This is controlled to by incramenting a line number. Sorta like the old basic programming.
A=a+1stor-A. So you will end up with an html page with each new entry placed below the previous entry.

By my way of thinking, one cannot use a POST function unless they are on a hosted server which allows it.
But then I'm also thinking, I can upload files, modify files, open them for fixing, etc.
So maybe, just maybe, there is a JS or some other code that can write to an existing html file.
Trouble is, on Comcast anyhow, all the files are Read Only, rx--r--r, but I can change them I think. Never tried to make a file rx--rx-r before.

So my question is, unless I'm on a package deal server like NING or Wordpress, where website members can upload stuff to the owners website, is what I mentioned above something which can be done on the client side of a server?

OK, it's 1AM in the morning, I'm off to bed.

TTUL
Gary
User avatar
yogi
Posts: 9978
Joined: 14 Feb 2015, 21:49

Re: Mobile Friendly

Post by yogi »

Talk about doing things so long ago that you forget what you did, your last post covered just about everything I forgot for lack of use. :mrgreen:

My understanding is that the <object> tag is deprecated, and <embed> should only be used as a last resort. <iFrame> with it's own version of embedding is the way to go. I don't know what touch screens do with iFrame; do they scroll the frame or the page, or do both scroll at the same time? The way around that question is to use virtual web pages of a sort wherein the entire frame takes up the entire page. In any event you have the solution for displaying .pdf files. It looks and works well on all my browsers except Opera where it doesn't display the content of the frame. That is most likely due to a lack of plug-in's or whatever Opera needs to render .pdf files. Who uses Opera anyway? LOL I didn't try it out in Safari, but the next time I switch over to my Vista OS, I'll check it out there. If I have time today I'll abscond my wife's iPad and see how your page plays with that.
Gary wrote: I always though you had to be running on a hosted server with server access to maintain a database. Maybe you still do?
That is correct. If you need to process data from a database, the database has to be installed and accessible to you via the server. It is possible for you to have the database on your computer and process all the data before you put it into a web page that you upload. That's as messy as it sounds, but doable. But, what you are describing does not need database software.

POST and GET are built into HTTP. If your server supports HTTP (and what web host does not), then you can do both. Forget about GET because it's useless as far as security goes. The information you pass to the server via POST is typically a two dimensional array, i.e., <name>/<value> pairs. I'm pretty sure that the data pairs are added automatically to the end of the target file, but it's got to be better to have some script (cgi?) that keeps track of things like incrementing the array. The script and the file with the data is likely to reside on the server. It has to be that way because your browser cannot store variables. I'm not sure what Comcast allows, but populating the file and downloading it at your convenience is no more complicated than using FTP (or HTTP in this case) to upload your site to their server. In fact you will be using FTP to get the data from the server side file to your desktop. Once you downloaded the populated file, then you have to run some kind of script to extract the data in a form that makes sense to you.

As far as file/directory permissions go, I think that's all under your control within your website server space. The interface to set permissions might not be beautiful. It depends on what Comcast lets you do. If you can use Filezilla, then you should be able to do whatever you want with permissions. But, if you have to use whatever front end Comcast provides, then you are restricted to their rules of engagement.

As a side note, you must have figured out by now that I like to deal with computers, web pages, and databases. One reason we have a special interest forum just for computers is to cater to my hobby. However, I also truly enjoy helping out other people solve their computer problems. I learn a lot from it. I can't always motivate myself to do all the things I want to do, but I am (re)learning something here. I thank you for that opportunity.
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

Hi Yogi

If one does not know what a fork looks like, how can they find it in a drawer of utensils?

This is my dilemma, I don't know what question to ask, and do so in a way that makes sense.

As far as Comcast goes. I do NOT use their web page access feature to handle my websites. I upload and download everything from my allocated web space via FTP.

If I have these terms correct, they do not allow side-server scripting, on Personal web space. I assume this to mean running PHP, CGI, and used to think it also meant JavaScript.
I've since learned JavaScript and JQuery are mostly client-side scripts. They may have server-side calls which would be blocked on Comcast. Comcast says you can do a lot on client-side, almost everything except passwords.

They must mean something else when they say passwords. Because on my Personal web site, I used to have my Family Newsletters password protected. However, this was handled entirely in my own HTML page, so technically had nothing to do with Comcast. It also wasn't very secure either. Anyone who opened the Source Code could see what I did. It worked solely on the Users Computer who was viewing the loaded page.

Drat, I looked back at some of my old files to find the code I used to do this, and I can't even find those old files. Must have had them on the NAS which got fried, and I don't have the backup mounted to look there.

Someone did respond to one of my on-line questions on an HTML5 forum, but the info is of little use to me.
Tell me if this sounds right to you. You use ONE iframe window, then the user selects which file they wish to view in the iframe by clicking on a link.

Seems to me, if one was going to do it that way, they could put each individual monthly newsletter on a separate page, and only allow the User to call one page at a time from an Index of Pages.

I have each of my PDF files separate, but only Open a Single HTML page to see the whole year. Well, you saw how I do it. I'm told opening a dozen PDF files will bog down a mobile phone big time. So I should make it so they can only call one PDF at a time. Which sounds right. But it would mean yet another Indexed page to maintain, hi hi...

No questions to ask today. But will say I'm learning Bootstrap can override many settings, even if you place them first. What may be Legit in HTML5, Bootstrap may not allow. Or vice versa, but then you get W3C errors.
I have one Parsing Error supposedly in my HTML Style area, line 9 or 19, depending on the page viewed. Trouble is, all of my third tier html pages use the exact same template, down to like line 100 or so.

I'm still trying to figure out how to use a Custom.CSS like others say they are doing. I get the big red BLOCKED USER CSS no matter if I put it first or second, beginning or last.
I've also Commented Out, the JS and Ajax lines as a test. No Can Do, it seems Bootstrap.min.css makes calls to both of those locations. I can use bootstrap.min.js instead of the CDN, like I do with bootstrap.min.css and it works, faster, but I can't knock out the Ajax call and keep it working. So, everything must be interactive.

No time to study on that right now though, as I have to fix the rest of my pages before they find out a few are still not mobile friendly, and the older ones that are, look horrible, so need fixing also.

I did find time to try and use that CSS snippet for Carousel you pulled. Made an empty html page with only the necessary stuff on it, then the feature which called that line in the CSS. By itself it seems to do nothing.
So this is something else to study later too.

Lunch break over, back to the salt mine!

TTUL
Gary
User avatar
yogi
Posts: 9978
Joined: 14 Feb 2015, 21:49

Re: Mobile Friendly

Post by yogi »

Not quite a year ago Google threatened to add a warning to it's search results if your web site was not mobile friendly. It was a heads up regarding a trend to go mobile and to make people aware of what is needed to design a responsive web site. We never saw the warnings in the search results, but the migration to mobile is perfectly clear. Google is in fact changing it's ways to favor mobile friendly web sites, meaning those that are will be higher up the lists of links returned for any given search. So, if you are still concerned about rank of your web site, you need to be concerned about what Google is doing today.

http://mashable.com/2016/11/04/google-m ... QgOvt0Rqq9
User avatar
Kellemora
Guardian Angel
Guardian Angel
Posts: 7494
Joined: 16 Feb 2015, 17:54

Re: Mobile Friendly

Post by Kellemora »

I updated all of my websites to make them Mobile Friendly while the scare was fresh.
One thing I never did see them implement was the Mobile Friendly TAG they promised to place by each website that passed their tests.
I think it is ironic that the Google+ website itself is not completely mobile friendly!
Post Reply