Week 138 was posted by Charanjit Chana on 2020-06-15.
If you haven't seen it already, head over to SITEJOY and have a look at the fast & responsive websites that have been featured.
Responsible web development
In my time as a web developer, I've built a number of websites and a lot of them from scratch. There's initial hit in the time it takes to put something together, but for the most part that's worth the trade off at the end which is a website that is fast. Rapid development isn't always the answer and that goes for the shiniest new thing too. I have two main principles for personal projects and websites I build:
- I'm responsible for running the logic, not the person visiting my site
- Whatever is delivered to the browser is the bare minimum required
Progressive Enhancement is the way the web should be done for the most part. Web applications is a different ball game, but for web sites there's really no excuse for pumping lots of data to users. Firstly, it's pretty bad to be doing that in 2020 when modern browsers already cater for a lot of the things libraries were invented for and secondly, if you send something across to users that they never see, what was the point?
There there's the fact that a lot of sites are just built poorly.
I'd already subscribed to a lot of the thinking in an article called The Website Obesity Crisis even before I read it and it was comforting to know I'm not the only one. Around the same time, I came across the service whatdoesmysitecost.com:
This is the cost of the site based on data from the ITU, without any adjustment for purchasing power or relative affordability. Prices were collected from the operator with the largest marketshare in the country, using the least expensive plan with a (minimum) data allowance of 500 MB over (a minimum of) 30 days. Prices include taxes. Because these numbers are based on the least expensive plan, they are best case scenarios.
Here are some results:
- www.sitejoy.dev — max cost of $0.04USD
- charanj.it — max cost of $0.00USD
- www.1thingaweek.com — max cost of $0.09USD
- www.wsj.com — max cost of $0.40USD
- www.apple.com — max cost of $0.19USD
So as you can see, my portfolio, 1 Thing A Week and SITEJOY aren't just built with performance, but also the load time and the cost to a end user. I'm not here to waste your time waiting for some content.
What is SITEJOY?
So all of the above, has been the driving force behind wanting to build what I hope becomes a gallery that is the home of fast & responsive websites: SITEJOY.
The goal of SITEJOY is to highlight great websites that are fast and responsive. That means that they're lightweight, they load quickly, and they work at any screen size (mobile, tablet or desktop). You'd think this would be easy criteria to fill, but I'd estimate that less than a third of websites I come across make it to the review stage and it's only around 60% of them that meet the submission criteria.
By the time this is published there will be 50 sites already on the site with almost 100 more scheduled and another hundred or so that require a final review.
Finally getting started on SITEJOY
As with a lot of things, I never knew what to call it but finally settled on a name and from there on it was pretty easy going. A few hours a week over the course of a month and the site was launched.
Like 1 Thing A Week, I built a custom CMS but had to spend quite a bit of time on handling images. I'm not 100% happy with how thumbnails are being produced so I'll revisit at some point and see if I can get a better result when downscaling the screenshot.
The layout was done from scratch and uses as much CSS as possible. I've tried to avoid images for the site itself so that the only assets that are loaded are the screenshots being shown off. Plenty of inspiration from Steve Schoger and Adam Wathan's Refactoring UI book which really helped me get to a place where I was very happy with how it all turned out.
The rules of SITEJOY
- 3MB PAGE SIZE ON INITIAL LOAD — Keeping page sizes as small as possible.
- 80+ PAGESPEED SCORE — Are the recommendations for delivering content being followed? Is the site considered fast?
- WORKS WITHOUT JAVASCRIPT — This is the holy grail, interactive sites that work without the user's browser having to do any work. If this isn't possible, then there's a 200kb on the amount of JavaScript that can be delivered.
As I said, a lot of sites are rejected based on this fairly simple criteria. Given modern browsers give us lots of tools to make our sites load as fast as possible, it's crazy to see how often no attention is given.
SITEJOY itself does meet the criteria, but it's PageSpeed score could be better so that's something I need to look at.
The future of SITEJOY
Search is a key feature that's missing at the moment. There are a few ways it can be done, so I want to take some time to find the best one. I've also got more methods of discovering content to flesh out and lastly, adding my own commentary to websites. Right now, they all have a brief summary of what the website is there to promote, but I really need to give some input into what it is that got me to feature it beyond it just meeting the criteria.
Tags: development, sitejoy, web, development, sitejoy, web