Komponenten

Fotografien

Im digitalen Zeitalter spielt die visuelle Attraktivität eines Softwareprodukts eine entscheidende Rolle bei der Gestaltung von Benutzerwahrnehmungen und -erfahrungen. Schöne Bilder sind nicht nur eine ästhetische Wahl; sie sind ein mächtiges Werkzeug, das die wahrgenommene Qualität Ihres Softwareprodukts erheblich steigern kann.

Dieses Kind posiert wie ein Profi!

Bildnachweis: Stella Flux

Die erste Interaktion eines Benutzers mit Ihrer Software umfasst oft visuelle Elemente. Hochwertige, fesselnde Bilder können einen positiven ersten Eindruck schaffen und den Ton für die gesamte Benutzererfahrung setzen.

aspectRatio="portrait"

Bilder haben die Kraft, Emotionen hervorzurufen. Durch die Verwendung von Bildern, die bei Ihrer Zielgruppe Anklang finden, können Sie eine emotionale Verbindung schaffen, die Vertrauen und Engagement fördert.

Konsistente und schöne Bilder helfen, Ihre Markenidentität zu stärken. Sie kommunizieren Ihre Markenwerte und heben Ihr Produkt von der Konkurrenz ab, wodurch es für Benutzer einprägsamer wird.

Gut gewählte Bilder können die Benutzerfreundlichkeit verbessern, indem sie Benutzer durch die Benutzeroberfläche führen, wichtige Funktionen hervorheben und die Navigation in der Software intuitiver gestalten.

Hochwertige Bilder vermitteln Professionalität und Liebe zum Detail, was die Glaubwürdigkeit Ihres Produkts steigern kann. Benutzer vertrauen und investieren eher in ein Produkt, das poliert und gut gestaltet aussieht.

position="left" aspectRatio="landscape"

Bilder können eine Geschichte erzählen, die Worte allein nicht vermitteln können. Sie können komplexe Konzepte veranschaulichen, Produktmerkmale präsentieren und Anwendungsfälle demonstrieren, wodurch Ihre Software nachvollziehbarer und verständlicher wird.

Die Integration schöner Bilder in Ihr Softwareprodukt dient nicht nur dazu, es gut aussehen zu lassen; es geht darum, ein ganzheitliches Benutzererlebnis zu schaffen, das begeistert und einbindet. Durch die Investition in hochwertige visuelle Elemente können Sie die wahrgenommene Qualität Ihres Produkts steigern und einen bleibenden Eindruck bei Ihren Benutzern hinterlassen.

Gesunde Ernährung ist der schnellste Weg zu besseren Laborergebnissen.

Buttons

Die Integration des Ask Emmo-Buttons bietet eine nahtlose Möglichkeit, die Benutzerbindung und -zufriedenheit zu verbessern. Durch den direkten Zugang zu Chat-Funktionen können Benutzer schnell Antworten auf ihre Fragen finden, die Suchzeit verkürzen und ihre Gesamterfahrung verbessern. Dieser sofortige Zugang steigert nicht nur die Benutzerbindung, sondern fördert auch eine personalisierte Interaktion, die Benutzer wertgeschätzt und verstanden fühlen lässt. Dieses Maß an Unterstützung baut Vertrauen und Glaubwürdigkeit in die Marke auf.

Durch die Verlinkung Ihrer eigenen Inhalte über den Read-Button können Sie die Sichtbarkeit von Inhalten erhöhen und gezielten Traffic generieren, indem Sie Benutzer durch eine kuratierte Reise führen, die mit Ihren Geschäftszielen übereinstimmt.

Zitate

Das Hervorheben von Zitaten in Ihren Artikeln kann die Lesbarkeit und das Engagement erheblich verbessern. Durch das Hervorheben von wichtigen Erkenntnissen ermöglichen Zitate den Benutzern, die Hauptideen schnell zu erfassen, ohne jedes Wort lesen zu müssen.

Sie lockern auch große Textblöcke auf, wodurch Ihre Inhalte visuell ansprechender und leichter zu überfliegen sind.

Zitate fassen Emotionen zusammen, schaffen eine stärkere Verbindung zu Ihrem Publikum und machen Ihre Inhalte einprägsamer. Sie können auch Zitate und visuelle Elemente kombinieren, um die Botschaft zu verstärken.

Milch ist essenziell für starke Knochen und Wachstum bei Kindern.

Weitere Komponenten

Bis jetzt war es eine mühsame Aufgabe, einen Artikel, ein Dokument oder einen Blogbeitrag mit Tailwind zu gestalten, die ein gutes Auge für Typografie und viel komplexes benutzerdefiniertes CSS erforderte.

Standardmäßig entfernt Tailwind alle Standard-Browserstile von Absätzen, Überschriften, Listen und mehr. Dies ist sehr nützlich für den Aufbau von Anwendungs-Benutzeroberflächen, da Sie weniger Zeit damit verbringen, Benutzeragenten-Stile rückgängig zu machen. Aber wenn Sie wirklich nur versuchen, Inhalte zu gestalten, die aus einem Rich-Text-Editor in einem CMS oder einer Markdown-Datei stammen, kann dies überraschend und unintuitiv sein.

Wir erhalten tatsächlich viele Beschwerden darüber, wobei uns Leute regelmäßig Dinge fragen wie:

Warum entfernt Tailwind die Standardstile auf meinen h1-Elementen? Wie deaktiviere ich das? Was meinen Sie damit, dass ich auch alle anderen Basisstile verliere? Wir hören Sie, aber wir sind nicht überzeugt, dass das einfache Deaktivieren unserer Basisstile das ist, was Sie wirklich wollen. Sie möchten nicht jedes Mal nervige Ränder entfernen müssen, wenn Sie ein p-Element in einem Teil Ihrer Dashboard-Benutzeroberfläche verwenden. Und ich bezweifle, dass Sie wirklich möchten, dass Ihre Blogbeiträge die Benutzeragenten-Stile verwenden — Sie möchten, dass sie großartig aussehen, nicht schrecklich.

Das @tailwindcss/typography-Plugin ist unser Versuch, Ihnen das zu geben, was Sie wirklich wollen, ohne die Nachteile, etwas Dummes wie das Deaktivieren unserer Basisstile zu tun.

Es fügt eine neue prose-Klasse hinzu, die Sie auf jeden Block von Vanilla-HTML-Inhalten anwenden können, um ihn in ein schönes, gut formatiertes Dokument zu verwandeln:

<article class="prose">
  <h1>Knoblauchbrot mit Käse: Was die Wissenschaft uns sagt</h1>
  <p>Seit Jahren preisen Eltern ihren Kindern die gesundheitlichen Vorteile des Verzehrs von Knoblauchbrot mit Käse an, wobei das Essen einen solchen ikonischen Status in unserer Kultur erlangt hat, dass Kinder sich oft als warmes, käsiges Brot zu Halloween verkleiden.</p>
  <p>Aber eine kürzlich durchgeführte Studie zeigt, dass die gefeierte Vorspeise mit einer Reihe von Tollwutfällen im ganzen Land in Verbindung gebracht werden könnte.</p>
</article>

Weitere Informationen zur Verwendung des Plugins und zu den enthaltenen Funktionen finden Sie in der Dokumentation.

Was Sie von hier an erwarten können

Was folgt, ist nur eine Menge absoluter Unsinn, den ich geschrieben habe, um das Plugin selbst zu testen. Es enthält jedes sinnvolle typografische Element, das mir einfiel, wie fetter Text, ungeordnete Listen, geordnete Listen, Codeblöcke, Blockzitate, und sogar Kursivschrift.

Es ist wichtig, all diese Anwendungsfälle abzudecken, aus einigen Gründen:

1. Wir möchten, dass alles von Anfang an gut aussieht.
2. Wirklich nur der erste Grund, das ist der ganze Sinn des Plugins.
3. Hier ist ein dritter vorgetäuschter Grund, obwohl eine Liste mit drei Elementen realistischer aussieht als eine Liste mit zwei Elementen.

Jetzt probieren wir einen anderen Überschriftenstil aus.

Typografie sollte einfach sein

Das ist also eine Überschrift für Sie — mit etwas Glück, wenn wir unsere Arbeit richtig gemacht haben, wird das ziemlich vernünftig aussehen.

Etwas, das mir eine weise Person einmal über Typografie gesagt hat:

Typografie ist ziemlich wichtig, wenn Sie nicht möchten, dass Ihre Sachen wie Müll aussehen. Machen Sie es gut, dann wird es nicht schlecht sein.

Es ist wahrscheinlich auch wichtig, dass Bilder hier standardmäßig gut aussehen:

Entgegen der landläufigen Meinung ist Lorem Ipsum nicht einfach nur zufälliger Text. Es hat Wurzeln in einem Stück klassischer lateinischer Literatur aus dem Jahr 45 v. Chr. und ist damit über 2000 Jahre alt.

Jetzt zeige ich Ihnen ein Beispiel für eine ungeordnete Liste, um sicherzustellen, dass das auch gut aussieht:

• Hier ist also der erste Punkt in dieser Liste.
• In diesem Beispiel halten wir die Punkte kurz.
• Später verwenden wir längere, komplexere Listenelemente.

Und das ist das Ende dieses Abschnitts.

Was ist, wenn wir Überschriften stapeln?

Wir sollten sicherstellen, dass das auch gut aussieht.

Manchmal haben Sie Überschriften direkt untereinander. In diesen Fällen müssen Sie oft den oberen Rand der zweiten Überschrift rückgängig machen, da es normalerweise besser aussieht, wenn die Überschriften näher beieinander liegen als ein Absatz, gefolgt von einer Überschrift.

Wenn eine Überschrift nach einem Absatz kommt …

Wenn eine Überschrift nach einem Absatz kommt, brauchen wir etwas mehr Platz, wie ich oben bereits erwähnt habe. Jetzt sehen wir uns an, wie eine komplexere Liste aussehen würde.

• Ich mache oft diese Sache, bei der Listenelemente Überschriften haben.

  Aus irgendeinem Grund finde ich, dass das cool aussieht, was bedauerlich ist, weil es ziemlich nervig ist, die Stile richtig hinzubekommen.

  Ich habe oft zwei oder drei Absätze in diesen Listenelementen, daher besteht die Schwierigkeit darin, den Abstand zwischen den Absätzen, der Listenüberschrift und den separaten Listenelementen so zu gestalten, dass alles Sinn ergibt. Ziemlich schwierig, ehrlich gesagt, man könnte stark argumentieren, dass man einfach nicht so schreiben sollte.

• Da dies eine Liste ist, brauche ich mindestens zwei Elemente.

  Ich habe bereits im vorherigen Listenelement erklärt, was ich tue, aber eine Liste wäre keine Liste, wenn sie nur ein Element hätte, und wir möchten wirklich, dass das realistisch aussieht. Deshalb habe ich dieses zweite Listenelement hinzugefügt, damit ich tatsächlich etwas habe, das ich beim Schreiben der Stile betrachten kann.

• Es ist auch keine schlechte Idee, ein drittes Element hinzuzufügen.

  Ich denke, es wäre wahrscheinlich in Ordnung gewesen, nur zwei Elemente zu verwenden, aber drei sind definitiv nicht schlechter, und da es mir anscheinend keine Schwierigkeiten bereitet, willkürliche Dinge zu tippen, kann ich es genauso gut einfügen.

Nach dieser Art von Liste habe ich normalerweise eine abschließende Aussage oder einen Absatz, weil es irgendwie seltsam aussieht, direkt zu einer Überschrift zu springen.

Code sollte standardmäßig gut aussehen.

Ich denke, die meisten Leute werden highlight.js oder Prism oder etwas Ähnliches verwenden, wenn sie ihre Codeblöcke gestalten möchten, aber es würde nicht schaden, sie okay aussehen zu lassen, selbst ohne Syntaxhervorhebung.

Hier ist, wie eine Standard-tailwind.config.js-Datei zum Zeitpunkt des Schreibens aussieht:

module.exports = {
  purge: [],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

Hoffentlich sieht das für Sie gut genug aus.

Was ist mit verschachtelten Listen?

Verschachtelte Listen sehen im Grunde immer schlecht aus, weshalb Editoren wie Medium Sie nicht einmal zulassen, aber ich schätze, da einige von Ihnen Spaßvögeln das tun werden, müssen wir die Last tragen, sie zumindest funktional zu machen.

1. Verschachtelte Listen sind selten eine gute Idee.
   • Sie könnten denken, dass Sie wirklich "organisiert" sind oder so, aber Sie schaffen nur eine hässliche Form auf dem Bildschirm, die schwer zu lesen ist.
   • Verschachtelte Navigation in Benutzeroberflächen ist auch eine schlechte Idee, halten Sie die Dinge so flach wie möglich.
   • Das Verschachteln von Tonnen von Ordnern in Ihrem Quellcode ist ebenfalls nicht hilfreich.
2. Da wir mehr Elemente benötigen, hier ist ein weiteres.
   • Ich bin mir nicht sicher, ob wir uns die Mühe machen werden, mehr als zwei Ebenen tief zu gestalten.
   • Zwei sind schon zu viel, drei sind garantiert eine schlechte Idee.
   • Wenn Sie vier Ebenen tief verschachteln, gehören Sie ins Gefängnis.
3. Zwei Elemente sind keine Liste, drei sind jedoch gut.
   • Bitte verschachteln Sie keine Listen, wenn Sie möchten, dass Leute Ihre Inhalte tatsächlich lesen.
   • Niemand möchte sich das ansehen.
   • Es ärgert mich, dass wir uns überhaupt die Mühe machen müssen, das zu gestalten.

Das Nervigste an Listen in Markdown ist, dass <li>-Elemente kein untergeordnetes <p>-Tag erhalten, es sei denn, es gibt mehrere Absätze im Listenelement. Das bedeutet, dass ich mir auch Gedanken über die Gestaltung dieser nervigen Situation machen muss.

• Zum Beispiel hier eine weitere verschachtelte Liste.

  Aber diesmal mit einem zweiten Absatz.

  • Diese Listenelemente haben keine <p>-Tags
  • Weil sie jeweils nur eine Zeile haben

• Aber in diesem zweiten Listenelement der obersten Ebene werden sie es haben.

  Das ist besonders ärgerlich wegen des Abstands in diesem Absatz.

  • Wie Sie hier sehen können, weil ich eine zweite Zeile hinzugefügt habe, hat dieses Listenelement jetzt ein <p>-Tag.

    Dies ist übrigens die zweite Zeile, von der ich spreche.

  • Schließlich hier ein weiteres Listenelement, damit es mehr wie eine Liste aussieht.

• Ein abschließendes Listenelement, aber ohne verschachtelte Liste, weil warum nicht?

Und schließlich ein Satz, um diesen Abschnitt abzuschließen.

Es gibt andere Elemente, die wir gestalten müssen

Ich habe fast vergessen, Links zu erwähnen, wie diesen Link zur Tailwind CSS-Website. Wir hätten sie fast blau gemacht, aber das ist so gestern, also haben wir uns für Dunkelgrau entschieden, fühlt sich kantiger an.

Wir haben sogar Tabellenstile hinzugefügt, sehen Sie sich das an:

Wir müssen auch sicherstellen, dass Inline-Code gut aussieht, wie wenn ich über <span>-Elemente sprechen oder Ihnen die guten Nachrichten über @tailwindcss/typography erzählen möchte.

Manchmal verwende ich sogar code in Überschriften

Auch wenn es wahrscheinlich eine schlechte Idee ist und ich historisch gesehen Schwierigkeiten hatte, es gut aussehen zu lassen. Dieser "umwickle die Codeblöcke mit Backticks"-Trick funktioniert jedoch wirklich ziemlich gut.

Eine andere Sache, die ich in der Vergangenheit gemacht habe, ist, ein code-Tag in einen Link einzufügen, wie wenn ich Ihnen von dem tailwindcss/docs-Repository erzählen möchte. Ich mag es nicht, dass es eine Unterstreichung unter den Backticks gibt, aber es ist absolut nicht den Wahnsinn wert, den es erfordern würde, dies zu vermeiden.

Wir haben noch kein h4 verwendet

Aber jetzt haben wir. Bitte verwenden Sie keine h5- oder h6-Elemente in Ihren Inhalten, Medium unterstützt aus gutem Grund nur zwei Überschriftenebenen, Sie Tiere. Ich habe ernsthaft darüber nachgedacht, ein before-Pseudo-Element zu verwenden, um Sie anzuschreien, wenn Sie ein h5- oder h6-Element verwenden.

Wir gestalten sie überhaupt nicht standardmäßig, weil h4-Elemente bereits so klein sind, dass sie die gleiche Größe wie der Fließtext haben. Was sollen wir mit einem h5 machen, es kleiner als den Fließtext machen? Nein, danke.

Wir müssen jedoch immer noch über gestapelte Überschriften nachdenken.

Stellen wir sicher, dass wir das auch mit h4-Elementen nicht vermasseln.

Puh, mit etwas Glück haben wir die Überschriften über diesem Text gestaltet und sie sehen ziemlich gut aus.

Fügen wir hier einen abschließenden Absatz hinzu, damit die Dinge mit einem anständig großen Textblock enden. Ich kann nicht erklären, warum ich möchte, dass die Dinge so enden, aber ich muss davon ausgehen, dass es daran liegt, dass ich denke, dass die Dinge seltsam oder unausgewogen aussehen, wenn eine Überschrift zu nah am Ende des Dokuments ist.

Was ich hier geschrieben habe, ist wahrscheinlich lang genug, aber das Hinzufügen dieses letzten Satzes kann nicht schaden.

GitHub Flavored Markdown

Ich habe auch Unterstützung für GitHub Flavored Markdown mit remark-gfm hinzugefügt.

Mit remark-gfm erhalten wir ein paar zusätzliche Funktionen in unserem Markdown. Beispiel: Autolink-Literale.

Ein Link wie www.example.com oder https://example.com würde automatisch in ein a-Tag umgewandelt.

Das funktioniert auch für E-Mail-Links: contact@example.com.