Mobile-friendly logon page

[Bennett, Steve]

> We have a Shibboleth 2.3.8 IdP running which is being well used
> by a number of users in our Local Authority (Norfolk Learners). 
> One of the biggest complaints we get is that the logon page isn't
> very mobile / tablet friendly and to be fair it's a valid complaint.
> Has anyone successfully deployed a mobile version of a Shibboleth
> logon page and if so, is it documented anywhere how to do it?
> Also, as the IdP pages are .jsp files I'm finding it difficult to test them
> when making changes such as announcing service updates, etc.

Hi David,
We use CoSign for authentication, rather than Shibboleth itself.
We made our login page more friendly to small screen devices by adding
an additional stylesheet that is used when the window width is less than 640px wide.

I've not looked at the stuff that Shibboleth does (because we don't use
that part of it) but I'd guess that the changes will be broadly similar.
It's all changes to static parts of the content so it should be pretty easy to test.

We changed from:
    <link rel="stylesheet" href="/css/cosign.css" />
To:
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/cosign.css" />
    <link rel="stylesheet" media="handheld" href="/css/cosign-320.css" />
    <link rel="stylesheet" media="only screen and (max-width: 640px)" href="/css/cosign-320.css" />

"cosign-320.css" is just a version of cosign.css with all the elements widths tweaked to make things fit inside a 320px wide window.

Steve.