Kategorien
Design Responsive Design

Mobiles Webdesign: 5 mehr oder weniger gute Navigationskonzepte

Mobiles Webdesign hat seine Tücken. Die Gestaltung mobiler Weblayouts für Smartphones stellt Designer immer wieder vor Herausforderungen. Der wenige Platz, der auf den Geräten zur Verfügung steht, will sinnvoll genutzt sein – vor allem für die Inhalte. Die Navigation darf also am Besten gar keinen Platz wegnehmen, soll aber dennoch schnell und intuitiv auffindbar sein. Wir zeigen dir 5 Beispiele, wo man im mobilen Webdesign die Navigation überall unterbringen kann. Der letzte Ansatz lässt sich übrigens Ratzfatz umsetzen.

Kategorien
Design HTML/CSS

HTML5: Videos untertiteln mit dem Track-Element

Seit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich sogar Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machst du Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur Verfügung haben, zugänglich.

Kategorien
Boilerplates & andere Tools Programmierung

HTML5: Texte vorlesen lassen mit SpeechSynthesis

Was Navigationsgeräte schon lange können, können nun auch die Browser. SpeechSynthesis aus der Web-Speech-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich deine Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing

Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde genau messen kann. Mit der Navigation-Timing-API ist es zudem möglich, Ladezeiten einer Website anhand vordefinierter Messpunkte zu ermitteln. Dank der komplexen und teils präzisen Messmöglichkeiten können Entwickler gut feststellen, an welchen Stellen innerhalb einer Anwendung es hakt.

Kategorien
Design HTML/CSS

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.

Kategorien
Design HTML/CSS

HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht

Zwar gibt es mit document.createElement() und anderen entsprechenden Methoden eine Möglichkeit, um per JavaScript HTML-Elemente zu erzeugen und dem DOM-Baum hinzuzufügen – komfortabel und übersichtlich ist das jedoch in der Regel nicht. Gerade ab einer gewissen Komplexität der zu erstellenden Elemente kann man schon mal den Überblick verlieren. Das HTML5-Template-Element soll für Abhilfe sorgen.

Kategorien
Betriebliches E-Business Workflow

Support im Netz: 4 Ticketsysteme im Test

Wer Apps oder andere Anwendungen entwickelt, wird früher oder spät mit Supportanfragen konfrontiert werden und auf diese reagieren müssen. Ob es Probleme bei der Bedienung oder handfeste Programmierfehler sind, als Entwickler beziehungsweise Anbieter ist man gefordert, auf alle Anfragen eine Antwort und gegebenenfalls eine Lösung zu finden. Um dabei den Überblick nicht zu verlieren und effizient arbeiten zu können, lohnt es sich, auf ein Ticketsystem zu setzen, welches beim Support unterstützt.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Design Best Practice: Darauf musst du beim Einsatz von Stockphotos achten

Fotos spielen eine wichtige Rolle im Grafik- und Webdesign. Sie lockern auf, vermitteln Stimmungen und Eindrücke und regen zum Lesen an. So sind Fotos in Websites ein unverzichtbares Mittel der Kommunikation. Da man nicht immer das passende Bild zur Hand hat und dieses oft auch nicht selbst schießen kann, gibt es Stockphotos. Aber was gilt es beim richtigen Einsatz des Materials aus fremder Linse technisch zu beachten?

Kategorien
HTML/CSS

Gewusst wo: Wissensquellen zu HTML und CSS

Die beiden Auszeichnungssprachen HTML und CSS sind unverzichtbar für das World Wide Web und jede Website. Auch wenn du mit Anwendungen wie Dreamweaver arbeitest, kommst du ohne Kenntnisse in diesen Sprachen nicht sehr weit. Aber natürlich musst du nicht jedes Element und jede Eigenschaft kennen. Du solltest nur wissen, wo du dich schlau machen kannst. Daher haben wir hier ein paar nützliche Wissensquellen zu HTML und CSS für dich.

Kategorien
Design HTML/CSS

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.

Kategorien
Betriebliches E-Business E-Commerce Technik

Bequem zahlen: Die wichtigsten Anbieter von Zahlungssystemen für deinen Online-Shop

Mit der Registrierkasse kommst du beim eigenen Online-Shop nicht weiter. Hier sind Zahlungssysteme gefragt, die für den Käufer einerseits einfach und bequem zu bedienen sind und andererseits seine Zahlungsdaten sicher und geschützt verarbeiten. Für den Shopbetreiber ist eine unkomplizierte und sichere Abwicklung entscheidend.

Kategorien
Design HTML/CSS

CSS-Transitions: Timing ist alles

Mit CSS3 kannst du Animationen ohne Flash und Javascript erstellen. Dabei beeinflusst du den zeitlichen Ablauf deiner Animation recht komfortabel. Unter Verwendung der Eigenschaft „transition-timing-function“ definierst du unterschiedliche Abläufe – mit und ohne Beschleunigung.

Beschleunigen und abbremsen

Neben der Einstellung „linear“, bei der eine Animation kontinuierlich dieselbe Geschwindigkeit hat, lassen sich Animationen auf unterschiedliche Weise beschleunigen und abbremsen. Die Standardeinstellung für eine Animation ist „ease“. Sie sorgt für einen langsamen Start der Animation mit Beschleunigung zur Mitte und anschließendem Abbremsen zum Ende hin.

Neben der einfachen „ease“-Beschleunigung gibt es weitere Varianten. Der Wert „ease-in“ sorgt für einen langsamen Start der Animation, die dann linear fortgesetzt wird. Bei „ease-out“ wird die Animation linear gestartet, am Ende erfolgt ein Abbremsen der Animation.

Zu guter Letzt sorgt der Wert „ease-in-out“ für einen langsamen Start mit nachfolgender Beschleunigung und Abbremsen am Ende der Animation.

Individueller Ablauf

Statt auf vorgegebene Abläufe mit den genannten „ease“-Werten zurückzugreifen, kannst du Animationsabläufe auch individuell festlegen. Hierzu dient die Einstellung „cubic-bezier“. Wie der Name zutreffend vermuten lässt, wird hierbei eine Bézierkurve angegeben, die den zeitlichen Ablauf der Animation definiert. Eine Bézierkurve definierst du über verschieden viele Punkte. Die kubische Bezierkurve, die hier verwendet wird, habe ich über vier Punkte definiert.


Bezíerkurven aller vorgegebenen Werte für die Timing Function

Der erste Punkt P0 gibt die Startposition der Kurve an. Die Richtung, die die Kurve einschlägt, wird  mit dem zweiten Punkt P1 definiert. Der dritte Punkt P2 gibt die zweite Richtung der Kurve an, die schließlich im vierten Punkt P3 mündet. Zur Definition einer Bézierkurve für den Animationsablauf werden lediglich die beiden Richtungen angegeben. Der Startpunkt liegt immer bei 0/0 und der Endpunkt immer bei 1/1.


Vier Punkte einer kubischen Bézierkurve

Einen individuellen Ablauf definierst du beispielsweise so:

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Die resultierende Kurve entspricht dem Verhalten des Wertes „ease“.  Angegeben sind die Werte für P1 (0,25/0,1) sowie für P2 (0,25/1).

Der Wert „ease-in-out“ stellt sich als Bézierkurve wie folgt dar:

transition-timing-function: cubic-bezier(0.42, 0.1, 0.58, 1);

Mit „cubic-bezier“ lassen sich also ganz unterschiedliche Beschleunigungs- und Abbremsverhalten festlegen. Mit der „Maximaleinstellung“ für eine kubische Bézierkurve erhältst du eine Animation, die nach dem Start stark abbremst, sich linear weiterbewegt und anschließend zum Ende stark beschleunigt:

transition-timing-function: cubic-bezier(0, 1, 1, 0);


Individuelle Bézierkurve

Derzeit unterstützen alle Browser mit Ausnahme des Internet Explorer CSS-Transitions und auch die Eigenschaft „transition-timing-function“.

Fazit: Gerade das individuelle Anlegen von Bézierkurven für Animationsabläufe ist eine schöne Sache, um jenseits der Standardwerte eigene Vorstellungen zu verwirklichen. Dabei ist die Verwendung relativ einfach.

(Artikelbild: Depositphotos)

Kategorien
Design Social Media Webdesign

Logogestaltung in Zeiten sozialer Medien: Quadratisch, praktisch, gut?

Die Gestaltung eines Logos ist seit jeher den technischen Gegebenheiten und den zur Verfügung stehenden Medien unterworfen. So war es zu Zeiten des Faxes wichtig, dass ein farbiges Logos so kontrastreich angelegt war, dass es beim Fax auch in schwarz-weiß funktionierte. Mit den sozialen Netzwerken kamen neue Anforderungen auf Gestalter zu, die sich vor allem in der Logoentwicklung der letzten Jahre widerspiegeln.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design HTML/CSS Webdesign

SVG: So verwendest du es richtig

Das SVG-Format hat sich in vielerlei Hinsicht zu einer zeitgemäßen Alternative zu Flash entwickelt. Denn es ist nicht nur vektorbasiert, sondern ermöglicht auch Animationen und Interaktionen. Aufgrund der unterschiedlichen Möglichkeiten, Animationen zu erstellen und SVGs in ein Webprojekt einzubinden, solltest du folgende Tipps beachten, damit auch alles so funktioniert, wie es soll.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Better Portable Graphics: Das neue Bildformat kommt nicht voran

JPEG und PNG sind die gängigen Formate für die Darstellung von Bildern im Browser. Auch wenn das Internet zunehmend schneller wird, ist es gerade bei der mobilen Nutzung nach wie vor wichtig, auf möglichst kleine Dateien zu achten. Mit dem relativ neuen BPG-Format, welches für Better Portable Graphics steht, steht seit einigen Jahren eine Alternative zu den gängigen Formaten bereit, die nicht nur kleinere Dateien, sondern auch eine bessere Bildqualität verspricht. Aber was genau zeichnet das BPG-Format aus und wie setzt man es ein und wieso stockt die Entwicklung?

Better Portable Graphics statt JPEG – ähnliche Qualität, kleinere Dateigröße und Alphatransparenz

Das Besondere am BPG-Format ist seine hohe Kompression. Es basiert auf einem Subset des High-Efficiency-Video-Codings (HEVC), welches vor allem für Videodateien verwendet wird. Dieses ist der Nachfolger des H.264-/MPEG-4-Standards. Die Komprimierung der Better Portable Graphics verspricht im Vergleich zum JPEG eine kleinere Dateigröße bei ähnlicher Bildqualität.

Better Portable Graphics: Das kann das neue Bildformat
Webanwendung zum Erstellen von BPG-Dateien

Wie das JPEG-Format unterstützt auch BPG verschiedene Farbräume. Neben RGB und CMYK wird YCbCr, bei der eine Farbe durch Hellig- und Farbigkeit definiert wird, unterstützt. Außerdem sind  verschiedene Farbtiefen – 8, 10 und 12 Bit – möglich.

Im Gegensatz zum JPEG-Format unterstützen Better Portable Graphics einen Alphakanal, wie er beispielsweise bei PNG-Bildern möglich ist. Im Vergleich zum PNG ist die Kompression beim BPG noch deutlich größer.

BPG-Encoder als Webanwendung

Um eine BPG-Datei zu erzeugen, gibt es einen eigenen Encoder, der als Webanwendung zur Verfügung steht. Neben der Auswahl des Farbraums und der Bit-Tiefe sind es vor allem zwei Größen, die entscheidend sind. Zum einen musst du dich für eine Qualität entscheiden. Diese wird mit einem Wert zwischen 0 und 51 angegeben. Je kleiner der Wert ist, desto besser ist die Qualität des Bildes.

Better Portable Graphics: Das kann das neue Bildformat
Stark komprimiertes JPEG (links) und BPG (rechts)

Der andere Wert gibt die Kompression an, die zwischen 0 und 9 liegt. Je höher der Wert, desto besser ist die Kompression. Allerdings solltest du beachten, dass eine hohe Kompression ebenso bedeutet, dass der Rechner länger braucht, um das Bild zu dekomprimieren und darzustellen.

Als Test wurde ein Bild mit 10 Prozent Qualität aus Photoshop generiert und dasselbe Bild mit höchster Kompression und Qualitätsstufe 39 ins Format Better Portable Graphics gebracht. Während das JPEG 10 Kilobyte groß ist, kommt das BPG auf 9,5 Kilobyte. Beim JPEG sind ganz deutlich die rechteckigen Artefakte zu sehen, wie sie bei starker Komprimierung auftreten. Bei BPG-Bild macht sich zwar auch die starke Kompression bemerkbar. Dennoch ist das Ergebnis qualitativ deutlich besser.

Better Portable Graphics: Das kann das neue Bildformat
BPG-Bild mit Alphatransparenz

Bezüglich der Dateigröße wird der Unterschied deutlich, wenn wir ein transparentes PNG mit einer entsprechenden BPG-Grafik vergleichen. Während das PNG 325 Kilobyte groß ist, kommt die transparente BPG-Datei bei durchschnittlicher Bildqualität auf 64 Kilobyte. Hier erreichen wir demnach eine sehr deutliche Einsparung.

Browser interpretieren BPG per JavaScript

Das große Problem bei neuen Dateiformaten sind natürlich die Browser. Denn diese müssen neue Formate interpretieren können. Dass Better Portable Graphics in allen gängigen Browsern dargestellt werden können, liegt daran, dass die Interpretation des Formates per JavaScript erfolgt.

Willst du also Better Portable Graphics verwenden, musst du eine 65 Kilobyte große JavaScript-Datei in dein HTML-Dokument einbinden. Diese übernimmt dann die Dekodierung des Formates. Die HTML-Auszeichnung erfolgt ganz normal über das „<img>“-Element. Das entsprechende JavaScript wandelt dieses dann ein „<canvas>“-Element um, welches das Bild im Browser ausgibt.

Better Portable Graphics: Quelltext für Encoder frei zugänglich

Wenn du Better Portable Graphics selber erstellen möchtest, kannst du dir den Quelltext für den Encoder kostenlos herunterladen. Er steht als Kommandozeilenanwendung für Linux und Windows zur Verfügung. Der Encoder wird unter der GPL-Lizenz angeboten.

Fazit und Links zum Beitrag

Dass sich Better Portable Graphics in der Fläche durchsetzen wird, darf durchaus vorsichtig bezweifelt werden. Der Umweg über JavaScript sorgt zwar auf Anhieb für eine flächendeckende Browserunterstützung, ist aber grundsätzlich nicht die beste Lösung, Bildformate im Browser darzustellen. So wundert es nicht, dass der Encoder seit etwa drei Jahren nicht weiterentwickelt wird. Andererseits tut sich bei JPG auch seit Jahren nichts. Verschiedentlich wird behauptet, es gäbe rund um BPG ein Lizenz-Problem, das die weitere Verbreitug behindere. Sollte dem so sein, wäre es zumindest eine plausible Erklärung. Verifizieren ließ sich das Problem allerdings nicht.

Die Mischung aus der guten Kompression des JPEG- und der Alphatransparenz des PNG-Formates machen Better Portable Graphics allerdings zu einer interessanten Alternative. Darüber hinaus ermöglicht das BPG-Format Animationen, wie es bislang nur das GIF-Format konnte. Im Web-Encoder sind solche Animationen jedoch nicht realisierbar.

(Artikelbild: Depositphotos)

Kategorien
Bilder & Vektorgrafiken bearbeiten Webdesign

Responsives SVG: Was geht, was geht nicht?

Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren. Doch wie sieht es mit SVGs aus? Lassen sich diese auch responsiv gestalten?