Mobile intro screens on index.html

[ArthurSmid]

The navigation of the site, being able to find what's inside it is very different on a small screen than a desktop where all the categories and subcategories are visible at once on-screen. The mobile Little Help Book has a few introductory screens that walk through the menus in plain language designed for accessibility.

This is a guided navigation of the contents that could be skipped by anyone familiar with the site. Here's a first draft of the mobile intro screens, from landing to what they see at Find Help and then if they click Find a Service:

Considering the responsive change in a browser window, when the intro screen goes to desktop it displays the table of contents, all the categories and subcategories (here's the index.html https://github.com/OpenEugene/little-help-book-web/blob/develop/table-of-contents-style-homepage/index.html), and I'm thinking that the second intro screen (in the intro-screens.jpg above) will also expand to that same desktop view.

Going that route, the Find Help button on the mobile intro screen, I don't think that'd be an anchor tag redirecting to another page, it seems like it'd be a JavaScript action that opens a popup (not sure if that's correct term), ideally sliding in left-to-right. And then if someone expands the browser window with the Find Help screen open, a media query could close the popup from right-to-left and reveal the desktop.

I've begun researching how to do this and any help is welcome. I'm searching for "modal" and "popup" but I think I may not have the correct name for this kind of feature? It seems like this would be a fairly common action, to have a series of steps for a mobile index.html that wouldn't need to be on the desktop, and I'm trying to find some examples of how people go about it.

[KentShikama]

I haven't quite fully understood the issue but it looks like you want to split behavior based on mobile and desktop users. If so, the standard way seems to be to detect whether the user is mobile/desktop and serve different pages.

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // redirect to or serve mobile page
}

[ArthurSmid]

The reason I'm trying to figure out this modal/slide-out that can fill the screen is the responsive resizing in a web browser. It's an effect I admire, and I'd like to have that transition. The Netlify page isn't yet connected to the database but it allows you to see the transition without downloading the repo: https://little-help-book.netlify.app/table-of-contents-style-homepage/index.html

[ArthurSmid]

In the branch called feature/mobile-intro, thanks to Daniel @coatsd, and some paired coding today, we now have the Find Help button working on the mobile intro screen.

[ArthurSmid]

On the mobile page two, some details to do:

• [x] create html and css for a find my cities page

• [x] add find my cities button function

[ArthurSmid]

For the mobile page three, some items to do:

• [x] place a back arrow for people to return to the second mobile intro page

• [x] write html and css for the More categories page

[ArthurSmid]

I'll be working on some designs for the mobile navigation menus, seeing what might be possible for selecting among Category and Subcategories on a small screen.

[ArthurSmid]

For the Find a Service page in the mobile intro screen, I'd thought to use the short list of Categories included on the White Bird Clinic website when you click once on the words "Get Help" in their homepage nav bar:

Help Page Are you looking for COVID-19 community resources? Visit this link or choose from a topic below:

Basic Needs  / Financial Aid  / Food  /  Health  /  Rent/Utilities  /  Resource Sharing  /  Shelter  /  Transportation  /  Youth​
Necesidades Básicas / Comida / Salud / Rentas/ Servicios / Intercambio de Recursos / Refugio / Shelter / Transporte / Jóvenes

https://whitebirdclinic.org/help

This abbreviated Table of Contents is also there in the COVID-19 menu item under the Get Help button: https://whitebirdclinic.org/covid

Thinking that these would be the most sought categories, I intended to place this shorter Table of Contents in the mobile page that appears when you click "Find a Service" (pictured above in the Figma designs) and the list could be expanded to full by click that More button. That being a short list that can fit on a single screen and be read and taken in more easily than a longer scroll.

function getMobilePageMostSought() {
  return `<header class="logo-title black-top">
            <img src="white-bird-on-black.png" alt="White Bird Clinic" width="42" height="42">
            <h1 class="little-help-book">Little Help Book</h1>
            <div class="back-arrow" onclick="findHelp()"><</div>
          </header>
          <main class="content-container">
            <div class="mobile-category-buttons">
              <h2 class="mobile-category-name h123-reset"><a href="#">Basic Needs</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Money</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Food</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Health</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Rent / Utilities</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Resource Sharing</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Shelter</a></h2>
              <h2 class="mobile-category-name h123-reset"><a href="#">Transportation</a></h2>
              <div class="bottom-line">
                <h2 class="mobile-category-name h123-reset"><a href="#">Youth</a></h2>
                <h2 class="mobile-category-name more-button h123-reset">More<span class="more-arrow"> ></h2>
              </div>
            </div>
          </main>`;
}

[ArthurSmid]

In the Get Help list, the word used is Shelter rather than Housing.

And it includes a category, Resource Sharing, that doesn't yet exist in the Little Help Book.