Various UI bugs in recent-ish update?
complete
Hannah Boldt
Hi all -
cape.umn.edu has seen a variety of UI updates recently, some of which are bugs and some that might just be aligning more closely with U design guidelines.
Attached are a few screenshots of issues i've noticed -
- spacing is off on the homepage tiles - blank space above unit description and then blank space below tiles
- menu links along top get transformed to a smaller font when you select them (see video: https://mediaspace.umn.edu/media/t/1_h3abyzyl)
- the "contact us" button moves around depending on what menu item you select. (see video: https://mediaspace.umn.edu/media/t/1_h3abyzyl)
- spacer off on https://cape.umn.edu/services
- spacer off on https://cape.umn.edu/planning
- footer: the location of our office changes formatting (it should be one line only) depending on which section of the website you are on (see video: https://mediaspace.umn.edu/media/t/1_eyo5anep)
Additionally, many of the colors have changed on the website (I'm guessing this is to align with UMN design rules?) And also the font has changed (also maybe alignment?). Here is a video that compares the old and new UIs (new on left, old on right) - https://mediaspace.umn.edu/media/t/1_z7dflvn5
Jack Swartz
complete
Jack Swartz
Issues have been fixed! As for stuff regarding color changes feel free to make another ticket and we can work from there.
Jack Swartz
Hi Hannah,
Thanks for the detailed info! I'll look into getting these issues fixed.
The color changes are because of the accessibility rules (specifically there were issues with the color contrast). If you want the colors tweaked I can send a couple tools your way that help pick out colors that have proper contrast.
I'll let you know once I get the rest fixed.
Jack Swartz
Hannah Boldt
Hi Jack!
We'd appreciate the tools for color tweaking - we need to make sure our branding is uniform across the web and our print resources. Thanks for looking into the other bugs!
Hannah
Jack Swartz
Hannah Boldt
Sure thing!
Here is a hex color picker you can use to get a color: https://g.co/kgs/4RHJELU
Here is a contrast checker you can use to see if two colors have enough contrast: https://webaim.org/resources/contrastchecker/
Once you have some colors picked out you can sent them my way and I'll get them set up on cape.