Change CSS for organization name links to be more obvious

[fancyham]

Overview

It's not obvious that each organization has a detail screen because links to it aren't obvious.

Many other food pantry websites have the same information that we have on the search results screen but nothing more.

Our site has much, much more than those sites, but people won't know this unless there are obvious links to bring them deeper in.

To fix this, we should make the organization names on the search results very obvious links.

To start, let's change the Org Name Links so that they underline all the time.

Why all the time and not just on hover? Because there's no hover effect on mobile screens. Things need to look clickable right off the bat.

Note that on the org detail screen, the name of the org is not a link and will look like just a header, which it is.

If this is too jarring, we can try other methods via simple CSS changes and the dev and designer can try out things together -- the point is that there needs to be some obvious differentiation between what's a link and what's a label.

Discussion

I think this should be a simple CSS update.

[fancyham]

Created from usability review in June

[monicakrystal]

Hi ! What do you think of this? this only happens on mobile. I feel like the blue seems more user friendly/ "clickable".

[fancyham]

While very clickable and obvious, I think that the color doesn't go well with the other colors we have :)

Could you make it the same color as before but with an underline, and let's see how that feels?

[monicakrystal]

Sure, just had to change the color. Here it is in black. Let me know your thoughts. Thank you!

[fancyham]

Nice! Is there somewhere I can see it? I basically want to QA and check that it feels right — this is pretty minor so perhaps can be pushed to Devla for testing but before acceptance? (A design on paper sometimes feels wrong when actually using it)

I feel like we could use a virtual machine that can be spun up for QA testing specific bug fixes :)

[fancyham]

If not easy to use it live, could you post a short video or screenshots of using them on desktop, portrait iPad (768 wide), and mobile?

[monicakrystal]

@fancyham Which virtual machine? Docker? Do you want it underlined on desktop, ipad, and mobile?

[fancyham]

Yup, the underlined org title URL on desktop, iPad and Mobile — a (short) video of searching, scrolling and going into the org is what I’m looking for to see how it looks and feels.

I’m a little technical so another option is you could send me / point me to the new css and I can try using it as a custom CSS here though not sure if that’d work. (I’ve not actually done code review on github or ever (I’m a hack programmer for my personal projects))

Unfortunately, I’m not familiar with Docker nor have I spun up a local version of the site…

Bigger picture:
I’m out of my depth here about what’s possible but what I’d love is for designers or creators of issues to be able to review a live version of the fix while it’s in development so that there can be cycles of back-and-forth checking of how things work and feel, as well as QA — but before it goes into the formal check-in/pull into the actual code base.

That might require talking to the leads and asking if this might be possible but one possibility I can imagine might be a collection of temporary staging/prototype dev servers — like devla1, devla2, etc. that a dev can publish their in-progress work so that the folks working on a specific issue can work on it together.

If there’s an easy way for designers to spin up a local version of the site on their own machines, that might be an option, but it would probably have to be super easy / simple to do!

(feel free to share this ^^^ with the dev leads)

[fancyham]

Hey hey -- checking in on this

The screenshots from 3 weeks ago with the black links look good -- if you can post a video showing hover effects, etc., that would also work.

If it helps any, FYI, I'll be at Sep 9th's (tomorrow's) dev meeting.

[monicakrystal]

Hi! What kind of hover effects do you want?

[fancyham]

More of a question — I basically would like to see if there are any hover effects. Making the underline a little darker on hover would be nice, but not absolutely necessary.

Optionally, point me to the css and I can look at it here!

[fancyham]

If you're at tonight's meeting, maybe you can show it to me there!