Develop Homepage Redesign

[arghmatey]

Overview

We need to develop the new Homepage Redesign based on Figma file provided by design.

Action Items

• Develop the redesigned Home page
  • Ensure applicable design system classes are applied throughout
  • Add new icons on credits page
  • Move or create 'includes' files into home-page folder nested in the _includes folder
  • Update program areas images
• Develop mobile version of Home page

Resources/Instructions

Figma (in pink rectangle)
index.html - for home page architecture
Credit folder & credit.yml template
Homepage Redesign - #2057
Design mobile version of new homepage - #2213

[arghmatey]

Progress: Almost all sections of homepage are developed and styled to be mobile responsive.
Blockers: Dependency on issue. Styling of communities of practice gradient may not be possible as is (researching and testing currently). Mobile version not completed yet, but issue is created and being worked on.
Availability: 1 hour tomorrow morning (Saturday AM)
ETA: Based on blockers.

[arghmatey]

Progress: Updated technology section's mobile responsiveness. Created gradient for communities of practice section.
Blockers: Dependency on issue.
Availability: 2 hours on Monday 10/18.
ETA: Based on blockers.

Next steps: Create draft pull request. Create javascript logic for random win to be displayed on home page load and set up with the wins that have been chosen.

[arghmatey]

Connected with design regarding Program Areas images. The images I exported out of Figma are too small and appear grainy. Older versions of images were 360px, though show pixelated on the Program Areas page. I suggest they be imported at 900px width to insure they appear clear throughout the site.

[arghmatey]

Mobile design has been completed via #2213. New action item added to implement mobile designs.

[arghmatey]

Progress: Getting through mobile design.
Blockers: Week became busy with interviews. Not all wins are chosen, but im going to move forward with the ones we have. Figured launch can happen with those chosen or fillers can be picked then replaced.
Availability: A few hours on Sunday, then a large chunk of time on Monday.
ETA: Wednesday 10/3

[arghmatey]

Creating homepage-launch-feature branch to use for pull request instead.

[arghmatey]

Development is complete.

I need the homepage-launch-feature branch created as I wasn't able to create a parallel branch myself. The wins response edits also need to be pushed in order to display the chosen homepage wins.

[phuonguvan]

@JessicaLucindaCheng Hey! This is the design team lead and I was wondering if you are still working on this project. Bonnie told me to update you guys so let me know as soon as possible!

[JessicaLucindaCheng]

I'm reopening this issue because I still need to check if this issue has been completed or there are items that still need to be done

[JessicaLucindaCheng]

• Issue and pr review ETA to see where this issue is at: Wed, Mar 30

[JessicaLucindaCheng]

The homepage has been implemented completely but @JessicaLucindaCheng will make new issues to address the following:

• Program Area images should be alt="" and is related to issue Review the alt text for program-area page images and ensure that they adhere to WCAG #2354. The alt text also impacts the images on the Program Areas page.
• Infinity symbol should have a descriptive alt text.
• Communities of Practice section images should have alt="" and remove / from the end of the img tag.
• Delete line 13 and uncomment line 14 when about page is done. Need to add a dependency label and figure out what the issue before this one will be. Edit: This is the issue for it: Make "Learn more" Link Visible on Redesigned Homepage #7689

  website/_includes/home-page/hero.html

  Lines 12 to 13 in 467a797

  	<!-- Link below to remain inactive until About page is completed and live -->
  	<!-- <a href="/about">Learn more</a></p> -->

[JessicaLucindaCheng]

@phuonguvan The Homepage has been implemented completely except for some alt text related changes that need to be made and can be addressed in separate issues. Thus, I'm closing this issue.