Gestalten einer Website

Transkript

1 Modul 5 Produktausstattung Kapitel 2 Gestalten einer Website Jürgen Undeutsch, B.A.

2 INHALT AutorIn: Jürgen Undeutsch, B.A. A. Einführung... 3 B. Grundlagen und Begriffsdefinitionen... 4 C. Bevor Sie beginnen... 7 D. Erstellen Ihrer Website Einsteiger... 8 Fortgeschrittene Abgabe an Dritte IMPRESSUM Für den Inhalt verantwortlich: Austrian Marketing University of Applied Sciences, Campus Wieselburg der FH Wiener Neustadt, Austria, 3250 Wieselburg, Zeiselgraben Austrian Marketing University of Applied Sciences Alle Rechte, insbesondere das Recht der Vervielfältigung und der Verbreitung sowie der Übersetzung sind vorbehalten. T: 0043-(0) E: office@amu.at I: vertreten durch: Dr. Astin Malschinger Dieses Selbst-Lernprogramm konnte Dank der Unterstützung der EU, konkret durch das Programm LifelongLearning, realisiert werden.

3 A. Einführung Eine Website ist ein virtueller Platz im World Wide Web, an dem sich mehrere Webseiten, bestehend aus Dokumenten und anderen Ressourcen, befinden. Diese sind üblicherweise durch eine einheitliche Navigation zusammengefasst und verknüpft. Das Webangebot stellt für Konsumenten eine wichtige Informationsquelle über Produkte und Hersteller dar. Grundsätzlich gilt bei jeder Website die Informationspflicht über den Betreiber der Webpräsenz. Immer mehr landwirtschaftliche Betriebe sind mittlerweile mit einer eigenen Website im Internet vertreten. Bei den Web-Angeboten zeigen sich jedoch immense Qualitätsunterschiede. Ziel dieser Lektion Ziel dieser Lektion ist es, dass Sie in der Lage sind, selbst eine Website für Ihren persönlichen Bedarf zu gestalten. Sie lernen dabei die wichtigsten Praxis-Tipps für die Layoutierung und sich zudem von vorgefertigten Designvorlagen inspirieren zu lassen. Weiters werden Sie, je nach Bedarf, dazu in der Lage sein, Ihre Website selbst im World Wide Web zu veröffentlichen oder diese über einen Drittanbieter für Sie programmieren zu lassen.

4 B. Grundlagen und Begriffsdefinitionen Eine gute Website zu gestalten ist nicht sehr einfach. Wenn man Erfolg haben möchte, sollten verschiedenste Disziplinen aus unterschiedlichen Bereichen wie Farbraumkenntnisse, Grafikdesign, Internetmarketing und Suchmaschinenoptimierung beherrscht werden. Diese Anleitung soll Ihnen dabei helfen, sich mit den ersten Schritten beim Erstellen einer Website vertraut zu machen. Zudem bereiten Sie sich auf die professionelle Gestaltung einer Webpräsenz bzw. zum Briefen eines Drittanbieters vor. Bevor Sie beginnen, möchten wir Sie auf gängige Begriffe und deren Verwendung hinweisen: Links Als Hyperlink oder kurz Link bezeichnet man in der Regel einen Querverweis, der die Funktion hat, einen Website-Besucher an eine andere Stelle desselben Hypertextes oder zu einer anderen Webseite zu führen. TIPP! Sorgen Sie dafür, dass die Besucher Ihrer Website Links eindeutig erkennen können. Dies kann zum Beispiel durch Unterstreichung oder einen farblichen Kontrast geschehen. Auch ein sogenannter Mouse-Over- Effekt bietet sich als praktische Lösung an. Von einem Mouse-Over-Effekt spricht man, wenn sich der Inhalt auf einer Website verändert, sobald Besucher mit der Maus auf ein Objekt zeigen. Generell sollten Sie auf allgemeine Bezeichnungen wie zb. hier klicken verzichten. Wenn Ihr gesetzter Link nicht auf eine Website sondern ein anderes Dateiformat (wie zb. ein PDF-Dokument) verweist, sollten Sie dies optimalerweise mit Dateigröße und Downloadzeit anzeigen. So können Sie Frustationserlebnisse von Besuchern mit langsamer Internetverbindung vermeiden. Navigation Der Navigationsplan legt fest, wie Website-Besucher durch die einzelnen Webseiten navigieren können. Die Navigation gibt also die Struktur und Vernetzung der einzelnen Webseiten wieder. In der Regel wird ein Navigationsplan über ein Organigramm realisiert, wobei man zwischen einer Informationsnavigation (Home, Kontakt und Impressum) und einer Hauptnavigation (Produkt- oder Inhaltsnavigation) spricht.

5 TIPP! Die Platzierung der Hauptnavigation eignet sich links neben dem Hauptbereich (Content) am besten, da dies dem Leseverhalten im europäischen Raum entgegenkommt. (Das Auge beginnt links oben zu lesen und tastet sich Zeile für Zeile von links nach rechts.) Generell sollten Sie Menüpunkte mit ähnlichen Inhalten zusammen anordnen, damit sich Ihre Website-Besucher besser zurechtfinden. Nutzerorientierung Die Benutzerfreundlichkeit einer Website bezeichnet welche Qualität der Nutzung und Interaktion die Besucher einer Website erleben. Als benutzerfreundlich wird dabei eine besonders einfache und zu Nutzern bzw. deren Aufgaben passende Bedienung angesehen. TIPP! Für ein optimales Screen Layout spielen insbesondere die verwendeten Schriftarten und Schriftgrößen sowie die farbliche Gestaltung eine große Rolle. Zudem sollten Inhalte so verfasst sein, dass das Wichtigste zuerst steht und kein Wissen von Website-Besuchern vorausgesetzt wird. Achten Sie auf eine Sprache, die Ihren Besuchern angepasst ist und vermeiden Sie zu viele Fachbegriffe. Verwenden Sie bei längeren Texten Zwischenüberschriften und nutzen Sie gegebenenfalls Aufzählungen für eine bessere Übersichtlichkeit. Zudem sollten Sie sich über die Interessen Ihrer Zielgruppe im Klaren sein, dementsprechend Schwerpunkte setzen und auch die Formulierungen darauf ausrichten (zb. Hinweise auf Regionalität oder biologische Produktion). Achten Sie auch darauf, dass sich alle wichtigen Inhalte im sichtbaren Bereich befinden. Die Besucher Ihrer Website sollten dafür nicht scrollen müssen, sondern alle Hauptinhalte auf einen Blick erfassen können. Suche Eine Suchfunktion bietet Website-Besuchern die Möglichkeit sich besser und schneller zurechtzufinden und erspart zeitraubende Klicks. TIPP! Ein Suchfeld sollte direkt auf Ihrer Website eingebunden sein, anstatt eines Links auf eine Suchseite. Achten Sie bitte darauf, dass Ihre komplette eigene Website erfasst wird, jedoch nicht das ganze World Wide Web, da Besucher sonst womöglich Ihre Website verlassen und nicht mehr zurückkehren. Die optimale Position für ein Such-Eingabefeld ist rechts oben. Grafiken und Bilder Das World Wide Web wäre ohne Grafiken und Bilder kaum mehr vorstellbar. Sie machen die meisten Websites interessanter und lebhafter. Allerdings sind nicht alle Grafiken für das Internet geeignet. Grafiken im

6 Web müssen vor allem Anforderungen an kurze Ladezeiten, Darstellbarkeit im Browser und je nach Einsatz gegebenfalls auch geringen Qualitätsverlust beim Vergrößern bzw. Verkleinern entsprechen. Als Standard im Internet haben sich die Grafikformate GIF, JPEG und PNG durchgesetzt. Diese Standardformate können von den aktuellen Browsern ohne zusätzliche Hilfsmittel angezeigt werden. TIPP! Beschränken Sie sich bei der Verwendung von Grafiken auf aussagekräftige Inhalte. Fotos sollten eine gute Qualität (72dpi) haben und auf eine einheitliche Größe zugeschnitten sein. Die Dateigröße pro Grafik sollte maximal 1 MB betragen um kurze Ladezeiten zu gewährleisten. Höhere Auflösungen (größer als 72dpi) verbessern nicht die Qualität Ihrer Grafiken. Fotos für den Pressebereich sollten Sie mit einer Auflösung von 300dpi anlegen, damit diese druckfähig sind. Impressum und Kontaktdaten Ein Impressum ist eine gesetzlich vorgeschriebene Herkunftsangabe in Publikationen um den für den Inhalt verantwortlichen Betrieb kenntlich zu machen. Je nach Land und Art der Publikation gibt es eine konkrete Gesetzeslage. Ein Impressum soll schnell zu finden und leicht zu erkennen sein. TIPP! Informieren Sie sich über die notwendigen Impressum-Angaben für Ihr Land und führen Sie diese gewissenhaft an. Erleichtern Sie Besuchern zudem die Kontaktaufnahme mit Ihnen und geben Sie Name, Adresse, Telefon- und Faxnummer sowie Ihre -adresse an. Sinnvoll ist auch ein eigener Pressebereich für Pressemitteilungen sowie Bilder von Ihrem landwirtschaftlichem Betrieb und eventuell ein Logo zum Downloaden.

7 C. Bevor Sie beginnen Je nach Ihren persönlichen Erfahrungen und Wünschen gibt es verschiedene Möglichkeiten Ihre eigene Website zu gestalten. Je professioneller ein Auftritt im World Wide Web sein soll, desto mehr Zeit und Geld muss investiertt werden. Entscheiden darstellt: Sie sich vorab, welchee die für Sie geeignetste Möglichkeit Einsteiger kostengünstig bis kostenlos geringer Zeitaufwand (mehrere Stunden) sofort sichtbare Ergebnisse kaum Vorkenntnisse nötig Fortgeschrittene Preise ab ca. Euro 70,00 pro Jahr mittlerer Zeitaufwand (mehrere Tage) Domain-Einrichtung dauert ca. 24 h Vorkenntnisse in HTML von Vorteil Abgabe an Dritte Preise ab ca. Euro 70,00 pro Jahr Erstellungspreise ab ca. Euro 500,00 mittlerer Zeitaufwand (mehrere Tage) Einrichtung dauert bis zu mehrere Wochen

8 D. Erstellen Ihrer Website Einsteiger Die schnellste und kostengünstigste Variante ist das Erstellen einer Website mit Hilfe eines kostenlosen Anbieters zum Erstellen von Websites. Sie finden zahlreiche Anbieter, wenn Sie nach Kostenlose Homepage erstellen im Internet suchen. Für unser Praxisbeispiel haben wir uns für den Anbieter npage ( entschieden, da dieser in verschiedenen Sprachen sein Service anbietet. Bei diesem Anbieter erhalten Sie eine kostenlose Domain mit der Endung npage.de. Sprachauswahl Start Um mit Ihrem Layout zu beginnen, klicken Sie in der Mitte der Seite auf Jetzt kostenlose Homepage erstellen. Auf der folgenden Seite geben Sie Ihre persönlichen Daten an und klicken anschließend auf Jetzt kostenlos anmelden. TIPP! Wählen Sie einen aussagekräftigen Benutzernamen dieser wird später Ihre Domain bezeichnen. Unser Beispiel bezieht sich auf den Betrieb Hof

9 Lechner-Müller. Wir haben daher den Benutzernamen hoflechnermueller gewählt um später im Internet mit der Adresse gefunden zu werden. Nach erfolgreicher Anmeldung erhalten Sie eine von mit einem Aktivierungs-Code. Klicken Sie auf den Aktivierungs-Link in der um Ihre Anmeldung zu bestätigen. Um fortzufahren, geben Sie bitte rechts auf der Bestätigungsseite Ihre Anmeldedaten (Benutzername und Passwort) ein und klicken Sie auf Jetzt einloggen. Sie befinden sich anschließend auf der Startseite der Software. Ihre Website ist ab diesem Zeitpunkt bereits abrufbar allerdings müssen Sie erst Inhalte generieren.

10 Schritt für Schritt- Anleitung Menüleiste TIPP! Nutzen Sie die angebotene Schritt für Schritt Anleitung um schnell erste Ergebnisse erzielen zu können. Zum Fortfahren klicken Sie bitte auf Design links in der Menüleiste und anschließend auf Mein Design. Dort finden Sie den Punkt Anderes Design auswählen wo Sie eines von zahlreichen Designs wählen können. Designwahl

11 Am einfachsten ist die Verwendung einer fertigen Design-Vorlage. Klicken Sie daher im nächsten Schritt auf Weiter um fortzufahren. Rubriken Name der Vorlage Beschreibung und Infos Im folgenden Menü finden Sie zahlreiche Rubriken mit verschiedenen Design-Vorlagen und Beschreibungen dazu. In unserem Beispiel wählen wir aus der Rubrik Natur das Template Plus 028, klicken dazu auf den Auswahlkreis zum Auswählen und bestätigen mit dem Butten Dieses Design wählen am Ende der Seite. Je nach gewähltem Layout hat Ihre Seite bereits eine vordefinierte Navigation, die Sie selbstverständlich jederzeit anpassen können.

12 TIPP! Probieren Sie verschiedene Layouts aus, um zu sehen welches Design am besten zu Ihnen passt. Nachdem wir das gewünschte Layout ausgewählt haben, möchten wir den Website-Namen und die Navigation an unsere Bedürfnisse anpassen. Dazu wählen wir in der Menüleiste Einstellungen, Homepage-Einstellungen und geben im Feld Homepagetitel unseren gewünschten Namen an. Anschließend möchten wir einen neuen Navigationspunkt Produkte hinzufügen. Hierzu klicken wir in der Menüleiste auf Seite, Neue Textseite und geben unsere gewünschte Daten an. Um Inhalt zu generieren klicken Sie (im Menü Seiten, Textseiten ) Ihre zu ändernde Seite an und wählen Sie Los.

13 Je nach gewähltem Editor erhalten Sie ein Eingabefeld zur Bearbeitung Ihrer Daten. Der Standardeditor erinnert an ein Textverarbeitungsdokument und ist auch genauso zu bedienen. Sie können Bilder einfügen und Ihre Texte nach Belieben formatieren. Nach jedem Speichervorgang ist Ihre Website auch automatisch veröffentlicht. Sobald Sie alle gewünschten Änderungen vorgenommen haben, haben Sie erfolgreich Ihre eigene Website erstellt. Bei Problemen oder Fragen gibt es bei fast allen Anbietern im Internet eine FAQ (Fragen- Antworten) bzw. eine Hilfe-Seite mit möglichen Problemen und deren Behebungsmöglichkeiten. Fortgeschrittene Wenn Sie bereits etwas Erfahrung mit dem Erstellen einer Website gesammelt haben und mehr Zeit und Geld in Ihre eigene Website investieren möchten, so gibt es verschiedene Möglichkeiten Ihre Webpräsenz einzurichten bzw. auszubauen. Sie haben einerseits die Möglichkeit Ihre Website in einem Grafikprogramm zu designen und diese anschließend zu programmieren oder Sie können mit einem CMS (Content Management System, das die gemeinschaftliche Erstellung und Bearbeitung von Inhalt, bestehend aus Text und sonstigen Daten, ermöglicht und organisiert) arbeiten. In beiden Fällen empfehlen wir Ihnen unbedingt einen professionellen Hoster.

14 Ein Hoster bietet Ihnen Webspace (Speicherplatz für Ihre Daten) sowie die Unterbringung (Hosting) von Webseiten auf einem Webserver eines ISP (Internet Service Anbieters). Folgende Services sollte Ihr Hosting-Anbieter bereitstellen: eigene Domain (Adresse wie zb. Webspace mit mind. 100 MB FairUse-Traffic oder Unlimited Traffic (angemessenes Kontingent an Website-Abrufen ohne zusätzliche Kosten) MySQL Datenbank (speziell bei der Verwendung eines CMS) Die Kosten für ein Gesamtpaket belaufen sich auf ca. Euro 5,00 bis Euro 10,00 monatlich im europäischen Raum. (Stand 2010) TIPP! Informieren Sie sich über mehrere Anbieter auch außerhalb Ihres Heimatlandes und wählen Sie den für sich am besten geeignetsten aus. Da die Abwicklung über Internet erfolgt, können Sie auch ohne Bedenken einen ausländischen Anbieter wählen. Viele Anbieter bieten Ihnen die Möglichkeit mit sogenannten Homepage- Baukästen fertige Layouts zu übernehmen und zu bearbeiten, ähnlich wie bei der Erstellung von Websites für Einsteiger im vorigen Abschnitt. Eine automatische Installation eines CMS wie zb. Joomla! oder Typo3 wird ebenfalls sehr häufig angeboten. Nähere Infos zu den angebotenen Services und deren Anwendungen finden Sie auf der jeweiligen Website Ihres gewählten Hosters.

15 Abgabe an Dritte Für einen langfristigen Erfolg, empfiehlt sich die Realisierung der eigenen Website durch Spezialisten. Diese sind auf die Anforderungen des World Wide Web spezialisiert und bieten zudem meist eine umfassende Beratung an. Um Ihnen ein Gespräch mit einer Agentur zu vereinfachen, geben wir Ihnen im letzten Abschnitt dieses Kapitels einen Gesprächsleitfaden mit wichtigen Schlüsselfragen sowie einen kurzen Überblick über Kosten, die Sie erwarten können. Über folgenden Schlüsselfragen sollten Sie sich vor einem Briefing- Gespräch mit einer Agentur im Klaren sein: Wie lautet der Name Ihres landwirtschaftlichen Betriebes, wie soll er auf der Website und beim Domain-Namen geschrieben sein? (Dieser darf keine Umlaute oder Sonderzeichen enthalten.) Welche Produkte bzw. Dienstleistungen bieten Sie an und möchten Sie auf Ihrer Website präsentieren? Soll es einen Online-Shop für Ihre Produkte geben und welche Anforderungen haben Sie an so einen Shop? Gibt es bereits ein Layout? (zb. von bereits erstellen Werbemitteln wie Flyer oder Visitenkarten) Haben Sie bereits eine fertige Corporate Identity? (Logo, Hausschrift, Hausfarbe, etc.) Welche Eigenschaften beschreiben Ihren Hof? (Nennung von mind. 3 Adjektiven.) Wie würden Sie folgenden Satz vollenden: Meine Kunden erwarten sich von meiner Website Was sind Ihre eigenen konkreten Vorstellungen zum Aufbau, Layout und Inhalt der Website? Zudem empfiehlt es sich, wenn Sie vorab im Internet nach Websites suchen, die Ihnen sehr gut gefallen um diese in das Briefing-Gespräch einbinden zu können. Üblicherweise reicht es vollkommen aus, wenn Sie einen ausgedruckten Bildschirmabzug oder lediglich die Internet-Adresse der Website zum Gespräch mitnehmen.

16 Bezüglich der Kosten variiert der Preis stark vom Auftragnehmer (Freischaffende, kleine oder große Agenturen) und vom Auftrag selbst (Firmen-Website, Web-Portal, Online-Shop, etc.). Richtpreise gehen von ca. Euro 500,00 für einfache Webvisitenkarten, über Standard-Lösungen zwischen Euro 1.500,00 und Euro 3.000,00 bis hin zu aufwendigen Webapplikationen mit Preisen ab Euro ,00 aufwärts. Um sich einen allgemeinen Überblick der aktuellen Marktpreise zu verschaffen, gibt es im Internet zahlreiche Plattformen mit Richtpreisen wie zb. Wir hoffen Ihnen mit diesen Informationen einen ersten Überblick zum Thema Gestalten einer Website gegeben zu haben und wünschen Ihnen viel Spaß bei der Umsetzung Ihrer eigenen Vorstellungen.