Instead of using the Local Storage API, the IndexedDB API could be used for locally storing the application data. With Local Storage you only have one database (which you may have to share with other apps from the same domain) and there is no support for database tables (we have worked around this limitation in our approach). With IndexedDB you can set up a specific database for your app, and you can define database tables, called 'object stores', which may have indexes for accessing records with the help of an indexed attribute instead of the standard identifier attribute. Also, since IndexedDB supports larger databases, its access methods are asynchronous and can only be invoked in the context of a database transaction.
Alternatively, for remotely storing the application data with the help of a web API one can either use a back-end solution component or a cloud storage service. The remote storage approach allows managing larger databases and supports multi-user apps.
Today, the UI pages of a web app have to be adaptive (frequently called "responsive") for being rendered on different devices with different screen sizes and resolutions, which can be detected with CSS media queries. The main issue of an adaptive UI is to have a fluid layout, in addition to proper viewport settings. Whenever images are used in a UI, we also need an approach for adaptive bitmap images: serving images in smaller sizes for smaller screens and in higher resolutions for high resolution screens, while preferring scalable SVG images for diagrams and artwork. In addition, we may decrease the font-size of headings and suppress unimportant content items on smaller screens.
For our purposes, and for keeping things simple, we customize the
adaptive web page design defined by the HTML5 Boilerplate
project (more precisely, the minimal "responsive" configuration
available on www.initializr.com). It just consists of an HTML template
file and two CSS files: the browser style normalization file
normalize.css (in its minified form) and a
main.css, which contains the HTML5 Boilerplate
style and our customizations. Consequently, we use a new
css subfolder containing these two CSS
MinimalApp-with-CSS css main.css normalize.min.css src c m v index.html
One customization change we have made in
index.html is to replace the
class="main"> container element with the new HTML 5.1 element
<main> such that we obtain a simple and clear UI page
structure provided by the sequence of the three container elements
<footer>. This change in the HTML file requires
corresponding changes in
main.css. In addition, we
define our own styles for
Concerning the styling of HTML forms, we define a simple style for
implicitly labeled form control elements.
The start page
index.html now must take care
of loading the CSS page styling files with the help of the following two
<link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css">
Since the styling of user interfaces is not our primary concern, we do not discuss the details of it and leave it to our readers to take a closer look. You can run the CSS-styled minimal app from our server or download its code as a ZIP archive file.