Yesterday, I created a layout where the interface is the navigation. This is not uncommon with tiled layouts and is an homage to Microsoft's Metro style released in Windows 8. Here's the pen:
I just wanted to point out a few things about this pen because there is a little more under the hood than meets the eye.
It's a cutie
One of the other benefits of this sort of architecture is that there is a lot of information on the home page for a spider to crawl. Whole pages of information can be tucked away into these page sections. So we can get away with a graphics-heavy interface and still get a lot of SEO benefits from the root domain. That has been one of the weaknesses so far with Single Page Web Apps (SWAs) and PWAs (Progressive Web Apps), in general. This pattern has tried to solve the SEO issue.
On the Grid
This tiled interface also utilizes CSS Grid Layout for its main layout. One could make an argument that I didn't utilize grid areas, which might have changed things with the grid, but the project kind of kept going from an experiment into a full-fledged tiny app.
Using Grid for this allowed me to do some things like overlapping elements (the toggle in the top right) and also allowing me to control grid items across multiple columns and rows, creating more of an organic interface with multiple-sized items. This is really an attempt to control where the user is drawn and what are the most attractive areas to click. A mixture of background images, blocks of color, and text also help to lead the user around the page. There is nothing particularly complicated about the grid markup. It stretches to fill the full height of the viewport and, when toggling fullscreen mode, it toggles the height to accommode the presence or lack of mobile browser and OS controls.
The pen is also an example of Layered Web Design (LWD). This goes hand-in-hand with the QDWAPP idea. In fact, QDWAPPs are a small part of the LWD concept. Essentially, you create the experience of moving through the site like a deck of cards as opposed to moving through the site like a linear line. It also includes the essential qualities of QDWAPPs: multiple sections taken out of the flow of the document, information just below the surface ready to be called to the front, and absolute or fixed positioned sections that behave somewhere between modals and pages.
In LWD we can actually utilize icons on a single page to open up much larger quantities of information to the user on demand. LWD can also be used to create instantaneous transitions with animation. In this pen I'm using a simple CSS animation to fade the page onto the screen. I could just as easily have used a slide or slide-fade animation.
Fullscreen: Extra breathing room
I also wanted to point out that this app includes a fullscreen mode. There is no way to trigger fullscreen on load. It must be an action chosen by the user. But that doesn't mean we can't offer a control. Going fullscreen does a couple of things. First, it gives more screenspace to the user. Second, it encourages a more app-like experience where the browser controls are no longer a temptation or distraction.
Finally, this is meant to be a mobile pattern so I limited the width of the screen. This isn't ideal and the site could be adjusted for larger screens. To see it in its best light, though, I recommend viewing it on a mobile phone (device that is 425px wide or smaller). It could certainly extend quite easily to a tablet and I might do that at some point. Feel free to fork it, too, and work with the code to create something awesome.
What do you think about the concept of interface as navigation? What about this type of design? Is this something you could realistically use in a commercial project? Also, what are your thoughts on LWD? Please leave a comment or question below or on the pen itself.