Closed openmindculture closed 1 year ago
pragmatischer Fokus auf eine vollständige deutschsprachige Vorschau mit allen Inhalten, die 99% mit den statischen Designs übereinstimmt, dann Dekoration und Mikroanimationen, alles weitere (Dynamisierung, Mehrsprachigkeit, technologische Nachhaltigkeit) ggf. zurückstellen sofern es sich nicht "nebenbei" ergibt...
[x] Development Enviroment läuft (zumindest auf Ubuntu Linux mehrfach gelöscht und neu aufgesetzt und Content neu importiert)
[x] 1. Stage / Preview Instanz: public beta auf preview url
[x] EcoGrader super Score
[x] A11y Barrierefreiheit in Ordnung?
angebote-meet-the-special-places
-> Content-Fehler, vermutlich enstanden Duplikate durch XML-Import.#angebote-style-visit > .offers__offer__card > .offers__offer__features__list
.stories__viewport
<div class="stories__viewport carousel__viewport">
[x] WebPageTest (hide results) (preview.kleiderordnung-berlin.de): OK !
[x] Printable Version / save as PDF:
[x] Mobile Version von Hand getestet
[x] JavaScript deaktiviert:
body.no-js
Klasse?[x] Ladeverhalten Lottie Animation, reproduzierbar schon bei emulated fast 3G connection throttling: zunächst wird das Fallback-Bild sichtbar, das verschwindet dann aber, bevor die Web Component Version geladen wird!
[x] Überbreite -> Horizontalscrollbar (Google Chrome 1692w mit bzw. 1673w ohne vertikale Scrollbar) Das ist nicht reproduzierbar auf schmaleren Viewports und auch nicht beim Herauszoomen aus der Seite, sondern beim hineinzoomen (Zoom: 110% dann aber erst wenn es breiter als vermeintliche 1894px breit ist). Eventuell eine defekte Widescreen-Anpassung? Der ursprüngliche Fall ist zumindest auf bs-local.com nicht mehr reproduzierbar?
Auf preview reproduzierbar bei 100% OHNE ZOOM z.B. bei 1759px Breite, konkret zwischeen ca. 1726 und 1768 px Breite (incl. seitliche Scrollbar). Das ist nicht nur in Google Chrome, sondern auch auf Vivaldi reproduzierbar. Zum Debuggen könte es hilfreich sein, die Devtools mal unter statt neben der Seite zu öffnen.
[x] Meine Mission: falsche Schriftart der mission_headline!
[x] fehlender Umbruch / Breitenbegrenzung beim CTA-Text unter der Mission
[x] Header Top Navigation Language Switcher DE / EN stimmt nicht für Unterseiten => außer auf der Frontpage wäre besser der standardmäßige von Polylang!
[x] Weitere Angebote / My Other Services:
[x] Kontakt:
[x] Stories:
get_the_content($resorted_post_id)
)[x] Instagram Feed:
[x] fehlende weiße Linie zwischen Feed und Kontakt-Sektion
[x] Erlaubnis-Kästchen "klebt" ohne Abstand an Kontakt-Sektion
[x] Erlaubnis-Kästchen Style passt nicht gut zur Website
[x] dokumentieren, welche Accounts an der Integration beteiligt sind (juicer, instagram, fb dev, google oauth? -> also auch welche Login-Methoden)
[x] Evaluation: Alternativer Dienst statt juicer.io? möglichst unkompliziert und ohne Insta/Facebook/Meta-Login angesehen u.a. flocker.com (will Anmeldung bei Insta Business Account), ScrapFly.io (noch nicht getestet), taggbox.com (dort wurden Bilderstapel zu Einzelbildern serialisiert, was nicht hilfreich scheint), und apify.com (Scraper Runner Agents oder was auch immer, sehr techie aufgemacht und bisher vielversprechend zumal auch auf öffentlich zugänglichen Daten Scraping statt proprietärer Login API basierend), letztlich scheint aber alles auf seine eigene Weise kacke zu sein.
[x] Verbindung der Dienstleister-API scheint nicht mehr gültig zu sein
[x] Lizensierung / Plan Upgrade: https://help.juicer.io/hc/en-us/articles/360040399531-How-to-get-rid-of-Juicer-ads-and-branding
[x] Platzhalterbild(er) für Instagram Feed
[x] optisch: gleiche Höhe wünschenswert um Layout Shift zu vermeiden
[x] inhaltlich:
[x] das 5-spaltige Layout sieht unschön bzw. ungewollt aus, wenn es umbricht, entweder haben wir alle untereinander (mobile roll-out) oder aber alle nebeneinander ggf. mit scrolling oder halt abgeschnitten. Im Design sind sie sogar immer alle nebeneinander und werden bloß entsprechend niedriger.
[x] once loaded, juicer instagram feed causes issues in axe dev tools and still looks somewhat unstyled / misstyled
CSS pseudo element content, either :before or :after, must only be used for decorative purposes. If you insert meaningful content using a :before or :after pseudo element, it is in violation of success criteria 1.3.1. Due to the inconsistencies in how assistive technologies interpret pseudo elements, they may be either completely ignored or misunderstood, causing confusion for your users.
[x] Textumbrüche unter anderem bei Intro Headline und Angebot Subnavigation
[x] Abstand fehlt zwischen Absätzen im Intro Text
[x] Abstand zu gering zwischen Angebot Subnavigation und erster Karte
[x] Abstand vermutlich zu groß zwischen Angebote, weitere Angebote, CTA
[x] Linkverhalten, Größe, Form und Platzierung der Hintergrundfarben Obere Navi Mouse Over / Tab States wäre vielleicht schön und stimmig, wenn sie in der aktuellen Farbe aber genau dieselbe Form wie der Kontakt-CTA-Button wäre.
[x] Layout / Scrollverhalten der Dekoration suboptimal
[x] Proportionen
[x] ausufernde Inhalte über vorgesehene Sektionen hinaus
[x] Aktuelles App / Fav Icon verifizieren bzw. aktualisieren
[x] App / Favicon nicht ganz schön und "k" schwer als solcher erkennbar / lesbar? (ggf. pragmatisch selbst in GIMP Pixel pushen?)
[x] Mehrsprachige / Englische URLs noch verbesserbar?
[x] Website Carbon Badge in Footer (live widget)
[x] Ecograder Score im Footer ("share" -> report result link)
[x] Waypoint-Markierung funktioniert nicht mehr und setzt keine URL Links was aber hilfreich wäre für die Umschaltung der Sprache
[x] neuer Autorinnenaccount im WP-Admin
[x] defekte interne Links:
[x] Waypoint Observer: top-Link als Canonical URL ohne Hash (und schon gar nicht direkt nach Aufruf der Seite und erst recht nicht so was unsemantisches wie #intro-keyvisual-mousetrap
!
[x] und wir wollen auch nicht die History beim Hin- und Herscrollen "zumüllen". 🤔 Gibt es eine Best Practice? bzw. wie macht das klassische Waypoint-System das denn? Wäre es pragmatisch, push state immer (nur dann zu machen)
[x] Nachladen der juicer styles funktioniert seit JS-Refactoring bzw. Security Verification nicht mehr zuverlässig (oder gar nicht mehr?) auf preview Instanz?
Juicer wrote:
Thank you for letting us know about the accessibility issues. I'm happy to report that we have already fixed the first reported one, where
<li>
elements contained<div>
's.Please find the updated embedding code on your Juicer account. When you log in, in the left-side menu, navigate to Embed in your site submenu and make sure to tick the Improved feed accessibility option which is located at the bottom of the menu. Please see the screenshot below for a reference.
As for your other remark, I have just created an internal ticket for this close button improvement to be implemented.
I will mark this ticket as resolved now, but please let me know if there are any other issues or improvement suggestions. We really appreciate this kind of feedback. 🙌
Preview:
[x] Shopping Tour: Foto fehlt => vermutlich Folgefehler, lässt sich nämlich gar nicht zuordnen!
[x] Mediathek funktioniert grundsätzlich und enthält das fehlende Foto, aber nicht bei Angeboten:
[x] Angebote: defekte Mediathek-Ansicht (leer bzw. nur das aktuelle Beitragsbild) bei Auswahl des Beitragsbilds
[x] Alternative zu TinyPNG finden
[x] weitere Angebote: Texte fehlten:
get_the_content($resorted_post_id)
in additional services loop => explicitly call setup_postdata($resorted_post_id)
in custom query loop[x] "Was du erhältst" deutsch in englischer Version
[x] ominöses helles Kästchen erscheint weiterhin beim Scrollen
[x] Deko-Elemente kleiner gegen
[x] Obere Navi Mouse Over / Tab States wäre vielleicht schön und stimmig, wenn sie in der aktuellen Farbe aber genau dieselbe Form wie der Kontakt-CTA-Button wäre, aber es gibt dazu tatsächlich ein übersehenes Design in Figma => Figma-Design umsetzen!
[x] Einzelansichten / Archivansichten für Custom Post Types:
is_single()
o.ä. anpassenjustify-content: space-around;
post
) Übersicht (Archiv) wie Teaser auf Startseite
[x] Insta Feed aktualisiert sich immer noch nicht, trotz Verbindung mit neuem Business Account via Juicer Backend
[x] Testimonial Fotos: blur Backgrounds (vgl. Mike)
[x] Testimonials + Katja
Intro overlaps text on MacBook Safari, Safari 16.5 on MacOS Ventura 1449 x 751, same on Safari 17 beta, but not on Safari 13 on Catalina and only partially in Safari 14 Big Sur.
Safari 16:
Safari 14:
Safari 13:
Symptoms: intro animation displaced too far from page top without compensating for that on the lower margin which might not be possible due to the special layout tricks we did for parallax perspective effects.
Safari 17 on MacOS Sonoma beta: inspect element "fixes" the problem when developer tools force a broad screen ratio, but it's still to far away from the top:
Can't reproduce in side view either:
Everything is fine outside the Lottie player's shadow DOM...
It works on those Mac browsers when we remove the
@media (min-height: 640px) {
.intro__keyvisual {
/* max-height: calc(100vh - 15 rem);
But what will happen in other browsers? Do we still need this max-height at all?
Single news template is broken on all devices
Footer Layout: unnecessary line break in ecology claim e.g. on MacOS Safari 16.5, 1449 x 751
Juicer reels als zusätzliche feed-Quelle adden; doppelte "News" Überschrift auf "alle News" Page; Layout bei unterschiedlichen Bildgrößen optimieren; Layout im Bereich zwischen Desktop/full und mobile noch suboptimal:
WordPress Admin Zuschnitt bei Upload Plugin? ist unnötig, das ist eine eingebaute Funktion im WordPress-Core.
Neues hilfreiches Plugin: Display Featured Image In Post List gegen die momentane Desoritiertheit beim Anblick einer Liste von Posts die alle mit kleinen Buchstaben beschriftet sind und wegen deutsch / englisch zudem recht ähnlich heißen.
Bearbeiten-Link ausblenden / verkleinern oder anderweitig wenig störend bauen
Restliche Follow-Ups in einzelnen Issues.
Konzeption / Design-Phase
Exploration Phase
Architecture / Strukturierung
Dynamisierung
Optimierung, Korrekturen und Anpassungen