issues and improvements

[ShvetsBy]

Landing

add transition animations for hover on buttons decrease paddings in table cells

• [x] «...» smaller dots in sliders
• [x] highlight default vendor button in vendors section
• [x] md and sm top menu styling update

Blog

fix pagination styling

Post

• [x] disqus comments

[enclave-marc-barry]

General styling

• [x] Reduce border radius on images in blog post body (currently 30px, please change to 5px)
• [x] The reference site heading is not full width, why is the heading full width when it wasn't before? Can we change it back please
• [x] Blog index page hero section and nav bar both have a white background, which looks a bit strange. Can we give the navbar a background colour to distinguish it from the hero?
• [x] Why is the hover state for the "show full vendor list" button on the homepage a rainbow effect hover state? Please change the button hover state style back to match the reference site
• [x] We're going to remove the "Why no bullshit?" section and address that with content in the info fly-out, so can remove this section.
• [x] When I drag over and select any text on the pages, the browser uses the colour teal as the ::selection highlight text, it doesn't feel like a good fit for the style of the pages
• [x] All of the icons (i.e. navbar, footer) look too large for the text which is next to them
• [x] Please remove drop shadows from all buttons, if in doubt defer to the reference site
• [x] Not sure where LinkedIn and Twitter came from, let's remove those please

Interactions

• [x] The buttons for each architecture, when selected have a white background, I don't think this looks right. None of our other buttons have a white background? It's not so clear to me that an architecture is selected
• [x] Did we discuss having the architecture diagram that's shown in the carousel linked to the selected architecture table, and visa versa?
• [x] I was expecting the technology timeline to "slide"
• [x] I don't like that the text "fades" in on the timeline when selected, can we turn that effect off please?
• [x] Navbar doesn't look quite right to me yet. Buttons shouldn't underline of hover. Can we re-think the hover state please?
• [x] Remove the fade-in animation on the page title as we scroll, it can just appear without animation

Timeline

• [x] Between the buttons on the timeline, there's an unclickable gap between each one that confused me, can we make the anchor tags butt up against one another so there are no unclickable areas on the timeline please?

Architecture diagrams

• [x] I think we're going to have to make the architecture diagrams much smaller. Probably side-by-side with the text

Info fly-out

• [x] info fly out has no obvious left-side border, white-on-white doesn't look clear. the reference side fly-out is background is #1e2228, not totally clear why we changed it to white in the first place?
• [x] info fly out has a back arrow, shouldn't it be a close icon as per the reference site?
• [x] ESC key should close the info fly-out

Vendor tables

• [x] Please can you put the original tick icon back for entries in the strengths column
• [x] Table has no right margin in mobile view and is not horizontally scrollable
• [x] When an architecture button is selected, the width of that button shouldn't change change as the text becomes bold

Customer stories section

• [x] Carousel icons are not round
• [x] Customer stories next button does nothing when you're on the last item
• [x] Stop the carousel auto moving
• [x] There are only 3 circles in the carousel but 5 cards, this mechanic is quite confusing
• [x] This element takes up way to much space on the page, can we reduce the size?

Blog

• [x] Let's prioritise information density and show 4 blog preview posts at the bottom of the pages, not 3

[ShvetsBy]

can be done now

1. slide animation in time line ~ 2-4 hours

2. 404 page. ~ 30min - 1 hour

3. https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/16

4. [x] Vendors section point 1 from https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/14 ~ 2-4 hours

5. [x] heading is not full width, why is the heading full width when it wasn't before? Can we change it back please and ~ 1 hour

6. [x] Carousel icons are not round – hard to estimate, there are some library features that I should override. Lets start from 1 hour. Really takes 30min

7. 30mins - 1 hour minor fixes:

   • [x] fix link in logo in top bar
   • [x] change blog url to blog/
   • [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/12
   • [x] text selection default color
   • [x] Remove the fade-in animation on the page title as we scroll, it can just appear without animation.
   • [x] Not sure where LinkedIn and Twitter came from, let's remove those please
   • [x] Customer stories next button does nothing when you're on the last item
   • [x] Stop the carousel auto moving this 3 in 1 ~ 15 min
   • [x] Table has no right margin in mobile view and is not horizontally scrollable. It's a bug when we tested this unternally everything was good ~ 1 - 2 hours
   • [x] There are only 3 circles in the carousel but 5 cards, this mechanic is quite confusing. – hard to estimate now, need to learn library docs. Lets start from 30 min

### Design updates

1. Images: Reduce border radius on images in blog post body (currently 30px, please change to 5px). Go to reduce all images border-radius. 30 min – 1 h
2. Buttons styling: Why is the hover state for the "show full vendor list" button on the homepage a rainbow effect hover state? Please change the button hover state style back to match the reference site. 15 min
3. Buttons styling: Please remove drop shadows from all buttons, if in doubt defer to the reference site. 15 min
4. Buttons styling: The buttons for each architecture, when selected have a white background, I don't think this looks right. None of our other buttons have a white background? It's not so clear to me that an architecture is selected + When an architecture button is selected, the width of that button shouldn't change change as the text becomes bold 15 min
5. Size and alignment for icon menu items. All of the icons (i.e. navbar, footer) look too large for the text which is next to them. Check the center vertical alignment. 15 min
6. Info fly-out: info fly out has no obvious left-side border, white-on-white doesn't look clear. the reference side fly-out is background is #1e2228, not totally clear why we changed it to white in the first place? 30 min – 1 h
7. Update text style in testimonial quotes: This element takes up way to much space on the page, can we reduce the size? 15 min
8. Update Blog post logic: Let's prioritise information density and show 4 blog preview posts at the bottom of the pages, not 3. 2h — 4h 9 Vendors filters update. On the smaller mobile screen the list of architectures becomes scrollable, which is a problem because the user might not see what architecture is selected without scrolling. We don't want the list of architectures to scroll horizontally under any circumstances. 15 min
9. Sync the current arch slide with filter in vendors section. 15 – 30 min
10. in post card reserve 2 lines for header to keep read button aligned. For short ones put leave free space and trancate the long ones. and post date update. 30min – 1h

Waiting for design:

• Update acrh section. I think we're going to have to make the architecture diagrams much smaller. Probably side-by-side with the text. Hard to estimate, no final design provided.
• Blog index page hero section and nav bar both have a white background, which looks a bit strange. Can we give the navbar a background colour to distinguish it from the hero?
• Navbar doesn't look quite right to me yet. Buttons shouldn't underline of hover. Can we re-think the hover state please?_ we can change color to light blue like links in text section.

To be discussed

• [x] _1. Interactions: Did we discuss having the architecture diagram that's shown in the carousel linked to the selected architecture table, and visa versa? we have no direct instructions about it, also there was a an idea in issues. So here we will implement any logic you like.

• [x] 2. I was expecting the technology timeline to "slide" + I don't like that the text "fades" in on the timeline when selected, can we turn that effect off please? + Between the buttons on the timeline, there's an unclickable gap between each one that confused me, can we make the anchor tags butt up against one another so there are no unclickable areas on the timeline please? – we have no discussion how this section will perform in action, so you can describe it or show the example and we will implement it._

moved this points to can be done now

[enclave-alistair]

@ShvetsBy, regarding this item:

Remove the fade-in animation on the page title as we scroll, it can just appear without animation – we need demo.

Currently the top bar fades in and out as an overlay as you scroll down the page, which looks a bit strange, and causes some odd fade timing problems as you scroll. It would be simpler if the navbar just snaps in once the top-bar is out of view, rather than fading in.

I've attempted to capture the problem, which is seen if you scroll up and down the page.

https://user-images.githubusercontent.com/67738909/158842614-955c09fe-f3f6-417f-b4b4-2b69d715b088.mp4

[enclave-marc-barry]

• [x] On the smaller mobile screen the list of architectures becomes scrollable, which is a problem because the user might not see what architecture is selected without scrolling. We don't want the list of architectures to scroll horizontally under any circumstances

[ShvetsBy]

ok, we will find a solution during design session with Dan

[ShvetsBy]

Design updates

• [x] Images: Reduce border radius on images in blog post body (currently 30px, please change to 5px). Go to reduce all images border-radius. 30 min – 1 h
• [x] Buttons styling: Why is the hover state for the "show full vendor list" button on the homepage a rainbow effect hover state? Please change the button hover state style back to match the reference site. 15 min
• [x] Buttons styling: Please remove drop shadows from all buttons, if in doubt defer to the reference site. Also update input in subscribe in same style. 15 min
• [x] Buttons styling: The buttons for each architecture, when selected have a white background, I don't think this looks right. None of our other buttons have a white background? It's not so clear to me that an architecture is selected + When an architecture button is selected, the width of that button shouldn't change change as the text becomes bold 15 min
• [x] Size and alignment for icon menu items. All of the icons (i.e. navbar, footer) look too large for the text which is next to them. Check the center vertical alignment. 15 min
• [x] 9 Vendors filters update. On the smaller mobile screen the list of architectures becomes scrollable, which is a problem because the user might not see what architecture is selected without scrolling. We don't want the list of architectures to scroll horizontally under any circumstances. 15 min
• [x] Update text style in testimonial quotes: This element takes up way to much space on the page, can we reduce the size? 15 min
• [x] Update Blog post logic: Let's prioritise information density and show 4 blog preview posts at the bottom of the pages, not 3. 2h — 4h
• [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/20 30min - 1h
• [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/16
• [x] Update acrh section. I think we're going to have to make the architecture diagrams much smaller. Probably side-by-side with the text. Hard to estimate, no final design provided. 2-4 h
• [x] Blog index page hero section and nav bar both have a white background, which looks a bit strange. Can we give the navbar a background colour to distinguish it from the hero? 15 min
• [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/18
• [x] Filters in arch sections. Remove jumping between active and not active states
• [x] update paddings between timeline slides up to 32px;
• [x] Between the buttons on the timeline, there's an unclickable gap between each one that confused me, can we make the anchor tags butt up against one another so there are no unclickable areas on the timeline please?
• [x] in post card reserve 2 lines for header to keep read button aligned. For short ones put leave free space and trancate the long ones. and post date update. 30min – 1h
• [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/21 15min
• [x] NIST mobile section layout issue
• [x] Google analytics check the way it implemented
• [x] update background under hero curve
• [x] Info fly-out: info fly out has no obvious left-side border, white-on-white doesn't look clear. the reference side fly-out is background is #1e2228, not totally clear why we changed it to white in the first place? 30 min – 1 h
• [x] Navbar doesn't look quite right to me yet. Buttons shouldn't underline of hover. Can we re-think the hover state please?15 min

[ShvetsBy]

1. Where to set the border timeline text should disappear?
2. Filters in arch sections keeps to be jumping with new design.
3. mobile nist section fails
4. where to check hover effects in top menu in figma?

[enclave-alistair]

@ShvetsBy, do the above need input from @DanPinn?

[DanPinn]

• [x] ## 4. where to check hover effects in top menu in figma?

Okay, set up a new frame with states for top menu links (both dark and light) - Figma Frame

[DanPinn]

• [x] ## 1. Where to set the border timeline text should disappear?

Happy with the current placement/border where the text disappears, my only suggestion would be more spacing/padding between each timeline event - there are couple with longer text that almost run into one another (2000-2003 & 2015-2017) just need a bit more space between them (maybe 32px)

[DanPinn]

• [x] ## 2. Filters in arch sections keeps to be jumping with new design.

I've updated architecture filter element, in all 3 states I've used H4 font style so there is any movement - Updated Buttons in Figma

[DanPinn]

Set up the spacing between Architecture section for show 'ALL' - Figma Frame

Added in spacing of 70px either side of 1px divider.

[ShvetsBy]

collect actual tasks in one comment not to scroll to the middle every time:

• [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/24
• [x] Add spacing and dividers to vendors section
• [x] https://github.com/zerotrustnetworkaccess/zerotrustnetworkaccess.info/issues/15