Instant Crossword Tools for mobile

Old design, circa 2006

Sitting down to the cryptic crossword at breakfast I reached for my phone to use my Instant Crossword Tools. I built the site in 2006 as a simple webpage to help with anagrams and completing words given some component letters. However, it is showing its age, and really needs updating. Luckily, it didn't take too much effort to produce a modern, mobile-friendly solution.

Currently, the page is not immediately usable on the small screen of a phone. The phone browser zooms out to display the entire page, making the text too small to read. Forcing a person to manually zoom to use a page is quite undesirable. However, the page did still work quite well on a large screen, so I did not want to interfere with that interface too much.


Last year I made a few simple HTML changes to my Weather Chart to make it usable on small screens. This time I wanted to make more drastic changes, and hopefully produce a result with no compromises.

New responsive design

Having heard good things about the Bootstrap framework I downloaded the small package and had a quick burst of experimentation. It's built to allow the easy development of mobile-first responsive designs. The responsive aspect of this means that the same page will be displayed differently depending on the user's device, which is exactly what I want. Specifically, I don't need the blurb in the rightmost column to display on the limited space on a mobile.

The result is the much improved layout shown to the right. If you play around with this on a desktop browser you can resize the browser window to see the responsive design in action. 

Hopefully this redesign will keep the page useful for another decade. Bootstrap was sufficiently pleasant to use that I'd certainly consider using it again, perhaps to improve other pages on my site. I have done no customisation to it yet, so I'd be interested in seeing how easy that was.