Mittel HTML-Vorlagen

Nützliche Medium-HTML-Vorlagen für unterschiedliche Inhaltslayouts

Der Inhalt steht meist an erster Stelle, wenn jemand nach Medium-HTML-Vorlagen sucht – egal, ob es sich um einen langen Artikel, eine Zahlentabelle oder eine kurze Mitteilung mit einem einzigen Link handelt. Jedes Design ist ein Layout oder Block, den Sie in Nicepage anpassen und als HTML-Datei exportieren. Social-Media-Designs machen einen großen Teil der Liste aus, wenn auch nicht alles.

Was die einzelnen Beispieldesigns enthalten

Drei Designs aus der Liste wurden für ganz unterschiedliche Inhalte konzipiert:

• Medium Text With Button ist ein kompakter Block mit zentrierter Überschrift und blauem Button, ideal für eine kurze Ankündigung.
• Social Media Analytics Reporting platziert Text über einem Bild, sodass ein Bericht eingeleitet werden kann und die Zahlen einem nachfolgenden Block überlassen werden.
• Medium IT Enterprise ist ein umfassendes Consulting-Layout mit Service-Karten, einem Teambereich und einem FAQ-Akkordeon, die alle echten Text erfordern.

Die Sammlung unterscheidet zudem zwischen vollständigen Layouts und einzelnen Blöcken. Ein Block lässt sich direkt in ein bestehendes Projekt einfügen, während ein vollständiges Layout ein neues Projekt startet, bei dem alle Abschnitte bereits aufeinander abgestimmt sind.

Überschriften und Tabellen mit echtem Text prüfen

Bevor Sie den Demo-Inhalt austauschen, achten Sie auf die Reihenfolge der Überschriften, die Absatzaufteilung und die Platzierung von Links. Ein Platzhaltertitel aus drei Wörtern kann schnell zwei Zeilen füllen, sobald Ihr eigener Text eingesetzt wird, und die Struktur sollte weiterhin logisch lesbar sein. Überprüfen Sie die Überschriftenebenen im exportierten Code erneut.

Ein Kampagnenbericht benötigt beispielsweise einen Titel, den Berichtszeitraum und eine Zusammenfassung vor jeglichen Zahlen. Die Werte gehören in eine Tabelle, unter der die Datenquelle vermerkt ist. Das Tabellenelement von Nicepage verwaltet Zeilen, Spalten und eine gestaltete Kopfzeile. Eine Tabelle ist praktisch, wenn Leser dieselben Kennzahlen über viele Zeilen hinweg vergleichen; zwei oder drei Zahlen lesen sich hingegen im Fließtext besser. Breite Tabellen wirken in der Demo oft aufgeräumt, auf dem Smartphone müssen Leser jedoch seitlich scrollen und verlieren den Überblick darüber, welche Zahl wohin gehört.

Exportierte Dateien im Browser testen

Sobald das Design fertiggestellt ist, exportiert Nicepage es als HTML-Dateien inklusive der benötigten Bilder und Skripte. Das Paket kann anschließend auf Ihr eigenes Hosting geladen oder an einen Entwickler übergeben werden. Öffnen Sie das Ergebnis auf einem Laptop und einem Smartphone und klicken Sie jeden Link an, da Platzhalter-URLs leicht übersehen werden. Externe Dienste wie Analyse-Tracker oder Buchungs-Widgets sind nicht enthalten und sollten separat eingebunden und getestet werden.

Farben und Schriftarten lassen sich später problemlos anpassen. Demo-Texte sind jedoch genau auf das Design abgestimmt. Eigene Überschriften, der längste Absatz und reale Links verraten Ihnen daher weit mehr über die tatsächliche Eignung als jede Vorschau.