Behind the new Lafayette Web Login Page

The Lafayette College Web Login page — which people use to log into single sign-on enabled web apps like Webmail, My Lafayette, Moodle, and The List — has been redesigned to work better on mobile devices and to tell you more about what you’re logging into.

The big change is the look and feel of the login page. Prior to the redesign the page worked just fine when you were logging into a web application using your desktop computer. It got increasingly difficult to use with smaller devices, until you had to resort to the dreaded pinch-zoom technique to focus in on the username and password fields.

We fixed this by making the login page responsive, which means the page re-flows itself to fit the device you’re using. We did this using Bootstrap, a responsive frontend web framework that is designed to work well with mobile devices.

All this means that logging into Webmail just got a heck of a lot easier from your smartphone.

Another big change is the addition of service descriptions. It used to be that if you logged into something like the My Lafayette you’d get a generic message that you were able to single sign-on into something … but it wouldn’t tell you what that thing was.

We’ve made the login page smarter so it now knows where you’re going. If you’re logging into My Lafayette, it tells you that by showing an app-specific icon and giving you a brief description of the service. This in turn meant that we could start directly linking to things like the college portal from the home page because the links were no longer a dead end for unauthenticated visitors.

For example, if the “Current Students” link in the header of the Lafayette home page had gone to the portal before, parents clicking on the link wouldn’t know where they were going (and why they couldn’t get in). As a result when the portal launched in Fall 2013 we didn’t change that link.

The new login page takes care of that potential confusion, so we’ve got over “Current Students” to point to the new portal rather than the old student landing page. From a technical perspective, this was accomplished by implementing Unicon’s CAS-addons code for the CAS JSON service registry.

The service description is great, but we don’t want it to clutter up your screen when you’re trying to login form your phone. Thanks to responsive design, when folks are visiting using their phones (or a smaller tablet like the iPad Mini) we can slide that text down and out of the way so that the login form is front and center.

Here’s what it looks like for desktop web browsers:

An example of the desktop version of the login page.

An example of the desktop version of the login page.

And here’s the same page for smartphones:

Smartphone view of the Login page.

An example of the smartphone view of the login page.

We’ve also implemented this same design on google.lafayette.edu, though the effect isn’t as pronounced there because it’s a single column webpage. Regardless, it’s still easier to use on your phone because you no longer need to pinch-and-zoom to use the site:

The responsive site search form at google.lafayette.edu.

The responsive site search form at google.lafayette.edu.

What do you think of the new login form? Post your thoughts as a comment or email us at itsblog@lafayette.edu.

 

 

This entry was posted in Technology, Updates, Web Design and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *