Aufbau Website Websitegestaltung Hr. Grabs
Transcription
Aufbau Website Websitegestaltung Hr. Grabs
eTourism Fitness Aufbau Website & Websitegestaltung Referent: Mag. Wolfgang Grabs-Schrempf ISIS::CONSULT www.isis-consult.eu Herbst 2009 1 Vorstellung 2 Entwicklung der Webstrategie 3 Inhalte der Website 4 Erstellen von Webseiten 5 Kontakt Vorstellung Wolfgang Grabs-Schrempf Ausbildung: Universität Salzburg Unterrichts- & Vortragstätigkeit Universität Salzburg University of California Irvine (UCI) Wifi – Wirtschaftsförderungsinstitut WKO – Wirtschaftskammer Österreich Fachakademie für Marketing & Management Werbedesign Akademie Salzburg Fachadademie für Mediendesign & Medieninformatik FH Urstein: Innovation & Management in Tourism (imte) SMAPs Asia EU Project, Kathmandu (Nepal) u.v.m. . . . Berufserfahrung Seit 1999 selbstständig unter Grabs-Schrempf IT Dienstleistungen mit den folgenden Schwerpunkten: → Webentwicklung und -marketing www.webdesign-salzburg.at → Informationsconsulting www.isis-consult.eu Entwicklung der Webstrategie Erstes Kapitel Erstes Kapitel Die Entwicklung der Webstrategie 1. Die Webstrategie Web 1.0 — Web 2.0 — Web 3.0 WEB 1.0 ⇒ WEB 2.0 ⇒ WEB 3.0 Das Web im Wandel der Zeit Web 1.0 war der Tod, Web 2.0 die Not und Web 3.0 wird das Brot.“ ” 1. Die Webstrategie ZIEL – Was soll erreicht werden Was möchte ich erreichen? ⇒ Über das Internet gefunden werden? ⇒ Informationen bereitstellen (zB. Skilift- oder Bergbahnbetreiber, Bereitstellung von Speisekarten des Restaurants, etc)? ⇒ Buchungen erhalten oder Verkäufe ankurbeln? ⇒ Neue Kunden gewinnen? ⇒ Stammkunden mit Informationen versorgen? Wo steckt der Gewinn? Der Gewinn wird im Internet nicht notwendigerweise durch die Erhöhung der Einnahmen, sondern oft auch durch die Verringerung der Ausgaben erreicht. 1. Die Webstrategie Was machen meine Mitbewerber – wozu bin ich bereit Konkurrenzanalyse ⇒ Welche Internetauftritte gefallen mir? ⇒ Welche Internetauftritte schrecken mich ab? ⇒ Wie stellen sich meine Mitbewerber dar, was nutzen sie bereits? Budgetierung ⇒ Was bin ich bereit, sofort zu investieren? ⇒ Welchen Aufwand werde ich jährlich einkalkulieren? ⇒ Wieviel Budget rechne ich für die Bekanntmachung des neuen Auftritts“ ” ein (z.B. Suchmaschinen Marketing, Print-Promotion, Bannerwerbung bei Portalen . . . )? 1. Die Webstrategie Wer gehört zu meiner Zielgruppe? ⇒ Altersgruppe (Pensionisten und 50+ Generationen, mittleres Alter, Wechseljahr-Generation, Jugendliche)? ⇒ Interessenschwerpunkte (Sport, Wandern, Skifahren speziell, Fitness und Wellness, Urlaub mit Kindern, Hundefreunde, . . . )? ⇒ Medienaffinität: Haben Sie Gäste, die das Internet mit allen Möglichkeiten nutzen oder sind es eher konservative NutzerInnen? Wie sind die Webgewohnheiten der Zielgruppe? ⇒ Wie spreche ich meine Zielgruppe an (eher emotional, eher sachlich-informativ, eher verspielt)? ⇒ Kaufkraftsaspekt: Ist meine Zielgruppe bereit zu buchen (keine Scheu vor Datenausgabe, Kreditkarten o.Ä.)? 1. Die Webstrategie Corporate Identity CI – corporate identity Achten Sie auf Ihre graphische Leitlinie, sorgen Sie dafür, dass Ihr Auftritt in Print, Web und Öffentlichkeit dem selben Muster folgt. Setzen Sie auf Wiedererkennungswerte! 1. Die Webstrategie Markenbewusstsein & Sympathieträger Wiedererkennung Ihrer Marke Sorgen Sie dafür, dass Ihre Marke bei jedem Ihrer Auftritte (Print und Web) erkennbar wird. Setzen Sie Sympathieträger und Persönlichkeitsmerkmale ein, um der Anonymität im Internet vorzubeugen. 1. Die Webstrategie Unique selling proposition Alleinstellungsmerkmal USP Was oder wo liegt unser Vorteil gegenüber der Konkurrenz? Was macht unser Angebot, unsere Produkte oder Leistungen einzigartig? Warum sollte ein Gast ausgerechnet zu mir kommen (Frühstück bis 12 Uhr, Hundestrand, Kinderbetreuung . . . )? 2. Inhalte der Website Zweites Kapitel Zweites Kapitel Inhalte der Website 2. Inhalte der Website Die vier wichtigen Zutaten GEFÜHL: INFORMATION: SERVICE: AKTUALITÄT: Gutes Bildmaterial – hier lohnt es sich, zu investieren, sei es in beim Fotographen oder bei Bilddatenbanken. (Jedoch Achtung: Copyrightverletzungen sind teuer, bei fremdem Fotomaterial immer die Nutzungsbedingungen beachten!) Verwenden Sie auch Bildausschnitte, sie sprechen oft stärker an. Nicht zu viel Text, sondern lieber deutlich auf den Punkt kommen (was wird wirklich aufgenommen, was wird quasi überflogen). Achten Sie auf die Nutzerfreundlichkeit, denn Ihre Besucher sollen auf Ihrer Homepage nicht arbeiten müssen um Ihre Inhalte zu verstehen. Buchung / Reservierung über die Website macht es Ihnen und Ihrem Gast leichter, wenn ein paar Regeln beachtet werden (Wie erhalten Sie die Anfrage, weiß der Gast, auf was er sich einlässt?) Viele Anfragen werden aus Vorsicht nicht gestellt - Schade um den Gast! Öfter mal was Neues! Das Web ist ein schnelllebiges Medium, das bedeutet aber auch: Bringen Sie Abwechslung in Ihren Auftritt. Menschen lieben Fotogalerien, und sie sind auch ganz einfach zu pflegen! 2. Inhalte der Website Beispiel Gefühl ,→ www.biohotels.info 2. Inhalte der Website Beispiel für Information ,→ www.salzburg.info 2. Inhalte der Website Beispiel für Service ,→ www.hrs.de 2. Inhalte der Website Beispiel zur Aktualität ,→ www.bergfex.at 2. Inhalte der Website Die Usability These Jakob Nielsen: Designing Web Usability 2000 FORM FOLLOWS FUNCTION Vorrangig bei der Website ist, dass sie einfach zu bedienen und zu verstehen ist, d.h. sie muss funktionieren. Dann erst wird das Erscheinungsbild behandelt. Nur durch Funktionalität werden über kurz oder lang Erfolge im Webbereich erzielt! Eine schöne Website, die nicht einfach verständlich ist, bringt nichts. US Usability Guru“ ” Jakob Nielsen ,→ www.useit.com 2. Inhalte der Website Benutzerfreundlichkeit 1 Intuitives Navigationsdesign 2 Durchgängiges Navigationsdesign 3 Kontaktdaten schnell und jederzeit auffindbar machen 4 Einheitliches und überschaubares Design, wichtigste Informationen im oberen Bereich der Webseite (ci konform, auch für den Erinnerungseffekt) 5 NutzerInnen nicht zum Nachdenken zwingen 6 Zurück und zum Seitenanfang, zumindest bei langen Listen 7 2nd-Click-Prinzip nutzen 8 Exotische“ Begriffe und schwer erkennbare Grafiken bei der Navigation ” vermeiden 9 Suchmöglichkeiten anbieten 10 Formulare und Shopsysteme einfach und ohne unnötige Texte und Zwangsabfragen gestalten 2. Inhalte der Website Beispiele zu Usability & Navigationsdesign Navigationsdesign: ⇒ Nicht mehr als 7 Menüpunkte in der Hauptnavigation! ⇒ Von jeder Stelle“ der Website mit einem Klick in jede weitere ” Hauptkategorie! 2. Inhalte der Website Pulldown-Navigation Pulldown-Navigation . . . . . . nie auf Javascript oder Flashbasis! U.a. können Suchroboter den Links sonst nicht folgen und hat jemand Javascript oder Flash deaktiviert, kann nicht mehr durch die Website navigiert werden! 2. Inhalte der Website Brotkrümel Navigation Brotkrümel Navigation Speziell wenn innerhalb der Website sehr weit in die Tiefe verlinkt wird, bietet sich die sogenannte Brotkrümel Navigation“ an. Diese sollte jedoch nur ” ergänzend zur regulären Navigation eine zusätzliche Hilfestellung bieten. 2. Inhalte der Website Keyword Clouds Keyword Clouds Intuitiv leicher erkennbar werden die eigenen Angebote, wenn mittels Begriffswolken ( Keyword Clouds“) darauf hingewiesen wird. Als Ergänzung ” zur eigentlichen Navigation wird diese typische Web 3.0 Komponente verständlicherweise immer beliebter. Beispiel: ,→ www.franzisnatur.com 2. Inhalte der Website 5-Sekunden-Usability Test 5-Sekunden-Usability Test Schon nach kurzem Blick auf eine Website können Usability Fehler erkannt werden: Sehen Sie ca. 5 Sekunden auf eine Website — was haben Sie sich gemerkt? Korrespondiert dies mit der Webstrategie der Betreiber der Website? → Vgl. Angelika Röck, Interline.at 2. Inhalte der Website Barrierefreiheit Technischen Zugänglichkeit gewährleisten für: Webbrowser (Programme zum Betrachten von Webseiten) Blindeninterpretationssysteme wie z.B. Braille Systeme Screenreader (zum Vorlesen der Website) Drucker und PDF Generatoren Suchmaschinen (Spider & Crawler) Handhelds (PDAs, Palms, etc.) Mobile Devices (z.B. Mobiltelefone mit Webbrowsern) 2. Inhalte der Website Gewisse Vorurteile, die sich hartnäckig halten Gewisse Vorurteile, die sich hartnäckig halten 1 Barrierefreie Seiten sind hässlich 2 Barrierefreie Seiten sind wesentlich teurer in der Erstellung 3 Barrierefreie Seiten lassen sich nicht so leicht über ein Content-Management-System selber aktualisieren 4 Barrierefreie Seiten sind nur für eine minimale Zielgruppe wichtig 2. Inhalte der Website Vorteile von barrierefreien Webseiten Vorteile für die Zielgruppe Altersverschiebung“ bei den klassischen WebnutzerInnen. ” Menschen mit physischen Einschränkungen sehen das Internet als geeignete Plattform für Kommunikation, Informationsgewinnung, Nutzung von Serviceleistungen und Einkauf. Alle Menschen–auch jene ohne physische Einschränkungen–profitieren von der leichten Bedienbarkeit von Webseiten. Uneingeschränkte Interpretierbarkeit ermöglicht mehr Mobilität bei der Nutzung von Webangeboten (Zugriffsmöglichkeiten mit PDAs & Handhelds, Mobiltelefonen . . . ) Vorteile bei der Suchmaschinenoptimierung Suchmaschinen erkennen Text, nicht jedoch Bilder und Filme Wurden wichtige Begriffe (Schlüsselwörter) entsprechend kenntlich gemacht, erkennen Suchdienste die Relevanz der Begriffe und berücksichtigen dies bei der Reihung Suchmaschinen erkennen Links zu den weiteren Seiten nur, wenn sie mit Text in Verbindung sind. Suchmaschinen mögen“ Sitemaps ” 2. Inhalte der Website 10 Tipps zu Benutzerfreundlichkeit & Barrierefreiheit 10 Tipps zu Benutzerfreundlichkeit & Barrierefreiheit: 1 Seite für den Ausdruck optimieren (durch Stylesheets)! 2 Bedeutungslos strukturierten Text vermeiden, d.h. sinnvoll semantische Umgebungselemente einsetzen (echte Überschriften, Listenumgebungen, Adressmarkierungen, Hervorhebungen, u.v.m.) Beim Einsatz von Bildmaterial auf Alternativtexte und auf Zusatzbeschreibungen achten! Ausgewogenes Verhältnis von Text auf möglichst allen Seiten (nicht zu graphiklastige Webseiten)! 3 4 5 6 7 8 9 10 Keine Frames verwenden! Keine Flash- oder Javascriptnavigationen oder Flashintros verwenden! Wenn Musik, dann sollte diese abschaltbar sein! Endprodukt mit mehreren Browsern und unterschiedlichen Monitoren testen! Keine Layouts auf Tabellenbasis! Kontaktdaten mit Telefonnummer auf allen Seiten hinterlegen! 2. Inhalte der Website Bildbearbeitung Bilder im Internet Die Gratwanderung zwischen professionell & aktuell! 2. Inhalte der Website Bildbearbeitung selbst gemacht 1 Fotos im Internet werden mit einer Auflösung von 72dpi (dots per inch) dargestellt (→ damit werden sie optimiert für die Bildschirmdarstellung). 2 Laden Sie Fotos aus Ihrer Fotokamera auf Ihren Computer oder scannen Sie Ihre Analogphotos mit einem handelsüblichen Scanner. 3 Nutzen Sie bei Bedarf ein einfaches Bildbearbeitungsprogramm für Korrekturen oder Veränderungen am Foto (Programmtipp: Adobe Photoshop Elements oder GIMP). 4 Fotos werden als JPG oder JPEG Dateien abgespeichert (Joint Photographic Experta Group) damit sie im Internet korrekt darstellbar sind und wenig Ladezeit benötigen. 5 Bei jenen Fotos, die ins Internet hochgeladen werden, soll die Darstellungsqualität auf ein erträgliches Maß reduziert werden (zwischen 60% und 80% Qualitätsverlust (zwecks Ladezeit). 6 Sichern Sie immer Ihr Originalfotomaterial als Backup für spätere Korrekturen oder Ergänzungen. 2. Inhalte der Website Programme, die sich dazu eignen Adobe Photoshop Elements: Ausgewogenes Preis-Leistungs-Verhältnis (ab e 80,–), bedienerfreundlich mit hohem Funktionsumfang und Fotoverwaltungsmöglichkeit. http://www.adobe.com/de/products/photoshopelwin/ GIMP: Kostenlose Software, erfordert jedoch ein wenig mehr technisches Verständnis als die vorhergehenden Beispiele, um Bildbearbeitung und Webexport von Graphiken gut vorzubereiten. http://www.gimp.org/ Paint.net: Ebenfalls kostenlos, jedoch erfordert es auch mehr technisches Verständnis (ähnlich wie GIMP). http://paint.net/ XnView: Sehr komfortables Bilderverwaltungsprogramm mit vielen nützlichen Funktionen zur Bildbearbeitung (Skalierung, Farbkorrekturen, . . . ), für den privaten Gebrauch kostenlos, sonst ca. e 26,–. Download XnView http://www.xnview.com/ Faststone ImageViewer: Ähnlich wie XnView mit mehr Funktionen, damit etwas komplexer in der Bedienung. Für den privaten Gebrauch kostenlos, sonst ebenfalls ca. e 26,–. Download Faststone ImageViewer http://www.faststone.org/ 2. Inhalte der Website Bilddatenbanken nutzen: FOTOLIA ,→ www.fotolia.de 2. Inhalte der Website Bilddatenbanken nutzen: GHETTYIMAGES ,→ www.gettyimages.de 2. Inhalte der Website Bilddatenbanken nutzen: PHOTOCASE ,→ www.photocase.de 2. Inhalte der Website Bilddatenbanken nutzen: PANTHERMEDIA ,→ www.panthermedia.net 2. Inhalte der Website Grundlegendes Das Web ist kein Lesemedium Text wird im Internet eher überflogen“ als detailliert gelesen. Wobei die ” NutzerInnen von Webseiten an markanten Textstellen hängenbleiben, z.B. bei Listen, kenntlich gemachten Links und Überschriften. Die vergleichsweise schlechten Bildschirmauflösungen führen beim Lesen von Text zu schneller Ermüdung. Daher vermeiden viele Leute das Lesen langer Texte im Web. 2. Inhalte der Website 10 Tipps zum Texten 1 Vermeiden Sie Startseiten ohne Text und ohne Möglichkeit, in alle Ihre Kategorien mit einem Klick zu gelangen. 2 Keine Willkommensphrasen, beginnen Sie eher mit Slogans oder Ihrem USP. 3 Aussagekräftige Überschriften verwenden. 4 Wenig, aber ansprechender Text (kein Fülltext, eine Website dient in den seltensten Fällen der Unterhaltung des Nutzers, sondern dem Informationsgewinn). 5 Texte unbedingt gliedern und gruppieren, verwenden Sie Listenumgebungen, Links, Absatzformate und Überschriften um den Lesefluss einfach und übersichtlich zu lassen. 6 Vermeiden Sie Schachtelsätze, zerlegen Sie Ihre Sätze wenn mehr als ein Komma darin vorkommt. 7 9–15 Wörter pro Satz, ab 30 Wörter wird ein Satz unverständlich. 8 Wichtige Informationen immer zuerst reihen, nutzen Sie Teaser (Texte zum Neugierigmachen) um in die Tiefe des Themas zu verweisen (z.B. durch Links auf eine Detailseite). 9 Verwenden Sie aussagekräftige Texte für die verlinkten Stellen in ihrem Fließtext (nicht mehr dazu“ sondern mehr Information über unsere Herbstaktion“). ” ” Auf jede Seite gehören einfach auffindbar Ihre Kontaktdaten mit der Telefonnummer (auch auf die Startseite). 10 2. Inhalte der Website Vereinfachung Sie Ihre Botschaften Praktisches Beispiel . . . Mit der Bitte um Akzeptanz unserer Allgemeinen Geschäftsbedingungen vor dem Absenden des Buchungsformulars. Wir bitten darum, mit der Buchung unsere Allgemeinen Geschäftsbedingungen akzeptieren. 2. Inhalte der Website Flash Flash Filme TM Mithilfe der von Macromedia entwickelten Flash Technologie können für das Internet aufwändige Animationen erstellt werden. Zur Darstellung (Achtung → Barrierefreiheit) wird das Flash-Plugin (ein kleines Extraprogrämmchen“, das ” im jeweiligen Browser installiert wird) vorausgesetzt. Während früher Flash oft großflächig verwendet wurde, wird es heutzutage fast nur mehr komponentenweise eingesetzt, z.B. als Eyecatcher oder zur unterstützenden Darstellung von Details mittels Animationen. Ansonsten überwiegt bei Flashsites der emotionale Eindruck gegenüber dem Informationsgewinn oder der Nutzerfreundlichkeit. 2. Inhalte der Website Flashfilme selber erstellen Programme zur Erstellung von Flashfilmen: ⇒ Adobe Flash ,→ www.adobe.de (ab e 800,–) ⇒ Swish ,→ www.swishzone.de (ab e 60,–) 2. Inhalte der Website YouTube ,→ www.youtube.com 2. Inhalte der Website Kleine Anleitung zu YouTube Tipps zur Vorgangsweise am Beispiel YouTube: 1 Melden Sie sich über YouTube oder über Google für den Service an. 2 Machen Sie einige Kurzvideos z.B. über Ihre Pension, neu eingerichtete Zimmer, Empfangsbereich, ein Rundumblick in die Alpen, Ihr Wellnessbereich etc. 3 Sie können Videos mit einer einfachen günstigen digitalen Videokamera oder mit der Kamera Ihres Mobiltelefons herstellen, im Internet zählt weniger die Auflösung als die Aktualität. 4 Nach dem Kopieren des Videos auf Ihren Computer können Sie dieses über Ihr YouTube Konto hochladen. 5 Sie finden bei jedem YouTube Video einen Link zum Einbinden auf die eigene Website oder als Verweis zu YouTube. 6 Binden Sie das Video ein oder lassen Sie es von Ihren Webbetreuern machen, der Aufwand beträgt nach Ihrer soeben beschriebenen Vorbereitung kaum mehr als 20 Minuten. 2. Inhalte der Website YouTube Link zum Einbinden ,→ www.youtube.com 3. Erstellen von Webseiten Drittes Kapitel Drittes Kapitel Erstellen von Webseiten 3. Erstellen von Webseiten Programmtipps Webautorenprogramme Ob mit oder ohne Webdesign Kurs, einige Programme helfen, zumindest einfache Webseiten selber zu erstellen: ⇒ Adobe Dreameaver ,→ www.adobe.de (ab e 550,–) ⇒ Adobe Contribute ,→ www.adobe.de (in Zusammenarbeit mit durch Dreamweaver erstellten Seiten, ab e 200,–) ⇒ Microsoft Expression Web ,→ www.microsoft.de (ab e 300,–) ⇒ Namo Webeditor ,→ www.namo.com (ab e 130,–) ⇒ Kompozer oder Mozilla NVU ,→ www.nvu-composer.de (Freeware) 3. Erstellen von Webseiten Software Adobe Dreamweaver ,→ www.adobe.de 3. Erstellen von Webseiten Software Microsoft Frontpage ,→ www.microsoft.de 3. Erstellen von Webseiten Software Microsoft Expression Web ,→ www.microsoft.de 3. Erstellen von Webseiten Software KompoZer ,→ www.kompozer-web.de 3. Erstellen von Webseiten CMS – Selbstwartungssysteme Content-Management-System Möchten Sie die Inhalte Ihrer Website ohne Zusatzsoftware und online selbst einfach aktualisieren können, dann benötigen Sie ein Selbstwartungssystem (Content-Management-System). Selbstwartbare Webseiten tragen viel zur Aktualität bei, ohne unbedingt dem Aussehen der Webseiten durch unsachgemässe Handhabung zu schaden. Nebenbei bieten Sie eine gewisse Unabhängigkeit von der Webagentur. Wenn Sie Ihr Selbstwartungssystem nicht selbst programmieren, sind im Allgemeinen die Entwicklungskosten für selbstwartbare Webseiten oft etwas höher (auch wenn kostenlose CMS zugrundeliegen), ein Aufwand der sich jedoch schnell rechnet. CMS werden entweder auf Basis bestehender teilweise auch kostenloser Systeme aufgebaut oder auf den Kunden zurechtprogrammiert. 3. Erstellen von Webseiten CMS Typo3 ,→ www.typo3.org 3. Erstellen von Webseiten CMS Joomla ,→ www.joomla.org Erstellen von Webseiten CMS Contenido ,→ www.contenido.de 3. Erstellen von Webseiten CMS Wordpress ,→ www.wordpress.org 3. Erstellen von Webseiten Nützliche Erweiterungen Nützliche Erweiterungen Oft finden Sie im Internet schon vorgefertigte Scripts, um besondere Effekte in Ihre Webseiten einzubauen. Ebenso finden Sie Vorlagen für Flashfilme und bestimmte Content-Management-Systeme (z.B. Joomla und Typo3 Templates). In unserer eMarketing Veranstaltung wird auch auf die sehr zweckmäßige Verwendung von Fremdinhalten (Buchungsmasken, Wetterberichte, Webcams, . . . ) hingewiesen. Achten Sie immer auf die Nutzungsrechte der angebotenen Inhalte. 3. Erstellen von Webseiten Lightbox Galerie ,→ www.huddletogether.com/projects/lightbox2 3. Erstellen von Webseiten Java Applets mit Anfy ,→ www.anfyteam.com Für weitere Fragen stehe ich Ihnen gerne zur Verfügung Mag. Wolfgang Grabs-Schrempf Tel: +43 662 625166 ISIS::CONSULT Email: [email protected] www.isis-consult.eu Salzburg University of Applied Sciences Email: [email protected] Grabs-Schrempf IT Dienstleistungen Email: [email protected] . . . and thanx for all that fish :-)