Going Clean And Static
One of my handful of New Year's resolutions is maintaining my website more actively. I wanted to make some structural and design changes as well, so a couple of weeks ago I changed the Url scheme to this more common date-based one, then I started working on a refreshed look and a new blog engine. The articles are still being edited with a tiny custom CMS, but now the website itself is made of all static Html files, as opposed to being dynamically rendered on each page view. How long does it take to regenerate all the existing articles and the supporting pages? About one second. :-) With this step not only I gain more performance and significantly decreased RAM usage, but the site can be safely hosted on practically any webserver, including that dinky little one I wrote back in 2000 in C for my colleagues' biggest amusement. Heck, I could host it from a router with a pendrive.
I liked the simple and clean look of the old site, so I didn't change much in that department, just made it even cleaner in order to achieve my major goal here: now it's Responsive. Yeah, the biggest designer buzzword of 2012. If you change the browser size, you will see how it scales down to the commonly used mobile resolutions: 320, 480 and 768. It may not support every display size but the usual ones I care about are covered, it works nicely on iPhone, Windows Phone and iPad. Not only that, but if you view it with a High DPI device (retina display), the design elements are in high resolution, along with most of the illustrations in the articles. For this I edited most of the old entries to display high resolution images too beside the normal, recreated ones and they get nicely replaced via JavaScript on each page load. The CMS helps in it a lot, as the articles are in a custom format similar to Markdown and the Html transformer can check and insert image properties into the final result. The illustrations are not displayed in high resolution on small phone screens in order to save on data, there the normal images often need to be scaled down anyway. The design itself is high resolution on iPhone 4 or newer, even on Windows Phone 7 and 8 which was a bit harder to figure out as it doesn't support the usual media query property for checking the device pixel ratio. Probably I'll write about the solution in a later article. Anyway, it all looks gorgeous on the mobile devices found in my household, especially on my 3rd generation iPad.
Among other changes and additions the site got a wider content area with up to 700 pixels wide images. On a desktop browser if you see the pointer changing to a resize icon over an image, you can view the high resolution version in a lightbox. The typography is beautified by the Segoe UI font, even on clients that don't have this font installed. The internal and external links are handled in a nice and consistent way and there is a source code formatter for snippets (see this example). I added a search feature to the right hand corner, powered by the only dynamic page on the site. I might tweak it in the future but it gives nice and relevant results already. Needless to say, the first use of it was by a Japanese guy who tried to do some SQL injection... SQL Parameters, dude.
Finally here is a visual comparation with screenshots, it will come handy in the future too when nobody remembers what the site looked like several generations ago. I hope you will be as pleased with the new site as I am.
