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 :-)