Comments (12)
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...
from kleiderordnung-berlin.
-
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
from kleiderordnung-berlin.
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)
- Follow-Up nächste Woche (Mittwoch 26.7. 14:00) weil iPhone 13
- 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">
- Document has multiple static elements with the same id attribute:
- 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.
- 1 x broken same-page link: next beim carousel slider:
- 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
- warum gibt es dann keine
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
- auf englisch nur 1 Item auf dem Preview-Server,
-
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 #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!
- buttons must have discernible text: close button has no text / title etc. => sufficient to add ::before etc.?
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
- once loaded, juicer instagram feed causes issues in axe dev tools and still looks somewhat unstyled / misstyled
-
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?
from kleiderordnung-berlin.
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. 🙌
from kleiderordnung-berlin.
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:
-
weitere Angebote: Texte fehlten:
- empty
get_the_content($resorted_post_id)
in additional services loop => explicitly callsetup_postdata($resorted_post_id)
in custom query loop
- empty
-
"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
- Refactoring von Abfrage-Loops:
-
Insta Feed aktualisiert sich immer noch nicht, trotz Verbindung mit neuem Business Account via Juicer Backend
-
Testimonial Fotos: blur Backgrounds (vgl. Mike)
-
Testimonials + Katja
from kleiderordnung-berlin.
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
from kleiderordnung-berlin.
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.
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?
from kleiderordnung-berlin.
Single news template is broken on all devices
from kleiderordnung-berlin.
Footer Layout: unnecessary line break in ecology claim e.g. on MacOS Safari 16.5, 1449 x 751
from kleiderordnung-berlin.
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.
from kleiderordnung-berlin.
Bearbeiten-Link ausblenden / verkleinern oder anderweitig wenig störend bauen
from kleiderordnung-berlin.
Restliche Follow-Ups in einzelnen Issues.
from kleiderordnung-berlin.
Related Issues (20)
- Testimonial Stories Carousel UX
- language switch must return canonical home page
- Intro / Page Enhancements
- Mobile Usability issues and a11y Review HOT 3
- 404 missing preview image
- read more option HOT 2
- secondary calls to action
- calendly (icon link + ) integration
- content update: hub event news
- add calendly calendar appointments
- Web form / CTA usability
- contact button / notifications target on mobile/tablet HOT 1
- respect reduced transparency preference
- add scannable contact QR code
- Change ALL email addresses HOT 1
- broken footer link to partner MOEON
- fix translations
- duplicate feature line after click read more
- add optional sticker HOT 2
- content update: more testimonials HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kleiderordnung-berlin.