Modal Login Pages

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Wikipedia has a succinct opening sentence about modal windows:

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

These are common in desktop applications when a program needs an important decision made. They are becoming more and more popular in web applications thanks to the JavaScript “light box” (or one of it’s other many pseudonyms). Undeniably, they are overused. However, there are circumstances where modal boxes make sense and are used effectively to focus a users attention to the important task at hand. In some situations, logging into a website is one of these important tasks.

In my regular daily web travels, I encounter several. These aren’t “light boxes” with the transparent overlay and animated popup shenanigans, but they fit the definition of a modal box.





Here’s a free one

Hey, while we are at it, let’s build one! Here’s what it looks like:

As always, we are going to keep the code clean and semantic. No extra junk. That way it’s perfectly usable and accessible, and lightweight to boot. Here is what it looks like with no CSS:

I won’t bore you with listing all the code here. There isn’t much to it! Just a simple form area and with a few images applied in the CSS.

View Demo Download Files


Love it? Hate it?

So what do you say? Is this just a trend? Is it smart? Personally I think I like it. It gives a designer a chance to do something creative, give the site some soul, and I don’t think it detracts from the user experience much. Others might disagree. Removing the sites established navigation might feel wrong. I’ve heard others say that the login page is a good place to put current news and other juicy tid-bits, as it’s the one page people are definitely going to be seeing.