1. Design einer Geschäfts-Website

Achten Sie in erster Linie auf die übersichtliche Bereitstellung der Informationen, klare und übersichtliche Navigations-Steuerung sowie schnelle Ladezeiten. Der Internet-User besucht in erster Linie eine Website um INFORMATIONEN zu finden! Verzichten Sie deshalb auf jeden überflüssigen technischen "Schnick-Schnack" und übertriebener "Kunst" - das kostet nur unnötige Ladezeiten. Bei einer marketing-orientierte Website steht der Nutzen der Internet-User an erster Stelle!

Ein ansprechendes, zeitgemässes Design wird heute von einer seriösen Firma erwartet. Über Geschmack lässt sich streiten, nicht aber über technische Fertigkeiten. Einige wichtige Punkte finden Sie hier:

1.1. Responsive Webdesign (Wordsoft-CMS 2014)

Die Größe und Auflösung der Displays auf Desktop-PCs, Tablets, Smartphones variieren. Aus diesem Grund wird das Design der Website so konzipiert, dass sich die Website an die verschiedenen Grössen anpasst und dennoch gut aussieht. 

Mit dem Worldsoft-CMS 2014 ist es sehr einfach möglich Websites im Responsive Design zu erstellen. Die flexible, neue Containerstruktur, das Mega-Menü und der Revolution Slider sind auf Responsive Design ausgerichtet. Bitte beachten Sie die Anleitungen zur Containerstruktur, dem Mega-Menü und dem Revolution Slider. Die Anleitungen finden Sie hier:
http://www.worldsoft.info/2730/module

Die Standard-Einstellung von neuen Installationen ist grundsätzlich auf "Responsive Design" eingestellt. Die Navigation ändert sich automatisch und auch viele andere technische Anforderungen sind automatisch auf Responsive gestellt.

Verzichten Sie beim Responsive Design auf Tabellen bei der Gestaltung des Inhalts. Verwenden Sie für die Gestaltung lieber verschiedene Container in denen Sie Blöcke platzieren. Da Sie beliebig viele Container selbst definieren können (12 pro Zeile - unlimitierte Zeilen) empfiehlt es sich pro Container nur einen Block zu platzieren. Damit bricht der Inhalt sauber um, wenn die Website verkleinert auf einem Smartphone dargestellt wird.

Bilder bearbeiten Sie zuvor mit einem Grafikprogramm auf die Grösse, wie Sie sie auf der Website bei der Betrachtung mit einem Desktop dargestellt haben möchten. D.h. Sie verwenden nicht die Möglichkeit mit dem CMS die Bilder zu scalieren, indem Sie dort Breiten oder Höhen definieren. Die Grundeinstellung der Bilder im CMS ist automatisch auf 100 %. Sie können das zwar ändern, sollten das aber nicht tun. Wenn Sie die Grundeinstellung von 100 % lassen, scaliert das Bild automatisch immer richtig wenn weniger Platz (auf dem Smartphone) zur Verfügung steht.

Wenn Sie neue Websites ohne spezielle Anforderungen erstellen, sollten Sie die Website von Anfang an im Responsive Design erstellen. Bei manchen Websites und bei manchen Kundenanforderungen ist das nicht immer möglich und gewünscht. Auch beim Worldsoft-CMS 2014 sind nicht alle Module voll responsiv programmiert. Das betrifft z.B. das Portal-Modul und den Shop. Aus diesen Gründen wird im Moment dieser Punkt beim W.I.N.-Zertifikat noch nicht zwingend vorausgesetzt.

Responsive Design ist eine neue Technik. Früher wurden auf Wunsch des Kunden meist verschiedene Versionen gemacht, die dann über Weichen (z.B. iPhone-Weichen) aufgerufen wurden. Also eine Desktop-Version und eine für Smartphones.

Gerade dieser Punkt ist ein sehr gutes Beispiel, dass das W.I.N.-Zertifikat lebt. Noch vor wenigen Jahren gab es Telefone - heute gibt es Smartphones und Responsive Design ist ein Thema.

1.2 Schriftfarbe:

Die Schriftfarbe sollte auf das Grunddesign der Website abgestimmt sein. Wenn Sie beispielsweise eine blaue Farbe häufig beim Design verwenden, sollte die Schriftfarbe nicht schwarz, sondern ein dunkles blau sein. Insgesamt wirkt damit die Website harmonischer.

TIPP: Umso kleiner eine Schrift wird, umso dunkler muss die Farbe eingestellt werden, damit die Farbe optisch gleich wirkt. Bleiben Sie dabei im gleichen Farbton. Öffnen Sie im DW (Dreamweaver) die Farbpalette, klicken Sie auf die Farbkugel und ziehen Sie im neuen Fenster auf der rechten Seite den Regler höher oder tiefer. Im obigen rechten Beispiel hat jeder Text eine andere Farbe - obwohl sie optisch gleich wirken!

1.3 Seriosität:

Verwenden Sie keine Cartoons oder Cliparts, sondern möglichst nur Bilder. Cliparts wirken sehr laienhaft und sind fast immer nur auf Websites von Amateuren zu sehen. Unsere Kunden sind seriöse Kaufleute - das muss sich auch in der Website widerspiegeln.

1.4 Firmenlogo:

Plazieren Sie das Firmenlogo in der Regel in der Ecke links oben. 

1.5.1 Firmenname - Qualität:

Achten Sie besonders auf eine optisch hervorragende Aufmachung des Firmennames. Der Firmenname bleibt - wie das Logo - die gesamte Zeit über sichtbar. Der Blick des Internet-Besuchers wird also immer wieder über das Logo und den Firmennamen streichen. Ein schlecht gemachter Firmenname kann eine ansonsten gute gemachte Website zerstören! Gerade den Firmennamen nicht zu stark komprimieren!

1.5.2 Firmenname - als Bild:

Immer wieder sieht man Firmennamen, die nur als normaler Text eingefügt worden sind. Das hat den Nachteil, dass die Buchstaben durch die niedrige Auflösung von 72 dpi sehr "gezackt" wirken (siehe z.B. das A). Empfehlung: Legen Sie den Firmennamen als Bild an. Verwenden Sie Anti-Alias (z.B. glatt) und wählen Sie die richtige Hintergrundfarbe. Komprimieren Sie nicht zu stark, da sonst die Hintergrundfarbe durch die Komprimierung zu stark verändert werden könnte. Mit dem Effekt "Schlagschatten" gewinnt der Firmenname erheblich an optischer Wirkung.

1.5.3 Firmenname - transparent:

Wenn der Farb-Rahmen um den Firmennamen farblich von der Skinfarbe abweicht oder das Bild zu schwer geworden ist, können Sie die unnötige Fläche auch transparent stellen. Klicken Sie dazu im Fenster der Exportvorschau auf die Pipette (siehe Pfeil) und dann ins grüne Feld. Der grüne Hintergrund wird daraufhin transparent:

1.5.4 Firmenname - richtige Hintergrundfarbe:

Wenn Sie einen transparenten Text auf eine Farbfläche stellen, müssen Sie bereits bei der Texterstelltung die jeweilige Farbe als HINTERGRUNDFARBE einstellen! Beim Exportieren klicken Sie wieder auf die Pipette wie unter 1.7.3 beschrieben. Im unteren linken Beispiel wurde der Text mit der Hintergrundfarbe "weiss" erstellt - das rechte Beispiel mit der richtigen Hintergrundfarbe. So vermeiden Sie "weisse Ränder". Wenn Sie einen Skin mit einem Farbverlauf oder verschiedenen Farben verwenden, müssen Sie einen Mittelwert dieser Farben verwenden - das klappt oft - aber nicht immer!

1.5.5 Firmenname - vertikal ausrichten:

Beim Einbau des Firmennamens sollten Sie den Firmennamen auch immer VERTIKAL ausrichten und nicht nur als Bild einfügen. Erzeugen Sie eine Tabelle, stellen Sie diese auf Vertikal=Mitte. Ziehen Sie dann die Tabelle so lange vertikal nach unten, bis der Firmenname in der Mitte des Skinrahmens steht.

1.6 Gesamtgröße einer HTML-Seite:

Achten Sie darauf, dass Sie die Ladezeiten einer Seite kurz sind. Verwenden Sie deshalb nicht zu grosse Bilder und schwere Effekte. Die heutigen Internet-Anschlüsse sind zwar meist sehr schnell, aber gerade für mobile Nutzer spielen die Ladezeiten eine Rolle. Wenn Sie z.B. eine Slideshow verwenden, sollten Sie diese für das Smartphone ausschalten. Das Worldsoft-CMS hat im CSS-Editor die Funktion einzelne Elemente der Website für Smartphones auszublenden. Meist machen solche Elemente auf einem Smartphone ohnehin keinen guten optischen Eindruck.

1.7 Leerzeilen am Ende einer HTML:

Damit der Internet-Besucher besser scrollen kann, setzen Sie ans Ende jeder HTML-Seite zwei bis drei Leerzeilen (Umschalttaste/Enter). Dadurch vermeiden Sie, dass der Text am unteren Rand "klebt".