Mobile devices have a smaller screen, are generally touch-oriented, and have different user experience expectations than a desktop computer.
To accommodate smaller screens, we use responsive web design techniques. This means designing the application to accommodate the screen size and ensuring websites provide optimal viewing and interaction across a wide range of devices. Techniques include changing font sizes, rearranging elements on the screen, using collapsible elements that open when touched, and resizing images or videos to fit available space. This is called responsive because the application responds to device characteristics by making these changes.
The primary technique is using media queries in stylesheets to detect device characteristics. Each media query section targets a range of devices, using a CSS declaration to appropriately restyle content.
Let’s consult a concrete example. The Twenty Twelve theme for WordPress has a straightforward responsive design implementation. It’s not built with any framework, so you can see clearly how the mechanism works, and the stylesheet is small enough to be easily digestible. We’re not going to use this code anywhere; instead, it is intended as a useful example of implementing a responsive design.
The stylesheet starts with a number of resets, where the stylesheet overrides some typical browser style settings with clear defaults. Then, the bulk of the stylesheet defines styling for mobile devices. Toward the bottom of the stylesheet is a section labeled Media queries where, for certain sized screens, the styles defined for mobile devices are overridden to work on devices with larger screens.
It does this with the following two media queries:
@media screen and (min-width: 600px) {
/* Screens above 600px width */
}
@media screen and (min-width: 960px) {
/* Screens above 960px width */
}
The first segment of the stylesheet configures the page layout for all devices. Next, for any browser viewport at least 600px wide, it reconfigures the page to display on the larger screen. Then, for any browser viewport at least 960px wide, it is reconfigured again. The stylesheet has a final media query to cover print devices.
These widths are what’s called a breakpoint. Those threshold viewport widths are the points where the design changes itself around. You can see breakpoints in action by going to any responsive website, then resizing the browser window. Watch how the design jumps at certain sizes. Those are the breakpoints chosen by the author of that website.
There’s a wide range of differing opinions about the best strategy to choose your breakpoints. Do you target specific devices or do you target general characteristics? The Twenty Twelve theme did fairly well on mobile devices using only two viewport-size media queries. The CSS-Tricks blog has posted an extensive list of specific media queries for every known device, which is available at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
We should at least target these devices:
- Small: This includes iPhone 5 SE.
- Medium: This can refer to tablet computers or larger smartphones.
- Large: This includes larger tablet computers or smaller desktop computers.
- Extra-large: This refers to larger desktop computers and other large screens.
- Landscape/portrait: You may want to create a distinction between landscape mode and portrait mode. Switching between the two of course changes viewport width, possibly pushing it past a breakpoint. However, your application may need to behave differently in the two modes.
That’s enough theory of responsive web design to get us started. In our Notes application, we’ll work on using touch-friendly UI components and using Bootstrap to scale the user experience based on screen size. Let’s get started.
Source: Herron David (2020), Node.js Web Development: Server-side web development made easy with Node 14 using practical examples, Packt Publishing.