Webdesign
Wenn man Webseiten erstellen möchte, dann muss man festlegen, wie die Webseite aussehen soll. Das betrifft das Logo, die Bilder und Grafiken, die für die Webseite bzw. für das Design der Webseite verwendet werden sollen, aber auch die Navigation, die Textgrößen, die Struktur und Aufteilung der Webseite und ähnliches. All diese Dinge werden unter dem Begriff Webdesign zusammengefasst.
Erstellt man die Webseite für ein Unternehmen, dann sind den Freiheiten häufig enge Grenzen gesetzt. Beispielsweise haben viele Unternehmen eine Corporate Identity (CI), mit der das Erscheinungsbild des Unternehmens in der Öffentlichkeit festgelegt wird. So ist man z.B. bei der Auswahl der Farben häufig an gewisse Vorgaben gebunden und man muss das Logo und die Farben aus einer vorgegebenen Farbpalette verwenden. Auch bei der Schriftart ist man häufig an Vorgaben gebunden.
Es kann natürlich auch sein, dass man die volle Freiheit hat und das Webdesign beliebig gestalten kann. In dem Fall kann man der Kreativität freien Lauf lassen und man muss sich ein schönes und funktionelles Layout ausdenken. Dabei betrifft die Erstellung eines Layouts nicht nur das Logo, die Farben und die verwendeten Bilder. Man muss auch festlegen, in welche Bereiche die Webseite aufgeteilt wird, wie die Navigation gestaltet werden soll, welche Schriftgrößen verwendet werden und ähnliche Dinge.
Dabei muss man auch berücksichtigen, welche Zielgruppe man mit der Webseite ansprechen möchte. Beispielsweise haben viele große Modekonzerne in der Regel nicht die Absicht, eine Webseite zu erstellen, auf der sie die Kunden mit vielen Informationen versorgen wollen. Da geht es meistens eher darum, sich zu präsentieren, den Besucher zu beeindrucken und einen sympathischen Eindruck zu hinterlassen. Bei manch anderen Webseiten stehen dagegen die Informationen im Vordergrund und man muss das Webdesign so auswählen, dass die Besucher gerne und möglichst lange auf der Webseite verweilen, die gesuchten Informationen schnell zu finden sind und die Webseite gut navigierbar ist.
Bei der Ausarbeitung eines Layouts muss man auch die Technik berücksichtigen, die für die Erstellung und Pflege der Webseiten verwendet wird. Wenn man den Code für die Webseiten händisch über HTML-Befehle eingibt, so hat man tendenziell große Freiheiten. Es kann aber auch sein, dass die Internetpräsenz auf ein Content Management System (CMS) basieren soll. In dem Fall muss man prüfen, ob die Umsetzung des Layouts mit dem CMS möglich ist, da hierbei z.B. einige Dinge standardisiert sein können, die man nicht einfach ändern kann. Das ist bei Content Management Systemen häufig systembedingt, weil sie normalweise darauf ausgelegt sind, dass viele Redakteure die Seiten einer Internetpräsenz erstellen und bearbeiten können. Hierfür müssen einheitliche Standards geschaffen werden, die nicht verändert werden können. Wenn z.B. jeder Redakteur eine andere Schriftgröße verwendet oder die Bilder an beliebigen Stellen platziert, dann würden die Seiten bzw. die gesamte Internetpräsenz ein uneinheitliches Bild abgeben. Dafür haben Content Management Systeme den Vorteil, dass viele Menschen mit einfachen Mitteln gleichzeitig an den Seiten arbeiten können, ohne dass hierfür besondere HTML-Kenntnisse notwendig sind.
Einheitliche Standards sind jedoch nicht nur beim Einsatz eines Content Management Systems sinnvoll. Auch wenn die Webseiten nur mit einem einfachen HTML-Editor erstellt werden, sollte man zumindest versuchen, den Besuchern ein einheitliches Bild der Webseite wiederzugeben. Um das zu realisieren, greift man üblicherweise auf Cascading Style Sheets (CSS) zu. Mit CSS kann man im Grunde das gesamte Aussehen der Seiten oder den Inhalten festlegen, z.B. die Schriftgrößen, die Abstände, die Hintergrundbilder, die Größe der einzelnen Container und vieles mehr. So muss man sich auch nicht jedes Mal Gedanken über diese Dinge machen und kann die Webseiten zeitsparend erstellen und bearbeiten.
Aufteilung der Webseite
Eine Internetpräsentation besteht aus mehreren, zum Teil sehr vielen Seiten. Jede Seite enthält verschiedene Elemente, die auf der Seite untergebracht werden müssen. Bevor man mit Farben experimentiert und ein Design für die Internetpräsenz festlegt, sollte man die Aufteilung der Haupt- und Detailseiten festlegen. Als Hauptseite kommen neben der Startseite weitere, wichtige Seiten in Betracht, z.B. Kategorien. Diese können, müssen jedoch nicht, von der Aufmachung her durchaus anders als die Detailseiten gestaltet werden. Beispielsweise könnte man festlegen, dass auf den Hauptseiten jeweils die neuesten Neuigkeiten zum Thema in mehreren Spalten angezeigt werden und die Detailseiten je nach Inhalt anders gestalten.
Zudem müssen die übrigen Elemente platziert werden. Es muss z.B. festgelegt werden, ob, wo und wie ein Logo platziert wird. Außerdem muss auf den Seiten die Navigation gut gewählt und untergebracht werden. Beispielsweise hat man bei einer horizontalen Navigation eine begrenzte Breite und die User scrollen gewöhnlich von oben nach unten. Wenn eine Navigation viele Punkte enthält, ist eine vertikale Anordnung vorteilhafter, da man damit viele Navigationspunkte untereinander unterbringen kann.
Es ist auch zu überlegen, welche Art von Navigation man verwenden möchte. Beispielsweise gibt es sehr schöne Aufklappmenüs, die sich bei einer Berührung mit dem Mauszeiger öffnen. Solche Menüs bieten dem User in der aufgeklappten Position eine schöne Übersicht über die Navigationspunkte. Allerdings haben sie den Nachteil, dass sie zum Teil wichtige Inhalte verdecken und manchmal auch umständlich zu bedienen sind. Insbesondere Personen mit wenig EDV-Kenntnissen haben häufig Probleme damit. Außerdem basieren solche Menüs meistens auf JavaScript und wenn im Browser JavaScript deaktiviert ist, dann funktionieren sie nicht mehr wie gewünscht. Es muss also immer eine Alternative für solche Fälle eingebaut werden.
Wie man die Elemente positioniert, ist von den individuellen Vorlieben abhängig. Seit den Anfängen des Internets hat sich eigentlich etabliert, dass man oben ein Header mit dem Logo hat, die Navigation auf der rechten oder linken Seite platziert und die Inhalte auf der anderen Seite. Üblich ist auch eine Fußzeile, wobei diese auch häufig weggelassen wird.
Typische Aufteilung in Online-Shops und für Smartphones
Online-Shops haben viele Elemente unterzubringen, weshalb viele den mittleren Bereich unterhalb des Headers in drei Bereiche aufteilen. Auf der linken Seite platzieren sie meistens die Navigation mit den Produktkategorien und auf der rechten Seite eine Leiste mit weiteren Informationen wie z.B. News, Versand- und Zahlungsinformationen und ähnliche Dinge. Die mittlere Spalte bietet zumindest auf Desktop-Rechnern genug Platz zum Darstellen der Produktdetails und sonstiger Inhalte.
Da immer mehr Menschen mit Smartphones ins Internet gehen, bauen viele Entwickler die Webseiten so, dass diese auch auf Smartphones gut aussehen. Hierbei werden alle Elemente häufig zentriert positioniert. Das sieht zwar manchmal spartanisch aus und man hat unter Umständen das Gefühl, dass die Zeit in die Anfänge des Internets zurückgedreht wird. Es hat jedoch den Vorteil, dass die Inhalte bei geringeren Breiten einfach zusammengerückt bzw. die Textzeilen umgebrochen werden. So kann der Besucher mit einem Smartphone den Inhalt hoch und runter scrollen und alle Texte, Bilder etc. sind angenehm zu lesen.
Flexibilität mit responsive Webdesign
Im Zuge der Verbreitung von Smartphones, Tablets und sonstigen Geräten mussten Webdesigner eine Lösung finden, mit der die Webseiten auf verschiedenen Geräten gut dargestellt werden können. Man hat zwar die Möglichkeit, für jede Webseite eine mobile Version zu erstellen, das bedeutet jedoch einen erhöhten Aufwand für die Erstellung und Pflege. Außerdem sind die mobilen Seiten unter einer anderen Adresse erreichbar, wofür man häufig Subdomains wie z.B. mobile.example.com verwendete.
Daher werden immer mehr Webseiten mit flexiblen Einstellungen erstellt, was responsive Webdesign genannt wird. Hierbei werden die CSS-Einstellungen so gesetzt, dass die Eigenschaften der Elemente flexibel sind und von der verfügbaren Breite des Geräts abhängen. So ist z.B. möglich, die Navigationsleiste auf normalen Monitoren links anzuordnen, auf Tablets kleiner darzustellen und auf Smartphones mittig. Auch die Schriftgrößen sind flexibel einstellbar, so dass der Text auf die Geräte angepasst dargestellt werden kann. Im Grunde kann man alle CSS-Einstellungen von der Breite (oder Höhe) abhängig machen.
Die Erstellung von responsive Webdesign erfordert zwar zu Beginn etwas mehr Aufwand, es hat jedoch den Vorteil, dass man die Inhalte nicht mehrfach erstellen bzw. in die mobile Version migrieren muss. Auch bleibt die Domain der Webseite bei allen Geräten gleich. Das ist z.B. wichtig für eingehende Links. Hätte man eine zusätzliche mobile Version, würden viele Hyperlinks, die auf die Seiten gesetzt werden, mal auf die Desktop-Version und mal auf die mobile Version gesetzt werden. Dabei kann z.B. passieren, dass eine Person an einem Desktop-Rechner sitzt und auf einen Link klickt, der auf die mobile Version gesetzt wurde oder umgekehrt. Das könnte dazu führen, dass die Webseiten auf den Besucher unansehnlich wirken. Es ist zwar möglich, die Auflösung des Gerät vom Besucher auszulesen und ihn von einer mobilen Seite auf die Desktop-Version und umgekehrt umzuleiten. Das erfordert jedoch einen gewissen Aufwand, der Besucher könnte die Ermittlung der Bildschirmauflösung unter Umständen blockieren und es ändert trotzdem nichts an der Grundproblematik, dass eine Seite über zwei Adressen erreichbar ist und folglich mehrere Hyperlinks für ein und dieselbe Seite gesetzt werden.
Responsive Webdesign hat aber auch einige Nachteile, die es zu erwähnen gilt. Denn, eine Webseite die responsive ist, könnte bei den Besuchern z.B. auch auf Ablehnung stoßen wenn die Webseite auf dem kleineren Gerät "plötzlich anders aussieht". Viele Menschen erwarten nämlich überall dasselbe Aussehen und es macht ihnen nichts aus, auf kleineren Geräten die Inhalte größer zu zoomen. Bei großen Webseiten mit sehr langen Menüstrukturen kann es außerdem passieren, dass im sichtbaren Bereich des Bildschirms, aufgrund der Größe der Navigation, der Inhalt nach dem Laden zunächst nicht sichtbar ist. Die Inhalte einer Webseite sind auch nicht immer darauf ausgelegt, innerhalb eines schmalen Bereichs hoch und runter zu scrollen.
Ob man die Webseiten responsive erstellt oder nicht, ist nicht immer einfach zu beantworten und muss vom Eigentümer der Webseite nach persönlichen Präferenzen entschieden werden. Es ist generell gesehen eine tolle Technologie und kann, sofern es ordentlich gemacht ist, den Besuch einer Webseite komfortabler gestalten lassen.