Tag: webdesign

201417Nov

CustomScrollbar: Eigene Scrollbars auf Websites nutzen

Das Thema ist zwar nicht gänzlich neu, aber aus gegebenem Anlass war es an der Zeit, eine eigene Entwicklung anzufertigen: Die Rede ist von individuellen Scrollbars auf Websites, die per CSS angepasst werden können. Bis heute gibt es keine native Möglichkeit, das Aussehen der Scrollbalken in Webbrowsern anzupassen. Zum einen sind die Scroll-Elemente in Browsern unterschiedlich implementiert (Chrome etwa kommt mit einer eigenen Lösung) und zum Anderen sind die Bedienelemente vom Betriebssystem abhängig. Natürlich gibt es bereits etliche JavaScript- oder jQuery-Lösungen für eigene Scrollbars, doch diese fallen sehr unterschiedlich aus. Ich habe daher ein kleines Skript entwickelt, das auf das eigentliche Verhalten der Browser-Scollbars zurückgreift und keine zusätzlichen Berechnungen benötigt.

CustomScrollbar - Eigene Scrollbars auf Websites nutzen

Dementsprechend bleibt das jeweilige Verhalten des Browser-Scrollings, was das Beschleunigen und Abbremsen des Scrollbalkens beinhaltet. Es wird also lediglich das native Scollbar-Element ausgeblendet und ein eigener div-Container wird darüber gelegt. Enstanden ist daraus schließlich CustomScrollbar, eine kompakte JavaScript-Lösung für die genannte Problematik.

Weiterlesen...
201413Okt

AngularJS: Directives und Services für Material Design

Die neuen Material Design-Spezifikationen von Google dürften mittlerweile in aller Munde sein. Dabei handelt es sich um Design-Guidelines, die unter Anderem bei Android 5.0 für die Optik eingesetzt werden. Die Guidelines enthalten etliche Richtlinien und Empfehlungen für die Gestaltung von interaktiven Anwendungen, die auf mehrere Endgeräte ausgelegt sind. Das "Material Design" orientiert sich dabei stark an haptischen Gegebenheiten wie taktilem Feedback.
Mit dem Paper Elements Sampler des Polymer Projects stehen bereits Web-Komponenten bereit, die den Ideen des Material Designs folgen. Nun haben einige Core-Entwickler von AngularJS und Ionic das Ganze auch für AngularJS umgesetzt.

Material Design for AngularJS Apps

Eine Demo-Seite gibt es hier. Es handelt sich in erster Linie um erweiterte Attribute für bestehende DOM-Elemente und Directives/Services. Ein Beispiel für einen Material Design-Button:

  • <md-button noink class="md-button-colored">
  • Button (noInk)
  • </md-button>

Die Directives bestehen aus etlichen Bedienelementen wie Schaltflächen, Listen, Radio-Buttons, Slider, Header, Schalter, Tabs, Toolbars und vielem mehr. Viel Spaß beim Ausprobieren!

201415Sep

Chartist.js: Skript für responsive SVG-Diagramme

Sie heißen Highcharts, Raphaël, D3.js oder gar C3.js: Interaktive Chart-Bibliotheken, mit denen sich SVG-Diagramme aller Art erstellen lassen. Dank HTML5 ist die Darstellung von Vektorgrafiken und -Graphen kein Problem mehr und durch JavaScript lässt sich Interaktivität hinzufügen.
Dem Entwickler Gion Kunz genügte dieser Zustand allerdings noch nicht, denn er wollte eine SVG-Bibliothek, die noch einfacher zu konfigurieren ist und zudem auch mit responsiven Websites funktioniert. Daher schuf er das Skript Chartist.js, dessen Diagramme sich unter Anderem mit CSS und SASS anpassen lassen. Hier sind zudem Animationen möglich.

Chartist.js - Simple responsive charts

Weiterhin lässt sich die Bibliothek per JavaScript konfigurieren, wobei hier auf eine Art Media Queries zurückgegriffen werden kann:

  • var responsiveOptions = [
  • ['screen and (max-width: 640px)', {
  • showLine: false,
  • axisX: {
  • labelInterpolationFnc: function(value) {
  • return 'Week ' + value;
  • }
  • }
  • }]
  • ];

Dadurch sind auch skalierbare Auswertungen einfach umzusetzen, die zudem auf Smartphones und Tablets optimiert werden können. Mehr Infos gibt es wieder bei GitHub.

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.

201429Aug

Marka: Skript für animierte CSS3-Icon-Transformationen

Mit HTML, CSS3 und entsprechenden Stilen lassen sich diverse Symbole erzeugen. Mit etwas JavaScript können dann animierte Transformationen durchgeführt werden, die beispielsweise an ein Klick-Ereignis gekoppelt sind. Wofür solche Transformationen gut sein können, ist beispielsweise in Googles Design Guidelines für das neue Material Design zu sehen. Auf mobilen Geräten können derartige Animationen verwendet werden, um ein verbessertes Verständnis der verschiedenen Navigationsebenen zu ermöglichen.
Mit Marka steht eine kompakte JavaScript/CSS3-Lösung bereit, mit der sich genau solche Animationen erzeugen lassen.

Marka - Beautiful transformable icons

Mit der Bibliothek kommen 36 einfache Icons die per JavaScript animiert werden können. Neben Form-Transformationen können auch Farbübergänge erzeugt werden. Eine genaue Dokumentation findet sich hier und das gesamte Projekt gibt es wieder bei GitHub.

201310Dez

Type Rendering Mix: Web-Schriftarten richtig glätten

Individuelle Schriftarten auf einer Website sind in erster Linie etwas Positives, da sie dem angedachten Design gerecht werden und für mehr Harmonie sorgen, wenn die gesamte Typografie entsprechend abgestimmt wurde. Allerdings werden Web-Schriftarten nicht in allen Browsern und Betriebssystemen gleich dargestellt. Ich hatte vor einiger Zeit berichtet, da seit Windows Vista und einer aktivierten Hardwarebeschleunigung das GDI-Rendering durch DirectWrite ersetzt wurde. Unter Mac OS X und iOS kommt das Font-Rendering "Core Text" zum Einsatz, das alle Schriftarten etwas kräftiger darstellt. Unter Android und Linux wiederum werden Texte durch FreeType angezeigt.
Um den verschiedenen Betriebssystemen und Browsern gerecht zu werden, kann das Skript Type Rendering Mix genutzt werden: Hiermit werden 2 CSS-Klassen auf das "html"-Element angewendet, die Aufschluss über das Font-Rendering (Rasterizer und Anti-Aliasing-Methode) geben.

Type Rendering Mix - Apply CSS based on the text rasterizer and antialiasing your browser is using

Wenn in einem Webdesign also eine eigene Schriftart verwendet wird, kann die CSS-Klasse "tr-coretext" beispielsweise so angepasst werden, das hier ein leichterer Schriftschnitt verwendet wird (font-weight). So kann in den unterschiedlichen Systemen ein einheitliches Schriftbild besser gewährleistet werden.

201308Dez

Headroom.js: Kopfleiste durch Scrolling ausblenden

Der Effekt dürfte mittlerweile schon auf der einen oder anderen Website gesichtet worden sein: Wird durch das Scrollen der Seite ein gewisser Punkt erreicht, verschwindet der Kopfbereich der Seite. Oft handelt es sich dabei um eine kompakte Navigation, die wichtige Elemente beinhaltet. Dieser Effekt kann also nützlich sein, wenn ein Menü innerhalb eines bestimmten Bereichs der Seite angezeigt werden soll.
Wer zu dem Effekt das passende JavaScript-Modul sucht, ist mit Headroom.js gut bedient.

Headroom.js - Hide your header until you need it

Das Plugin kann direkt in JavaScript, in Verbindung mit jQuery oder mit AngularJS verwendet werden. Es bietet verschiedene Optionen wie eine Toleranz, einen vertikalen Offset sowie Klassen, die beim Eintreffen der Ereignisse vergeben werden. Mehr Details gibt es bei GitHub.

201314Nov

Webdesign: Kostenlose Bootstrap-UI-Kits von PixelKit

Twitters Bootstrap-Framework zählt mittlerweile zu einem der beliebtesten CSS-Frameworks, die fertige UI-Komponenten, ein Grid-System, Glyphicons sowie JavaScript-Module enthalten. Inzwischen gibt es auch etliche Modifizierungen und Erweiterungen, die auf dem Framework aufbauen. Von PixelKit gibt es diesbezüglich fertige UI-Kits, die bei GitHub kostenlos heruntergeladen und eingesetzt werden können (CC- und MIT-Lizenz). Die UI-Kits enthalten Stile und Grafiken für alle denkbaren Standard-Komponenten wie Dropdown-Menüs, Login-Bereiche, Switches, Fortschrittsbalken, Kalender-Widgets, Slider, Video-Player, Tabs, Graphen, Suchfelder und Drehregler (Knobs).

Kostenloses PixelKit Bootstrap-UI-Kit - Vanilla Cream

Momentan gibt es 5 fertige PixelKit-Bootstrap-Themes: Vanilla Cream, Dark Velvet, Arctic Sunset, Modern Touch und Metro Vibes. Die UI-Kits verwenden Grafiken und sind nicht Retina-tauglich. Der Quellcode existiert in CSS- und LESS-Form.
Mittlerweile gibt es natürlich auch für Bootstrap-Themes einen Markt: Kostenpflichtige UI-Kits finden sich bei WrapBootstrap und kostenlos geht es mit Bootswatch.