It’s good to be modern, responsive, and simple. It’s even better to be light, fast, and pure. My third sample, Space Age Anger Management Systems, demonstrates these principles well.
SAAMS is a one-page website, where clicking the top links scrolls to sections. The scroll is animated, with a tight, snappy feel. This is powered by Javascript.
The page is fully responsive, try it on a mobile. Like the scrolling, the collapsed top menu appears animated. This is powered by CSS, using a technique similar to that employed in Bradleigh Sempal-Comms.
The original plan was to use Bootstrap in this project. Bootstrap is a popular CSS and Javascript package, offering convenient markup for relatively easy creation of modern, responsive websites. It seemed a perfect match for SAAMS.
I quickly found, however, that Bootstrap is best used on web apps, where a minimum of CSS overrides are required. Working on a custom design, you find that “rolling your own”” is faster.
In addition, Bootstrap is best for styling an interface, while Quicknr is better at document structure. Rolling your own code also means you don’t need to rely on third-party libraries, avoiding the overhead of boilerplate code.
SAAMS weighs less than 300Kb, all included. This wouldn’t be possible had I used Bootstrap. Even if I had used just Google Font API, those fonts easily come at over 200Kb. I use two fonts served locally, each at less than 16Kb. That’s because I take the trouble of reducing the fonts to the ASCII character set. If you’re not using the other glyphs, why load them?
Here’s hoping clients requiring a small website will take note. The things discussed above are all good news for them.
Stay tuned for the fourth sample – more coolness coming up!