Denis Potschien, Autor bei Dr. Web

Icons selber gestalten und erstellen: So geht es

Es mangelt nicht an guten Iconsets, die man für eigene Zwecke anpassen kann. Aber manchmal muss es dann doch mal etwas Eigenes und Individuelles sein.

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

8 Dropdown-Menüs zum Nachbauen — ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an.

Responsive Design mit CSS: Flexbox oder Grid?

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Mobile First-Ansatz reicht doch schon aus

Progressive Web Apps: So machst Du die eigene Webseite fast zu einer nativen App

Was sind Progressive Web Apps? Progressive Web Apps (PWAs) sind ein Mittelweg zwischen nativen Apps und mobilen Websites. Sie sind vergleichsweise günstig zu entwickeln, da sie auf plattformübergreifen Web-Standards basieren, und so Kosten sparen für die Entwicklung und Unterhaltung von jeweils eigenständigen Native Apps für iOS und Android.

Hero Images: So setzt du Bilder plakativ ein

Schauen wir doch mal auf zwei scheinbar gegensätzliche Trends im Webdesign. Einerseits werden Websites immer minimalistischer – weniger Farben, klare Schriften und einfache Formen.

Webdesign: So wird deine Website valide, barrierefrei, sicher und schnell

Webentwicklung wird zunehmend komplexer. Neben korrekter Auszeichnung von HTML und CSS gibt es zahlreiche weitere Faktoren, die zwar nicht zwingend das korrekte Aussehen einer Website beeinflussen, aber dennoch auf den Erfolg einer Website Einfluss haben. Dazu gehört eine barrierefreie Darstellung der Inhalte, sowie eine schnelle Erreichbarkeit. Das alles selbst im Blick zu haben, ist schwierig. Daher gibt es zahlreiche Tools, die dir dabei helfen, zu dem Werturteil „Alles paletti“ zu gelangen.

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.

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.

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.

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 effizient arbeiten zu können, lohnt es sich, auf ein Ticketsystem zu setzen, welches beim Support unterstützt.

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?

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.

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.

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?

Mein liebster Kunde: Kundentypen und wie man damit umgeht

Um es vorwegzunehmen: Mir macht die Arbeit als Grafik- und Webdesigner unglaublich viel Spaß. Sie ist abwechlungsreich, oft anspruchsvoll und gelegentlich sogar großartig. Dabei spielt es für mich keine große Rolle, für welche Branche ich arbeite. Ob Dienstleistung, Handwerk, Industrie oder Kultur – alles kann gleichermaßen spannend und herausfordernd sein. Oft gibt es nur ein großes Hindernis und das nennt sich: Kunde

So wählst du die richtigen Fotos für Responsives Webdesign

Für dich als Webdesigner ist das mobile Internet eine Herausforderung. Websites müssen auf unterschiedlich großen Displays mit verschiedenen Seitenverhältnissen gut aussehen. Zu deinen Aufgaben gehört dabei auch die Auswahl geeigeneter Fotos für responsives Webdesign.

Tipps für Webdesigner: Was gehört alles in deinen HTML-HEAD

Der HTML-Kopf ist ein wichtiger Bestandteil eines jedes HTML-Dokumentes. Dort wird der Titel festgelegt und JavaScript- sowie CSS-Dateien eingebunden. Aber das „<head>“-Element hat in den letzten Jahren zunehmend an Bedeutung gewonnen. Denn auch die Einbindung anderer Webdienste wie Suchmaschinen und soziale Netzwerke erfolgt hier.

Denis Potschien