Kategorien
(Kostenlose) Services Editoren Essentials Freebies, Tools und Templates HTML/CSS Webdesign

Kostenlose HTML-Editoren: Die 16 Besten für Webentwickler unter Windows

Webdesigner und Webentwickler, die mit Windows arbeiten, finden durchaus einige kostenlose HTML-Editoren vor. Nur, welcher eignet sich und welcher eher nicht. Wir sagen es dir.

Kategorien
Design Responsive Design UI/UX Webdesign

Design: So erstellst du eine vertrauenswürdige Website!

Wenn du eine Website ins Netz der Netze stellst, dann kannst du damit viele verschiedene Ziele verfolgen. Der angestrebte Erfolg muss nicht unbedingt finanzieller Natur sein. Aber, egal welches Ziel du erreichen willst, du brauchst dafür das Vertrauen deiner Besucher. Das ist jedoch nicht so einfach zu bekommen…

Kategorien
Design UI/UX Webdesign

Designkritik: So umgehst du die Fettnäpfchen und nutzt das Instrument richtig

Wenn der Begriff bloß nicht so negativ klingen würde. Designkritik hat ja schon phonetisch was vernichtendes. Im folgenden Beitrag setzen wir uns über derlei Details unerschrocken hinweg und finden die Perlen in der Auster.

Was ist Designkritik?

Schon bei der Erwähnung des Wörtchens „Kritik” wird es so manchem ganz schwummerig vor Augen. Dabei ist Designkritik, richtig durchgeführt, ein absoluter Gewinn für alle Beteiligten. Deshalb wollen wir uns heute durchaus in einiger Ausführlichkeit damit beschäftigen.

Bevor wir aber einen der Fehler machen, die auch im Rahmen einer Designkritik sehr häufig vorkommen, klären wir vorab, was es mit dem Begriff auf sich hat, respektive, wie wir den Begriff in diesem Beitrag definieren werden:

Unter Designkritik verstehen wir einen strukturierten Feedback-Prozess, der dazu dienen soll, ein Design unter verschiedenen Gesichtspunkten zu evaluieren und nötigenfalls zu verbessern.

Designkritik ist also nicht das, was dir dein Chef oder Kunde mal eben so per Mail um die Ohren haut. Das ist zwar ebenfalls Kritik, aber häufig genug keine hilfreiche.

Designkritik ist keine Disziplinierungsmaßnahme der Geschäftsführung. (Foto: Pixabay)

Die vier Zutaten einer nutzbringenden Designkritik

Stellen wir nochmal klar, dass Designkritik einen strukturierten Feedback-Prozess darstellt. Wir brauchen also zunächst eine Struktur, damit nützliches Feedback kommen kann.

#1: Die Vorbereitung

Eins vorab und ganz deutlich: Designkritik ist keine Stammtischrunde, bei der es darum geht, wer am intelligentesten und durchsetzungsstärksten ein Design argumentativ vernichtet. Designkritik muss stets vom Designer ausgehen. Es handelt sich nicht um eine verkappte Disziplinierungsmaßnahme des Agenturchefs und auch nicht um einen Intelligenzwettbewerb unter Kollegen.

Insofern ist stets der verantwortliche Designer auch der führende Kopf bei der Designkritik. Stellen wir uns mit unserem Design also einer solchen Maßnahme, was wir auf jeden Fall tun sollten, dann sind wir diejenigen, die das Heft des Handelns in der Hand behalten. Das geht natürlich nicht ohne Vorbereitung.

Erwarten wir von einer Designkritik nützliche Unterstützung, so dürfen wir sie nicht offen gestalten. Machen wir diesen verbreiteten Fehler, müssen wir uns nicht wundern, wenn aus einem allgemeinen Palaver keine greifbaren Handlungsvorgaben entstehen. Das ist nicht einmal erstaunlich, denn wenn es keine Vorgaben gibt, wird jeder mit seinen eigenen inneren Vorgaben und Annahmen ans Werk gehen, was selten zu konsensfähigen Ergebnissen führen wird.

Wir gehen also stets mit konkreten Fragen in eine Designkritik. Wir stellen unser Design ausführlich vor und erklären die einzelnen Designentscheidungen fachlich fundiert. Während wir das vorbereiten, finden wir mit Sicherheit Punkte, an denen wir nicht sicher sind, ob unsere zuvor getroffene Designentscheidung immer so die richtige war.

#2: Die Zusammensetzung der Gesprächsrunde

Im Idealfall definieren wir eine kleine Gruppe von drei bis maximal sieben Personen, die wir an der Designkritik beteiligen wollen. Generell können diese Personen diverse Hintergründe haben, also etwa den Kunden, das Marketing oder andere Bereiche umfassen. Die genaue Zusammensetzung des Teams machen wir am Besten davon abhängig, in welchem Stadium des Designs wir uns befinden und welche Art von Feedback wir erwarten.

Designkritik: wenige Personen, aber dafür Experten. (Foto: StartupStockPhotos)

Geht es um die Details der Benutzerführung in einigen Bereichen des Designs, so empfiehlt sich eher eine kleine Gruppe von Experten, die den gleichen oder einen ähnlichen Hintergrund wie wir selber haben. Denn hier geht es nicht um Geschmacksfragen oder die Markenwahrnehmung, sondern um technische Detailfragen, an die man nur Experten ranlassen sollte.

Geht es um das große Ganze, kann es durchaus sinnvoll sein, den Kunden oder das Marketing zu beteiligen. Immerhin müssen die das Design am Ende unterstützen, eventuell benutzen, sich aber jedenfalls damit identifizieren.

Generell lässt sich festhalten, dass Designkritik nie spontan aus zufällig zusammentreffenden Personengruppen heraus erfolgen sollte. Sieht man Designkritik als dauernde Aufgabe mit mehreren Sitzungen bis zur Fertigstellung, dann empfiehlt es sich, immer das gleiche Team zu wählen, um konsistente Ergebnisse zu erhalten.

#3: Das Gespräch

Auf die im Rahmen unserer Vorbereitung entstandene Fragen fokussieren wir das Gespräch und bitten um Feedback. Es wird allerdings unweigerlich so sein, dass sich aus der Erläuterung der getroffenen Designentscheidungen bei den anderen Teilnehmer Fragen ergeben. Diese Fragen werden erst abgearbeitet, wenn das primär wichtige Feedback, das wir selber angefordert haben, erfolgt ist.

Das Gespräch selber sollte möglichst moderiert sein, wobei wir als verantwortlicher Designer stets ein Redevorrecht haben sollten. Viel zu oft heißt es bekanntlich, dass „zwar schon alles gesagt ist, aber noch nicht von jedem.” Da wir uns als Designer stark in den Prozess einbringen müssen, ist es nützlich, wenn es eine Art Protokollführer gibt, der im Nachgang ein Ergebnisprotokoll vorlegen kann. So haben wir direkt eine Todo-Liste an der Hand, die noch dazu mit den anderen Teilnehmer quasi abgestimmt ist.

Designkritik: Ein Ergebnisprotokoll ist empfehlenswert. (Foto: StartupStockPhotos)

Der Gesprächsverlauf sollte möglichst demokratisch gestaltet werden. Jeder Teilnehmer der Gruppe, nach dem Designer, hat das gleiche Rederecht. Bewertende Aussagen sollten unterlassen werden, um das Risiko, die sachliche Ebene zu verlassen und auf die emotionale, geschmackliche oder ideologische Ebene zu wechseln, zu minimieren.

Dieses Risiko lässt sich schon bei der Zusammensetzung der Gruppe im Auge behalten. Personen, die aus ihrer Persönlichkeitsstruktur heraus nicht in der Lage zu rein sachlichen Diskussionen sind, sollten wir gleich außen vor lassen. Das funktioniert natürlich leider nicht, wenn der Quertreiber der Chef ist.

#4: Standardisierte Fragen

David de Léon, Designchef bei Inuse, nutzt für die in seiner Agentur durchgeführten Designkritiken einen sehr ausgefeilten Fragenkatalog. Damit will er sicherstellen, dass einerseits der Prozess standardisiert abläuft und andererseits keine wichtigen Aspekte vergessen werden.

Diesen Fragenkatalog publizierte er auf Medium.

Designkritik: Wenn der gute, alte Flipchart sinnvoll ist, dann nutzen wir ihn auch. (Foto: Pixabay)

Auch wenn ich den Katalog in dieser Ausprägung für übertrieben detailliert halte, immerhin beinhaltet er 52 Fragen, so kann er doch als Ideenpool für unsere eigene Designkritik herhalten. Wir könnten uns zehn bis zwanzig seiner Fragen ausleihen und auf diese Weise einen guten Gesprächsleitfaden bekommen, der jedenfalls strukturiertes Feedback ermöglicht.

Die interessantesten Fragen sind meiner Meinung nach:

  • Was will ich am Ende der Designkritik mitnehmen?
  • Was würden andere Designer ändern, wenn sie mein Design übernehmen müssten?
  • Hält sich das Design an etablierte Muster? Wenn nein, warum nicht?
  • Inwiefern spricht das Design den potenziellen Nutzer an? Was will das Design erreichen?
  • Was ist das wichtigste Designelement?
  • Ist die Nutzung gleichbleibend attraktiv für den Verwender, auch nach Wochen noch?
  • Wird der Nutzer auf Schwierigkeiten bei der Bedienung stoßen und, wenn ja, wie wird ihm dann geholfen?
  • Ist der Vorschlag der beste, den ich mir vorstellen kann oder bloß ein Kompromiss? Worin besteht der?
  • Welche Alternativen habe ich bedacht und verworfen, und warum?

Im genannten Medium-Beitrag finden sich weitere Fragen, die wir je nach Bedarf, Gruppenzusammensetzung und Zielsetzung anders zusammenstellen können.

Richard Rio Omolo von Booking.com skizziert auf Medium den Designkritik-Prozess beim Reiseportal. Er bringt noch den Aspekt des sokratischen Dialogs ins Spiel und weist darauf hin, dass Wortäußerungen möglichst nicht meinungsgetrieben erfolgen sollten, um die sensible Grenze zwischen sachlicher und emotionaler Kritik nicht anzukratzen.

Designkritik im Alltag

Wenn wir nicht die Möglichkeit haben, eine Expertengruppe für die Designkritik zu akquirieren, sondern versuchen müssen, aus dem Freelancer-Büro heraus unsere Designs zu validieren, so gelten die grundlegenden Regeln dennoch. Hier empfiehlt sich dann allerdings besonders die Erstellung eines dezidierten Fragebogens mit sehr genauen Fragestellungen.

Diesen Fragebogen können wir dann etwa per E-Mail an Experten aus unserem beruflichen Netzwerk versenden und sie so zu einem virtuellen Designkritik-Team zusammenschließen. Wenn wir selber auch bereit sind, Feedback zu geben, kann sich da schnell eine brauchbare Lösung etablieren.

Fazit: Designkritik ist ein wichtiges Element der Verbesserung unserer Arbeitsergebnisse. Wir können die Produktqualität schon vor den eigentlichen Tests in freier Wildbahn so maximieren, dass viele Fehler im fertigen Produkt strukturell ausgemerzt sind, bevor der erste Nutzer sie findet. Es gilt lediglich, das unangenehme Gefühl, kritisiert zu werden, fallen zu lassen und das konstruktive Element des Vorgangs zu erkennen.

Quellen zum Weiterlesen:

Kategorien
Design E-Business E-Commerce SEO & Online-Marketing UI/UX Webdesign

Webdesign: So definierst du deine Zielgruppe mit User Personas

Der „Nutzer” ist eine viel zu abstrakte Beschreibung der Person(en), die dein neues Web-Projekt verwenden wollen könnten. Auf eine derart abstrakte Beschreibung kannst du dein Projekt weder ausrichten, noch optimieren. Du brauchst etwas besseres, etwa Heinz, den eiligen Alleinerzieher, oder Maria, die gestresste Buchhalterin. User Personas leisten genau diese Konkretisierung.

Kategorien
Design UI/UX Webdesign

Informationsarchitektur für Fortgeschrittene: Viele Wege, ein Ziel

Wenn du dich erstmalig mit Informationsarchitektur beschäftigst, lernst du, einen linearen Informationszugang zu bevorzugen. So habe ich es dir auch in meinem Beitrag mit den Basics zum Thema vermittelt. Dabei sind aber nicht alle Anwendungsfälle gleich. Bisweilen ist vielmehr eine flexible Informationsarchitektur gefragt.

Kategorien
Design HTML/CSS Webdesign

CSS in 30 Sekunden: Das versteht jeder

Anstatt deine Zeit mit Candy Crush zu vertun oder dich durch unwichtige Tweets zu fräsen, könntest du die Zeit in der S-Bahn oder auf dem Klo oder im langweiligen Teammeeting nutzen, um CSS zu lernen oder deine Kenntnisse aufzufrischen. 

Kategorien
Design JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

Was sind Progressive Web Apps und wieso sollte dich das interessieren?

Wir schreiben das Frühjahr des Jahres 2018. Es handelt sich um das Jahr, in dem sich Progressive Web Apps aller Prognose nach endgültig durchsetzen dürften. Wenn du dich mit dem Thema bisher nicht beschäftigt hast, dann wird es jetzt höchste Zeit. Wir helfen dir dabei.

Kategorien
Design Inspiration Tutorials UI/UX Webdesign

Typographie für jedermann: So werden deine Texte wesentlich lesbarer

Wenn du als Seitenbetreiber denkst, Typographie brauche dich nicht zu interessieren, dann irrst du. Die reine Lesbarkeit deiner Texte ist nämlich auch schon eine Frage der Typographie. Und um genau diese Typographie für jedermann will ich mich im folgenden Beitrag kümmern.

Kategorien
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.

Die Website gethead.info gibt dir eine sehr umfangreiche Übersicht an die Hand, in der alle notwendigen und wichtigen Elemente des HTML-Kopfs aufgelistet sind.


Einen HEAD über dieses Thema machte ich mir übrigens zuerst exklusiv im Dr. Web-Newsletter. Hier kannst du dich kostenlos registrieren.

Das allerwichtigste zuerst

Zunächst trägt die Website zusammen, was in keinem „<head>“-Element fehlen darf. Dazu gehören das „<title>“-Element ebenso selbstverständlich wie einige „<meta>“-Elemente. So erfordert HTML5 immer die Angabe des Zeichensatzes über eine Meta-Angabe. Und der sollte mittlerweile nichts anderes als UTF-8 sein.

Außerdem empfiehlt dir gethead.info einige weitere Meta-Angaben, die ganz grundsätzlich für eine optimierte Darstellung deiner Website wichtig sind. Zum Beispiel sollte über ein „<meta>“-Element der Viewport deiner Website angegeben werden. Und dieser sollte so gewählt sein, dass die Breite des Displays immer auch die Breite deiner Website darstellt und die Seite nicht skaliert wird.

Diese Einstellung setzt natürlich voraus, dass deine Website responsiv und für Mobilgeräte gestaltet ist. Aber dies versteht sich mittlerweile ja eigentlich von selbst.

Darüber hinaus gehören die Einbindung von Stylesheets und JavaScripts in den HTML-Kopf, insofern diese vor dem HTML-Body geladen werden sollen. In vielen Fällen ist es sinnvoll, CSS- und JavaScript-Dateien am Ende des „<body>“-Elementes zu laden. Denn alles, was im Head geladen wird, verlangsamt das Laden und Darstellen des eigentlichen Inhaltes.

Meta-Angaben für Suchmaschinen

Soll eine Suchmaschine ein HTML-Dokument und darin verlinkte Seiten bei der Indizierung berücksichtigen? Auch die Beantwortung dieser Frage gehört in den HTML-Head und wird über die Meta-Angabe „robots“ und den Werten „index“, „noindex“, und „follow“ sowie „nofollow“ festgelegt.

Meta-Angaben für Suchmaschinen

Aber gethead.info listet dir noch weitere „<meta>“-Elemente auf, mit denen du zum Beispiel diverse Suchmaschinen verifizieren kannst. Das ist zum Beispiel nötig, um Googles Such-Konsole nutzen zu können – gilt aber auch für andere Suchmaschinen wie Bing oder Dienste wie Pinterest.

Verweise im HTML-Kopf festlegen

Neben Stylesheets werden zahlreiche andere Verweise über das „<link>“-Element im HTML-Kopf eingebunden. Zur Vermeidung von doppeltem Inhalt gibst du zum Beispiel über die „<link>“-Angabe „canonical“ einen Link an, der auf ein inhaltlich identisches Dokument verweist, welches einfach nur über eine andere URL erreichbar ist.

Auch RSS-Feeds und die Einbindung von Open Search erfolgen über jeweilige Verlinkungen im „<head>“-Element.

Ebenfalls Verweise auf Archive, Autoren- und Indexseiten legst du hiermit fest. Bei Seiten mit Paginierung verlinkst du auf die jeweils vorherige und nachfolgende Seiten. Das ist für Suchmaschinen ebenso interessant wie für einige Browser, die den Aufbau deiner Website so besser nachvollziehen können.

Soziale Netzwerke zum Teilen einbinden

Soziale Netzwerke spielen eine große Rolle. Willst du Artikel oder andere Dokumente deiner Website auf Facebook oder Twitter teilen, ist es ratsam, entsprechende Tags im Head zu platzieren, damit Titel, Bild und Beschreibung des Dokumentes korrekt wiedergegeben werden können.

Einbindung von Open-Graph-Angaben für Facebook

Neben dem Open-Graph-Standard, welches Facebook unterstützt und auch von anderen Diensten wie Google+ und LinkedIn interpretiert wird, gibt es für Twitter mit den sogenannten Twitter-Cards eigene Tags zu Einbindung.

Besonderheiten für Browser und Betriebssysteme

Wenn es darum geht, eine Website als Favorit zu speichern und irgendwo abzulegen, haben jeder Browser und jedes Betriebssystem so ihre Besonderheiten.

So lassen sich unter Windows 10 spezielle Icons und Farben festlegen, mit der ein Favorit als Kachel abgelegt wird. Apple hingegen hinterlegt einen Verweis mit speziellen Icons, die du in verschiedenen Größen einbindest.

Gibt es für deine Website eine eigene App? Dann kannst du auch dies über eigene Angaben im HTML-Kopf angeben. Sowohl Apple als auch Android bieten für ihre jeweiligen App-Stores entsprechende Verlinkungen an. Ruft man deine Website mit einem jeweiligen Smartphone oder Tablet auf, werden Besucher auf die App hingewiesen.

Fazit

Die Website gethead.info ist nicht nur für Einsteiger eine interessante Anlaufstelle, sondern auch für Fortgeschrittene. Die Liste ist recht umfangreich und bietet eine Menge Informationen in Kurzform.

Neben den kurz vorgestellten Angaben gibt es noch viele weitere, die teils sehr speziell sind. So werden unter anderem auch Meta-Angaben für recht unbekannte Browser angeboten.

Außerdem gibt es auch noch einige Tipps, wie man durch entsprechende Auszeichnung die Performance deiner Website verbessern kann, sowie Links zu verwandten Projekten.

Die Website gethead.info steht unter der Public-Domain-Lizenz und wird auch auf GitHub gehostet. Dort kannst du dir verschiedene Snippets als Vorlage für deine eigenen Webprojekte herunterladen.

Kategorien
HTML/CSS Webdesign

CSS3: Texte unterstreichen – endlich mit anderer Farbe und weiteren Effekten

Typografie spielt im Webdesign zunehmend eine wichtige Rolle – vor allem mit der Einführung von Webfonts. Das Unterstreichen von Texten hingegen war immer ein eher eintöniges Unterfangen. Nur auf Umwegen ließen sich Farbe und Art der Unterstreichung beeinflussen. Die erweiterte CSS3-Eigenschaft „text-decoration“ gibt dir nun zusätzlichen Spielraum für die Gestaltung von Texten.


Über die neuen Möglichkeiten zur Textunterstreichung schrieb ich erstmals exklusiv im Dr. Web-Newsletter. Hier kannst du dich kostenlos registrieren.

„text-decoration“ um Features erweitert

Bisher konnte man der Eigenschaft „text-decoration“ lediglich festlegen, wie ein Text unter- beziehungsweise durchgestrichen werden sollte. Erlaubt waren die Werte „underline“, „overline“ und „line-through“. Das entspricht also der typischen Formatierung, wie man sie auch aus der Textverarbeitung kennt.

Dass diese Möglichkeiten im Webdesign nicht ausreichen, zeigt sich daran, dass Webdesigner immer wieder mit Workarounds nach Möglichkeiten gesucht haben, Unterstreichungen eine andere Farbe zu geben. Häufig ist einem Text ein Rahmen („border-bottom“) zugewiesen worden anstatt ihn per „text-decoration“ zu unterstreichen. So ließen sich Farbe und Linienstärke beeinflussen.

Dieser Ansatz hat jedoch durchaus seine Nachteile. So ist die Unterstreichung per „border-bottom“ immer etwas weiter vom Text entfernt als eine echte Unterstreichung.

In anderer Farbe unterstrichener Text

Die CSS-Eigenschaft „text-decoration“ ist nun um einige Features erweitert worden, die es unter anderem erlauben, die Farbe von Unterstreichungen unabhängig der Textfarbe festzulegen. Dazu gibt es die neue Eigenschaft „text-decoration-color“. Erlaubt sind hierbei alle gängigen CSS-Farbangaben, auch Angaben per „rgb()“ und „rgba()“.

h1 {
  text-decoration-color: purple;
}

Weißraum bei Unterstreichungen definieren

Es gibt eine weitere neue Eigenschaft: „text-decoration-skip“. Hiermit definierst du, wann eine Unterstreichung unterbrochen werden soll. Der Wert „ink“ legt fest, dass Unterlängen wie bei dem kleinen „g“ und „j“ bei der Unterstreichung ausgespart werden.

Gerade diese Möglichkeit dürfte vielen Webdesignern gefallen. Denn das brachiale Durchschneiden von Unterlängen durch Unterstreichungen ist vor allem für typografisch begeisterter Webdesigner und -entwickler kein schöner Anblick.

Unterstrichener Text, bei dem Unterlängen ausgespart sind

Der Wert „spaces“ hingegen sorgt dafür, dass Satz- und Leerzeichen nicht unterstrichen werden. So ist es beispielsweise möglich, bei Aufzählungen die Unterstreichung ausschließlich auf die Wörter anzuwenden.

h1 {
  text-decoration-skip: ink;
}

Inline-Block-Elemente wie zum Beispiel Bilder innerhalb eines Textes werden dann nicht unterstrichen, wenn die Eigenschaft den Wert „objects“ besitzt. Und der Wert „edges“ legt fest, dass bei zwei nebeneinander liegenden Textelementen ein Abstand zwischen den Unterstreichungen dargestellt wird.

Position der Unterstreichung ändern

Auch die Position einer Unterstreichung kannst du definieren – mittels „text-underline-position“. Normalerweise liegt sie im Bereich der Unterlängen. Der Wert „under“ sorgt jedoch dafür, dass die Linie unterhalb der Unterlängen dargestellt wird.

Unterstrichener Text, bei dem die Unterstreichung unterhalb der Unterlängen liegt

Diese Positionierung ist zum Beispiel bei der Darstellung mathematischer Formeln sinnvoll. So wird verhindert, dass tiefgestellte Zahlen von der Unterstreichung nicht verdeckt und somit schlecht bis gar nicht lesbar sind.

h1 {
  text-underline-position: under;
}

Verschiedene Stile zur Unterstreichung

Wem eine einfache Linie als Unterstreichung nicht reicht, kann dank „text-decoration-style“ auch zwischen verschiedenen Stilen für die Darstellung der Linien wählen. Während der Wert „solid“ eine gewohnt einfache Linie zeichnet, gibt es mit „double“ die Möglichkeit, eine doppelte Unterstreichung zu erzielen.

Unterstreichung mit geschwungener Linie

Für geschwungene Linien setzt du den Wert für die Eigenschaft auf „wavy“ und für gepunktete Linien auf „dotted“.

h1 {
  text-decoration-style: wavy;
}

Unterstreichung per Kurzform auszeichnen

Wie für viele andere Eigenschaften gibt es auch für die neuen Eigenschaften eine Kurzform, die über die alte Eigenschaft „text-decoration“ ausgezeichnet wird. Die bisherige Nutzung von „text-decoration“, die ausschließlich das Unter- beziehungsweise Durchstreichen erlaubt hatte, ist in die Eigenschaft „text-decoration-line“ ausgegliedert worden, funktioniert aber nach wie vor als Kurzform.

h1 {
  text-decoration: underline wavy purple;
}

Die Auszeichnung „text-decoration: underline“ ist also die Kurzform von „text-decoration-line: underline“. Du kannst Werte für „text-decoration-line“, „text-decoration-style“ und „text-decoration-color“ als Kurzform kombinieren: „text-decoration: underline wavy purple“.
Im Beispiel wird also eine geschwungene Linie in violett als Unterstreichung dargestellt.

Browserunterstützung

Die Eigenschaft „text-decoration-skip“ wird von Chrome und Safari unterstützt, wobei Chrome nur die Werte „ink“ und „objects“ kennt. „text-decoration-color“ und „text-decoration-style“ werden zudem vom Firefox mit unterstützt.

Die Eigenschaft „text-decoration-position“ wird derzeit nur von Chrome unterstützt.

Andere Browser werden sicher schnell nachziehen. Schließlich sind typografische CSS-Eigenschaften wie auch das Beschneiden von Texten oder ihre Ausrichtung an anderen Elementen mittlerweile aus modernem Webdesign nicht mehr wegzudenken.

Kategorien
Essentials Exklusiv bei drweb.de Webdesign

Große Leser-Aktion: Wünsch dir Wissen!

Was? Wir sind hier nicht bei Wünsch dir was”? Doch, genau da sind wir heute. Du wolltest schon immer was zu einem bestimmten Web-Thema lesen, konntest aber nichts zufriedenstellendes finden? Dann ist dieser Beitrag der, den du heute lesen solltest.
Kategorien
E-Business SEO & Online-Marketing Webdesign

Duplicate Content: Google stellt klar

Das Angstthema Duplicate Content ist eines, um das sich viele Legenden, Vermutungen und Theorien ranken. Jetzt gibt es eine Klarstellung aus dem Hause Google.

Kategorien
Design Responsive Design Webdesign

Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook

PWA, Progressive Web Apps, setzen sich nur dann als Standard gegen die nativen Mobil-Apps durch, wenn sie möglichst breite Unterstützung finden. Dabei kann jede Web-App eine progressive Web-App sein.

Kategorien
E-Business Freelance Webdesign

Präzise Schnellübersicht für Design-Kunden bringt Erwartung und Realität zusammen

Frohes neues Jahr und viel Erfolg bei deinen Vorhaben. Soweit es sich um Vorhaben handelt, bei denen Design involviert ist, habe ich hier eine schöne Grafik für dich.

Kategorien
Apps HTML/CSS JavaScript & jQuery Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Kategorien
(Kostenlose) Services Essentials Fotografie Inspiration Webdesign

Kostenlose Fotos für alle: Die Top 50 der besten Bilderdienste im Web

Die 50 Dienste für vollkommen frei zu verwendende, kostenlose Fotos, die wir dir heute vorstellen, lassen keinen Bedarf ungedeckt. Wenn du hier nicht findest, was du brauchst, dann findest du es nirgends.