Lots of W3C HTML Validation errors

What did you replace the<ul> element with? I’m looking for the most semantic alternative available.

This is a tough one. If you cannot validate the HTML because you cannot drop support for Android 2.3, then you’re stuck.

I may just stick with my custom version of your theme and forgo the future automatic upgrades… (just manually update once in a great while)

What did you replace the <ul> element with? I’m looking for the most semantic alternative available.

I kept the <ul> because it’s already the most semantic way to do this. Much discussion over on Stack Overflow about this, but the row of icons is no different than the horizontal menu which is also constructed with ul.

All I did was add the missing <li> and </li> tags.

<?php if ( get_theme_mod( 'twitter_username', '' ) !== '' ) : ?>
<li>
<a><?php if ( get_theme_mod( 'open_links_in_new_tab', false ) == true ) echo 'target="_blank"'; ?> rel="me">
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="https://www.w3.org/2000/svg">
<title>Twitter</title>
<g fill-rule="evenodd"><path class="SocialIconFill" d="..." id="Twitter" fill="#444444"></path></g>
</svg>
</a>
</li>
<?php endif; ?>

Haha. That comment broke the page. (It was that awesome)
I may go this route since it implies the most meaning, but I hate it too because it nests everything even more.

I tried the <code></code> tags but wow this site did not like that!

I had to go back and back-tick every single line.

I may also bite the bullet and use Modernizer to load the SVG fallbacks.

Will Modernizer take care of the Android 2.3 issue as well as not get involved when the browser is compliant?

I’ve tended to avoid it since every time I’ve tried it, I had issues with my jQuery plugins. Maybe I need to give it another chance.

It will just add a CSS class if there is compatibility .no-svg if there isn’t support. I can write the CSS to take it from there.

That sounds like a nice solution then.

Ah but I realized that the solution I had in mind will still download the images (the fallbacks were to be hidden with display: none;) I’ll look for a JavaScript alternative.

I was mistaken about my assumptions before. I realize now that the SVG icons in this theme also scale down to ensure they fit in a single row. I’m definitely keeping them, even if I end up dumping the fallback images.

Ha! I just checked IE 8 and while I used to have Decode working responsively via Respond.js, it’s just dead now. Something with it not being able to nest or apply styles to semantic (HTML 5) elements.

The icons are so incredibly small… less than 4 KB each… how much of a bandwidth issue could this be?

You mean you killed it by making it compliant?

There are 35 of them, totaling 164 KB. It is irresponsible to download all of these when most devices won’t use them.