kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Polypane Browser: Responsive Design Testing und Debugging

Das Testen und Debuggen von responsiven Layouts kann trotz moderner Browser-Landschaft und DevTools aufwändig werden. Wir haben seit einiger Zeit Polypane mit in unser Testing aufgenommen. Polypane ist ein kostenpflichtiger Browser (ab 9 Euro pro Monat pro User), der es u.a. ermöglicht eine Website in zahlreichen synchronisierten Viewports parallel zu benutzen.

Screenshot von Polypane
kulturbanause.de in drei Viewports mit Simulationen für »Night Mode«, »Z-Index« und »Bright Sunshine«

Polypane bietet u.a. vordefinierte Sets an Viewports – z.B. die von Bootstrap, Material Design, Tailwind & Co. oder erkennt die Breakpoints eines Projekts. Auch das Testen des Dark Mode wird geboten, sowie zahlreiche »Overlays« zum Optimieren der Barrierefreiheit oder für CSS Debugging. Ein weiteres hilfreiches Feature ist das Anzeigen von Favicons und App-Icons, Meta-Informationen für Suchmaschinen und dem Open Graph bzw. Twitter Cards. Um nur die für uns wichtigsten Features zu nennen.

Direkter Link zur Produkt-Website

iOS vs. Android: Welche Unterschiede beim UX/UI Design beachtet werden müssen

kulturbanause gestaltet Benutzeroberflächen auf Basis von Web Technologien und keine nativen Apps. Dennoch ist es wichtig zu wissen, welche Regeln die Plattformen iOS und Android für die Gestaltung vorgeben. Einerseits, da die Grenze zwischen App und Web immer weiter verschwimmt, andererseits da diese Regeln für die Gestaltung von Design Systemen höchst relevant sind.

Der folgende Artikel listet detailliert die Unterschiede zwischen iOS (Human Design Guidelines) und Android (Material Design) auf. Angefangen bei Grid und Bildschirmgröße über einzelne UI-Komponenten bis hin zum Verhalten. Sehr interessant. 

Direkter Link zum Artikel

 

 

Wann Modal, Dialog, Lightbox, PopUp & Co. verwendet werden

Die Begriffe Modal, Dialog, Lightbox, PopUp usw. werden häufig nicht trennscharf verwendet. Doch es gibt klare Unterschiede, wann ein Dialog modal ist und wann nicht – was den Dialog zum PopUp macht und was zur Lightbox.

Raimund und Jonas haben vor einiger Zeit im t3n Magazin einen Artikel zu diesem Thema veröffentlicht. Die Nielson Norman Group zeigt in einen ausführlichen Beitrag, mit vielen Beispielen, ebenfalls anschaulich die Unterschiede auf.

Direkter Link zum Artikel

Component Names im Vergleich

Die Benennung von Komponenten kann zu den schwierigsten Aufgaben bei der Entwicklung von Design Systemen und Component Libraries gehören. Ziel einer sinnvollen Benennung sollte es sein, den Kompromiss zwischen dem – aus Sicht von UX/UI und Frontend – fachlich korrekten, und einem allgemein verständlichen Begriff zu finden.

Bei Komponenten wie dem »Button« sind sich die meisten Beteiligten noch einigermaßen einig. Aber was unter einem »Panel« oder einer »Toolbar« verstanden wird, kann mitunter weit auseinander klaffen.

Die Website Open UI fasst in einer Component Name Matrix die verwendeten Begriffe populärer Design Systeme zusammen und vergleicht die Häufigkeit.

Alles über die CSS-Eigenschaft »hyphens«

Mit der CSS-Eigenschaft »hyphens« wird die Gestaltung von typografisch ansprechenden Texten im Web deutlich vereinfacht. Lange Zeit wurde das Thema von den Browser-Herstellern vernachlässigt, obwohl eine funktionierende Silbentrennung eine sehr wichtige Grundlage für einen ausgeglichenen Blocksatz ist.

Mittlerweile wird die automatische Silbentrennung von vielen Browsern unterstützt -- wenn nicht vollständig, dann zumindest teilweise (siehe caniuse.com). Im Artikel »All you need to know about hyphenation in CSS« stellt der Designer und Typografie-Spezialist Richard Rutter die CSS3-Funktion »hyphens« detailliert und anschaulich vor.