Work flow for guides to appear on the website

[ExperimentsInHonesty]

Dependency

• [x] Waiting for a PM to get assigned to Guides (ask Bonnie or Olivia for status if necessary)
• [x] ~Waiting until PMs have identified all guides that are ready (at least 5 are needed for this test)~

Overview

As PMs we need guides to be easy and fast to add to the website so that we have our guides appear on the website as soon as possible.

Action Items

• [x] Define the prototype
  • [x] Document what did not work
• [x] Define MVP
• [ ] Define stages post MVP
• [ ] Convert issue to epic with small issues: Add credits for photos and icons for redesigned homepage #2528
• [ ] Once the pull request associated with this issue is approved and merged
  • [ ] Please update and edit issue #1515 by
    • [ ] Checking off the dependency for this issue
    • [ ] If all dependencies are checked off, please move issue #1515 to the New Issue Approval column and remove the Dependency label
  • [ ] Please update and edit issue #3170 by
    • [ ] Checking off the dependency for this issue
    • [ ] If all dependencies are checked off, please move issue #3170 to the New Issue Approval column and remove the Dependency label

Resources/Instructions

Here is what we will post on the a guide issue when we assign an image to it

Here is the image that will show up when people go to hackforla.org/toolkit and see this guide
[INSERT IMAGE HERE]

Here are the details for the credits page
Name: Meetup (this needs to link to the original image location)
Used in: Toolkit
Artist: _______
Provider: _____

• Guide: How to Write a Guide

• Template: Guide

• How to Set Reminders in Slack v4

• Figma

• Sample Documentation from GitHub as Reference

• emojiterra

• Figma / Type Space Figma Youtube Video

• Tool researched by 100Automations

• https://github.com/hackforla/guides/issues/10#issuecomment-896934745

• Guide Pages Design System - https://github.com/hackforla/website/issues/1630#issuecomment-954330264

[ExperimentsInHonesty]

proposed work flow a guide gets assigned in the CoP assignee reaches out to HfLA design team to ask for an image via a template issue on hfla github designer posts back on the guide issue with image details new issue on hfla github with finished guide pdf url and image details previously provided - issue is auto labeled to development

[ExperimentsInHonesty]

we need to make it so that the pdfs load in the browser window using github.

[github-actions[bot]]

@ExperimentsInHonesty, @alyssabenipayo

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 10, 2021 at 12:10 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[abenipa3]

Progress: Testing markdown converter. Updating prototype so that front matter locates image path so that we can achieve the format we want for markdown file.

Blockers: Learning more about liquid so that we can achieve the format as mentioned earlier.

Availability: 8-10 hours

ETA: 8/16/21

[abenipa3]

Action Items from 8/18/21 Meeting

In addition to the checklist mentioned in #1515:

• [x] Add the Slack Reminders Guide V4 into the prototype. (Issue for this guide also viewed here.)

Update 8/19/21

• How to Set a Reminder in Slack Guide Page Added.
• Preview here.

• [x] Test to see how emojis work in the headings.

Update 8/19/21

This is possible by adding a "-" at the end of the `href` in the front matter. Example:

        - title: "When to Use Reminders ⏰"
          href: "#when-to-use-reminders-"

• [x] Test to see how cropped images turn out after downloading from Google Docs. (Will the edits/crop apply to the images when we download them?)

Update 8/19/21

• After downloading the images (by downloading the Web Pages (HTML, zipped folder), images would be saved as original - any edits made (such as cropping, resizing) would not be applied.
• ~Alternative option is the following: - Select File > Publish to the Web - Go to the Link provided by Google Docs. - Save Image As all the images. (I initially downloaded the zipped Web Pages folder, which included the images folder, so I would replace all the images with the edited ones from Publish to the Web. - When done, will need to unpublish the document by selecting File > Publish to the Web > Under "Publish content & setting", click on Stop Publishing.~

• [x] Test to see if the indentation works design- and development-wise. (See image below for context.)

Update 8/19/21

Will meet with Design Team later today. Development-wise, yes, with the following:

      

Questions So Far (for Friday's Meeting)

• Do we want to add emojis to the section title in the navbar, too?
• Will the guides contain an overview?
• If so, how do we want to create the preview section that's viewable on the toolkit page?
• Alternatives for downloading (edited) images?

[abenipa3]

Action Items from 8/20/21 Meeting

• [x] Create mock-ups of Guide Page before Sunday.

Update 8/22/21

Created these mockups so far.

Figma FIle

• [ ] Edit the indentation of the subsections (See JavaScript).
• [ ] Bold "When", "How" - Refer to changes made in Slack Reminders Guide V4.

[abenipa3]

Feedback from 8/22/21 Meeting

• Navbar: Team voted for navbar with bolded title:

• Title: No capitalization for titles (header and section titles).

Action Items from 8/22/21 Meeting

• [x] Create a full mock-up (including subsections) of Slack Reminders Guide V4.

Update 8/23/21

Created these mockups so far.

Figma FIle

• [x] Make a mock-up where the subsections in the navbar are not indented.

[abenipa3]

Action Items from 8/25/21 Meeting

• [x] Consult with @hackforla/website-design: What is the hero section for our Guide Page? We want our guide pages to show that we can help readers from all over the globe through our hero section.

Update from 8/26/21: Meeting with Design Team re: What is the Header?

• Our team suggested that we either change the image or edit the current header as seen below.

• If anything, I created new mockups that suggests new images that may replace the current header.

• [x] Add Credits at the end of the mock-up.
• [x] Update Guide Page Team with Design Team's response on 8/27/21.
• [x] Consult with the website team and cast votes, regarding subsections format on Sunday. (More details under Feedback.)

With Indentation for Subsections

Without Indentation for Subsections

Feedback from 8/25/21 Meeting

• Discussed how to format the subsections for navbar: Without Indentation vs. With Indentation. - Action Item for Sunday Consult with the website team and cast votes.
• Discussed if we want the overview portion of the guide to be titled "Overview" or "What is _____?" - Decided vote for "What is ?" - We want the guides to be open to everyone around the globe. - "What is?" would be clickable than having the section titled "Overview."

Mock-Ups with New Image Headers (Created on 8/26/21)

Same Header, but Zoomed In

"Document Concept Illustration" Header

"Completed Steps Illustration" Header

"Publish Article Illustration" Header

Link to New Mock-Ups

Questions for 8/27/21

• How do we want to update status for https://github.com/hackforla/website/issues/1515

Update 8/27/21

Moved issue back to the icebox. More details here https://github.com/hackforla/website/issues/1515#issuecomment-907387135

[abenipa3]

Minutes from 8/27/21

• Reviewed new mockups.
  • We agreed to include the parallelogram in our hero section; it brings out more color. Preview below this section.
  • We voted on mock-ups. Preview below. Will need to redesign.

Mock-Up Hero Section (With Parallelograms) Previews

Mock-Up Voted

Action Items

• [x] Add credits section title to the mockups: "Guide Authors"
• [x] Make edits to the image as follows:
  • Replace the bar graph with the map.
  • Replace first page with a how-to image.
  • See site component audit for references.
• [x] Consult with the website team and cast votes, regarding subsections format, color vs. no-color (hero section) on Sunday.

Mock-Ups for Hero Section

Mock-Up without Color

Mock-Up with Color

[abenipa3]

Minutes for 8/29/21

• Mock-Ups for Hero Section Feedback

  • Bring more color accent to the hero section.
  • Color the chart green in the third page
  • Add yellow to the image, either to the character's pants, shoes, or box image box in the first page.
  • Add a gradient to half of the side of the hero section.

• Casted votes on Subsection formats. [Option 1] [Option 2]

  • The website team voted for Option 1. 🔥 🔥 🔥

Side-Notes

• #1407 Mentioned: FAQ Accordion
  • Reviewed 2FA page and on the Getting Started Page as we may want to incorporate them in our Guide Template.

Action Item

• [x] Redesign hero image per today's feedback.

New Redesigns for Hero Image

Version 1

Version 2

Version 3

Version 4

[abenipa3]

Minutes 8/30/21

• Voted on the new hero image. More details on the next post.
• Discussed how to automatically get the navigation bar collect sections and subsections (and skip the manual process in adding the titles and hrefs to the front matter.)
  • Decided to reach out to 100automations Team.
• Discussed how the Doc to Markdown works using this example.

Action Items

• [x] Add the indentation of the mockup (missed it previously).
• [x] Reach out to 100automations (Carlos and Dean) in regards to their table of contents/navigation bar, and share info on how to get the navigation to follow the readers when they scroll through the pages.
• [x] Create a mobile version of the mockup.
• [x] Add redesigns to this issue.

[abenipa3]

Guide Page's New Hero Image

The winner is Version 1. Please click the arrows below to see the final redesigns for both Desktop and Mobile.

Mock-Up for Desktop

Mock-Up for Mobile

Mockups for both Desktop and Mobile available on Figma here.

[ExperimentsInHonesty]

@alyssabenipayo What font choices do we have on the website? I looked in the design system pages and didn't see a font specified.

We also did some testing (which you can find at the bottom of the figma page). Here is what we found. The reason for our testing is that the titles seem a bit large, and not as sophisticated as the current Google Guides.

[abenipa3]

@alyssabenipayo What font choices do we have on the website? I looked in the design system pages and didn't see a font specified.

We also did some testing (which you can find at the bottom of the figma page). Here is what we found. The reason for our testing is that the titles seem a bit large, and not as sophisticated as the current Google Guides.

Hi Bonnie, these are the font choices that we have in our design system - I used Headings-Title 1 for the Heading-1 (48px for Desktop Size), Headings-Title 2 (36px Desktop) for the Subheadings, and the paragraphs are 20px. Just in case, I also referred to this font choice for our nav-bar here from our design system.

[ExperimentsInHonesty]

@alyssabenipayo Thank you for pointing out where the typography sizes were. We made some mockups in the same figma page (it has a blue line around it). When you are able to join us, let's discuss. No need to make any global changes now.

[abenipa3]

Minutes 9/3/21

• Reviewed mockups from figma page
• Discussed new tool (toc.html, which automatically pulls headings without needing to add the sections, titles, and hrefs in front matter.
• Reviewed font sizes for section and sub-section titles on navbar.
  • Learned that there is a 22 character limit for one line.
• Reviewed sample from GitHub to discuss how they treated left and right margins on their page. (Article added as Resources for this issue.)

Action Items

• [x] Create a new mockup that shrinking the max-width of the page cards. (708px)
  • [x] Discuss with the Design Team on Sunday in regards to new mockup.
• [x] Note any new changes (font, page card sizes) that will be added to the Design System.
• [x] Cast votes on Sunday with Website Team for the following:
  • [x] The Section/Subsections of the Navbar (Option 1 - Tool pulls the headings as it is including the emoji or Option 2 - Customized Headings)
• [x] Update on new mockup with the Design Team on Sunday.
• [x] Work with the Design Team to find out the size of the space between the heading and the paragraph in the design system.

Additional Updates

• Added the following links to this issue under Resources/Instructions for our ease:
  • Template: Guide (Google Docs)
  • Documentation from GitHub (Sample to Review/Use for our Guide)
  • Guide: How to Write a Guide
  • emojiterra

[abenipa3]

Feedback from 9/5/21

• Font Discussion:
  • Oswald will be for the heading.
  • Roboto for the paragraph.
• Website Team Vote Discussion:
  • Fully Bolded (Option 2)
  • Without the Emoji (Option 2)

Action Item

• [x] Update the paragraph size to 16px. [Design System-Typography]
• [x] Customize the navbar section/subsection titles. Team voted for Option 2
• [x] Update Font for Headings to Oswald.

[abenipa3]

Redesign Updates 9/8/21

Note: Won’t be able to attend the meeting today (Wednesday). Please see the following updates:

• Applied the following feedback from Sunday:
  • Updated Fonts for Heading to Oswald.
  • Updated paragraph sizes from 20px to 16px as seen in the design system.
  • Updated navbar section and subsection titles to reflect Option 2.
• Mockups for both Desktop and Mobile available on Figma for both Desktop and Mobile.

Mock-Up for Desktop

Mock-Up for Mobile

[abenipa3]

Update: Implementing Links to Social Media Icons

• We wanted to see how the converter would work when implementing a link to social media icons as seen below.

• I used the Google Docs to Markdown Add-on to convert and this was the result: (without any changes):

  • This error means that it does not locate the image used, so we will need to add the icons' images to the assets folder.

• Downloaded the icons from the Google Docs and added it to the assets folder.

  • Had to resize the icons to width:16px and height:16px since it came out large after downloading.

• Deleted the notes/codes generated by the converter and added incorporated image with the link.

How to add a image with links in markdown?

Image with link:

[![LinkedIn](assets/images/linkedin-icon.png)](https://www.linkedin.com/)

[![GitHub](assets/images/github-icon.png)](https://github.com/)

TLDR

• Able to implement image with links.
• Will require a little bit of work on the users' end by adding the Social Media icons to the assets folder, and deleting the notes/codes provided by the Add-On.

[abenipa3]

Minutes 9/13/21

• Discussed how we want allow edits to our Guide.
  • Decided to use Github's New Issue Template and Google Forms.
• Discussed if we could add Slack icon image to Heading in What is Slack's Doc.
• Discussed Redesign: Font and Spaces between paragraphs
• Voted on font sizes.
  • Our team decided to use When (36px - H1), Type (24px - H2), Type (20px - H3)

Action Items

• [x] Add Slack icon image to Heading in What is Slack?
  • [x] Mockup
  • [x] Development
• [x] Adjust Font Size and Spaces (32px) of Mockup accordingly.
• [x] Consult with Design Team to see if the Font Size and Spaces are agreeable.

[github-actions[bot]]

@alyssabenipayo

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 14, 2021 at 12:02 AM PST.}

[abenipa3]

• Progress:
  • Completed
    • Adjusted font sizes and spaces (32px) of Mockup accordingly, [Figma Mockup Before Consulting with Design]
    • Consult with Design Team to see if the Font Size and Spaces are agreeable.
    • Created a new mock-up with feedback provided by Design.
      • Adjusted spaces by 16px for Option 1.
      • Added numbers to steps under Option 1.
    • Added Slack Icon to the Heading in What is Slack?
  • What is left to do?
    • Meet with Guides Team for feedback.
    • If all is well, will proceed with development.
    • Continue testing how to customize titles in toc.html (the file that automatically pulls Section/Subsection titles).
    • How to have front matter automatically pull from assets/images to a specific guide page?
• Blockers: None
• Availability: 8-10
• ETA: 9/25/21
• Pictures: [Figma Link]

Screenshot of Updated Mockup

[abenipa3]

Minutes 9/22/21

• Reviewed new formatting suggestions on design.
  • Feedback:
    • Bring back font for headings (Bold and Regular) as seen in the previous design.
    • Figma / Type Space Figma Youtube Video Recommendation
• Feedback on Development (Prototype):
  • Slack Emoji in What is Slack? - Although the emoji is slightly not inline as the emojis, our Guides Team is okay with it.
  • Images came out larger. Discussed how it would be styled.
    • Concluded that our CSS styling will auto-adjust to a specific size.
  • Discussed how to apply padding to the numbered lists. Currently looks congested.
• Discussed if we could find another image for Projects. Current idea is to use this.
• Added to the Guides Team Figma.
  • Current Best Page - Page the displays our chosen design.
  • Designs as of 9/22/21 (or MM/DD/2021) - Page for WIPs.

Action Items

Design

• [x] Adjust changes to the Mockup and add it to the Guides Team Figma.
• [x] Create mockups with different designs under Guide Authors (including the icons of social media links.
  • Possibly in adding the author's profile pictures?
• [x] See how the image for content would look with either a black line or shadow. We want to indicate that it's a screenshot.
  • [x] Collect feedback from Design Team.

Development

• [x] Create Separate Page Card for Guide Authors.
• [x] Research how to customize sections and subsections (by removing the emojis from the nav-bar).

[abenipa3]

9/23/21 Updates

Design

• Updated mock-up with Guide Authors' social media icons.
• Added two more mock-ups displaying shadow and an orange border around images.
  • Note: Some images were dark to see the black line, so decided to use orange to match the selected color box.
  • Design Team voted for the Drop Shadow for the images.
• Design Team Feedback:
  • Team agreed to add Bold and Regular styles to the headings.
  • Add 48px to the corners in the second page card.
  • Add more space in between numbers and images/subheadings and text.
  • Indent the images under the numbered list and descriptions.
  • Guide Authors Section:
    • See if we could use a bigger font size for “this guide..”
    • Decrease the spacing between the names
  • Create a hierarchy list for spaces between items and a description
• Added new mockups to Guides Team Figma

New Mockups

Figma Link added to Guides Team.

Questions/Comments

• Will the bold to regular styling for headers be included in the workflow when we create new guides?
  • Bold Who? What? When? Where? Why? or first word of the section title?

[abenipa3]

Minutes 9/24/21

• Reviewed mockups. Figma Link
  • Feedback:
    • Design Team and Guides Team prefer shadow background borders around images.
    • Spaces: Images must show that they are associated with a specific step. Experimented with sizes.
      • First Attempt: 32px size for space between Step # and image. 48px size between image and the next step.
      • Second Attempt (Team Preferred): 24px size for space between Step # and image. 48px size between image and the next step.
    • Guide Authors: Excellent Level (Plan for after publishing our MVP)
      • Have two columns with the Name of the Authors and their Profile Picture from LinkedIn
      • New section for Editing.
        • "Help contribute to the Guide by giving edits. Here's a form."
      • New section for sharing the Guide.
        • Team agreed to have the section between the content (second page card) and Guide Authors.
        • Tool researched by 100Automations for reference to use to share the Guide.
• Discussed how the URL would look for guides.
  • Current idea is hackforla.org/guides/name-of-guide
  • Ideal idea is to shorten the URL to consider character count from Social Media like Twitter.
    • Example: civictechguides.org/slackreminders

Action Items

Design

• [x] Adjust hierarchy for spaces with new mockups and annotate on Figma.
  • [x] Reach out to Design Team for feedback.

Misc. Updates

• Added Tool researched by 100Automations and Figma / Type Space Figma Youtube Video to this issue under Resources/Instructions

[abenipa3]

Update 9/27/21

• Adjusted hierarchy for spaces with two new mockups and annotated on Figma. (Our team wanted to add more breathing room between the Steps and Images.)
  • Mockup 1 [Figma Link] [Image Preview]
    • Between Step # and Image - 32px
    • Between Image and Next Step - 48px
    • Between Sections - 48px
    • Between Sections and Subsections - 40px
    • Between Section and Sentence/Paragraph - 20px
  • Mockup 2 (Guides Team Preference) [Figma Link] [Image Preview]
    • Between Step # and Image - 24px
    • Between Image and Next Step - 48px
    • Between Sections - 48px
    • Between Sections and Subsections - 40px (except between the end of option 1 and beginning of option 2)
    • Between Section and Sentence/Paragraph - 20px

Action Items

• [x] Consult with the Design Team. (In Progress)

[github-actions[bot]]

@alyssabenipayo

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 28, 2021 at 12:02 AM PST.}

[abenipa3]

Progress:

• Annotated hierarchy for spaces between text and images. [Link]
• Consulted with Design Team today regarding design. Design Team voted on mockup as seen below.

Blockers: N/A Availability: 6 ETA: Completed - Just want to follow up with Guides Team before we begin the development phase. Pictures: [Figma Link]

[abenipa3]

Minutes 10/7/21

• Reviewed updated mockup. [Figma Link]
  • Feedback:
    • Design Team and Guides Team agree with the changes.

Action Items

Design

• [x] Issue about using strong vs bold and em vs italics https://help.siteimprove.com/support/solutions/articles/80000448460-accessibility-bold-vs-strong-and-italic-vs-emphasis - please discuss with design and potentially the developers on Sunday.
  • To be sure to provide the same experience to all users, strong and emphasis tags need to be used instead of the bold and italic tags.
  • The bold tag <b> versus the strong tag <strong> will look exactly the same when viewing the content in a browser but provide a different experience to screen reader users.
  • If you want to make your online content accessible to those using a screen reader:
    • Avoid from using style tags such as <b> and <i>
    • Use semantic tags <strong> and <em> (italics)
    • Use heading levels to break up content and make it more scannable
  • [Source]
  • Update: Design Team is up for discussion on Sunday!
• [x] Ask Kristine if the copy bits in the design system pages have been accessibility tested. If no one has tested it, find the url for the pages and test it hackforla/website#1927 (comment)
  • https://www.hackforla.org/design-system
  • Update: Not that she's aware of - it is something we can do. We could create an issue with it.

Development

• [x] Find out how to convert words in double-quotes into backticks (copy-text).
  • [x] Please review this hackforla/UI-UX#16 (comment)
  • [x] Please review this https://github.com/hackforla/guides/issues/10#issuecomment-936572293

[abenipa3]

Minutes 10/8/21

• Updated team with Design Team's responses regarding font-weights.
  • Will discuss this with the entire team on Sunday.
• Updated team with Design Team's responses regarding Accessibility Test for Design System.
  • [x] Look into Figma Plug-In that helps test accessibility. Reach out to UI-UX Channel.

Action Items

• [x] Create mock-ups with different styles for Guide Authors
  • [x] Desktop
  • [x] Mobile
  • Note for future reference: Profile Pictures will be taken from GitHub.
• [x] Find out how to convert words in double-quotes into backticks.
  • [x] Please review this hackforla/UI-UX#16 (comment)
  • [x] Please review this Test of Markdown converter guides#10 (comment)