Designing clean and smart user experiences is a hobby of mine. Yeah, it’s a little weird, but it’s a good way to change gears for a while when working through a problem.
Given that, I thought I would take a stab at the login pages for ADFS. I didn’t do anything major, but lets take a look at some before and after shots.
Before
Nothing too complicated here. It looks like a regular login page.
After
In comparison, not a lot has changed. I switched the font, moved the textbox labels, fiddled with some border colors, and added a watermark in the username textbox describing the format.
Here is the updated style:
<style>
body
{
background-color: rgb(255, 255, 255);
color: #4a4a4a;
font-family: "Segoe UI" , Arial, Helvetica, Sans-Serif;
line-height: 1.4em;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size-adjust: none;
font-stretch: normal;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
background-repeat: repeat-x;
background-image: url(../App_Themes/Default/header_background.png);
}
</style>
The next step I’d like to take is add some JavaScript validation. The default codebase just passes the text to the authentication code, which would eventually throw an exception, inevitably resulting in a little red blob of text saying “the user name or password is incorrect.” Seems like a waste of a postback if all it’s going to do is remind me that some textbox is empty.
