Let’s start by quantifying the problem. We need to explore how well (or not) the application behaves on a mobile device. This is simple to do:
- Start the Notes Determine the IP address of the host system.
- Using your mobile device, connect to the service using the IP address, and browse around the Notes application, putting it through its paces and noting any difficulties.
Another way to approach this is to use your desktop browser, resizing it to be very narrow. The Chrome DevTools also includes a mobile device emulator. Either way, you can mimic the small screen size of a smartphone on your desktop.
To see a real UI problem on a mobile screen, edit views/noteedit.hbs and make this change:
<br/><textarea rows=5 cols=80 name=’body’
>{{#if note }}{{note.body}}{{/if}}</textarea>
What’s changed is that we’ve added the cols=80 parameter to set its width to be fixed at 80 columns. We want this textarea element to be overly large so that you can experience how a non-responsive web app appears on a mobile device. View the application on a mobile device and you’ll see something like one of the screens in this screenshot:
Viewing a note works well on an iPhone 6, but the screen for editing/adding a note is not good. The text entry area is so wide that it runs off the side of the screen. Even though interaction with FORM elements works well, it’s clumsy. In general, browsing the Notes application gives an acceptable mobile user experience that doesn’t suck, but won’t make our users leave rave reviews.
In other words, we have an example of a screen that works well on the developers’ laptop but is horrid on the target platform. By following the mobile-first paradigm, the developer is expected to constantly check the behavior in a mobile web browser, or else the mobile view in the Chrome developer tool, and to design accordingly.
This gives us an idea of the sort of problem that responsive web design aims to correct. Before implementing a mobile-first design in our Notes app, let’s discuss some of the theory behind responsive web design.
Source: Herron David (2020), Node.js Web Development: Server-side web development made easy with Node 14 using practical examples, Packt Publishing.