Classic Theme Project Development

[openmindculture]

Konzeption / Design-Phase

• erledigt (done)

Exploration Phase

• Durchstich(e) und Sichtung von Inas Material um eventuelle Rückfragen zeitnah zu stellen!
  • Domain- und Font-Setup etc. dto.
  • Lottie Animations
  • Theme ist formal fehlerfrei und kann auf Testseite aktiviert werden
  • Kontaktformular mit Markup wie von WPCF 7 emittiert
• daher erstes Demo mit Hero Banner noch ohne finale CSS Struktur

Architecture / Strukturierung

• modulares CSS mit PostCSS bauen
• Strukturierung und Benennung:
  • Konzeption der Pages / Templates / Custom Post Types / Custom Fields
  • CSS Class Names; Properties / Variables (Design Tokens / Settings)
  • WordPress (block) class names
    • bei Bildern (Markup und Konfiguration aus Media Library / Upload)
    • Plugin generated content: Contact Form WPCF7
    • Plugin generated content: Complianz Datenschutz / Cookie Banner
    • Plugin generated content: Polylang
    • Header / Footer widgets, mobile menu
  • Tests erweitern, ebenfalls möglichst modular
  • Dokumentation parallel pflegen
• Mehrsprachigkeit mit Polylang (bzw. ggf. Alternative?)
• Formular

Dynamisierung

• Pflegbarkeit als WordPress Theme ist nicht dringend für Demo und ggf. Design-Rückfragen.
• Vorliegenden Content in WordPress einpflegen (Produktiv, Stage, localhost Development)
• Bidirektionalen Flow verifizieren:
  • Design (Theme, Plugin, Assets): Source Code -> Development -> Stage / Produktiv
  • Content (Text, Markup, Uploads, Plugin Configuration): Produktiv -> Stage / Development
• Umbau des statischen Prototypen in dynamische WordPress-Instanzen

Optimierung, Korrekturen und Anpassungen

• Testen/Validieren:
  • Stimmt das Aussehen mit dem Screenshot aus Figma überein?
  • Performance-, Best-Practice-, Sustainability Audits befriedigend?
  • A11y Barrierefreiheit in Ordnung?
• Test und Abnahme:
  • gefällt die Seite? Wie ist das Feedback? soll ggf. noch etwas geändert werden?

[openmindculture]

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...

[openmindculture]

• Development Enviroment läuft (zumindest auf Ubuntu Linux mehrfach gelöscht und neu aufgesetzt und Content neu importiert)

• 1. Stage / Preview Instanz: public beta auf preview url

[openmindculture]

Bugfixing- und Optimierungsphase

Cleanup / Code Style / Documentation / Testing

• Frontend- / Cross-Device-Testing
  • Follow-Up nächste Woche (Mittwoch 26.7. 14:00) weil iPhone 13
    auf BrowserStack nicht mit bs-local.com:1234 funktionierte
    -> Fehler konnte reproduziert aber noch nicht gelöst werden, wurde intern eskaliert
  • derweil andere BS-Devices und eigene echte Geräte testen
  • CodeceptJS Forenbeitrag weil Screenshot-Vergleich fehlschlug
    -> noch unbeantwortet, siehe Screenshot smaller than configured window size width
  • derweil manuell Screenshots bzw. Screenshot-Teile per Overlay mit Figma vergleichen (z.B. in GIMP)
• Linting / Prettier / PHP PSR Code Style Consistency
  • JavaScript nun formal korrekt
  • CSS nun formal korrekt (aber siehe TODOs im Code)-
  • PHP Code Style inkonsistent und functions.php chaotisch
    • Code-Style angleichen (nach PSR, nicht nach WordPress Code Style!)
    • Funktionen / Sektionen auslagern

Performance-, Best-Practice-, Sustainability Audits befriedigend?

• EcoGrader super Score

• A11y Barrierefreiheit in Ordnung?

  • manueller Test: Tab-Navigation
  • Axe Linter:
    • Document has multiple static elements with the same id attribute: angebote-meet-the-special-places
      -> Content-Fehler, vermutlich enstanden Duplikate durch XML-Import.
    • ul must only directly contain li, script, or template elements
      #angebote-style-visit > .offers__offer__card > .offers__offer__features__list
    • scrollable region must have keyboard access
      Element Location: .stories__viewport
<div class="stories__viewport carousel__viewport">
  • WAVE web accessibility evaluation tool alerts:
    • 1 x broken same-page link: next beim carousel slider:
      A link to another location within the page is present
      but does not have a corresponding target.
  • Lighthouse (localhost / bs-local.com im eigenen Browser):
    • unkritische localhost-spezifische Warnungen (kein https, bekannte console errors) irrelevant

• WebPageTest (hide results) (preview.kleiderordnung-berlin.de): OK !

• Printable Version / save as PDF:

  • ongoing tests: "save as PDF" !== "real printing"?!

• Mobile Version von Hand getestet

• JavaScript deaktiviert:

  • warum gibt es dann keine body.no-js Klasse?
  • Fallback-Animation nicht sichtbar
  • Instagram "erlauben" Buttons funktionslos; da ohne JS auch kein Juicer und somit kein externer Feed kommt, sollten sie dann gar nicht sichtbar sein

Visuell/Funktional

• 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!

• Ü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.

• Meine Mission: falsche Schriftart der mission_headline!

• fehlender Umbruch / Breitenbegrenzung beim CTA-Text unter der Mission

• 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!

• Weitere Angebote / My Other Services:

  • auf englisch nur 1 Item auf dem Preview-Server,
    auf localhost aber wie erwartet 3 Stück

• Kontakt:

  • Folge mir hat zu viel Abstand zu folgenden Social-Media-Links-Icons

• Stories:

  • Quote Grafik bei zweiter Story zu weit oben <- das ist gar nicht das Problem, aber das Layout und die Schriften stimmen trotzdem nicht mehr -> laut Figma korrigieren!
  • Überlappungen bzw. falsche Bildgrößen in Safari 10.1 auf MacOS Sierra (Folgefehler falscher Bildgrößen bei Stories)
  • weitere Überlappungen unterhalb der Sektion Stories bei schmalen Bildschirmbreiten auch in anderen Browsern
  • falscher Content: Titel korrekt, aber Texte darunter immer dieselben (get_the_content($resorted_post_id))

• Instagram Feed:

  • fehlende weiße Linie zwischen Feed und Kontakt-Sektion
  • Erlaubnis-Kästchen "klebt" ohne Abstand an Kontakt-Sektion
  • Erlaubnis-Kästchen Style passt nicht gut zur Website
  • dokumentieren, welche Accounts an der Integration beteiligt sind (juicer, instagram, fb dev, google oauth? -> also auch welche Login-Methoden)
  • 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.
  • Verbindung der Dienstleister-API scheint nicht mehr gültig zu sein
  • Lizensierung / Plan Upgrade: https://help.juicer.io/hc/en-us/articles/360040399531-How-to-get-rid-of-Juicer-ads-and-branding

• Platzhalterbild(er) für Instagram Feed

  • optisch: gleiche Höhe wünschenswert um Layout Shift zu vermeiden
  • inhaltlich:
    • manuell aktualisieren,
    • Idee / Plan für automatische oder 1-Click-Aktualisierung (siehe auch Refactoring + Automatisierung: Insta Placeholder, Critical CSS, Footer Links #21)

• 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.

  • once loaded, juicer instagram feed causes issues in axe dev tools and still looks somewhat unstyled / misstyled
    • buttons must have discernible text: close button has no text / title etc. => sufficient to add ::before etc.?
      (good TIL topic as well) NO!

  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.

  • post preview (on-page lightbox): remove black borders and gray backgrounds, style previous/next buttons and view on instagram button :
    use same style as story/testimonial carousel slider arrows
  • ul and ol must only directly contain li, script or template elements => file bug ticket / support issue
  • li elements must be contained in a ul or ol => dto.
  • lightbox context exceeds height, causes ugly scrollbars, we would rather want to cut / hide /scroll partial content but make sure the previous/next buttons are always on the same place on the bottom right
  • after closing the insta feed lightbox, we're suddenly at another scroll position on the page, as there is no waypoint (yet) for social media, we could rather use a "hidden" waypoint == anchor which is just not part of the main top navigation

• Textumbrüche unter anderem bei Intro Headline und Angebot Subnavigation

• Abstand fehlt zwischen Absätzen im Intro Text

• Abstand zu gering zwischen Angebot Subnavigation und erster Karte

• Abstand vermutlich zu groß zwischen Angebote, weitere Angebote, CTA

• 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.

• Layout / Scrollverhalten der Dekoration suboptimal

  • Proportionen
  • ausufernde Inhalte über vorgesehene Sektionen hinaus

• Aktuelles App / Fav Icon verifizieren bzw. aktualisieren

• App / Favicon nicht ganz schön und "k" schwer als solcher erkennbar / lesbar?
  (ggf. pragmatisch selbst in GIMP Pixel pushen?)

Funktional

• Mehrsprachige / Englische URLs noch verbesserbar?

• Website Carbon Badge in Footer (live widget)

• Ecograder Score im Footer ("share" -> report result link)

• Waypoint-Markierung funktioniert nicht mehr
  und setzt keine URL Links
  was aber hilfreich wäre für die Umschaltung der Sprache

• neuer Autorinnenaccount im WP-Admin

  • Konfiguration von Preferences und Dashboard Widgets

• defekte interne Links:

  • Shopping-Tour

• 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 !

• 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)
  - wenn jemand aktiv auf einen Anker-Link klickt
  - und wenn man es automatisch macht, dann immer nur den letzten automatischen ersetzen? aber wie unterscheiden?
  - alternative zu pushState wäre also location.href ersetzen. Nachteil: unwichtige überschrieben dann wichtige(re) (aktiv angeklickte oder auch angesurfte) Links?!

• Nachladen der juicer styles funktioniert seit JS-Refactoring bzw. Security Verification nicht mehr zuverlässig (oder gar nicht mehr?) auf preview Instanz?

Konzeptionell / Inhaltlich

• UX / UX Writing:
  • furchtbare Fehlermeldungen im Kontaktformular: hier ist von "Fehlern" die Rede. No way!
  • warum ist "E-Mail" ein Pflichtfeld bzw. warum ist das nicht wenigstens variabel "E-Mail oder Telefon"?
• neue Fotos siehe Notizen, anstehende Sessions im Hub und mit Mika und Krissi,
• englische Textänderungen von Mike
• Textänderungen nicht nur im Englischen:
  • Rechtstexte AGB auch!
• E-Mail-Adresse überhaupt veröffentlichen?

[openmindculture]

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. 🙌

[openmindculture]

Preview:

• Shopping Tour: Foto fehlt => vermutlich Folgefehler, lässt sich nämlich gar nicht zuordnen!

• Mediathek funktioniert grundsätzlich und enthält das fehlende Foto,
  aber nicht bei Angeboten:

• Angebote: defekte Mediathek-Ansicht (leer bzw. nur das aktuelle Beitragsbild) bei Auswahl des Beitragsbilds

  • ist das überall so? auch bei Gutenberg-Seiten und Posts? nein, funktioniert z.B. bei posts
  • Ist das ein bekannter Fehler? scheinbar nicht
  • verschwinden die bestehenden Bilder beim Speichern? nein
  • Ist das auf dem lokalen Dev-Server reproudzierbar? nein! zumindest nicht mit aktueller Version
  • dto. nach Upgrade auf 6.3 ?
    Aktuelle Version war, dank WP-Beta-Test-Plugin: WP 6.3-RC3
    • WP 6.3-RC3 + ACF 6.1.7
    • WP 6.3-RC3 + ACF 6.2.0
    • WP 6.3 stable + ACF 6.2.0
  • Regenerate Thumbnails Plugin hat nichts verändert.
  • Das Problem verschwand, nachdem ich die Plugins TinyPNG und W3 Total Cache deaktivierte.
  • TinyPNG wieder aktivieren... => Problem wieder da!

• Alternative zu TinyPNG finden

  • smush von WPMU (nicht im freien Verzeichnis?)
  • reSmushIt (Trittbrettfahrer mit ähnlichem Namen oder seriös?)
  • eWWW (weitere kostenlose Empfehlung noch vor WPMU smush im Freiburger Blog)
    https://www.website-freiburg.de/die_8_besten_wordpress_plugins_zur_bildoptimierung/
    • nun fehlen die Bilder bei Stories (Testimonials) nach Änderung der Bildoptimierung 😡
    • nach deaktivieren des Optimierungs-Plugins stimmt wieder alles
    • grundsätzlich verstehen und lösen
    • und/oder
      • nochmal alle Bilder löschen,
      • Optimierungs-Plugin erneut aktivieren,
      • alle Bilder ggf. erneut hochladen und neu zuweisen.
      • Follow-up in der Hoffnung auf Hilfe von außerhalb:
        • Media Library empty or only missing item(s) when invoked from custom post type set featured image button #24
        • https://wordpress.org/support/topic/media-library-empty-or-only-1-item-when-invoked-from-custom-post/
        • https://wordpress.stackexchange.com/questions/418213/media-library-empty-or-only-1-item-when-invoked-from-custom-post-type-set-featur

• weitere Angebote: Texte fehlten:

  • empty get_the_content($resorted_post_id) in additional services loop => explicitly call setup_postdata($resorted_post_id) in custom query loop

• "Was du erhältst" deutsch in englischer Version

• ominöses helles Kästchen erscheint weiterhin beim Scrollen

• Deko-Elemente kleiner gegen

  • gegenseitige Überlappung
  • oberes Herausragen mit resultierendem oberen Anschnitt

• 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!

• Einzelansichten / Archivansichten für Custom Post Types:

  • Refactoring von Abfrage-Loops:
    • die eigentliche Single-Koponente als separates Include auslagern,
    • ggf. Variablennamen anpassen
    • ggf. Überschriften-Ebene (H3 -> H1) entsprechend von is_single() o.ä. anpassen
  • Anker-Link(s) anpassen, die auf andere Seiten zeigen (konkret: CTA-Button "Kontakt" analog zu Kontakt-Button im Header)
  • CSS anpassen: Sektion bzw. Artikel mittig ausrichten, z.B. mit justify-content: space-around;
  • Title-Tag korrigieren: warum hat das immer den Titel des ersten ausgegebenen Loop Entries?
  • News (post) Übersicht (Archiv) wie Teaser auf Startseite
    • selbes Include File, nicht redundant!
    • Limit-Anzahl parametrisieren oder pragmatisch mit Archive vs. Frontpage-Abfrage
    • Archiv News Kategorie allgemein: http://bs-local.com:1234/category/allgemein/
  • dto. Einzelansicht ungekürzt und mit etwas größerem Beitragsbild, z.B.
    http://bs-local.com:1234/en/talks-and-inspiration-at-green-fashion-fair-berlin-/114/
  • Angebote wie Startseite
    • selbes Include File, nicht redundant!
    • Limit-Anzahl parametrisieren oder pragmatisch mit Archive vs. Frontpage-Abfrage
    • Kategorie Angebote: http://bs-local.com:1234/offer_section/angebot/
    • Kategorie weitere Angebote: http://bs-local.com:1234/offer_section/weitere/
  • Einzelansicht mit gleichem Layout
    • evtl. sogar einheitlich, also "weitere Angebote" auch im großen Stil mit Kärtchen
    • weiteres Angebot: http://bs-local.com:1234/offer/gutscheine/
    • großes Angebot: http://bs-local.com:1234/offer/style-visit/
  • Testimonials und Kategorien benötigen das nicht, aber was passiert bei Aufruf der üblichen URLs?
    • Das soll nicht kaputt aussehen.
    • Das wollen wir gar nicht im Google-Index haben.
    • Also weiterleiten per Custom HTTP Header? oder lässt sich das in Theme Functions oder CPT-Definition abschalten?
    • Archiv Kategorien ist nicht hier http://bs-local.com:1234/category/ - aber wo dann?
    • Archiv Angebotskategorien gibt es ebenfalls nicht, zumindest nicht hier: http://bs-local.com:1234/offer_section/
    • (bereits deaktiviert: Tags: http://bs-local.com:1234/tags )
  • Suche-URL, z.B. http://bs-local.com:1234/?s=an
  • 404 Not Found, z.B. http://bs-local.com:1234/gibts.net

• Insta Feed aktualisiert sich immer noch nicht, trotz Verbindung mit neuem Business Account via Juicer Backend

• Testimonial Fotos: blur Backgrounds (vgl. Mike)

• Testimonials + Katja

[openmindculture]

Site Owner DX

• trotz custom head die Admin Bar oder einen Seite-Bearbeiten-Link / Icon if is logged in anzeigen
  gegen unnötig stressiges "Wie kann ich denn jetzt meine Seite bearbeiten?"
• Dashboard-Widget Links größer und eventuell auf Pseudo-Seitenvorschau platzieren als Edit-in-Place

[openmindculture]

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?

[openmindculture]

Single news template is broken on all devices

https://preview.kleiderordnung-berlin.de/gute-gespraeche-und-viel-zu-sehen-unterwegs-auf-der-green-fashion-fair-berlin-101/

[openmindculture]

Footer Layout: unnecessary line break in ecology claim e.g. on MacOS Safari 16.5, 1449 x 751

[openmindculture]

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:

• konkret sollte sich vieles auch auf etwas kleineren Bildschirmen noch mehr wie Desktop verhalten!
• Surface Bildschirmgröße laut XDA Developers: 1920 x 1280 (Surface Go 3 viewport size 10.5) aber so sieht das im Test nicht aus. Egal, es muss jedenfalls auf etwas kleineren Bildschirmen noch schöner funktionieren;
• konkret auch überlappen sich Bilder und Angebotskarten unnötigerweise in den mittleren Auflösungen,
• und es springt zu früh auf 100% Handy Layout um, anstelle noch etwas länger den Karten-Look zu behalten.

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.

[openmindculture]

Bearbeiten-Link ausblenden / verkleinern oder anderweitig wenig störend bauen

[openmindculture]

Restliche Follow-Ups in einzelnen Issues.