Crosswords have been around for over a hundred years, and the source of vehement opinions from the very start. When computers came along, it would only be a matter of time before crosswords joined the pool of digital pastimes, up there with Minesweeper or Spider Solitaire.
Online, there is almost a duty for news publishers to offer an interactive version of their games page. There is a push towards interactive (admittedly of varying quality). Crosswords are important to some readers and are even the main feature of one of the New York Times' subscription tiers (What a turnaround when you know that, in 1924, they deemed it a "sinful waste in the utterly futile finding of words" * !) *Source: Crossword - Wikipedia
FT Labs have been working on a custom interactive crossword component with all the features you would expect and more, giving a particular focus to the clue list, for a better cross-device experience and improved overall accessibility.
Making cruciverbalists happy
It was always astonishing to me as a newspaper editor how much readers cared about their puzzles. Make a mistake, leave them out of the paper for a day, and the telephone wouldn’t stop ringing.
John Temple - Nieman Lab
We concur with the above; the feeling for crosswords seems to be universal. Ever since receiving complaints for the lack of crossword on the site, the FT has provided PDF versions of its daily grid.
It has been a long time coming, but we now have an interactive version too. It comes with all the usual features: selecting the clue and highlighting the relevant position in the grid, selecting a cell and highlighting the corresponding clue, saving the answers of a crossword in progress. (Note, however, that we are not validating the answers, as the FT crossword involves prizes and the answers are published at a later date).
And, to make up for the delay, this new interactive crossword comes with additional features that we think cruciverbalists might find useful and/or interesting.
Novelty for all
A cross-platform feature: the list view
If some crossword apps are still built in Flash, in the day of responsive web apps, that simply wouldn't cut it for us. The real head-scratcher with this experiment was to find a way to create an effective and enjoyable experience on all kinds of devices.
More than on the crossword grid alone, we felt the area for experimentation and innovation must be the clue list itself. Focusing on the list, one of our first explorations was to create a minimised list, with a "scroll-and-zoom" effect to reaveal the clues. Otherwise, a clue is only revealed when a word location is selected in the grid. The "Force-Compact" demo is available online and demonstrated below.
Another iteration, and its current form, moves the interaction away from the grid. Shifting the focus to the clue list by giving the possibility to answer within it has several advantages. On mobile devices, where the grid cells would be too small to select, the list is more practical to navigate and interact with. Even in the grid view, the answer should be given in the input above, which highlights the selected clue. Whichever type input you choose, grid or list, on mobile or desktop, partial answers in both areas will be updated in real time.
Mobile view demo
From an accessibility standpoint, it is also a benefit.
Accessibility
This new feature ensures the accessibility of the crossword, where keyboard navigation and interaction focus on the list itself without the need for the grid (but still there as an alternative visual display).
We also took care to add extra information for screen readers:
- When a clue in the list is selected, it is read out and instructions on how to input an answer are given.
- Completed or partially completed answers are read out affter the clue
- Consecutive letters left blank are grouped. A screen reader would therefore say: "A 3 blanks T E" instead of "A blank blank blank T E".
Being conscious that we are coming from a printed grid and currently offering up PDFs to print out, we took particular care with the print view of our new interactive experience.
So, for those in fear of missing the feel of paper, the grid and its clues can be printed directly from the browser, either empty or partially filled in, in portrait and landscape, for those times when a pencil is more practical than a keyboard.
Technical challenges
The complexity of new features
One of the biggest challenges with the new feature was to synchronise inputs across the grid and the list view, and figuring out which was each letter's rightful place. This was achieved by relying heavily on data- attributes.
Similarly, with our focus on accessibility, ensuring content that was to be read out by screen readers was up-to-date proved arduous.
Working across devices
Guaranteeing the crossword would work across devices, and particularly on mobile phones also came with its fair share of questions and obstacles.
Firstly, we knew that the crossword grid could either be 15x15 or 17x17 cells. How would we render this on a very small screen (below 400px in width)? The solution was to make the most of our newly implemented list view, and add the selected clue (and answer inputs) above the grid; which means interaction with the grid on mobile isn't necessary anymore, but it is there, visually.
An earlier version of the experiment envisaged having a desktop-size grid scrolling horizontally.
Secondly, we found that various mobile platforms handled keyboard input and focus differently. For example, on Android devices, trying to override input content would result in printing `Å`, no matter which letter of the keyboard was selected.
Finally, we implemented a way to save progress for each interactive crossword. However, on mobile devices, this will be limited by the amount of local storage. Since we are not authenticating users, there is no way to save this across devices and store the answers against their FT account.
Generating new grids
For now, the process to publish the interactive versions of the daily crossword is partly manual. Obviously, a fully automated publication would be ideal, but the main steps are automated. There will be a subsequent post describing the new crossword data format and the tool for translating between formats.
Available now!
Please try the latest interactive crosswords at labs.ft.com/crosswords/ and let us know what you think.
Addendum
For more detail about the underlying crossword data format used in this experiment, see the following post