At work, we have an Aruba wireless system. This system has the ability to have multiple SSID’s available. One of those SSID’s is for guest access. We require that every guest has a username and password to access our wi-fi system. This requires a captive portal. Aruba supports these captive portals quite nicely, but their authentication pages leave a lot to be desired. I recently spent some time searching Google for some sample templates that work well on cell phones, tablets and computers. While I did find some information it was mostly vague information (yes, it’s possible) or based on using other web design templates and uploading the necessary files.
This isn’t what I wanted. I really just wanted a very simple page that had a login form and our Usage Policy (not a link to it, the actual policy on the page). If it was on a tablet or a PC, I wanted them to use the screen real-estate to show them both side by side. If it was on a phone, they should be stacked to avoid zooming. I couldn’t find anything that did quite what I wanted, so I wrote my own. Just in case there’s somebody else looking, I decided to post it here.
First, a screenshot of how it looks on an iPhone 6:
And an iPad:
There are actually two more “modes” not pictured here. They are both only applicable to being displayed on a computer.
There is one mode that is in between phone and tablet size. The only time it should be used is if somebody opens a very small browser window. It condenses the login form to take less horizontal space, but still keeps the policy text to the right of the page.
The second mode is for a very large web browser windows (more than 1,200 pixels). This mode simply keeps the max width at 1,200 pixels and displays nothing to the right of that boundary.
The magic in all of this are the @media CSS queries. These media queries are a function of CSS3 and are not supported on older browsers such as IE 8 (the most recent version available on Windows XP). Because of this, I put most of the style (colors, borders, etc) outside of the media queries and then shifted items around using the media queries. The page may not respond exactly as it’s supposed to in older browsers (for example, the items don’t stack properly when the width drops below 480 pixels in IE8), but the page should still be functional.
The code is available after the break. You are welcome to take this code and modify it for your needs.
UPDATE 11-Feb-2016: Instead of embedding the code in this post, I now have a Live Demo page setup.
In my previous post, I showed a very simple design for an Aruba captive portal that is usable on small handheld screens (like a cell phones) as well as full size browser windows. In this post, I had directly pasted the HTML code (with embedded CSS). This actually had a couple of drawbacks. First, WordPress didn’t really handle the code very well. Part of the reason I pasted it right in the post was to have the code stylized by GeSHi. Unfortunately, GeSHi didn’t properly highlight the CSS. This also ended up making the post really long and there’s at least a few places where it mutilated the code. And second, embedding the code in a WordPress post also had the drawback that you couldn’t see how the page looked other than in my screenshots.