Dokumentation DPM Webdesign WS Julia Kuhlmann

Transkript

1 Dokumentation zur Websiteerstellung im Modul Webdesign II FH Südwestfalen Soest Design- und Projektmanagement Wintersemester Abgabetermin: 07. März

2 Inhalte der Dokumentation Grund für die Entwicklung einer Website für die Green Solutions GmbH Verwendete Technologie Auflösung und Browserkompatibilität Layout Farbwelt Struktur der Website Funktionalität Taxonomien Konventionen Relevanz Prägnanz Usability Fazit 2

3 Grund für die Entwicklung einer Website für die Green Solutions GmbH Vor allem im jüngeren Teil der Gesellschaft hat sich eine Webpräsenz mittlerweile als Art digitaler Visitenkarte etabliert. Im Fall von Green Solutions erfüllt die Website gleich mehrere Zwecke. Zum einen dient sie Informations- und Imagezwecken. So soll beispielsweise über das Unternehmen und die von ihm angebotenene Leistungen informiert werden. Zum anderen soll über die Website Geld verdient werden, indem die User als neue Kunden für den von Green Solutions angebotenen Strom geworben werden. Dabei richtet sich die Website sowohl an Privat- als auch an Firmenkunden. Verwendete Technologie Die Webpräsenz besteht ausgenommen dem Flash-Intro rein aus HTML und PHP Seiten, die jeweils mithilfe von CSS formatiert sind. Lediglich das Intro besteht aus einer Flashanimation. Auf den anderen Seiten wurde aufgrund der nicht vorhandenen Kompatibilität zum iphone auf Flash verzichtet. Dynamik wird der Website hingegen durch Hovereffekte, die mittels CSS realisiert sind, verliehen. Um den Mitartbeitern der Green Solutions GmbH gegebenenfalls die Aktualisierung und Instandhaltung der Seite so einfach wie möglich zu machen, wurde ein Template des Grundgerüsts der Seite erstellt. Der bearbeitbare Bereich des Templates beschränkt sich auf die Headernavigation sowie das Textfeld. Die Navigation konnte nicht in das Template aufgenommen werden, da sie aufgrund der enthaltenen Grafiken auf jeder Seite manuell angepasst wurde. Auflösung und Browserkompatibilität Die Website wurde für den Mozialla Firefox und den Microsoft Internet Explorer konzipiert und funktioniert mit beiden Browsern einwandfrei. Durch die Kompatibilität zu diesen beiden Browsern ist gemäß des Portals gewährleistet, dass 92,9 Prozent 1 der Internetnutzer die Seite richtig angezeigt bekommen. Bezogen auf die Bildschirmauflösung kommt die Website am besten auf einer Größe von 1280 x 1024 Pixel zur Geltung. Allerdings ist sie so konzipiert, dass auch auf einer Breite von 1024 Pixeln noch alle Inhalte in der Breite zu sehen sind. Hiermit ist die Bildschirmauflösung von 71,1 Prozent 2 aller Internetnutzer abgedeckt. Parallel 1 Quelle: 2 siehe oben 3 siehe oben 3

4 dazu verfügen 17,8 Prozent 3 aller Internetuser über eine größere Auflösung. Dank der horizontalen grünen Leiste der Website, die sich der Auflösungsgröße des Bildschirms anpasst und immer von einem Bildschirmrand zu anderen reicht, sieht die Website auch auf großen Bildschirmen nicht verloren aus, da sie durch die grüne Leiste optisch fest Abb. 1: Website bei einer Bildschirmauflösung von 1920x1200 px. Abb. 2: Website bei einer Bildschirmauflösung von 1024x768 px. 4

5 auf dem Bildschirm verankert ist. Des Weiteren passt sich der Hintergrund dynamisch an die Auflösungsgröße an, weshalb die Webpräsenz auf jedem Bildschirm einen durchgängigen Hintergrund ohne Rand hat. Ladezeit Um die Ladezeit der Webiste so gering wie möglich zu halten wurden alle enthaltenen Grafiken weboptimiert abgespeichert. Die Hintergrundgrafik besteht darüber hinaus lediglich aus einem wenige Pixel breiten Bild. Es wird per CSS Befehl repeat-x so oft hintereinander angezeigt, wie das Browserfenster breit ist. Auf diese Weise muss nur eine sehr geringe Datenmenge geladen werden und der Hintergrund kann sich automatisch an die Bildschirmgrösse des Users anpassen. Layout Abb. 3: Erster Entwurf der Green Solutions Website mit Hintergrundfoto. Während der erste Entwurf (siehe Abbildung 3) ein richtiges Foto im Hintergrund hatte, dass Bezug zur Umwelt und somit eine Relevanz für die nachhaltige Nutzung von Energie bringen sollte, wurde hierauf im zweiten und endgültigen Entwurf verzichtet. Da ein Foto im Hintergrund die Verwendung weiterer Fotos sehr einschränkt, wurde die Verwendung mehrerer thematisch passender Fotos auf den jeweiligen Inhaltsseiten einem Hintergrundbild vorgezogen (siehe Abbildung 4). Wie bereits erwähnt dient der horizontale grüne Balken zur optischen Verankerung des 5

6 Inhalts im Browserfenster und passt sich jeder Bildschirmgröße an. Des Weiteren dient der grüne Balken als Subnavigation für den Bereich Unsere Energie. Abb. 4: Finaler Entwurf der Green Solutions Website mit thematisch passendem Foto auf jeder Inhaltsseite. Der Footer ist ebenfalls in grün realisiert. Er enthält die nicht inhaltlichen Links Impressum und Sitemap und ist in gleicher Form wie die Subnavigation gestaltet. Darüber hinaus gibt er der Seite nach unten hin einen Abschluss. Farbwelt #96bd0d #c3e83e #ffffff # #D11E17 #CEE3F8 Das dunkle Grün fungiert als Logofarbe, sowie als Hauptfarbe für die Navigation 6

7 und als optische Struktur der Seite. Das hellere Grün dient als Highlightcolor der Navigationsgrafiken, sowie als Hoverfarbe für Textlinks. Inhalte werden auf weißem Hintergrund platziert um Weite, Leichtigkeit, Frische zu symbolisieren. Jeglicher geschriebener Text ist in dem dunklen Grau formatiert. Das Rot dient als Farbe für Call to Actions, um den User den Weg zum Wechselformular so einfach wie möglich zu gestalten, sowie die Wahrscheinlichkeit zu erhöhen, dass er das Formular findet und ausfüllt. Das Hellblau verläuft im Hintergrund ins Weiß und soll ebenfalls die Assoziation zu Natur und sauberer Energie hervorrufen. Struktur der Website Wie der Sitemap zu entnehmen, enthält die Green Solutions Website folgende Unterseiten: * Intro * Home * Unsere Energie o Sonne o Wind o Wasser * Förderprogramme * Energiespartipps * Stromrechner * Kontakt * Jetzt Wechseln o Wechselformular o AGB * Sitemap * Impressum Der eigentliche Inhalt der Website ist statisch 965 px breit, egal wie groß oder wie klein das Browserfenster ist. Das Logo des Unternehmens ist oben links platziert und führt beim Klick zurück zur Startseite (index2.html). Die Flash-Animation ist nur durch ein erneutes Laden der index. html Seite zu sehen, jedoch nicht über einen Link erreichbar. Die vorhandenen Unterseiten wurden thematisch in die Blöcke Unterseiten zum Thema und nicht inhaltliche Unterseiten untergliedert. Die Website verfügt über eine zweistufige horizontale Navigation, in welcher alle thematisch relevanten Unterseiten verlinkt sind. Dabei sind die Links der ersten Ebene als Grafiklinks und die Links der 7

8 zweiten Ebene als Textlinks realisiert. Die Verlinkungen zu nicht inhaltlichen Unterseiten wie Impressum und Sitemap stehen als Textlinks im Footer der Website. Es wurde sich für eine horizontale Navigation und die Positionierung des Logos auf der linken Seite der Page entschieden, da diese Positionierung laut aktueller Blogbeiträge 4 besser performt als eine vertikale Navigation und die Platzierung des Logos im rechten Bereich der Seite. Aufgrund der Tatsache, dass der User eine Website im F-Schema scannt, ohne dabei allerdings die linke Navigation miteinzubeziehen 5, wurde darauf geachtet, die wichtigen Inhalte (Logo, Texte, Formulare, Footernavigation) auf der linken Seite und weniger wichtige Inhalte, wie Fotos, auf der rechten Seite zu platzieren. Das Inhaltstextfeld der Website ist immer mindestens 700 px hoch (height: float; min-height: 700px;) um zu verhindern, dass bei weniger ausgefüllten Seiten und bei Bildschirmen mit höherer Bildschirmauflösung der Scrollbalken an der rechten Seite des Browserfensters verschwindet. Das Verschwinden des Scrollbalkens soll unterbunden werden, da sich andernfalls die ganze Website leicht nach rechts verschiebt (da sie ja mittig zentriert ist) und somit ein Sprung im Layout entsteht, wenn zwischen Seiten mit und ohne Scrollbalken hin und her geklickt wird. Funktionalität Per CSS Befehl ist es so gelöst, dass die Headernavigation und alle anderen klickbaren Grafiken beim hovern nicht nachgeladen werden müssen (wodurch kurzzeitig eine weisse Fläche entstehen würde), sondern direkt nachladefrei angezeigt werden, da sich sowohl die aktive als auch die inaktive Grafik in einer Datei befinden und jeweils beim Hovern und im Naturzustand ein anderer Teil der Grafik angezeigt werden. Der dazugehörige CSS Befehl sieht wie folgt aus:.hover-e { padding:0; display: block; text-indent: -9999px; letter-spacing: -9999px; width: 161px; 4 Quelle: Abschnitt: It s Not as Successful, According to Studies 5 Quelle: Abschnitt: Left-Side Navigation Virtually Ignored 8

9 height:36px; background: url(../pics/energieab.png) 0 0 no-repeat; margin-left:-2px; }.hover-e:hover { } background-position: -161px 0; Taxonomien Die Farben des Logos finden sich auch auf der Website wieder und bilden somit eine Einheit. Das Grau des Logos ist gleichzeitig auch das Grau (#1f1f1f ) der klickbaren Links und bildet auf diese Weise eine Einheit zwischen Logo und Navigation. Es wurde weiterhin darauf geachtet, dass alle Links (egal ob Text- oder Grafiklink) im ungeklickten Zustand grau sind. Alle aktiven Links sind weiß; das gilt sowohl für Textlinks als auch für grafische Links. Textlinks, die nicht in der Navigation, sondern im Fließtext vorkommen, haben alle einen Doppelfeil vor dem Link, um zu verdeutlichen dass es sich um Links handelt. Konventionen Alles was angeklickt werden kann, ist animiert und ändert beim Hovern seine Gestalt. Darüber hinaus haben alle klickbaren Grafiken einen Eckenreadius von 2 px. Ausgenommen dem Logo, dass per Klick zur Homeseite zurück führt. Dem gegenüber sind alle sonstigen Bilder nicht klickbar und grafisch so dargestellt, als würden sie auf der Seite aufliegen. Die Textelemente der Website sind alle in Arial gesetzt, da Arial eine Standartschriftart und auf jedem PC vorhanden ist. So kommt es nicht zu Problemen mit Umbrüchen und Layoutverschiebungen, wie bei Schriftarten die auf einem Rechner lokal nicht vorhanden ist. Bis auf das Flash-Intro wurde keine weitere Flash Animation verwendet, da diese auf iphones nicht angezeigt werden können. Auf eine Breadcrumb Navigation wurde aufgrund der geringen Tiefe der Website verzichtet. Auf die ausgefeilte Vergabe von Metatags wurde ebenfalls verzichtet, da diese für die Suchmaschinenoptimierung nicht mehr relevant sind 6. 6 Quelle: 8Webmaster-Zentrale+Blog%29 9

10 Relevanz Es werden viele natürliche, frische Farben verwendet um Verbundenheit mit Natur zu symbolisieren. Da man Strom nicht sehen kann und er für viele Menschen wie selbstverständlich aus der Steckdose kommt, müssen andere Mittel gefunden werden um die Relevanz des Themas Umweltschutz, regenerative Energien und ein nachhaltiger Umgang mit der Natur zu vermitteln. Eine thematische Einstimmung auf das Thema soll auch des Flashintro geben, das beim Öffnen der Seite automatisch aufgerufen wird. Per Skip Button in der oberen linken Ecke kann das Intro auch übersprungen werden. Darüber hinaus wird auf jeder Seite ein neues, thematisch passendes Foto, dass ebenfalls Gefühl und Naturverbundenheit symbolisieren soll, dargestellt. Prägnanz Der Link zu Kontakt ist zwei mal zu finden, um Kunden die Interaktion so einfach wie möglich zu machen. Der Konkakt-Button wird sowohl im Footer, als auch an prominenter Stelle platziert, um zu symbolisieren das Kontakt erwünscht ist. Auf den Unterseiten zu Sonne, Wind und Wasser sind die beiden jeweils gerade nicht aktiven Unterseiten noch einmal als Textlinks unter den Text gesetzt, um dem User das Zurechtfinden auf der Seite so einfach wie möglich zu machen. Darüber hinaus sind innerhalb einer Seite platzierte Links gut für die Suchmaschinenoptimierung 7. Um dem User die Navigation zu erleichtern führt ein Textlink von der Dankeseite nach dem Abschicken eines Formulars zurück zur Startseite, wo sich der User dann weiter informieren kann. Alles was mit der Aufforderung Jetzt wechseln zu tun hat, ist in rot markiert um die Relevanz zu klicken zu schaffen. Diese Farbe fällt gegenüber dem Grün direkt auf und erleichtert dem User das Formular zu finden und den Anbieter zu wechseln, was ja im Endeffekt das Ziel des Unternehmens ist. Durch die durchgehende rote Farbe der Call to Actions soll der User unterbewusst geführt werden. Usability Um die Lesbarkeit der Website zu verbessern, ist der Text mit etwas grösserem Zeilenabstand realisiert. Darüber hinaus sind die Texte in kurze Abschnitte untergliedert, da der User auf Internetseiten eher dazu neigt den Text zu scannen als zu lesen. Absätze erleichtern daher die Informationsbeschaffung für den User 8. Das Favicon dient der Wiedererkennung, zum Beispiel wenn die Seite als Lesezeichen 7 Quelle: 8 Quelle:

11 abgespeichert wird. Da das hier vorgestellte Webprojekt eine Arbeit für ein fiktives Unternehmen war, gehe ich auf Überlegungen wie zum Beispiel zum Projektmanagement hier nicht weiter ein. Fazit Insegesamt hat mir das Projekt zwar viel Arbeit, aber auch viel Spaß bereitet, dieser Webdesignkurs zum ersten Mal den Namen auch verdiente. Allerdings war es schon recht schwierig in der relativ kurzen Präsenzzeit alle im Unterricht angerissenen Techniken auch zu beherrschen, da in den meisten Unterthemen wie PHP und Flash im Nachhinein noch sehr viel Eigenrecherche durchgeführt werden musste. Auch finde ich es schade, dass Themen wie Content Management Systeme und Datenbanken nicht mehr zur Sprache kamen. Es ist jedoch auch nachvollziehbar für mich, dass das in der Kürze der Zeit und mit den Defiziten, mit denen wir in den Kurs starteten, nicht anders zu machen war. Im großen und ganzen nehme ich sehr viel aus dem Kurs mit und möchte meine Kenntnisse auch in Zukunft gerne weiter vertiefen. 11