Improve mobile display

[hancush]

About 10% of our users visit the site on a mobile or tablet device. That might not sound like much, but it amounts to ~7,000 people this year. The quality of site display on smaller screens is pretty variable. Let's put some thought into improving display for non-desktop devices.

[xmedr]

I did some snooping with browserstack and my phone to see how things are. Here are some thoughts on some pages. Lmk what you think @hancush, I can pick any or all of these up anytime:

• General

  • On browserstack devices other than galaxy s21, the top nav bleeds off of the page a bit, which makes it so that the logo and expanded nav items also render slightly off the page. My phone is an s21 and both mine and theirs seems to be fine here.

• Homepage:

  • Could possibly use dividers between listed meetings

• Board members listing:

  • The recent activity section displays fine when showing less, but when showing more, row items get pushed to opposite edges of the container (Edit: this isn't consistently happening)
  • Related to that: would it be worth considering moving that show more button to the top of that container for mobile? It's potentially a lot to scroll through to get back to the show less button at the bottom if you accidentally clicked it or changed your mind.
  • The map that says "tap to view details" just takes you to the person detail page for that polygon instead of showing details. If this is a feature we want on mobile, then this might be a priority.

• About Us

  • page scrolls horizontally a bit for board report statuses table

• Board report search

  • After searching once, the collapsed nav disappears. comes back on refresh
  • Might be nice to have a separator between related search terms for clarity on mobile

• Events listing

  • The top section with the date selector, list button and refresh could be a little more clear. Instructions in the date picker get cutoff and I initially wasn't sure what the bulleted list button was for

• Minutes search:

  • Same as top section of events listing.
  • The td showing what kind of meeting it was is blank. This also feels like a priority.

• Event detail:

  • The event's heading with details could use some horizontal space

[hancush]

@xmedr Thanks for this! Let's start working through these by section. Want to pick up the General and Homepage items?

Let's also take this opportunity to upgrade to the latest Bootstrap! As there are quite a few changes between legacy and contemporary Bootstrap, I'd like you to reproduce the existing site design but write the new templates from scratch (of course, copying and pasting content and other reusable elements). LMK if this makes sense!

Can you open up a branch called "mobile-updates", then branch off that branch and start your changes? We'll use "mobile-updates" as a long-lived feature dev branch and continue to branch off of it as we move through this list.

[xmedr]

@hancush Yep this sounds good to me, and in that case I'll probably do the bootstrap upgrade in tandem with the mobile updates. Ty!

[xmedr]

@hancush update for you, I was able to get a draft of the General and Homepage upgrades and bootstrap migration on the mobile-adjustments branch, and I've started work on the About Us (was hoping I could knock that out before EOD today, but I'm almost done with that one)

[hancush]

@shrayshray These changes are deployed to the staging site! https://lametro.datamade.us/ Want to take a spin and let us know what you think?

[hancush]

@xmedr to redeploy to staging for Metro review in October.

[xmedr]

@shrayshray These changes are redeployed at https://lametro.datamade.us/ and includes the most recent updates at time of writing. That includes things like the alert manager and the Caltrans board members map layer.

Note: The alert manager uses styles based on this upgrade. So on the live site, the Primary and Secondary alerts may not have specific colors until this is brought in. The other alerts should work just fine for now, though.

[shrayshray]

@xmedr This is looking great to me on my iOS devices, and I have a couple notes below. I asked @camachoo and @neilarellano to check on their devices and add feedback here as well. Notes:

1. On meeting pages, it looks like there could be some vertical space added between the recording buttons:

2. Can you add a scroll bar to the list of directors on the mobile version, similar to on the desktop version (screenshot below)? This would make it more clear there are more directors in the list to view.

3. Can the view PDF and download buttons be emphasized, either with bold or larger font on the Board Report pages?

4. Is it possible to reissue admin login credentials to the staging site? The credentials I have aren't working to login and see the new alert styles. This is only if you want me to review the new alert styles here, before they are live (but not a huge deal because we'd preview them on live before pushing to users anyway).

[xmedr]

@shrayshray Thanks for this! To answer your questions:

1. Good catch, there absolutely can be some space in between those buttons
2. So far, the appearance of the scroll bar seems like it's controlled by the mobile OS. I'll do some more digging on this though to be sure. In case it doesn't pan out, the plus side is that it does show once you start scrolling.
3. For sure, we can get that emphasized. Below I have an example of both a font size increase and bolded text, what do you think? If it's too much we can just do one or the other.
4. That'd be useful to for you all to have working logins for the future even, so we'll get that back up

[hancush]

@xmedr Can you provide an update on this?

[xmedr]

@shrayshray I've got an email coming your way with new login credentials for the staging site at https://lametro.datamade.us/ , and changes from your feedback has been redeployed there.

There's also some bonus changes from the first round of accessibility adjustments discussed in #1021. The most notable changes are higher color contrast throughout the site, and the addition of underlines to links to help distinguish them beyond just color.

If you have the time, would you be able to take a look at this by the end of the week? No worries if you folks are busy!

[shrayshray]

@xmedr on the homepage, could you add additional contrast to the text below the search box? Maybe a white background behind it? The image behind the text obscures it in some views and while the new higher contrast helps, more would be better.

[xmedr]

@shrayshray of course! though it looks like you might be looking at a different version of the site. is this maybe the link for the staging site on heroku that was recently shared with you? if so, that unfortunately doesn't have the styling changes on there. sorry for not realizing this would've been confusing sooner!

we'll be keeping the old staging site available until these changes are approved. so for now that's going to be at https://lametro.datamade.us/ and if anything else changes i'll be sure to give an update. so on this link, that text looks something more like:

and i can definitely still increase the contrast more if we need

[shrayshray]

@xmedr my screenshot was from the live site and it definitely looks better on staging than on live! But Omar requested even more contrast than what we're seeing on staging.

[xmedr]

@shrayshray absolutely! here's what it looks like in that white box. and i agree, this does feel way more readable.

also change of plans on that old staging site. we did end up taking that down, and instead we're putting these changes up on the new heroku staging site you were using before, found at https://la-metro-councilmatic-staging.herokuapp.com/. apologies for that bout of switching and thanks for bearing with me on this! 🙇

[shrayshray]

@xmedr beautiful! Thank you!

[xmedr]

@shrayshray absolutely! and of course let me know if you folks find anything else on this or if we're good to go

[xmedr]

@neilarellano @camachoo these changes are back on staging for review!

https://la-metro-councilmatic-staging.herokuapp.com/

[neilarellano]

Hi Team,

I noticed when I was going through Board Reports search results that some informational labels were overlapping on Android mobile. Please see below:

[xmedr]

@neilarellano thanks for catching that! i've got that fixed, and staging now looks like below. let me know whether you find anything else

[xmedr]

@shrayshray Thanks again for signing off on the current set of mobile/accessibility changes! The next two parts are up on the staging site now for you folks to review. Here are some major things to look out for, for each category:

Operable (2 of 4)

• Use the keyboard to navigate through various pages, including those with maps.
• Confirm that
  • tab order is predictable.
  • a bypass block exists at the start of each page, that can skip to the main content of that page.
  • at no point do you get stuck and cannot tab out of an element or group of elements.
  • visible focus is maintained for each element tabbed through.
  • the site is as usable with a keyboard as it is with a mouse, with the exception of map interaction.
  • there are sufficient accessible alternatives to the maps. The board members listing page has the adjacent members listing table, while individual board member pages have the heading of the map.

Understandable (3 of 4)

• Adding the use of a screen reader, navigate through various pages including those with maps.
  • Note: Some screen readers need a language pack to read different languages. For example, to get Spanish in VoiceOver go to Settings > Accessibility > Open VoiceOver Utility > Speech and click the plus button to add a language.
• Confirm that
  • the screen reader predictably announces each element on the page.
  • the screen reader announces elements in their appropriate language.
  • links that open in a new tab/window are announced by the screen reader.

In the meantime, we'll continue work on the last category.

[xmedr]

@shrayshray we're close to done with the 4th leg of the a11y changes! though we'll still hold off on bringing it in to the staging site until this previous round of review is done.

[xmedr]

Updating this with details from the latest meeting. We’re done with the last category of the a11y changes and just waiting for the previous two to get tested so we can push this last one up. Once that's finished, we can get everything onto the main site!

@shrayshray were you folks able to find any issues with the "operable" and "understandable" categories? If not, I can push the last bit up