Website gestalten: Tipps und Software für eine Homepage

Jede Internetseite besteht im Frontend, also dem im Browser sichtbaren Teil, aus HTML und CSS. HTML ist eine sogenannte Auszeichnungssprache mit der die Struktur und Reihenfolge aller auf einer Website befindlichen Elemente definiert wird. Die CSS (Cascading Style Sheets) gibt die Gestaltung aller Elementes vor. So sieht das HTML im Quelltext einer Website aus:

  <h2>Tipps für die Gestaltung einer Website</h2>
  <p>Der erste Absatz meines Beispiels <span> mit etwas Text</span> der inhaltlich aber nichts weiter aussagt.</p>

  

In einer CSS-Datei wird dann zentral definiert, wie die Elemente für Überschriften und Absätze genau aussehen sollen. Dabei können neben Positionen, Abständen, Farben, Hintergründen, Textformate und Schriftwarten viele weitere Vorgaben zur Gestaltung gemacht werden.

h2 {
  font-size: 22px;
  color: red
}

p {
  font-family: Times New Roman;
  color: #666;
  font-size: 18px
}

p span {
 font-weight: bold
}

Hier ein konkretes Beispiel für das Zusammenspiel von HTML und CSS an unserem konkreten Beispiel:

Tipps für die Gestaltung einer Website

Der erste Absatz meines Beispiels mit etwas Text der inhaltlich aber nichts weiter aussagt.

Immer wenn nun eines der Elemente h2, p, oder span verwendet wird, wird die zuvor definierte Gestaltung darauf übertragen. Gibt es nachträglich eine Änderung an der CSS-Datei, wirkt sich dies auf alle darin definierten Objekte einer HTML-Seite aus.

Traust du dich etwas Programmierung in HTML und CSS selbst auszuprobieren? Mit dem Tool JS Bin lassen sich Änderungen sofort sichtbar machen. Unser genutztes Beispiel kannst du hier selbst verändern.

Selbst ein erfahrener Entwickler kann sich nicht alle Befehle einer Programmiersprache merken. Dafür gibt es tolle Bibliotheken mit allen möglichen Elementen aus denen wir uns bedienen können. Manchmal vergesse ich einfach, wie sich runde Ecken oder die Hintergrundfarbe für Textelemente definiert wird 😀 .

Von den Grundlagen zum fertigen CMS

Was wir bisher gelernt haben sind Grundlagen, die man im Webdesign beherrschen sollte um selbst einige Anpassungen an der Gestaltung einer Website vornehmen zu können. Die „echte“ Programmierung, die wir für die dynamische Darstellung von Inhalten benötigen ist sehr viel komplexer. Die dafür vorherrschende Programmiersprache ist PHP in Kombination mit einer Datenbank (meist MySQL). Schließlich wollen wir ja bei der Pflege einer Website ein übersichtliches Redaktionssystem bedienen, um darin Texte und Bilder in dafür vorgesehene Felder einzufügen.

Unzählige Frameworks ermöglichen uns heute den Entwicklungsprozess von komplexen Webseiten zu beschleunigen. Das bedeutet, dass wir auf Bibliotheken zurückgreifen können in denen alle grundlegenden Funktionen und Strukturen eines kompletten Redaktionssystems bereits vorhanden sind. Wir müssen also nicht jedes Seitenelement durch Eingabe der Formatvorlagen individuell mit CSS-Code gestalten. Wir binden dafür ganz einfach Vorlagen wie Bootstrap in den HEAD unseres HTML-Gerüstes ein und schon sind alle verfügbaren Attribute in Form gebracht.

Noch einen Schritt weiter sind Content-Management-Systeme wie Drupal, WordPress oder Joomla. In der Einrichtung und Administration etwas schwieriger als ein Homepage Baukasten, aber dafür sehr mächtige Systeme mit denen auch häufig große Medienseiten erstellt werden.

Für wen ist welche Website Software geeignet?

Für Blogger, Online-Magazine und Firmen
Das weltweit meistgenutzte System ist WordPress. Viele Webhoster (Vergleich) bieten die Option zur automatischen Installation des CMS auf einem Webspace in sehr günstigen Tarifen an (ca. 5 Euro/Monat). Besonders für Blogger ist dieses Content-Management-System eine optimale Lösung, da es von seinen Entwicklern genau zu diesem Zweck konzipiert wurde. Aber auch viele Firmen und Online-Medien greifen auf kostenlose Open Source Software zurück, wenn es um die eigene Plattform oder eine Firmenpräsenz geht. In Medienhäusern kommt zumeist Drupal zum Einsatz. In diesem Fall muss in der Regel etwas Arbeit in die Individualisierung der Software und des Templates investiert werden. Freelancer gibt es in diesem Bereich unglaublich viele. Die Tagessätze liegen dabei zwischen 500 und 800 Euro.

Für Unternehmer, Einzelhändler, kleine Onlineshops und Organisationen
Wenn es schnell gehen soll eine professionell anmutende Website zu gestalten und dabei das Budget sehr gering ist, dann entspricht ein Homepage Baukasten oftmals genau den Erwartungen. Mit Anbietern wie Weebly, Wix und Jimdo werden jedes Jahr mehrere Millionen Webseiten erstellt.

    • Webseiten mit Jimdo gestalten

    • Komplett visuelle Bearbeitung der Website
    • Gestaltungsvorlagen mit Beispielinhalten können genutzt werden
    • Optimiert für Desktop und mobile Nutzung
    • Onlineshop-Funktion inbegriffen
    • Anbieter aus Deutschland, Rechtssicherheit für Shops
    • Grenzen in der Gestaltung gegenüber eines CMS

Äußerlich unterscheiden sich diese Systeme für Laien nicht sichtbar von deinem komplexen Redaktionssystem. Die Art der Gestaltung ist allerdings eine deutlich andere. Denn wie der Name schon vermuten lässt, werden damit wie in einem Baukasten verschiedene Elemente visuell an beliebiger Position einer Homepage platziert und optisch nach belieben angepasst.

Jimdo Detail Editor
Detail Styling im WYSIWYG-Editor von Jimdo

Der Nutzer muss keine Zeile Code beherrschen, um das System zu bedienen. Das ist praktisch, wenn der Fokus des Unternehmers nicht auf Webdesign, sondern auf der Entwicklung und dem Verkauf eigener Produkte liegt.

Was heute im Webdesign zählt

Wenn wir von Webdesign reden, also der Gestaltung von Internetseiten, dann geht es vor allem um Struktur und Nutzerführung. Mit der Seitenstruktur wird definiert, wo Elemente wie der Hauptinhalt, die Sidebar, eine Navigation und der Footer im HTML-Gerüst platziert werden. Diese Reihenfolge und Anordnung der Seitenbestandteile ist sehr wichtig für den Fokus des Betrachters. Am Desktop-Rechner lässt sich schnell ein Überblick verschaffen, welche Inhalte für den Besucher relevant sind. Auf einem Smartphone hingehen sollte durch die Struktur des Webdesigners alle wichtigen Inhalte und Navigationselemente möglichst weit oben angeordnet werden.

Responsive Design – fließendes Layout

Jede neue Website sollte heute gleichermaßen für mobile Geräte und die Darstellung auf großen Bildschirmen optimiert sein. Nach dem Prinzip des responsiven Designs passen sich alle Seitenbestandteile so an die Displaygröße an, dass die wichtigen Inhalte immer optimal lesbar dargestellt werden. Dabei können Teile einer Website für die Anzeige auf einem Smartphone am Seitenende angezeigt oder teilweise auch gar nicht erst geladen werden.

Beispiel Responsives Design
Der Reiseveranstalter Driftwood Travelling hat seine responsive Website mit Jimdo erstellt. Das Layout reagiert automatisch auf die Bildschirmgröße.

Durch das heutige Mediennutzungsverhalten mit seinen vielen verschiedenen Devices und Displaygrößen ist es einfach unabdinglich, dass eine Webseite immer optimal lesbar ist. Auch für Suchmaschinen wie Google ist die Ladegeschwindigkeit und Lesbarkeit für mobile Geräte zu einem sehr relevanten Kriterium für die Platzierung in den Suchergebnissen geworden.

Website Tutor
Auch Website-Tutor.com ist mit einem Template im responsiven Layout ausgestattet. Die Basis für das CMS ist WordPress.

Hans-Jürgen Herbst

Hans-Jürgen ist Gründer von valao digital und neben dem Aufbau eigener Projekte als Berater für digitale Geschäftsmodelle aktiv. Bei Website Tutor teilt er seine Erfahrungen aus dem Online-Marketing und hilft Einsteigern beim Aufbau einer eigenen Homepage.

Website gestalten im Test von : 8/10

6 Gedanken zu „Website gestalten: Tipps und Software für eine Homepage

    1. Weil die Breite eines Displays beim Aufruf einer Seite immer mitgegeben wird. Es werden dann die entsprechen Style-Informationen der CSS-Datei für die Darstellung vom Browser interpretiert. Vom Entwickler können in der CSS je nach Display-Breite unterschiedliche Formatvorgaben definiert werden.

  1. Guter Artikel für mich als Anfänger. Gibt es vielleicht eine Website mit der man Schritt für Schritt lernen kann, wie die html Programmierung geht? Ich möchte selbst eine Website gestalten, kann bisher aber nur ein paar Basics.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.