For decades, web design has been a story of boxes. From the browser viewport to every element on a page, we've lived in a rectangular world. But the web is evolving, and new features are breaking those boundaries—literally. In this list, we'll explore ten pivotal concepts that redefine how we think about design surfaces, especially with the rise of Progressive Web Apps (PWAs) and the innovative Window Controls Overlay. Get ready to escape the box.
1. The Universal Box Model
CSS is fundamentally about styling boxes. Every element on a webpage—divs, paragraphs, images—is a rectangular box. Even the browser viewport itself is a box. This model has served us well, providing a predictable layout system. But the web platform now encourages us to think beyond rectangles. New display technologies and device form factors demand that we consider circular, notched, and foldable surfaces. The box model remains foundational, but it's no longer the only game in town.
2. Circular Displays: A Playground for Creativity
Round displays, like those on some smartwatches or specialized devices, force designers to move beyond the rectangle. They make circular clip areas fun and functional. Instead of fitting content into a square, you can now wrap interfaces around a circle. This isn't just about novelty—it's about rethinking user interaction. For example, a circular progress indicator can become a full-screen radial gauge. The challenge is ensuring readability and usability on non-rectangular screens.
3. Notches and Virtual Keyboards: Designing Around Obstacles
Mobile devices often feature notches (cutouts for cameras) and virtual keyboards that appear on demand. These elements intrude into the screen's rectangular space. Designers must now organize content to stay clear of these areas. The viewport is no longer a simple rectangle; it's a dynamic shape. Using CSS environment variables like safe-area-inset-top helps adapt layouts. This requires a mental shift: the screen is a canvas with unpredictable boundaries.
4. Dual-Screen and Foldable Devices
Devices like foldables and dual-screen phones (e.g., Surface Duo) present unique challenges. They can be used in various postures: flat, tent, or partially folded. Designers must rethink how to use available space across multiple panels. Content might span two screens or adapt to a single folded display. This breaks the assumption of a single continuous rectangle. The web platform is embracing these postures with media queries for screen-spanning and viewport-segments.
5. Progressive Web Apps: Blurring Lines
PWAs combine the best of websites and native apps. They are stable, linkable, searchable, and responsive like websites, yet they offer powerful capabilities: offline support, file access, and push notifications. This hybrid nature challenges designers to mix web and native UI conventions. On desktop, however, PWAs have traditionally been constrained to a rectangular window with a title bar—a limitation we're now overcoming.
6. The Desktop PWA Still Lives in a Box
On desktop, a PWA runs in a window that looks like any other app: a rectangle with a title bar at the top. The title bar typically displays the app name, and window controls (minimize, maximize, close) reside there. As a PWA author, you can set the title bar color using the theme_color manifest property, but that's nearly all the control you have. This leaves a lot of valuable screen real estate unused.
7. Reclaiming the Title Bar Area
Imagine if you could use the entire window—including the title bar space—for your app content. That would make PWAs feel more integrated into the operating system and allow for more immersive designs. You could place a search bar, a navigation menu, or even a canvas in that region. This isn't just a fantasy; it's exactly what the Window Controls Overlay enables. It lets you take over the surface where the title bar normally appears, while keeping the system window controls intact.
8. Understanding Window Controls
Window controls are the buttons that allow users to minimize, maximize, or close an app window. On Windows, they appear on the top-right; on macOS, on the top-left. The title bar is the area around them that displays the app name. Together, they occupy a strip at the top of the window. In a traditional desktop app, this is a fixed, non-interactive region for the web content. The Window Controls Overlay changes that by letting you draw content behind the controls.
9. How the Window Controls Overlay Works
The Window Controls Overlay is a new PWA feature. When enabled via the manifest ("display": "standalone" plus "window-controls-overlay": {}), the title bar disappears, and your app can fill the entire window. The system window controls are overlaid on top of your content. You must ensure that interactive elements don't intersect with those controls (use CSS env() variables like titlebar-area-x and titlebar-area-height). This reclaims precious pixels and makes PWAs feel more native.
10. Designing Beyond the Rectangle
The Window Controls Overlay is just one example of how the web is breaking out of the box. Combined with circular clips, notches, foldables, and dual screens, we have an exciting frontier. Designers must now consider multiple display shapes, orientations, and overlapping system UI elements. The web platform provides the tools—it's up to us to use them creatively. Think outside the rectangle, and your PWAs will feel like true first-class citizens on any device.
From the box model to the Window Controls Overlay, the web is expanding beyond its rectangular roots. These ten insights show that we're no longer confined to a single shape. Whether you're designing for a round smartwatch, a foldable phone, or a desktop PWA, embracing these new possibilities will lead to more engaging and intuitive user experiences. The box is breaking—it's time to step out.