Make a website that doesn’t suck

It’s 2016, but websites suck at least as much as they ever have. They’re slow to load, they’re hard to navigate, they render really poorly if you’re not on the latest Chrome. Your data is spread everywhere thanks to Google Analytics and Facebook embeds and other crap. My parents are on wireless line-of-sight Internet service, and when I visited for Christmas I noticed that a lot of sites would never load/display properly–it would give up and time out before all the essential Javascript finished loading!

And that’s the worst part: sites now assume you’ll be able to load everything, and you’ll be able to load it quickly. Try to read the page over a slow connection and you’ll get into the second paragraph before the rendering javascript finally finishes loading, blanks the screen, and re-draws the text in their preferred font or whatever. The link you tried to click on gets shoved down when an external ad finally loads and you end up clicking on the ad! Even on the fast connections at work, Southwest’s site will appear to load fully, enough so that I type in my username and start on my password, but then it gets the final JS library, redraws the screen, and clears my input!

I’ve complained before about overly-complicated websites and programs. To paraphrase Jurassic Park, “web developers were so preoccupied with whether or not they could, they didn’t stop to think if they should.” I’m trying more and more to think about whether or not I should; here are some rules I’ve come up with for myself to try and keep things sane:

• Format content semantically; most things fit pretty well into the title-heading-paragraph paradigm and it allows for automated processing of the page.
• Manage presentation solely through CSS; do not depend on HTML formatting directives. Make a nice-looking, readable CSS style but understand that users may apply their own stylesheet instead (see this article).
• No external Javascript. If I load JS from an external site, functionality of my site is dependent on the other guy’s server. Things like Google Analytics also sell out my visitors’ information to Google.
• No Javascript at all unless absolutely necessary–basically unless you need something to dynamically update. This site currently has zero Javascript, but if I was making a site to play chess online, I’d probably need some sort of scripting to update the board ‘nicely’.
• Test the site on a slow connection. Chrome’s developer tools now allow you to throttle speeds (Hit F12, then go to the Network tab), try it on GPRS speed to see how a sizeable chunk of the world receives your site. When I tried this on my front page, I realized I had a 75K 128x128 JPG up there… a quick call to Imagemagick had that down to 4K with no obvious loss of quality.
• Check out the site using a text-only browser like Lynx, or find an old/cheap cellphone with a limited browser. Is it readable? Look at Reddit in Lynx sometime, it’s awful. This doubles as a rough impression of how well your site will work for vision-impaired people using screenreaders.
• Keep it readable. Text that stretches all the way across a fullscreen browser on a 4K monitor is pretty hard to read, so set a maximum width for your text. On the other hand, sometimes people are browsing on a really small screen, so make sure your text will re-align to display properly on a narrow window too. I’m pretty happy with how the CSS on my page handles this.

These rules are why there’s no Google Analytics on the site any more. There’s no Disqus commenting now, because it took many seconds even on a fast connection to load the stupid commenting system. I even got rid of the .ttf file I was using for the title/header font, because I realized standard system fonts do a fine job of legibly transmitting information. I’ve gone through and made my site conform to the dictates I laid out above, and guess what? It looks pretty good in every browser I’ve tried.

As I wrote this, I thought I’d better go through and make sure there’s no Javascript. Turns out CloudFlare was injecting Javascript into my index.html because it had my email address on it! I went ahead and manually obfuscated it a bit, then turned that feature off; heaven forbid RMS should read my site via his janky-ass browsing method and be denied my email address!

I’m not saying everyone needs to do this. It’s pretty extreme; in search of ideological purity, I have reduced my website to an almost ascetic thing, a monk’s cell with some words chalked on the wall. I may be as much a foolish fanatic as RMS, despite my earlier mockery of him, but I still hold that the web would be better overall if more people put down the javascript and thought carefully for a few moments about what they actually need in order to convey their information.

Any additional suggestions for how to make a sane and usable website are welcome via email to ‘john’ at this domain (jfloren.net).