Ein Satz verändert die ganze Seite
„Kleine Ideen. Gute Gestaltung.“ sieht als Überschrift ganz gut aus. Aber was macht dieses Studio eigentlich? Gib in der Vorschau „Illustrationen für Bücher und kleine Marken“ ein. Sofort weiß man mehr, obwohl sich das Layout gar nicht geändert hat. Ergänze jetzt deinen eigenen Namen und schau, ob dieselbe Vorlage zu deinem Inhalt passt.
Für die Übung haben wir das fiktive Studio Forma vorbereitet, das visuelle Identitäten, Illustrationen und Websites gestaltet. Seine kleine Website steckt in einer HTML-Datei. Drei Bedienelemente ändern Name, Überschrift und Akzentfarbe. Du kannst unser Beispiel herunterladen oder mit dem Prompt unten und KI-Hilfe eine ähnliche Seite bauen.
Zuerst eine Datei, die sich öffnen lässt
Eine Seite in einer Datei ist ein bequemer Einstieg: speichern und sofort im Browser ansehen. Füge die folgende Anweisung in ein Modell ein, das beim Programmieren hilft. Bekommst du nur Code, kopiere ihn in einen Texteditor und speichere ihn als index.html in UTF-8. Achte auf die Dateiendung: index.html.txt öffnet sich weiterhin als Text.
Bereite vor deiner eigenen Version Name, Leistungsumfang und Texte vor. Unserem fiktiven Studio haben wir keine Kunden, Auszeichnungen oder Kontaktdaten erfunden. Wenn du deine Adresse einträgst oder ein Formular ergänzt, leg auch fest, wohin der Klick führen soll. Das Modell braucht diese Angaben ebenso wie Gestaltungshinweise.
Was ins Feld gehört, bleibt Text
Feile zuerst an den Sätzen, bevor du Schriften verkleinerst und Elemente verschiebst. Passt dein Angebot in „Illustrationen für Bücher und kleine Marken“, musst du nicht die ganze Leistungsliste in die Überschrift zwängen. Besucher sollen verstehen, womit sie dich beauftragen können.
Beim Prüfen der Demo haben wir HTML-Tags in den Namen eingegeben. Sie blieben normaler Text. Wiederhole den Versuch mit <b>Mein Studio</b>: Auch die Klammern sollten sichtbar bleiben, die Schrift darf nicht fett werden. Wir verwenden hier textContent, eine Eigenschaft, die den Feldinhalt als Text einsetzt. Die Dokumentation findest du unter dem Artikel.
Jetzt eine lange Überschrift und ein kleiner Bildschirm
Verkleinere das Fenster auf 320 px oder öffne die Datei auf dem Handy. Gib einen längeren Namen und eine längere Überschrift ein. Die Seite darf höher werden, aber Text sollte nicht verschwinden oder das Layout seitlich hinausschieben. Gehe danach mit Tab durch die Felder. Eine sichtbare Markierung muss zeigen, wo du gerade bist.
Prüfe auch den dunklen Modus des Systems oder Browsers. Unser Beispiel passt Hintergrund und Text mit prefers-color-scheme an, womit die Seite diese Einstellung auslesen kann. Der gewählte Akzent bleibt erhalten; wir setzen ihn vor allem in der Illustration ein. Übernimmst du diese Farbe für kleine Texte, prüfe deren Lesbarkeit gesondert. Eine schöne große Farbfläche lässt sich nicht automatisch gut lesen.
So speicherst du deine Änderungen
„HTML herunterladen“ gibt dir die ursprüngliche Vorlage mit Bedienelementen. Die aktuellen Vorschauänderungen gehen nicht in diese Kopie ein. Um sie zu behalten, öffne die heruntergeladene Datei im Editor und ändere name, headline und accent im Objekt defaults am Skriptende. Aktualisiere auch die Anfangstexte im HTML selbst. Dann ist dein Inhalt auch ohne JavaScript sichtbar. Speichere die Datei unter einem neuen Namen und öffne sie erneut.
Wenn Inhalt und Aussehen passen, kannst du das Modell bitten, die Bedienelemente zu entfernen und nur die Portfolioseite stehen zu lassen. Ergänze einen echten Kontakt, klicke darauf und prüfe das Ziel. Damit hast du ein lokales Projekt. Die Veröffentlichung im Internet ist ein eigener nächster Schritt.
Quellen und weiterführende Links
Die Quellen zu diesem Artikel. Anleitungen und Beispielszenarien sind Vorschläge unserer Redaktion.
- MDN: textContent und der Unterschied zu innerHTML (öffnet einen neuen Tab)developer.mozilla.org
- MDN: Farbauswahlfeld (öffnet einen neuen Tab)developer.mozilla.org
- MDN: prefers-color-scheme (öffnet einen neuen Tab)developer.mozilla.org