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

This is a good example of what I like to call a QDWAPP (a Quick and Dirty Web APP, pronounced "Cutie Wapp"). It is a one-page website that looks and behaves more like a native app or web app than a website. However, I've only used HTML5, CSS3, and jQuery to create the interface. It is all hardcoded and is not being injected via javascript. If one were to turn off javascript in the browser the site would still show up on the page.

Each of the "pages" and navigation are actually just sections on the home page. They are hidden on load and then called to view through pretty simple jQuery show/hide class calls. There is a "hide" class that I add and remove with clicks on certain UI elements. This keeps the structure pretty basic but does mean that if javascript were to fail then nothing would show. Much of the content outside the initial interface has a class of "hide," which would not fail even if javascript did fail. However, a screen reader should be able to read the content and there shouldn't be any accessibility issues.

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.

Many Layers

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.

I did this using the Fullscreen API available on most browsers. There is a check in the javascript to see if the browser offers fullscreen and then a call to the function when the user clicks the arrow in the top right of the screen. On click, that arrow changes to indicate the user can exit fullscreen anytime. I thought it rude to completely overtake the experience without giving the user some way out on a mobile device. It's much easier on a desktop (using F11 or Esc). One thing to note about the Fullscreen API is that once the user goes to a different URL, you lose the fullscreen and the browser comes back into view. Fullscreen seems perfect for a SWA like this but would be more difficult to introduce across a traditional website.

Final caveat

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.


1,691 0 28