Responsive Web Design (RWD) is a method of designing web sites so they are are aesthetically and functionally optimal on many different devices including mobile phones, tablets, smart TVs and more traditional desktop PCs.
In the past, there has been a tendancy to create a separate website for devices with smaller screens and maybe even another for devices that are touch-enabled - such as the iPad. This approach inevitably adds a significant development and maintenance overhead.
thetrain.rocks is a fully responsive HTML5 web app that allows the user to search for a train and see realtime updates about its progress, together with Artificial Intelligence (AI) based predictions as to how early or late the train is likely to be at each of its calling points. The site has a client side jQuery autocomplete for entering the 'to' and 'from' stations, and uses Vue.js to provide visual updates in real time as the train continues its journey.
This app is built using Asp.Net Core and uses Azure DevOps pipelines to automatically create a Linux Docker image each time new changes are pushed to the code repository. The container runs in a Rancher Kubernetes-as-a-service cluster, load balanced over multiple nodes, and using free Lets Encrypt SSL certificates that automatically renew.
We created a demo internet radio streaming app using HTML5, jQuery and Bootstrap which renders beautifully on a variety of devices. Specifically, we wanted to show how it is possible for an app to work from a single codebase on all popular devices including the Apple iPad and Android devices of various sizes. As an extra challenge, we also made it render impressively on a 55" Samsung Smart TV without any additional coding or special case design work. It also needed to still support traditional desktop platforms, in any browser.