Can we make WRAP mobile friendly?

[Mike Vysocka]

It looks as though a recent redesign of the WRAP page has made it ever more user friendly for those of use who rely on it to authenticate into University pages on the go. Thanks to whoever help make this happen.

Here's just a brief brainstorm on maybe taking it a few steps further...

a) Can we use the autocomplete=off and autocapitalization=off attributes on the input tags so that I don't always fumble inputting my username as 'Mjvy...' instead of 'mjvy...'

b) Is it possible to both select your affiliation AND input your username and password all on one screen? Using a majority default for the affiliation ('NC State University'). Though, I can understand for security reasons if that's not plausible.

c) For those of us who have fingers the size of Rob Gronkowki's hands, can we increase the size of the input fields and login button for smaller resolution devices using a CSS media query?

d) Can we hide the "what is my userid" text, and toggle it behind an 'FAQ' link? Granted we're probably not adding a ton of value by hiding it, doing so simply reduces noise in the interface.

e) Can we load the branding bar asynchronously using javascript? iFrame's can slow the rendering process in some browsers.

Any other ideas or suggestions?

Try out both variations on your mobile device:

Current WRAP page:
http://go.ncsu.edu/itecswrap

Slightly More Responsive Example:
http://go.ncsu.edu/rewrap

Desktop

WRAP Screen 1

WRAP Screen 2

Responsive (single screen)

iPad

WRAP Screen 1

WRAP Screen 2

Responsive (single screen)

My Droid A855 (… yeah it's old)

WRAP Screen 1

WRAP Screen 2

Responsive (single screen)

[Jason Austin]

The affiliation thing has always be weird to me.  Sometimes I have to select it, sometimes I don't.  Never understood the reasoning or the situation which makes me have to choose it or not.  Seems like an unnecessary step to me, but I dunno.  All good suggestions, Mike.

[Jen Riehle]

I did the rework of the site, built in part from the previously-completed Shib site updates so credit goes to those folks as well.

Some of these things are beyond my control, like having to go through the affiliation page. Also, I believe Charles Brabec takes what I give him and tweaks some of the things such as the inclusion on the brand bar (to ensure a secure connection). Other items, however, are definitely doable (bigger text? Ok!).

I'll touch base with Charles and Harry about these things and see what we can do. Chances are these things will not take place until the end of the semester but perhaps we could make some of the changes over Spring Break. I may also ping you, Mike, offline to ask for more details or suggestions. Thanks!

Other WRAP feedback??

[Mike Vysocka]

Thanks for the comments and great work Jen!

[Jonathan Champ]

Mike covered the design concerns, so I'll ask a technical question:

Shouldn't WRAP auth be provided by Shibboleth so that all WRAP does is provide the WRAP cookie? At least for me, I still have to enter my credentials multiple times. It seems like this would allow visits to a WRAP site and a Shibboleth site (in either order) to require a single login. Sure, there's the "duration" question that hasn't been answered, but the smart defaults seem smart enough to me.

[Jen Riehle]

That's a question for Harry and Charles - above my pay-grade. I know that WRAP came first, and I believe that Shib is supposed to be "the future" of authentication on campus since it's the solution for the rest of the UNC System. As to when that shift will happen and why Shib and WRAP aren't more strongly tied together at this point, I'm unsure. 

[Jen Riehle]

Ok, we've done some work to address these problems in conjunction with updates for the 125th anniversary brand changes. To address the requests one-by-one...

a) Can we use the autocomplete=off and autocapitalization=off attributes? 

We did set autocap to "off" but left autocompletion on as is was generally thought to be beneficial.

b) Is it possible to both select your affiliation AND input your username and password all on one screen?

We looked into this, and even looked into skipping the "affiliation" screen altogether but that's still being used surprisingly often. So they both need to stay.

c) For those of us who have fingers the size of Rob Gronkowki's hands, can we increase the size of the input fields and login button for smaller resolution devices using a CSS media query?

Done. Enjoy!

d) Can we hide the "what is my userid" text, and toggle it behind an 'FAQ' link?

For accessibility and usability purposes we felt we needed to leave that there. It's informative and saves a click for those who are lost and, as you said, there's not a ton of value in hiding it.

e) Can we load the branding bar asynchronously using javascript? 

The mobile version doesn't use the brand bar, simply a red bar with the logo (which has been switched to the new version). 

And follow-up re: Shib vs. WRAP is that there are efforts being made to consolidate these and make authentication to one valid to the other while campus continues to move toward a fully Shib solution. As I understand it this process is going well but the ultimate plans for switching things are not yet underway so there's no timeline for a change like this. Bottom line: it's definitely going to happen but no one can say for sure when.

Questions? Comments? Thanks for the feedback, Mike!

[Jonathan Champ]

Awesome! Good job!

It's me being picky, but can we make it validate? (The Quirks mode makes me twitch)

• HTML4 doesn't support self closing tags (consider HTML5's <!DOCTYPE html>)
• link tags always need to be in the head
• image borders go on the img tag instead of the a tag
• Accessibility: inputs need id="" to match for="" on labels; alt text is required for images

[Jen Riehle]

Jonathan,

Whoops. Yes, we can work on those items but again, I can't get in there to make those changes myself so there's a bit of jumping through hoops for even the smallest changes. I'll work on those things and we'll probably make the changes later in the semester, again while students are away from campus.

Thanks!