Website für die Werkstatt Auto-Dullinger
Im Rahmen der Diplomarbeit wurde eine neue Website und Webpräsenz rund um die KFZ-Werkstätte Auto Konrad Dullinger aus Esternberg geschaffen. Was verändert wurde und wie alles funktioniert
Neue Navigationsbar und Sidebar
Die Navigationsbar wurde komplett überarbeitet. Aus Designgründen überlegten wir anfangs, das Logo ohne Spruch zu verwenden, da dieses in unsere Designfarbe Gelb passte. Bei einem Treffen teilte uns Dullinger Konrad aber mit, dass er lieber das Logo mit dem Spruch auf der Navigationsbar haben will, da dieser den Menschen stärker im Gedächtnis bleibt als das Logo ohne Spruch.
Die Navigationsbar besteht neben dem Logo noch aus den wichtigsten Unterseiten:
• Home: Zusätzlicher Link zur Startseite neben dem Link auf dem Logo
• Fahrzeuge: Link zur Fahrzeugliste
• E-Bikes: Link zum Neuangebot von E-Bikes
• Unsere Services: Link zur Aufzählung der Leistungen und Services
• Kontakt: Link zu den Kontaktmöglichkeiten und Kontaktformular
• Über uns: Link zu der Beschreibung des Unternehmens
Zusätzlich haben wir noch ganz oben die Telefonnummer und E-Mail-Adresse des Unternehmens hinzugefügt, damit sie leicht und von überall auffindbar sind. Damit sie leichter erkennbar sind, werden automatisch Icons wie das Telefon oder der Umschlag hinzugefügt.
Die neue Sidebar unterscheidet sich in vielen Punkten von der alten. Sie besteht nun aus einer Suche, den Öffnungszeiten, der Pannenhilfe und einer Kartenimplementierung. Es wurden alle Informationen der alten Sitemap übernommen, ansprechender dargestellt und sogar um einige Aspekte erweitert. Die Suchfunktion ist neu integriert. Unter der Adresse ist zur Orientierung eine Karte von Google Maps eingebaut. Die Telefonnummer der alten Seitenleiste haben wir in den Header-Bereich eingebaut, die Telefax-Nummer steht nur noch auf der
Unterseiten
Startseite
Die Startseite besteht aus den folgenden Elementen:
- Eine Implementierung der neuesten Beiträge
- Eine kurze Auflistung der wichtigsten Leistungen der Werkstatt
- Eine Slideshow mit Fotos über die Werkstätte, den Schauraum und den E-Bikes
- Einen Hinweis auf das Neuangebot der E-Bikes
- Kundenrezensionen
- Button zu den Fahrzeugen
Eigentlich sollte am Anfang der Startseite ein Foto des Teams von Auto Dullinger vor der Werkstätte erscheinen. Die Aufnahme des Gruppenfotos wurde allerdings mehrmals verschoben, bis aufgrund der Corona-Krise die Werkstatt vorübergehend schloss und bis zum Zeitpunkt der Diplomarbeit-Einreichung kein Gruppenfoto aufgenommen werden konnte.
Die Implementierung der neuesten Beiträge ist daher besonders wichtig, denn damit kann Auto Dullinger selbst Blogbeiträge verfassen (z.B. Sonderangebote). Die aktuellsten drei erscheinen automatisch direkt am Anfang der Startseite. Dafür haben wir ein Dokument verfasst, das vom WordPress-Login bis zum fertigen Blogbeitrag alle notwendigen Schritte enthält (Dokument im Anhang enthalten). Somit ist es möglich, dass auch nach Fertigstellung der WordPress-Seite das Unternehmen selbst an der Website arbeiten kann, ohne abhängig von Dritten zu sein.
Bei der Auflistung der wichtigsten Leistungen nahmen wir Icons von flaticon.com, da sich diese Website mit seiner riesigen Auswahl an verschiedensten Icons auszeichnet. Symbole passend zu jeder der 4 Hauptüberschriften waren schnell gefunden, sie harmonierten auf den ersten Blick. Allerdings muss man den Urheber des Icons auf seiner Seite erwähnen, wenn man seine Illustration gratis verwenden möchte. Daher haben wir ganz unten auf der Startseite eine kurze Information zu den Urhebern mit Links eingebaut.
Die Startseite wurde fast ausschließlich in purem HTML geschrieben, es wurde die externe CSS-Bibliothek „Bootstrap“ verwendet, um die Leistungen in sogenannte „Boxen“ einzuteilen. Das bewirkt je nach Fenstergröße eine Verschiebung der Boxen untereinander. Dieses Box-Verhalten ist besonders wichtig für Smartphones und Tablets mit kleineren Displays.
Leider interferierte Bootstrap-CSS mit dem CSS des WordPress-Themes bei den Links, die nicht mehr in Gelb, sondern standardmäßig in Blau dargestellt wurden. Auch das CSS der Suchleiste wurde vom CSS des Themes zu Bootstrap-CSS umgewandelt, was dazu führte, dass das Feld für die Sucheingabe breiter wurde und der Suchknopf sich nach unten verschob.
Den ersten Fehler konnten wir mit JavaScript beheben, indem wir ein Script einfügten, das alle Links wieder in Gelb darstellt, mit Ausnahme der Links auf der Navigationsbar. Das Script muss überall, wo Bootstrap auf der Website verwendet wird am Ende der Seite eingefügt werden. Hyperlinks unterhalb des Scripts, wie zum Beispiel das Impressum, verbleiben Blau, da das Script darauf nicht zugreifen kann, diesen Bug haben wir aber akzeptiert, da er minimal ist.
Am Anfang entschieden wir uns für die Darstellung der wichtigsten Leistungen nebeneinander, schnell realisierten wir aber, dass eine Darstellung untereinander übersichtlicher wirkt. Daher entschieden wir uns für diese Variante, zusätzlich ließen wir die letzten beiden Elemente von unten einfliegen, damit der Inhalt dynamischer wirkt.
Nach den wichtigsten Leistungen kommt eine Slideshow mit 6 ausgewählten Bildern des Unternehmens. Es soll möglichst alle Bereiche der Firma abdecken. Wir haben uns für 2 Fotos von der Werkstatt innen, eines von außen, eines vom Schauraum, eines von den E-Bikes und eines von einem Sportwagen in der Garage entschieden. Auch ein Alternativtext wurde bei jedem Bild hinzugefügt. Das ist vor allem für SEO wichtig, da ansonsten Suchmaschinen die Bilder nicht oder nur schwer interpretieren können.
E-Bikes
Seit kurzem sind auch E-Bikes im Angebot bei Auto Dullinger. Deshalb wird auf der Startseite gesondert auf diesen Bereich hingewiesen, um ihn noch zusätzlich zu bewerben.
Als Kundenrezensionen haben wir öffentliche Bewertungen der Facebook-Seite von Auto Dullinger verwendet. Wir haben die passendsten Bewertungen übernommen, auf Rechtschreibfehler überprüft und das Facebook-Profil den jeweiligen Verfasser als Autor genannt. Zusätzliche Dynamik verleiht das Einfliegen von Links in den Bildschirm beim Hinunterscrollen.
Kontakt
Für die neue Seite Kontakt stellten wir uns die Fragen, welche Bestandteile sie enthalten soll. Die Adresse mit den Telefonnummern und ein Kontaktformular waren klar für uns. Wir entschieden uns zusätzlich dazu, noch eine große Google Maps – Karte einzubauen.
Kontaktdetails
Zu allererst befindet sich auf der Seite die Firmenbezeichnung mit den wichtigsten Kontaktdetails, also der Adresse und der Telefon- und Faxnummer.
Kontaktformular
Darunter folgt das Kontaktformular, welches mithilfe des Plugins „Contact Form 7“ erstellt wurde. Darin enthalten sind die Pflichtfelder Name, E-Mail-Adresse, das Thema und eine Nachricht. Das zu behandelnde Thema ist mit einem Kontrollkästchen wählbar und ist benutzerfreundlicher für Kunde und Auftraggeber.
Auf technischer Ebene wurde das Formular mit HTML programmiert. Die Tags bzw. stehen für ein Feld, worin ein Text geschrieben werden soll.
Im ersten Feld soll ein Name stehen und im zweiten Feld die zugehörige E-Mail-Adresse. Das „Checkbox“-Tag steht für ein Kontrollkästchen, damit der Betreff bzw. das Thema angezeigt wird und es nur noch angekreuzt werden muss. Danach folgt nochmal ein Textfeld mit der Nachricht und zu guter Letzt das „Submit“ bzw. das Senden-Symbol.
Interaktive Karte
Damit Kunden die Anreise erleichtert wird, wurde eine große interaktive Google-Maps-Karte eingefügt, welche auf „www.Checkpoll.de“ in HTML generiert wurde. Die Anfahrtsroute und -zeit kann errechnet werden und auch Bewertungen auf Google können bequem abgerufen werden.
Dieser HTML-Code steht für die Google-Maps-Karte wie sie darüber steht. Der Code wird von Google extra zur Verfügung gestellt.
Fahrzeugbestand
Die Seite zum Fahrzeugangebot wurde überarbeitet und vor allem für Smartphones optimiert. Anstelle des alten iframe-Elements mit der Quelle „//secure.cpcms.autoscout24.com/index.php?sci=e4afc38f40250299c34994e0a6830c69a7880220“ wurde die neue AutoScout24-Website als iframe mit der Quelle “//www.autoscout24.at/haendler/konrad-dullinger/fahrzeuge implementiert. Ein iframe ist ein HTML-Tag, der ermöglicht, andere Websites in seiner eigenen darzustellen.
Mit dem CSS-Code „-webkit-overflow-scrolling:touch“ wurde das iframe besonders für Mobilgeräte benutzerfreundlich. Er garantiert, dass der Inhalt des iframes, der mehr Platz als das Display des Endgeräts benötigt, vorerst verdeckt wird („overflow: auto“) und mit Scroll und Wischgesten von Touchscreens im iframe navigiert werden kann (scrolling:touch). Ohne diesen beiden CSS-Attributen wäre das Fahrzeugangebot praktisch nicht benutzbar für mobile Nutzer mit kleineren Bildschirmen gewesen.
Falls es irgendwelche Probleme bei der Darstellung des iframes geben sollte, wurde ein Button „Zu unserem Angebot auf AutoScout“ eingefügt, der in einem neuen Fenster das Fahrzeugangebot direkt auf der Website von AutoScout24 wiedergibt. Unter dem iframe wurde ebenfalls ein Button platziert, der direkt zur Kontakt-Seite weiterleitet, falls ein Kunde an einem Auto interessiert ist und sich nicht über AutoScout24 bei Auto Dullinger melden möchte.
Leistungen & Services
Bei den Leistungen und Services wurde das Konzept der Autowerkstätte Brandstätter Passau übernommen, das aus einem Icon, einer Überschrift und einem kurzen Text pro Leistung besteht. Die Unterwebsite wurde „Unsere Services“ benannt. Es wurden 10 Leistungen der Werkstätte beschrieben. Die wichtigsten 4 befinden sich zusätzlich auf der Startseite.
Die wichtigsten 4 Leistungen:
- Reparatur aller Fahrzeugmarken
- Handel mit Neu- und Gebrauchtwagen
- Rad & Reifenservice
- Pickerl-Prüfstelle
Weitere Leistungen:
- Auto- und Kleinbusverleih
- Klimaservice
- Tuning
- Lackieren
- Glasreparatur
- Fahrzeugpflege
Anfangs wurde die Seite so programmiert, dass die Leistungen nebeneinanderstehen. In der Breite, die der Bereich bietet, sollen möglichst viele Leistungen nebeneinander Platz finden. Nach einem Treffen mit Dullinger Konrad wurde aber klar, dass es dem Leser bei diesem Konzept schwerfällt, sich auf einen Bereich zu konzentrieren, da so viele nebeneinander dargestellt werden.
Daher wurde eine neue Darstellungsform verwendet. Anstatt so viele Leistungen wie möglich nebeneinander zu platzieren, wurden nur noch maximal zwei nebeneinandergesetzt. Zusätzlich wurde ausreichend Platz zwischen den einzelnen Reihen gelassen, damit sich der Leser auf die jeweilige Reihe mit den 2 angezeigten Leistungen konzentrieren kann. Gleichzeitig wird aber auch so viel Abstand gelassen, dass am unteren Bildschirmrand das nächste Icon zu sehen ist, was den Leser zum Scrollen bringt. Bei weiterem hinunterscrollen fliegt die jeweils nächste Reihe von unten mit einem „fade-in-up“-Effekt ein, was noch Lebhaftigkeit in die Seite bringt.
Die Seite besteht aus 5 Reihen mit jeweils zwei Spalten. Ab der dritten Reihe wurde der „fade-in-up“-Effekt in jeder Spalte eingebaut. Das bewirkt, dass bei einem breiten Bildschirm, wo die zwei Spalten nebeneinander angezeigt werden können, beide Spalten gleichzeitig einfliegen, und bei einem schmalen Bildschirm, wo die beiden Spalten untereinander angezeigt werden, sie nacheinander einfliegen.
Über uns
In der „Über uns“-Seite kann sich das Unternehmen rund um Konrad Dullinger vorstellen und ihre Firmenphilosophie preisgeben. Auch die selbstgemachten Fotos finden ihren Platz in dieser Seite. Zuerst ist ein Foto mit dem Chef zu sehen, welches mit einer Bildunterschrift versehen ist. Die Bildunterschrift zeigt den Namen, die Telefonnummer, die Faxnummer und die E-Mail-Adresse. Daneben ist ein Foto von dem Betrieb von außen zu sehen. Die nachfolgenden Bilder sollen nur Eindrücke darstellen und werden durcheinander angezeigt. Zudem sind sie mit dem Plugin „Scroll Triggered Animations“ versehen, damit die Elemente dynamischer wirken und mehr Bewegung zu erkennen ist. Die linken Fotos kommen von der linken Seite und die rechten Fotos von rechts. Die zentralen und größeren Fotos schwenken entweder nach unten oder nach oben auf den Bildschirm.
Impressum und Datenschutzerklärung
Das Impressum und die Datenschutzerklärung sind auf jeder Website zu finden und sind sehr wichtig. Das Impressum dient als Informationsquelle und beinhaltet alle wichtigen Unternehmerdaten, wie die Firmenbezeichnung, die UID-Nummer und das Firmengericht. Die Datenschutzerklärung ist notwendig, damit die Inhalte auf der Seite von Rechtssachen geschützt sind. Darin enthalten sind rechtliche Bestandteile von „Google reCAPTCHA“, von den Cookies und die Speicherung von personenbezogenen Daten. Die Seiten wurden zusammengefügt und befinden sich im „Footer“ der Website. Erstellt wurde das Impressum und die Datenschutzerklärung mit den Daten, die uns zur Verfügung gestellt wurden, und mit der Seite „www.firmenwebsiten.at“, weil es viel einfacher ist und automatisch generiert wird.