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.… Mobiles Webdesign: 5 mehr oder weniger gute Navigationskonzepte weiterlesen

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… HTML5: Videos untertiteln mit dem Track-Element weiterlesen

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.

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… HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing weiterlesen

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… SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet weiterlesen

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.

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… Support im Netz: 4 Ticketsysteme im Test weiterlesen

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… Design Best Practice: Darauf musst du beim Einsatz von Stockphotos achten weiterlesen

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.… Gewusst wo: Wissensquellen zu HTML und CSS weiterlesen

Veröffentlicht am
Kategorisiert in 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.

Veröffentlicht am
Kategorisiert in Design, HTML/CSS

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.

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… CSS-Transitions: Timing ist alles weiterlesen

Veröffentlicht am
Kategorisiert in Design, HTML/CSS

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… Logogestaltung in Zeiten sozialer Medien: Quadratisch, praktisch, gut? weiterlesen

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.

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… Better Portable Graphics: Das neue Bildformat kommt nicht voran weiterlesen

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.… Responsives SVG: Was geht, was geht nicht? weiterlesen