There's a buzzword in web development, "mobile-first design", which means exactly what it says (design your website first and foremost to fit a mobile screen, then adapt for larger screens as necessary). There is some logic to this - after all, using an unsuitable website on a mobile phone is a poor experience - but designing mobile first is a complete non-solution, because it's equally annoying to use a mobile site on desktop!
Unfortunately "mobile-first design" is often presented as a blanket "best practice" that should always be followed, and that leads to all kinds of design features which are well-suited to mobile devices but not desktop ones ending up on the desktop. The excessive spacing here is a textbook example. (Note: "desktop" here is anything controlled predominantly by keyboard and mouse/trackpad, so it includes laptops as well).
For a project as big as NRE, it is my opinion that none of this should really matter. For web developers today, the tools absolutely are available to build one website that works well across a wide range of screen sizes. I am oversimplifying here, but a web page can effectively be broken down into the "document" and the "stylesheet"
. The document tells your web browser what to display (text, hyperlinks, images
) and the stylesheet tells it how to display it (fonts, colours, sizes, layouts). In reality, for many pages, you are likely to be loading multiple documents, stylesheets, and other files (such as images) and - crucially - it is possible to display the same document with different stylesheets, or different parts of the same stylesheet, depending on screen size and orientation. So the "correct" solution is to have stylesheets which account for multiple different screen sizes and adjusts the layout of the departure board accordingly.
It is also possible, if you install an appropriate browser extension, to have a web page displayed with your own modified version of the stylesheet, so I thought it would be interesting to see how much more efficient I could make the layout just by doing this. This is what I've come up with:
View attachment 132993
It's far from perfect, as it's (a) done in a short space of time and (b) an awkward bodge on top of an existing site, but it does demonstrate what could be achieved.
And remember I've not changed the document here, only the stylesheet, so all of this could be set to only apply on larger screens if appropriate.
If there is a gap between what the documentation says and what the codes are actually used for, then the solution is to fix the documentation, not for one user of the system to start ignoring it!