Lots of W3C HTML Validation errors

And I mean that at some point, the site stopped doing the whole responsive thing on IE 8 and lower. I don’t think it had to do with these standard-compliant changes, something else maybe.

Yeah, I guess. How many KB are all the pages and scripts?

Yeah, I know IE 8 was pretty hosed up before I made my changes, but I can only compare it to the other browsers where it looks really nice.

It depends on the page and settings, etc. A fully-loaded page I just loaded cost 594 KB, another cost 1MB, another 704 KB, yet another 535 KB. In any case, this is still a large percentage of the page.

From a mobile perspective, that makes total sense.

I found a minor issue in the header.php file. The <title> element inside the “Strava” section contains “Foursquare”.

How are your changes/workarounds coming regarding the HTML validation?

I’m presently using jQuery to write the <image> element after page load. It’s not ideal… although the page’s HTML is valid, the workaround image inserted by jQuery makes for invalid HTML in the DOM. I’m willing to accept this as it achieves the appearance of valid HTML until such time that an image fallback is no longer needed. Then it’s just a simple matter of deactivating the jQuery.

Specifically, I placed a <desc> element within the SVG. This must be set to display:none in the CSS and it contains the URL to the PNG file, <desc>path-to-PNG</desc>. It’s valid HTML and no image loads. The jQuery then takes this URL and through DOM manipulation creates the <image> element immediately after.

jQuery(document).ready(function($) {
$('desc.fallback').each(function() {
var html = '<image src="' + $(this).html() + '" width="200" height="200"></image>';
$(html).insertAfter($(this));
});
});

The problem with my solution is that, although it works great in older versions of Safari, it’s not working at all in IE 8. I’m willing to live with that since the theme is not really looking too good in IE 8 anyway. I am unable to test this solution in Android 2.3 though.

I’ve also added two new items for the Social Icons… “StackOverflow” and “Yelp”, including the SVG and PNG versions of the icons and modifications to the PHP so those URLs can be entered in the admin panel.

The SVG paths are way too long to post here, but if you’re interested in any of these modifications, icons, etc., please contact me privately.

I worked through the theme’s Respond.js not working in IE 8 today as well as found a way around a compromise I made earlier. I’ll have more time tonight to implement the fallback I came up with. I think it will work really well and won’t require JS.

That’s all very good news considering my attempt is not working so great cross-browser.

Any interest in adding Yelp or StackOverflow to the icons? I can email those SVG and PNG files to you if you want.

I can add those. I make the social icons myself and add them to my icon set.

Nice.

I’m not really good with Illustrator so it took me a while to convert the raster images to get the SVG path data today. I think they turned out well although the path data is a bit on the long side.

So for the icons in IE, I got a great fallback working but it depends on background-size support which IE 8 and lower of course doesn’t have. So the images are too large for IE, maybe I’ll export smaller ones or I may call it quits on IE support. In any case, the fallback is HTML 5 valid, bring the theme fully up to validity.

I don’t see it on GitGub. Have you made it available for download yet? I’d love to try it.

Yes, for something like this, maybe the Ie 8 fallback should be text links in place of icons and no widget slider, IMHO. Otherwise, forget about ie 8 entirely.

It’s in a separate branch. Here’s a link: https://github.com/ScottSmith95/Decode/tree/2.8.5

You are awesome! Looks great and works great! IE 8 still looks pretty bad but at least the icons are there. I’m adding my “IE too old – not supported” browser message.

Can you advise about how to over-ride the customizer.php file using a child theme? I’m trying to add my StackOverflow and Yelp social icons without having to modify /inc/customizer.php in the parent theme.

Thanks!

Hook in to the Customizer with this hook: add_action( ‘customize_register’, ‘decodeChild_function_name_customize_register’ );

You can do this in your functions.php file.