One of the things that annoys me to no end on the iPhone was the micro-mini sized button on the wireless network authorization page. I did some research and discovered a relatively easy fix. Since iPhone uses Safari and Webkit, you can use the Webkit-only CSS property -webkit-text-size-adjust to make the button larger — while leaving the button size unaffected in all other browsers.
Here’s the test case. Obviously, it’s best if you look at it with an iPhone. But if you do have an iPhone, compare it with the current wireless login screen.
The solution was applying an inline style to the <input> tag that creates the button:
-webkit-text-size-adjust: 250%;
Why 250%? It felt right to my chunky fingers. The primary purpose of this page is to get wireless users to the UWNetID login screen, so the button should be big, legible, and easy for my big honkin’ finger to push.
And as I was thinking through the usability of this page, though, I started wondering if this page was even set up for maximum usability. As is, it’s still using a table for layout, appears to be referencing a blank stylesheet, and it has those three links next to the logo that probably aren’t as important as the login button.
I took a wild stab at redesigning the page and ended up with this mess. Not my best work, but I hope that the C&C guys will take a look and glean some ideas from it.
I’m really liking the iPhone as a design/development platform, simply because it’s browser-based. You don’t need to know some flavor of C to develop for the iPhone, only AJAX, web standards, and an understanding of the phone’s limitations.
Comment (1)
I’d go with a smaller logo at the top, but otherwise, yes, much better!