Regarding Web Pages & Unnecessary Complexity

Related Post Roulette

41 Responses

  1. 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

  2. Avatar Road Scholar says:

    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

  3. Avatar Saul Degraw says:

    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

  4. Avatar veronica d says:

    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

  5. Avatar Burt Likko says:

    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

    • Avatar J_a in reply to Burt Likko says:

      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

      • Avatar CK MacLeod in reply to J_a says:

        @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

      • Avatar CK MacLeod in reply to J_a says:

        @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

  6. Avatar CK MacLeod says:

    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

  7. Avatar Kazzy says:

    My cat’s breath smells like catfood.Report

  8. Avatar CK MacLeod says:

    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

  9. 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

  10. Avatar CK MacLeod says:

    OKay, let’s try to break the thread formatting again by putting in a stray “less than” (or “begin tag” in HTML): < >Report

  11. Avatar CK MacLeod says:

    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

    • Avatar CK MacLeod in reply to CK MacLeod says:

      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

    • Avatar J_a in reply to CK MacLeod says:

      It works!!!!!!!!!!

      You are my hero. Thank you for giving me O. T. onthe go!!!!Report

      • Avatar CK MacLeod in reply to J_a says:

        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

  12. Avatar Jaybird says:

    @ck-macleod

    Who’s awesome?

    YOU’RE AWESOME.Report