Website gestalten: Tipps und Software für eine Homepage

SEO und WordPress Freelancer Hans-Jürgen Herbst

Hans-Jürgen Herbst, WordPress Freelancer

Ich baue Webseiten mit WordPress und sorge für Reichweite über Google als SEO Freelancer. Was kann ich für dich tun?

Für die Gestaltung einer Website sind Erfahrungen mit HTML und CSS notwendig. Dieser Überblick erläutert die Prinzipien im Webdesign und bietet Software zur Erleichterung bei der Entwicklung einer 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.

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 :D .

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.

Ä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 hingegen 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.

Teste WordPress kostenlos. Wähle eine Vorlage: