New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update block label inputs to be bigger #98

Merged
merged 1 commit into from Sep 3, 2015

Conversation

Projects
None yet
6 participants
@robinwhittleton
Copy link
Contributor

robinwhittleton commented Sep 3, 2015

The new size matches the size of the custom radio buttons used on Verify (29×29).

IE8 doesn’t resize radios or checkboxes, so there’s an override to pull it up to a reasonable place. IE9 doesn’t position properly on resize but we probably want to check the numbers as not many people still use Vista and IE10 and 11 are available on Windows 7.

What does everyone think? Worth pulling in? Too many browser discrepancies?

Screenshots of the below in various browsers:

Chrome (Android)

radios_android_chrome
checkboxes_android_chrome

Chrome (OS X)

radios_osx_chrome
checkboxes_osx_chrome

Chrome (Windows 10)

radios_win10_chrome
checkboxes_win10_chrome

Firefox (OS X)

radios_osx_firefox
checkboxes_osx_firefox

Firefox (Windows 10)

radios_win10_firefox
checkboxes_win10_firefox

Safari (OS X)

radios_osx_safari
checkboxes_osx_safari

Safari (iOS)

radios_ios_safari
checkboxes_ios_safari

IE8 (Windows 7)

radios_win7_ie8
checkboxes_win7_ie8

IE9 (Windows 7)

radios_win7_ie9
checkboxes_win7_ie9 ong

IE11 (Windows 10)

radios_win10_ie11
checkboxes_win10_ie11

Edge (Windows 10)

radios_win10_edge
checkboxes_win10_edge

IE (Windows Mobile)

radios_windows_mobile
checkboxes_windows_mobile

Update block label inputs to be bigger
The new size matches the size of the custom radio buttons used on Verify (29×29). IE8 doesn’t resize radios or checkboxes, so there’s an override to pull it up to a reasonable place.
@edwardhorsford

This comment has been minimized.

Copy link
Contributor

edwardhorsford commented Sep 3, 2015

They look weird when all together, but individually several are an improvement over what we currently have. So I see little downside?

IE9 on windows 7 looks the funkiest.

@alextea

This comment has been minimized.

Copy link
Member

alextea commented Sep 3, 2015

I wonder if the lack of differentiation between radios and checkboxes on iOS Safari is an issue (probably not)?

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

robinwhittleton commented Sep 3, 2015

I expect … not, but I’d be interested to find out. Hopefully https://bugs.webkit.org/show_bug.cgi?id=148676 will get some traction regardless.

@tombye

This comment has been minimized.

Copy link
Contributor

tombye commented Sep 3, 2015

It would be good to see a rough number for the amount of users who would see each version just so we can see the (current) effect of our reckons.

@cjforms

This comment has been minimized.

Copy link

cjforms commented Sep 3, 2015

We definitely need bigger targets, so this is a move in the right direction.
(At some point, I'd like us to look very hard indeed at the border and grey background, but that's another matter).
Alack of differentiation between radios and checkboxes is also an issue, but this pull request doesn't make it any worse.
My reckon is: only people like me, who regularly use many different browsers on different OS, will notice that there are differences. And I'll be very glad to see the larger targets on the browsers where it works.

@robinwhittleton

This comment has been minimized.

Copy link
Contributor Author

robinwhittleton commented Sep 3, 2015

OK, so for last week IE9 was 3.88% of all visits. Browsers that see small radio buttons (IE8, Firefox on Windows, and Safari and Chrome on OS X) were 14.38%. Everyone else has nicely resized buttons.

@tombye

This comment has been minimized.

Copy link
Contributor

tombye commented Sep 3, 2015

Looking at the comments on this pull request and talking to @markhurrell off-line, this adds obvious benefits for our users and the experience for those using browsers that don't resize as expected is acceptable so it should be merged.

👍

tombye added a commit that referenced this pull request Sep 3, 2015

Merge pull request #98 from alphagov/bigger_radios
Update block label inputs to be bigger

@tombye tombye merged commit 1904abc into master Sep 3, 2015

@tombye tombye deleted the bigger_radios branch Sep 3, 2015

@fofr

This comment has been minimized.

Copy link
Contributor

fofr commented Oct 26, 2015

I've come across a CSS reset technique that makes certain input types more susceptible to user styles.

Tip 4 here: http://simurai.com/blog/2015/09/09/back-to-the-roots/ says:

Form controls like buttons, inputs get styled by the browser in a certain way. Overriding them with inherit makes them adapt to your own styles.

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

This is a technique used by reset libraries such as normalize.css:
https://github.com/necolas/normalize.css/blob/master/normalize.css#L252-L260

Do we apply any of these kind of resets?

Edit: We do some of this here: https://github.com/alphagov/govuk_elements/blob/master/public/sass/elements/_reset.scss#L24-L33

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment