Making my website mobile friendly

[Ironside]

I've been trying to optimise some sites so that when I test them on Google's "mobile friendly" test the website I gets the all clear. However, I have had a few problems. Firstly, it's telling me that My links are too close together. Can't quite understand what they mean. Secondly, I was getting a message saying that some content was too wide. I removed a bunch of eBay affiliate advertising banners that seem to be causing the problem. I'm not getting this to wide contents warning anymore, however I do have some YouTube videos embedded into some of my pages, when I view the website on mobile test.me, looking on some of the smaller phones, the videos are slightly too big for the scream in portrait view, but okay in landscape view. Is this something that Anyone else has experienced? Have any of you guys got YouTube videos embedded on your pages? How do they look on a mobile device?

[nomis5]

At the moment I have just changed the width to 312 and height to auto. I know this affects desktop and tablets as well but most people know to push the full screen button if they want to see it wider.

I tried setting the width to auto as well but that didn't seem to work.

Any better ideas to solve this?

[lucy24]

Instead of setting an explicit width in pixels, set a max-width in percentage-- 90, 95, 100, whatever is appropriate for your content. You might even use a calculated value, like 100% minus the width in ems of any applicable margins. Be sure to set a height: auto, or distressing things will happen on narrower screens :)

Disclaimer: I don't know if this works on embedded videos. It's what I do with images. The max-width CSS setting will then override the explicit height and width declarations in the element itself.

[13Cube13]

I got most of these same messages.

When i added the recommended head code that sets aspect my site went all wacky on my mobile device browsers. Some stuff did not stretch other stuff went all tweaked. Looked terrible, but that warning was removed.

I decided i would leave it like i had it originally even if people had to pinch and zoom.

I gave up awhile back trying to please google in every little thing and just started focusing on the visitors. Have been much happier with the site and seo in general after making that decision.

[not2easy]

Have any of you guys got YouTube videos embedded on your pages?

The old <embed src="video URL" needs replacing with the new <iframe src="video URL" or it may not be viewed on many mobile devices. YouTube is converting the old .swf flash videos to different formats like html5 and MPEG4 and the iframe element lets them provide the right format for the device and screen (and screen-pixel ratio).

When you add a video to a page with the <iframe element, you should have it contained within a block element like <div that controls the size of the iframe. YouTube videos have a chrome element that needs some space and in order to maintain correct aspect ratio (means the video won't get distorted on resizing) there is a specific percentage to use that re-calculates height and width: 56.25% so the recommended css for the container element is:

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 35px;
 height: 0;
 overflow: hidden;
}

The ratios are explained in an older article at AListApart: [alistapart.com...] by Thierry Koblentz and you can read more about the hows and whys in an excellent explanation in Rachel McCollin's article at SmashingMagazine: [smashingmagazine.com...]