User Experience & Design

Ideen & Anstöße für eine durchdachte Kreation und innovatives UX Design.

Nur Inhalte zu folgenden Themen:

The Vanilla Javascript Repository

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und gleich noch ein Linktipp für all diejenigen, die wie ich, nur ungern jQuery einsetzen und ihre Seiten dadurch aufblähen oder verlangsamen. Unter Vanilla List gibt es eine optisch sehr ansprechende Sammlung von Skripten, die auf Vanilla JS aufbauen und viele unserer Anwendungsfälle abdecken können. Sehr schön ist auch die direkte Anzeige davon, ob eine …


Beitrag lesen
23.
Sep.
2016

lory

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23.
Sep.
2016

PhotoSwipe: Responsive JavaScript Image Gallery

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Ich bin gestern auf eine ziemlich geniale Lightbox-Lösung gestoßen: PhotoSwipe. Diese baut auf Vanilla JS auf und ist auf hohe Performance und die mobile Verwendung ausgelegt, bei der ja doch ziemlich viele Lightboxen scheitern oder von uns sogar deaktiviert werden. Und trotz all dieser Features sind das Skript und die dazugehörigen Styles sehr klein was …


Beitrag lesen
22.
Sep.
2016

font-face rendering Problem

Autor: Steven Schöning


User Experience & Design


Vielen ist bestimmt bekannt, dass Schriftarten auf Mac oder iOS anders dargestellt werden. Hier gab es einen Interessanten Beitrag, der sich mit dem Problem befasst und es einfach löst. Ihr müsst einfach diesen Styling hinzufügen: -webkit-font-smoothing: antialiased; Laut der Quelle ist es nicht möglich den Styling Global auf den body zu setzen, doch anscheinend ist …


Beitrag lesen
24.
August
2016

Display Flex

Autor: Philip Dumas


User Experience & Design


Folgende Problemstellung: Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine „ul“, die einzelnen Navigationselemente „li“s. Weisst man dem Suchformular hier nun width:100% zu, so …


Beitrag lesen
13.
Juli
2016

Boah, Newsticker sind doch so…. 2016

Autor: Benedikt Keller


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29.
April
2016

WebKit Sibling Bug

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Bei kleineren Anpassungen in einem unserer Projekte ist heute im alten Standard-Browser von Android ein Bug[1] aufgefallen, der dazu führte, dass die Listenelemente mit initial verstecktem Inhalt diesen beim Anklicken nicht anzeigten. Nach einer kurzen Recherche bin ich hier auch auf die Lösung gestoßen, den Checkbox Hack on Mobile Webkit[2]. Klingt fies, ist aber nur …


Beitrag lesen
13.
März
2015

Webtypobuch

Autor: Benjamin Hofmann


User Experience & Design


Das Webtypobuch gibt es ab jetzt kostenlos zum Download unte http://webtypobuch.de/ Typografie ist ein Thema, das zahlreiche Bücher füllt. Eines davon hat der Webdesigner und -entwickler Gerrit van Aaken geschrieben. Er brachte schon 2012 das Webtypobuch heraus, das auf knapp 150 Seiten sehr kompakt und umfangreich über Typografie im Allgemeinen, vor allem aber über Webtypografie im …


Beitrag lesen
25.
Februar
2015

kraken.io: Einfaches Web Interface zur Bild-Optimierung

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Auch wenn wir inzwischen vermehrt skalierbare Iconfonts oder SVG-Grafiken einsetzen, so kommt es doch immer wieder vor, dass wir auch Rastergrafiken in den Formaten JPEG, GIF oder PNG im Layout einsetzen. Was wir aber allzu oft übersehen ist, dass man bei diesen einiges an Dateigröße sparen kann. Und das kommt inzwischen nicht nur denen zugute, …


Beitrag lesen
28.
Nov.
2014

AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23.
Juli
2014