1. 41
  1.  

  2. 20

    Includes a Google Analytics javascript blob which is around 8x bigger than the page itself.

    1. 9

      Heh, using NoScript, I have bettermotherfuckingwebsite.com blocked by default and didn’t even see the Google Analytics reference.

      The site still loaded flawlessly, of course.

      1. 1

        Same here. Didn’t even know there was JavaScript haha.

    2. 15

      See also https://lobste.rs/s/rbjfru/web_design_4_minutes, if you just stop before they start to include web fonts you’ll be fine :-)

      1. 3

        This is great and all, but about navigation menus? What about forms? Image gallery? It is very simple to make a short bit of text look nice. The trick is making menus, galleries and ads look nice also. (yeah I said ads, its how many people pay their bills and its what many clients want)

        1. 1

          I disagree with all but two of those 7 declarations. Font size, line height, default colors - all of those should be set in browser settings. My eyes get much more tired by switching between font sizes then by reading in 11pt.

          1. 9

            Are you suggesting that end users should configure their browsers, or that browsers should change their base styles?

            The latter disregards backwards compatibility re layout, and I can only interpret the former as either elitism or naievity.

            1. 7

              I think the real elitism around this is power users and developers who expect typical users are too incompetent to configure their browsers. This isn’t 1995. People are familiar with the web, configuring their browser, resizing windows, etc.

              So, if a person has gone out of their way to configure their browser then websites should respect it. Likewise with text width - don’t cater to the 1% who don’t know how to resize their window.

              Every time this comes up people have stories about how some relative of theirs is still technically incompetent. Well, guess what? Those people aren’t going to use 99% of the web. Sites like Lobsters, GitHub, Dropbox, etc. don’t need to cater to those people because they’re not the target market at all. And on other sites, those people will be completely lost no matter what, so don’t annoy everybody else trying to make those people comfortable.

              1. 4

                That’s a fair point. How should websites be different, though?

                I set up my grandparents' laptop so that the whole PC is at 150% DPI, larger system-wide fonts, and Chrome is zoomed in by default. They’ve told me they’re satisfied so I assume the zoom applies to every website they visit.

                For the technically competent, any changes are possible. The server sends you HTML and you are free to render it however you see fit.

                I use Firefox for Android, and one of my favorite extensions (other than NoScript) is “Dark Background and Light Text” which, as you might be able to guess from the name, forces websites to have a black background and light foreground. This saves battery on my OLED screen, and is easier to read at night.

                Edit: I agree websites should not do stuff like disable pinch-to-zoom. And another favorite extension of mine (for desktop) is RightToClick, which undisables right-click on websites such as Flickr.

                1. 3

                  Thanks for pointing me in the direction of “Dark background and light text”. Been looking for something like that for a while without success. It’s available here: https://addons.mozilla.org/en-US/android/addon/dark-background-light-text/?src=search

                  1. 1

                    I think sites should never (and I don’t use the word lightly) use max-width. That’s the big change I’d make to current design practice.

                    1. 2

                      Why not?

                      1. 1

                        Empirically it seems to lead to worse design (at least IME). In principle I’d say it disempowers the user to no real benefit.

                        1. 1

                          ???

                          This seriously confuses me. Probably the most common use of max-width is some variation of this:

                          .content img {
                              max-width: 100%;
                          }
                          

                          If you mean never to use max-width just on the main content container, I still disagree. Having text content about 30-40 words wide improves readability greatly. Especially for users with high DPI giant displays, having text run from edge to edge is terrible for readability.

                          Of course if this is your own personal preference, you can always disable it yourself through the developer tools, or something like ScriptMonkey.

                          1. 1

                            I do use Stylish at home, but I don’t have access to do that kind of thing at work unfortunately. I do manually remove the max-width on pages using the Chrome console/inspector but that’s tedious.

                  2. 1

                    So, if a person has gone out of their way to configure their browser then websites should respect it.

                    How can a site detect that you have a custom default stylesheet and that it isn’t the vendor default? As far as I know there is no foolproof way to tell right now at least.

                    Also does zoom not work for what you want?

                  3. 2

                    I am suggesting that end users configure their browsers according to their personal preferences. How exactly is it naievity, and how could it possibly be elitism?

                    1. 2

                      My father is “technically competent” and I had to teach him how to install Firefox and Adblock. I’m pretty sure he still uses Internet Explorer regardless, and MSN is his homepage. User styles are absolutely beyond what he bothers to spend his time understanding.

                      In this case, naievity is the idea that most people are (capable of adjusting | care enough to adjust) their user styles.

                      Alternatively, elitism would be the idea that the web should only look nice for those capable of adjusting their default styles; everyone else should just suffer with the bad defaults.

                      Given that most users are technically incompetent or just plain lazy, a website ought to specify font size, line height, and default colors. Users can always override these things with a userscript if they are so inclined.

                      1. 3

                        I completely disagree with your argument that it is naïve to expect of someone to be able to tune their font settings to their liking. There are instructions for all major browsers, and everyone can find them and follow them. The only reason why nobody does it is because people like you defend the abusive behaviour of web designers, so that fixing styles is just not really helping on most pages. That is your attitude that makes web the trainwreck it is.

                        P.S.: What you call elitism is not elitism at all. Compare:

                        Alternatively, elitism would be the idea that the web should only look nice for those capable of adjusting their default styles; everyone else should just suffer with the bad defaults.

                        to:

                        Alternatively, elitism would be the idea that the walls should only look nice for those capable of painting them; everyone else should just suffer with plain concrete.

                        1. 2

                          I disagree with all but two of those 7 declarations. Font size, line height, default colors - all of those should be set in browser settings.

                          I took this to mean you’d rather see the original parody site than the OP, because it’s easier to override the original site’s defaults? I’m not sure how those seven extra lines of CSS limit you in any fashion.

                          people like you defend the abusive behaviour of web designers

                          The style of the OP is abusive? FWIW, I followed your firefox link and zoom still works on this page, despite that it specifies a font size.

                          It sounds like you might prefer the gopher protocol to HTML, since it doesn’t transmit any style information.

                          1. 3

                            I took this to mean you’d rather see the original parody site than the OP, because it’s easier to override the original site’s defaults? […] It sounds like you might prefer the gopher protocol to HTML

                            Precisely.

                            The style of the OP is abusive?

                            OP abueses formatting capabilities of modern web browsers to enforce his understanding of aesthetics on readers.

                            I’m not sure how those seven extra lines of CSS limit you in any fashion.

                            The problem is that one of those seven extra CSS commands override my settings. See for yourself. (On both images left window contains default settings and right window has customized font size.)

                            FWIW, I followed your firefox link and zoom still works on this page, despite that it specifies a font size.

                            The link describes both page zoom and permanent settings. The latter are defeated by “better” version.

                            1. 2

                              Thanks, the photo helps explain things.

                              One of my most-used features of Firefox is the “reading mode” button, which strips style information and applies some nice formatting. I use it both on mobile and desktop.

                              I’m not sure if Suckless Surf supports extensions that would provide something like this, but in general users control the browser and therefore have absolute control over how the HTML is rendered.

                              I do get frustrated against obfuscation/disablement techniques like removing zoom, DRM, disabling right-click, and so on. But I think websites are right to provide a default style that your browser can choose to render.

                              1. 2

                                One of my most-used features of Firefox is the “reading mode” button

                                That is another shitload of JavaScript on top of otherwise bloated pages. And that does not necessarily provide good results, or even work at all. (Note how it is not available on this page for example.)

                                But I think websites are right to provide a default style that your browser can choose to render.

                                I would love if things would be this way. Instead sites' stylesheets are forced, and there is no static way to override them. And every other page is laid out so that without CSS and JS bloat that came along they are barely usable.

                                1. 2

                                  sites' stylesheets are forced, and there is no static way to override them

                                  There is Stylish for Firefox, which may or may not meet your criteria of “static”. I don’t think it requires javascript - it just injects CSS.

                                  1. 2
                                    $ find stylish -name '*.js' -exec wc -l {} +
                                          57 stylish/components/stylishCommandLine.js
                                         134 stylish/components/stylishDataSource.js
                                        1050 stylish/components/stylishStyle.js
                                         438 stylish/components/stylishStartup.js
                                          34 stylish/components/aboutStylishEdit.js
                                         437 stylish/content/common.js
                                         696 stylish/content/base-test.js
                                          33 stylish/content/domiOverlay.js
                                         687 stylish/content/edit.js
                                           9 stylish/content/clear.js
                                         126 stylish/content/frame-utils.js
                                         114 stylish/content/install-frame-script.js
                                          89 stylish/content/install.js
                                          92 stylish/content/manage-addons.js
                                         535 stylish/content/overlay.js
                                          69 stylish/content/unittest.js
                                          16 stylish/defaults/preferences/stylish.js
                                        4616 total
                                    

                                    See, the order of evaluation for CSS is:

                                    DOM → site's static CSS → user stylesheet → browser defaults
                                    

                                    There is no way to inject CSS to a webpage without manipulating DOM, so all of these tools are doing exactly that.

                                    1. 1

                                      Order of evaluation is not necessarily that order. If you use !important you can override everything except a !important in the DOM or site’s static CSS. You will almost never find this on a modern site because the way it messes with specificity makes it an absolute last choice for most web developers.

                                      Also, complaining here about how CSS works isn’t productive at all. If you don’t like the current web standards, take it up with W3C. No one here can change it for you. Alternatively, use lynx.

                                      1. 3

                                        The W3C to a large extent standardizes what browser vendors implement. And what browser vendors do follows broader consensus. Here is as good a place for the discussion as any.

                                        1. 1

                                          Technically true, but then it becomes a problem to allow sites use bigger font when that is needed, eg. in headings, which are increasingly done without using <hN> tags. So yes, this is somewhat a workaround, but with its own set of issues.

                                          P.S.: Yes, W3C is going to listen to someone who does not believe that HTML5+CSS+JS is the best markup language ever. Thank you for that valuable suggestion!

                                2. 1

                                  Have you ever heard of !important?

                    2. 1

                      Is this one or the original is better… I do not see any difference in w3m in TTY anyway.

                      1. 1

                        Nice parody and improvement on another parody on bloat of the Web.