Regarding Web Pages & Unnecessary Complexity
by Michael Caine
Sporadically, I embark on crusades to force the World Wide Web as displayed on my desktop to conform to my own notions of reasonable choices for fonts, spacing, and so forth. I simply get annoyed by web pages that use three different serif fonts, three different sans serif fonts, in several sizes, some in bold and some not, some in color and some not. While there may be subtle – but possibly of artistic importance – differences between the Oxygen and Verdana fonts, I see no reason to use both of them on the same page. No doubt this sort of attitude reflects my age. I’m old enough to recall when HTML pages were about content and structure, and details like fonts were intentionally left in the hands of the end user.
On previous crusades, I managed with tools like Firefox’s preferences settings and the ability to provide global user-specified CSS values. In combination, it was possible to overrule most of the font settings. But it’s no longer safe to blindly change the page authors’ font choices: people use special fonts to implement things that should have been done with other mechanisms. I’m looking at you in particular, FontAwesome, with navigation icons like left and right pointers embedded in a font rather than in an image. Override the FontAwesome font and the navigation icons turn into something worthless. This time I’ve been forced to bring out the big guns: JavaScript and Greasemonkey. Yes, I’ve been reduced to writing and running code that modifies web pages on the fly.
Developing the basic code to do what I want has forced me to turn on debugging tools in my browser and look at the actual HTML, CSS, and JavaScript source for various pages. What did I find? Thousand-word pages that load a 20,000-word CSS file, at least 99% of which is unused. Production pages that log (lots of) JavaScript messages that include the string “debug” to the console. Production pages that load scripts that contain syntax errors, hence are never run. Production sites that download font files that contain errors, hence are discarded and never used. Some of the document structures are… interesting. For example, it is not uncommon to find a section of the front page from a newspaper site that contains an image, a small headline, and a one-sentence teaser. These three items are embedded in an incredible array of nested containers, mostly <div> and <span>, like a data version of one of those Russian dolls. Farther down on the page you find the same type of objects – an image, a headline, and a teaser – embedded in an entirely different arrangement of nested containers, rendered in slightly different fonts and sizes.
Some sites use JavaScript to load and position the real content. That’s cool, I’ve been known to occasionally use JavaScript to do that myself. As a result, though, my script has to be alerted and rerun whenever the page content changes in order to be sure that new material is rendered my way. In one interesting case, someone’s page downloaded a script part of which is similar to mine – it is invoked whenever the page content changes and among other things, resets some fonts and sizes. In combination, the two scripts slugged it out, theirs changing everything to the Oxygen font and mine changing everything back to what I prefer. At some point, Firefox gave up and crashed. I gave up and added that site to my exception list. If Oxygen is that important to them, so be it.
In everything I’ve ever done professionally, one of the important concepts was “unnecessary complexity is always the enemy.” I’m somewhat discouraged by the project this time, but I haven’t given up – it is a crusade, after all. It’s actually surprising how much of the time it’s possible to make reasonable guesses about what function a piece of text is serving and adjust its appearance accordingly. But I have been reminded of the old saying that it’s not how gracefully the bear dances that’s amazing, it’s that the bear dances at all. I have a new appreciation for the fact that it’s not how fast (or slowly) contemporary web pages load, or how attractive (or not) they are, but that they load at all.
Photo credits: The dancing bear from Wikimedia Commons. Firebug “examine element” screen capture by the author.
I’m pretty sure that roughly 0% of the people involved in creating the web pages know what a horrible mess they’ve made. They’re using tools that generate html/javascript/css/ framework code, which generate lower-level frameworks, and eventually the horror you’re looking at gets spit out. The visuals may get tweaked, but as long as the performance isn’t abominable, no one is going to care how much cruft gets generated.Report
I find this all more than a little annoying given that I’m paying by the gigabyte to load that cruft onto my phone.Report
I pay $20/month for 4 GB, so the 20K CSS file Michael mentioned costs .01 cents. And even that number assumes that it’s sent uncompressed, which seems unlikely. And it’s probably cached on the phone, so it only needs to be transferred the first time you look at the page.
The reason this stuff is so inefficient is that it isn’t worth anyone’s time to make it less so.Report
Although we are talking about phone companies, so if you download 20K of text that compresses down to 4K, you probably get billed for 20K.Report
Here is what I’ve noticed happens to me a lot when I use Safari and Firefox, I tend to get the clicky wheel of non-responsive script. This mainly seems to happen on Slate, the Atlantic, and the SF Chronicle. My guess is that it has something to do with automatic video ads playing.Report
That happens to me too. And at the weather channel and whatever site it is that Kyle Cupp now posts on. Regrettably, I’ve stopped reading him because of it.Report
I know I’m old and cranky, but… these are the kinds of things that cause me to run an ad blocker with a subscription list of URLs to suppress, and go to the extra hassle of not letting videos run unless I give explicit permission.Report
these are the kinds of things that cause me to run an ad blocker
Yessir! The interwebs had become nigh unbearable until I installed an adblocker.Report
Well, studies show that pretty small tweaks in site layout can generate pretty big changes in user behavior, so when your making less than a penny an impression, and want to boost that all you can, yeah you’re gonna keep tweaking the layout. And then tweak it more. And then tweak it even more. And measure, measure, measure.
Plus, you know, that icon really needs to be cornflower blue.Report
This is a matter of no small amount of concern behind the scenes. Let me remind the Readership that your preferences and opinions and experiences using this site are important to us because we want happy Readers. Well, we want you thinking about the content and comments, anyway, not the interface. Suggestions, comments, feedback, and constructive criticism are always welcome.Report
Just so everyone’s clear, I am not complaining about OT specifically [1]. I’ve made suggestions in the past about tweaks to OT’s functionality — eg, a “Reply” link on every comment, but that’s not the issue here. I’m making a complaint about esthetics on the Web more generally — too many pages are ugly, the underlying HTML/CSS is ugly, and it’s increasingly difficult for the end user to make choices they should be able to make [2].
[1] Although, the current crusade was actually triggered by a minor point at OT. The HTML generated for the Gifts of Gab section is malformed — there’s a missing <p> tag. All browsers make a best effort to render malformed HTML, but Firefox on Mac handles at least this case differently than (apparently) every other browser on the planet, so the GoG text is laid out slightly different than the rest of the text on the page on my browser. Once I knew it was there, it was annoying. Fixing it was not that hard, but before I knew it I was in full-out Don Quixote mode.
[2] EPUB e-books are almost as bad. Not surprising, given that they’re HTML underneath. I selected the EPUB reader that I use on my tablet because it absolutely, positively, always uses my formatting rules rather than what the book specifies. Some of the book designers [3] can give the Web page designers a run for their money in an ugly-layout competition.
[3] Charlie Stross had a recent rant about the Clean Reader product, which makes substitutions for naughty words in e-books. Charlie believes the words are his, and if he wants to write “f*ck”, then everyone should darned well see it. I assume he thinks the same thing about the fonts that he and the publishers settle on. Respectfully, I disagree on both counts — what I do with your words and fonts in the privacy of my own home is none of your business.Report
The HTML generated for the Gifts of Gab section is malformed
WordPress has some very clever AI that emits malformed HTML only when the comments themselves contain logic errors. Find a page where all the comments are sensible, and the HTML will be correct.Report
I’ll take this opportunity to make my own complain about OT
The way the nested comments work, make it impossible to read them in either my iPhone or my BlackBerry. After two or three comments, I get only a long (as in veeeeeeeeeeeeeeeeeeery long) column of letters.
I enjoy OT, and I wish I could read it in my phone.Report
@j_a
Just testing while I’m at it the sometimes somewhat hinky reply-to function that didn’t work for me on my last comment…Report
@j_a Have you checked recently? A month or so ago, I adjusted comment styling for screens that are under 640px. It worked as intended (no squozen comments) for my Android, and comes up fine on the iPhone and Blackberry emulators I’ve looked at.Report
I enjoyed the post and somewhat sympathize, but have to say that what looks “complicated” or “complex” is often just the residue of simplification in another dimension.
So, just to simplify while pretending that the words really make sense directly applied, if 99% of the content of a CSS file isn’t used this time, on this particular page, that imposes much less burden than trying to write 5 or 20 or 200 CSS files each of which would be called individually with 0% excess code. So, even on this relatively simple magazine-style blog, I would have one stylesheet for typical pages like this one, just with the styles needed to make it display correctly. I would need a different stylesheet for the main page. I would need a third stylesheet for sub-pages, and so on. In addition, each of those stylesheets would significantly overlap with all of the other ones. Is it really “simpler” to have 10 largely redundant stylesheets, and to pick a different one each time a new page-type loads, or to have 1 stylesheet that works on all (or most) pages? Let’s say I want to change the color of URLs. Is it simpler to edit 1 stylesheet, and be done, or to edit 10 stylesheets? It was to simplify and rationalize the latter process that CSS was developed. In terms of bloat, is a site more bloated if one big file has all that STUFF in it, or if every page, or every major piece of a page, is bloated with big pieces of the same stuff?
As for all of the spans and divs and the like, a somewhat similar set of concerns obtain, and a set of methods has been developed to propagate them (the “tags,” not the concerns), reflexively where not automatically. Until the day comes that you really need that previously completely superfluous div or span “class” or “ID” to change how something – and only that thing – displays (or disappears, or animates, or yields to some analytic, etc.), and only in certain situations, it’s all meaningless bloat, but the fallbacks will be to go into the page and hack it; devise some complex operation or employ some additional new code, that finds the spot by some other means, knowing you’ll have to do it again on the next occurrence; or just give up.
There are other concerns, and there are often reasons for calling additional CSS files rather than altering the main stylesheet, there is some slight overhead created by forcing the machines to read through text that serves no purpose, and there’s a different overhead created by forcing future coders to and would-be manipulators or sometimes yourself to go through a bunch of bloat to find the important stuff, but, especially when the rendered page is properly cached, the impact on users will be very slight compared to the overhead created by multiple calls to the server, especially to external servers, when a page gets loaded and rendered. Most actually noticeable slowdowns experienced in a day’s browsing will be caused by a slow response from some call to an ad-server or analytic process or other third-party application experiencing some form of indigestion, not by the need to load x*10^4 characters of mostly unused code for the sake of showing the user y*10^3 characters of readable text.Report
All valid points, and to a considerable extent I was simply in high dudgeon when I wrote this. Of the things I have come across, my favorite(?) was the page filled with things like this:
<div class="headline block 10px bottom margin";>
<div class="headline block 5px top margin";>
<div class="headline block 8px left margin";>
Hello, world.
</div>
</div>
</div>
I was actually afraid to go look at the CSS file and see how many classes were defined.Report
My cat’s breath smells like catfood.Report
How’s your wookie?Report
Wow, this got really personal all of the sudden.Report
This is, in fact, probably as relevant as the post.Report
@michael-cain
My apologies. I was only intending to mock my own ignorance on the discussed topic. I was so overwhelmed by this. If you asked me about any of this, the most I could say is that I’ve quasi transitioned from Safari to Chrome.Report
@kazzy
No, no, I was taking your comment as politely sarcastic, gently pointing out that I was ranting about things that were both obvious and inevitable. Which I was, but writing it down and putting it out in public relieved a lot of stress :^)Report
Obvious? Inevitable? Far from it! But, uh, sure!Report
well this is odd, and wonderfully ironic… Just where I was commenting, on this post about web page complexity, a weird formatting problem appeared, affecting the display of this thread but no others that I’ve checked so far, and beginning on or around my comment…
…am tempted just to ignore it… I assume it’s showing up for everyone else – the comment stylings dropping off above, and the thread being rendered as a bulleted list?. No good reason it should be happening that I know of… If anyone runs into it somewhere else, let me know.Report
Also shows up for me. Skimming through the HTML… each comment is a list-item. The enclosing list is closed after the last comment that is formatted properly. The remaining comments are list-items without an enclosing list, so the browsers have/get to guess.Report
The problem is a little weirder than that, especially since the problem is not occurring on other threads. As an experiment I am going to delete the two comments of mine that occur where the formatting goes haywire, see if the thread reverts to intended formatting. If it does, then I’ll re-post the comments and see what happens. (Plus I’m also still interested in knowing more about j-a’s Blackberry/iPhone results.)Report
So I removed the first format-breaking comment, and things are back the way they normally are.
Note that the “hinky reply-to” (js-based) function is not working on my comment at https://ordinary-times.com/blog/2015/04/09/regarding-web-pages-unnecessary-complexity#comment-1013851Report
And now we’re back to breaking the formatting! So I think it’s something interacting with probably the content of the suspect comment. Going to do a couple more experiments with it – suspicions falling first on the tag-like “less-than” character (which really ought to be purged by a certain WP function for sanitizing text in comment boxes – but which may escape the filters for one reason or another).Report
That was it, apparently: the “<” (typed here as HTML code, typed above directly) wasn’t cured.
Also odd that Hinky Reply-To isn’t functioning apparently at all on this thread. Going to try it again in this comment just to see: @michael-cainReport
and now it’s back! (Hinky Reply-To, that is)Report
OKay, let’s try to break the thread formatting again by putting in a stray “less than” (or “begin tag” in HTML): < >Report
Are we broken?Report
yep… let’s see what happens if I put up an end tag >Report
didn’t think that would change anything… didn’t…, but I bet it will if I enclose it in the format-breaking commentReport
yep… not sure it’s worth trying to fix… I think that the theme being used on this site, which includes its own special commenting re-formats, may have left something out, but I’m not sure. Obviously not desirable functionality, though – way too brittle.Report
Now, I’m going to try replying using Hinky Reply-To to j-a again:
@j_a
Have you checked OT threads on your Blackberry and iPhone recently?
Just for reference am also hinky-replying to @michael-cain on this one.Report
Hinky Reply-To does not like @j_a – I wonder if it has something to do with the “j” and a peculiar javascript workaround used on some WordPress sites. Unfortunately, the creator of Hinky Reply-To (actually it’s called Mention comment’s Authors) didn’t respond to my previous questions about that other formatting irregularity imposed by his plug-in. (Could have been a language problem, or could be he just didn’t care very much.)Report
It works!!!!!!!!!!
You are my hero. Thank you for giving me O. T. onthe go!!!!Report
You’re quite welcome. As a smartphone user myself, it was a pleasure to fix that – though Will Truman suggested further formatting enhancements for smartphone-nested comments that I haven’t thought through yet… Actually – looking at the source code, I’ve found an illustration of my reply to our cranky author. Seems that WordPress automatically spits out a class that, until someone uses it, serves no purpose, marking the “depth” of comments. Am going to fiddle with that, and may add it to the suite of next or after-next commenting format adjustments.Report
@ck-macleod
Who’s awesome?
YOU’RE AWESOME.Report