A brand new mobile-friendly interface for Lidraughts!
[ Update 11-5-2020: the v2 interface is here, you are looking at it right now! ]
One year ago, big brother Lichess completed a beautiful new responsive user interface, called Lichess v2. A herculean task, that involved rewriting the html templates of every single page of the website, and rethinking all layouts with a new responsive design. As a result the new interface adapts itself to the device it is used on, so that it looks good on smartphones, tablets and PCs. Take a look on lichess.org and resize the window, you will get the idea.
The same work has now almost been completed for Lidraughts! In the not too distant future, thibault's responsive design for Lichess will come to Lidraughts as well. Of course all new things take some time to get used to, but we are confident that you will quickly learn to love the new interface. Lidraughts will still be Lidraughts, and all beloved features will still be there in v2 (except the Q&A as explained below). This post gives an overview of the things that are going to change, and the things that will remain the same.
Why this change?
Most importantly because the old interface does not play well with mobile devices. Every page has a fixed size, which results in the need to zoom and scroll on smartphones and tablets. In the new interface every page comes in three flavours, depending on the space available:
- A three column layout for large screens and PCs. This view is closest to the current interface, but makes full use of the available width.
- A two column layout for tablets and small screens. The top menu is still there if the screen is big enough, but all other interface elements are reorganized in two columns. The board always takes the most prominent place.
- A single column layout for smartphones. The top menu disappears and changes into a hamburger menu. The other interface elements are organized in a single column, with again the most central place always awarded to the board.
Another important reason for v2 is that it allows the use of more modern technologies. Compatibility with old browsers such as Internet Explorer has to be dropped because they don't support the grid layouts v2 uses everywhere. Without the need to be backwards compatible so much, full use can be made of newer technologies. As a result downloads are smaller and pages load faster, in short lidraughts.org is leaner and more efficient than ever before!
There was nothing wrong with the minimalist and functional design of the old interface, so this philosophy remains the same in the new. Almost every button, option and window can be found on the same place (at least if you use lidraughts from a browser on a PC). Yet everything has a fresher and more colorful look, and will be somewhat larger depending on the size of your screen.
In short, the changes are mostly cosmetic. Lidraughts is still the same Lidraughts, including all settings and preferences, piece sets and boards, the light/dark/transparent themes, etc. And of course it remains as free as ever, open source, and without advertisements. Some new features have even been added along the way! The only thing that disappears is the Questions & Answers section (or in fact it is replaced). Oh and the page-covering hamburger menu on the top-right, but that didn't add much value anyway.
We considered porting the Q&A section to v2, but in the end decided it doesn't add enough value. Many questions are asked and answered on the forums, so this fulfills largely the same purpose already. By keeping only the forums, there is only one place you have to look for answers instead of two, and there is also one less channel for us to maintain and moderate. The most useful questions and answers can still be found in our new FAQ, including some new ones.
Besides the current boardsize slider in the usermenu on the top-right, boards in the v2 interface can be resized on the fly. A resize handle has been added on the bottom right of the board, which can be used to drag it to a smaller or larger size:
This behavior can be disabled in preferences if you want.
The other new features that come along with the v2 interface:
- Speech synthesis as a sound setting (if your browser allows it). This means a voice will read out all the moves and other actions in games, studies, etc. This also makes it an excellent accessibility feature.
- Also the pentatonic sound setting has been improved, and now uses the full orchestra, turning any draughtsgame into a piece of classical music!
- Simul hosts can enter a text that will be displayed in the simul lobby. This text can be updated live while the simul is running, so it can be used as a simul description, but also to deliver announcements / messages to the participants and spectators.
- Keyboard command line: press the "/"-key to open, and type "/help" for a list of commands.
- We can now announce server restarts and other maintenance messages in advance.
Which browsers are supported?
- Firefox 55+ gets full support
- Chromium/Chrome 60+ gets full support
- Opera 55+ gets reasonable support
- Edge 17+ gets reasonable support
- Safari 10.1+ gets reasonable support
- Internet Explorer is no longer supported
- Exotic browsers like Brave are supported if they have a modern rendering engine
If you use an older or no longer supported browser, you will have to upgrade to be able to continue using lidraughts.org. This is advisable for your own sake anyway, because you will be much better protected against known vulnerabilities and exploits.
Screenshots of v2
Finally some screenshots from the current development environment, to show what's coming. Of course you can also pay a visit to lichess.org to get an idea, because there have been little changes to the original design.