Benötigt man ein Interface-Element in verschiedenen Größen auf einer Website so kann dies schnell zu einer Vielzahl von CSS-Deklarationen und viel Fummelarbeit führen. Der folgende kleine Trick kann helfen, auch von Elementen mit komplexen Layout, schnell und einfach Varianten für Größen zu erstellen. Eigentlich nichts neues Die Maßeinheit em funkioniert so, dass bei Verwendung geschaut wird,…

weiterlesen

Warum Eine klassische Newsseite besitzt eine Vielzahl von Bildern und hat - so es denn auch was zu berichten gibt - einen größeren Umfang. Aktuelle Browser laden beim Aufrufen eines HTML-Dokumentes alle Bilder runter die enthalten sind. Am PC stört das wenige und ist seltener ein Nachteil, bei mobilen Websites bedeutet es aber das eine Menge Daten geladen werden, von denen ich…

weiterlesen

Um eine möglichst hohe Bildschärfe zu erzielen besitzen aktuelle Smpartphones eine hohe Pixeldichte. Damit Bilder dort entsprechend gut aussehen, benötigen diese eine höhere Auflösung, wie wir sie bei gleicher Größe der Darstellung vom Desktop gewohnt sind. Um jedem Device ein optimales Bild zu liefern und Resourcen nicht unnötig zu verschwenden in dem man immer ein großes Bild ausliefert, bietet sich…

weiterlesen

Was ist Flexbox? Flexbox ist eine Möglichkeit mit CSS3 Layouts zu gestalten. Im Grunde genommen ist es die erste richtige Möglichkeit mit CSS Layouts zu erzeugen, wenn man bedenkt das floats nie für das Gestalten von Layouts gedacht waren und sich nur mit Work-Arounds benutzten lassen (clearfix, ..). Neben Flexbox gibt es auch CSS3 Grid Layouts, aber diese sind im produktiven Einsatz aufgrund des schlechten Browser-Supports bisher…

weiterlesen

Mit Material Design hat Google eine einheitliche Designsprache geschaffen, die alle Produkte…

weiterlesen

Möchte man JavaScript Funktionen bei einer bestimmten Bildschirmauflösung ausführen, so bieten sich dazu verschiedene Techniken an. Beispielweise könnte man per window.outerWidth eine bestimmte Pixelbreite des Fensters in Erfahrung bringen und diese Abfragen. Nun ist es so, dass JavaScript Funktionen die auf einer bestimmten Auflösung basieren, häufig mit dem Design der Seite zu tun haben. Für die Steuerung des Designs…

weiterlesen

Möchte man interaktive Elemente auf einem Smartphone oder anderen Touch-Devices benutzerfreundlich machen, so bietet es sich an diese so umzusetzen, dass die User die komplette Fläche des Elements für eine Interaktion touchen können, statt nur ein kleines Icon oder Text. Problematisch wird es, wenn solch ein Element die komplette Breite des Screens einnimmt und der User beim darüber  scrollen mit dem Finger…

weiterlesen

Der HTML5 Meter-Tag

Möchte man eine grafische Darstellung für einen Wert erreichen der sich innerhalb einer bestimmten Range bewegt, zum Beispiel die Belegung eines Speichers einer App, ist der HTML5 Meter-Tag sehr praktisch. Dieser bietet zudem einige nützliche Features von Haus aus. Features Ohne zutun bekommt der meta-Tag eine brauchbare Optik und hat passende Attribute um diese mit dem aktuellen Wert, sowie…

weiterlesen

Effekte mit CSS-Filtern

CSS-Filter ermöglichen es mit einfachen CSS Deklarationen zahlreiche Effekte auf HTML-Elemente und Bilder anzuwenden. Zudem sind sie…

weiterlesen

Oft braucht man eine kleine Funktion um Elemente auf einer Website ein- und auszublenden. Beispielsweise für Detailinformationen zu einem Video oder Text. Kürzlich habe ich ein kleines Snippet geschrieben um genau solche Aufgaben zu erledigen und das per Data-Attributen flexibel zu konfigurieren ist. Das javaScript Snippet function revealSomething(triggerSelector,activeClass) { var revealTarget =…

weiterlesen