search

ampproject / amp.dev

The AMP Project Website.
https://amp.dev
Other
582 stars 694 forks source link

Zazu #6237

Closed Zazuapp closed 1 month ago

Zazuapp commented 2 years ago

🛠️ Request to Add Third-Party Story Creation Tool/CMS/Platform

Story creation resource name

Zazu

Type

Use [x] to mark a selection:

URL

https://zazuapp.co/

Image

http://zazuapp.co/wp-content/uploads/2021/11/Zazu-Slides-RedDot-05.png

Description

Design award-winning Web Story builder. Rely on the most intuitive editor to build Stories with your team or automate the entire process.

List of Stories

sdenaro commented 2 years ago

Confirming I am taking this one.

sdenaro commented 2 years ago

There are five major issues and a few minor ones.

1) Many stories are reporting an issue with the canonical links but the links seem to be correct but the URLs are slightliy off, as an example:

linkrelcanonicalisok (FAIL) actual:

https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/**619b9946bebb3800136ecd2d**/Stories/12b531b5-2519-4b03-b3e8-6df3d96211cd/Amp/b344a396-680c-49bf-bf1f-5099e8fb7eb8.html

expected:

https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/**619b998abebb3800136ecd34**/Stories/12b531b5-2519-4b03-b3e8-6df3d96211cd/Amp/b344a396-680c-49bf-bf1f-5099e8fb7eb8.html

I made the difference bold.

This MUST be fixed.

2) The images listed as portrait are actually square. Please look at the poster-square-src tag,

[poster-portrait-src = {"url":"https://zazuapp.co/wp-content/uploads/2021/09/logo_orange-1.png","width":4167,"height":4167,"mime":"image/png"}] failed [isPortrait]

3) Some images have the incorrect aspect ratio

As example in this story:

https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b998abebb3800136ecd34/Stories/201290e9-5121-4211-879f-b5e327fd31e9/Amp/b6438e54-d218-4ae4-8b3b-811a57b1290e.html

This image

https://media.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Media/a3d72aa7-0e25-4f99-b5db-e3ed8b83aac5.octet-stream

Has an aspect ratio of 480/202 = 2.37 that does not match the specified ratio of 61/26 = 2.34

4) Some videos are above 4mb

As an example

https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b998abebb3800136ecd34/Stories/66c48d2c-317c-470c-90d7-b49ce973ccfb/Amp/0a4d37ef-6e6f-4b5d-b4db-d81fdd9d33dd.html

Has this video that is over 4MB https://media.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Media/a3392c17-5482-4f5e-98de-17d3e66dcdfc.mp4

5) For the minor issues

a) I recommend adding <link href=https://cdn.ampproject.org/v0.js rel=preload> when loading AMP. In many cases this will provide a performance boost.

schemametadataisnews (WARN)

b) I strongly recommend adding Structured data.

@type is not 'Article' or 'NewsArticle' or 'ReportageNewsArticle'

I will be back at my desk in Jan to work on this.

Thanks

Zazuapp commented 2 years ago

Hello @sdenaro

We worked on the issues mentioned above and fixed the important ones, feel free to check the Stories URLs again:

On top of that, we are implementing structured data, it should hit production very soon.

Regarding keeping the videos below 4mb, we are working on some ideas, however we saw on other Story Creation Tools listed on Google page that they don't always keep the videos 4mb as well, depending on the original size, so we guessed that this point is slightly less priority to appear on the list.

Looking forward to hearing your feedback, hopefully now the requirements are met.

Thanks

sdenaro commented 2 years ago

I will have time to work on this on Friday. I will give you an update after, thanks.

sdenaro commented 2 years ago

Story work was pushed back a bit, I will block off time to finish this in by the end of next week.

sdenaro commented 2 years ago

I re-ran on this list

And I am still seeing some issues.

  1. Canonical links do not always match.

For: https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b998abebb3800136ecd34/Stories/9c13b054-26fe-4326-a380-8c33373539f7/Amp/26af597f-893e-4367-9ad3-fdf07ecf82da.html

actual: https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b9946bebb3800136ecd2d/Stories/9c13b054-26fe-4326-a380-8c33373539f7/Amp/26af597f-893e-4367-9ad3-fdf07ecf82da.html,

expected: https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b998abebb3800136ecd34/Stories/9c13b054-26fe-4326-a380-8c33373539f7/Amp/26af597f-893e-4367-9ad3-fdf07ecf82da.html

  1. The portrait ratio should be 3/4 (0.75), the links are using 720/1280 which is .5625. 960/1280 would be 3/4.

  2. For the video issue, can you see if this guidance works for you?

https://blog.amp.dev/2021/08/24/better-video-performance-in-web-stories/

Thanks

Zazuapp commented 2 years ago

Hi @sdenaro

Some of the Stories in the list were not updated with last changes, I just updated the list with new Stories (content is same but they are brand new Stories containing the fixes you pointed out).

Looking forward for the feedback!

sdenaro commented 2 years ago

I think I have time next week. Great to hear you're using cache for the video content.

Thanks

Zazuapp commented 2 years ago

Hey @sdenaro When can we expect some feedback on this side?

Thanks

sdenaro commented 2 years ago

I am back in the office and can loop back now.

sdenaro commented 2 years ago

Were the poster images updated? It looks like they are still 720/1280 which isn't the correct ratio.

I also found this in the dev tools console:

https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b998abebb3800136ecd34/Stories/3f06e5c6-8226-4380-9af7-6957d92e46b7/Amp/ae81e474-4f0e-47fd-81c9-61dc1183c125.html:3:4516 

The text inside tag 'style amp-custom' contains 'CSS i-amphtml- name prefix', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
Zazuapp commented 2 years ago

Hey @sdenaro

It seems that the list of Stories that you checked yesterday is still the old one from your comment. Those Stories are broken, we will delete them. The updated list is the one in the original comment, I updated all the links last time. For the sake of clarity, here is the updated list again:

Looking forward to your feedback

sdenaro commented 2 years ago

I'll have time this week

sdenaro commented 2 years ago

I am see this same issue here, which is what I was expecting. I am going to move this along in parallel with getting the issue resolved https://github.com/ampproject/amp-toolbox/issues/1311

sdenaro commented 2 years ago

I need you to update this story so the thumbnails meet the published minimums. 

Portrait: 640px x 853px
Landscape: 853px x 640px
Square: 640px x 640px

This story:

https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/480cb5b6-2cb5-4730-82f4-31e7c732f371/Amp/b3c5bb41-9f20-4547-9725-0ba19282d05f.html

Has 300px by 400px, 400px by 300px and 400px by 400px.

The tooling should have some kind of warning about this. You don't want your users publishing stories that have blurry images in discovery or in search results.

Thanks

Zazuapp commented 2 years ago

@sdenaro We just updated the thumbnail for the mentioned Story. Make sure to delete cache when you check so you have the updated version of the Story.

We will think of adding a warning on our tool, that's a good point, thanks!

Is there anything else we can do to resolve this ticket?

Thanks

sdenaro commented 2 years ago

Just re-ran testing, looks like the ratio issues are resolved. I do everything incognito so cache is usually not the problem. There are still some issues with mp4 being too large but that isn't an issue if you are caching the video.

I will put in a pr to add you in the next day or so.

thanks

Zazuapp commented 2 years ago

Hi @sdenaro

Thanks for the feedback. We are really looking forward to appearing on the Google tools list!

We saw the list of tools in the stories.google page is not listed alphabetically nor by the time of joining, so we would like to know how we can have our software listed in a higher position among the others? We work with big clients in the European ecosystem and put the user experience and the software interface front and center of every decision we make - which is also why we won the prestigious Red Dot Design Award in 2021 for best User Interface - and we are convinced that we are one of the most user-friendly web story tools out there.

Best

sdenaro commented 2 years ago

I closed https://github.com/ampproject/amp-toolbox/issues/1311 and looped back to re-run with clean environment

Using these stories:

  1. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/cfee6bbe-1cbc-4264-a3ff-294621527924/Amp/56abeadb-ec65-48d0-954d-67974da9f728.html
  2. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/84910072-e9bb-4cfb-8da7-03233380a7ca/Amp/2ef867b3-35db-445d-bcce-4da27e18f04c.html
  3. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/b1ce3a64-3fcd-4f0e-a558-f959f8b26ddf/Amp/d76af626-93c5-4196-a21d-0724b3cf48c0.html
  4. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/3bc0a049-d305-43aa-870f-e5bc6412c03b/Amp/8e29d6fc-316f-4450-a38d-5d20285ef0bc.html
  5. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/16da2220-5925-4ff4-a3c4-dd869ac2b46e/Amp/75a671f3-ddab-4ac3-95c4-f5be4c1e667f.html
  6. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/61aea12d-c79a-4fe5-ab6e-cc44d5a1c856/Amp/3dea61a7-b391-45ed-98c2-4e9c31204082.html
  7. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/783e2513-ffd5-4d7f-afd7-c181460bcf68/Amp/e8abc703-c674-4bae-b93b-63bfff70b40b.html
  8. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/34248313-0d91-4b64-a12f-ebfb566b6ab2/Amp/7d1957ae-45a4-4a56-8923-e3b3203af6b6.html
  9. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/0b7ae7cc-9943-40b7-b01c-ba035e51fb63/Amp/d6bc8483-298c-4527-8bc9-458d72c9a4c3.html
  10. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/480cb5b6-2cb5-4730-82f4-31e7c732f371/Amp/b3c5bb41-9f20-4547-9725-0ba19282d05f.html

I am still seeing the issue with images that are not sized correctly and/or do not have the correct image rations

  1. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/cfee6bbe-1cbc-4264-a3ff-294621527924/Amp/56abeadb-ec65-48d0-954d-67974da9f728.html

The poster-portrait-src should be 640x853px or larger

This image https://media.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/cfee6bbe-1cbc-4264-a3ff-294621527924/SEO/db42ad86-8b5c-49d5-b908-03e5e6a65df8.webp

is 500 × 667 which is too small.

  1. https://stories.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/b1ce3a64-3fcd-4f0e-a558-f959f8b26ddf/Amp/d76af626-93c5-4196-a21d-0724b3cf48c0.html

The poster-landscape-src that should be 853x640px or larger

This image https://media.zazuapp.co/0f84a40d-ed07-492e-a32a-d8dafee676bf/Users/619b999dbebb3800136ecd3b/Stories/b1ce3a64-3fcd-4f0e-a558-f959f8b26ddf/SEO/4a647911-b56e-4a76-83b1-8c862e2a23ba.webp

is 720 × 540 which is too small.

This repeats in a few other stories.

I would suggest you add checks from the UI to prevent users from using images that are too small.

Thanks

Zazuapp commented 2 years ago

Hello @sdenaro

Thank you for the feedback. Our UI checks for poster images are being released soon as you suggested.

In the meantime the Stories are updated with correct image sizes and ratios. Indeed some Stories were still containing smaller images than recommended minimum size. Feel free to run the tests on the same list.

Thanks

Zazuapp commented 2 years ago

Hi, @sdenaro

Did you have time to check the list again? Is there anything we can do to speed up the process, as it's been 4 months already that this issue is opened?

Looking forward to hear from you,

Gaetan from Zazu

sdenaro commented 2 years ago

Gaetan,

I will be able to loop back to this next week.

I do need to provide 10 stories that meet the requirements when I put in the submission and create the pull request. Can you make sure you have ten urls with the correct image sizes?

Thanks

Zazuapp commented 2 years ago

@sdenaro

The latest URLs have the correct poster images size ratios and minimum sizes. Looking forward to your feedback!

Gaetan

sdenaro commented 2 years ago

I am confirming the image issues have been resolved. There should not be any other issues. I can create a PR after I update everything internally.

sdenaro commented 2 years ago

https://github.com/ampproject/amp.dev/pull/6350

powerivq commented 1 month ago

Completed.