Navigieren / suchen

Wie erstellt man eine gute Homepage?

Ich möchte dazu einige Gedankengänge vorstellen am Beispiel des Homepage-Relaunches meines Unternehmens.

Unser K&K Webteam hat unsere eigene Homepage www.kk-software.de neu erstellt mit dem Ziel, eine perfekte Homepage zu bauen.
Perfekt ist vielleicht ein hohes Ziel und die Liste an Wünschen (auch jetzt noch) ist endlos, aber es ist am Ende gelungen, eine Top-Homepage zu erstellen, die sich sehen lassen kann.

Ich möchte ein paar Aspekte herausarbeiten, die vielleicht auch jeder für seine Homepage überprüfen und anwenden kann.

Inhalt

  1. Hauptfrage: Was ist unser Schwerpunkt?
  2. Startseite mit Direkteinsteig
  3. Hintergrundvideos
  4. Mitarbeitervideos
  5. Authentische Fotos und Videos
  6. Professionelle Fotos
  7. Call to Action und Ansprechpartner auf jeder Seite
  8. SPAM oder Kontaktierbarkeit?
  9. Die richtige Menge Text
  10. Vernetzung von Produkten und Referenzen
  11. Brauchbare Suche
  12. Übersichtliches Menü
  13. Responsive
  14. Schnelle Auslieferung
  15. Tests und Qualitätssicherung
  16. Lebendig halten
  17. Suchmaschinenoptimierung
  18. Fazit

 

Hauptfrage: Was ist unser Schwerpunkt?

“Wir verkaufen primär IT-Dienstleistungen und leisten diese mit einem super Team. Hoch kompetent und sympathisch.”

Das müssen wir beim Relaunch herausarbeiten: So ist das zentrale Element unsere Mitarbeiterseite geworden: Ein Kompetenzfinder zeigt die Kompetenzen, und die Mitarbeiter werden mit Videos vorgestellt, die diese so noch natürlicher und authentischer zeigen.

So ist die meiste Arbeit in die Mitarbeiterseite geflossen, und wir haben hier neue Ideen entwickelt. Ich denke, so eine Mitarbeiterseite hat man noch nie gesehen: https://www.kk-software.de/Mitarbeiter.html

Es soll einfach Spaß machen, mit dem dem Kompetenzfilter zu spielen.

Screenshot 2016-07-31 18.29.07

Dann geht es weiter zur eigentlich wichtigsten Seite, der Startseite:

Startseite mit Direkteinsteig

Die Startseite hat viele Aufgaben:

  • Einen guten Eindruck geben
  • Sofort vermitteln, was das Unternehmen leistet
  • Änderungen, News und Updates zeigen
  • Schnelleinstieg zu den häufig genutzten Seiten

Unser Unternehmen hat drei Säulen: Softwareentwicklung, Webentwicklung und Systemhaus

Wir haben die Informationen plus die Notwendigkeit, News auf der Startseite anzuzeigen, in 4 Tabs gelegt:

  • Software
  • Internet
  • Systemhaus
  • News

Also nächstes geht es darum, konkrete Produkte zu präsentieren: “Was machen wir eigentlich genau?”

Dazu haben wir zu jedem oben ausgewählten Tab darunter korrespondierende Produkte und Dienstleistungen angezeigt. Wenn man oben eine andere K&K-Sparte auswählt, erscheinen unten sofort die zugehörigen Produkte.

Screenshot 2016-07-31 18.29.22

Für wen sind wir primär tätig? Um das durch die Blume zu zeigen, haben wir einen dynamischen Filter über die Produkte gesetzt: Industrie, Unternehmen, Öffentliche Hand, Verbände, Startups.

Und wenn man sie anklickt, filtern sich die Produkte mit einer schicken Animation. Auch das sieht man nicht häufig und zeigt gleich mal unsere technische Kompetenz.

Hintergrundvideos

Ebenfalls nicht alltäglich: Hintergrundvideos auf quasi allen Seiten bringen Bewegung in die Seite.
Und jetzt führt eines zum Nächsten: Damit die Videos nicht zu sehr vom Vordergrund ablenken, sind sie mit einem Unschärfe-Effekt belegt. Um die Ladezeit klein zu halten, sind sie stark komprimiert, und um die Kompressionsartefakte (diese Kästchen, die insbesondere bei Bewegung auftreten) zu verschleiern, haben wir ein gepunktetes Raster übers Video gelegt. Und natürlich haben wir kein YouTube benutzt, sondern den schlanken html5-Videotag.

Mitarbeitervideos

Eine Mitarbeiterseite mit Fotos ist besser als eine Mitarbeiterseite ohne Fotos. Und eine Mitarbeiterseite mit Videos ist besser als eine mit Fotos: Man hat ein viel besseres Gefühl für das Gegenüber. So ist an jeder Stelle statt eines Fotos ein kurzes Video des Mitarbeiters eingebunden. Und auf der Mitarbeiterübersichtsseite laufen jetzt eben 25 Videos parallel.

Authentische Fotos und Videos

An Stockfotos und Stockvideos hat man sich sattgesehen. Auch wenn man selbst nicht die glatten, perfekten Posen von Fotos aus Marktplätzen wie Fotolia, Getty Images usw. nachstellen kann, so kann man etwas anderes bieten: Authentizität.
Das sind keine Models, das sind unsere Mitarbeiter. Die Naturvideos sind bei uns zum Fenster heraus gefilmt. Die blinkenden Lichter sind unsere Server im Keller. Die disco-mäßige Animation zeigt unsere Check-Ins in das GIT eines unserer Software-Projekte (von den 4 oben gezeigten Hintergrundvideos ist es das Video links unten).

Professionelle Fotos

Natürlich muss man beim Selbst-Fotografieren und -Filmen gewisse Mindeststandards beachten. Die Mitarbeitervideos sind vor unserer Beamerleinwand mit 4 Fotoleuchten entstanden: 2 stärkere leuchten auf die Leinwand und sorgen so für die Überbelichtung, damit die Leinwand (= der Hintergrund) weiß “ausbrennt” und so im Video reinweiss wirkt. Die beiden anderen, schwächeren Leuchten kümmern sich um die korrekte Ausleuchtung der Mitarbeiterinnen und Mitarbeiter.
Als (Video-) Kamera kommt eine Sony A6300 zum Einsatz, die eine hervorragende Videoqualität, insbesondere bei hohen ISO-Werten (die meisten Indoor-Videos sind bei ISO 2500 entstanden) hat. Sie nutzt die gesamte 6K-Pixel-Fläche (6000×4000 Pixel = 24 Megapixel) um daraus einen scharfen und dynamikreichen (weiß und schwarz brennen nicht aus) 4K-Videostream (3840×2160 Pixel = 8 Megapixel) aufzunehmen. Das bietet – von Profikameras abgesehen – quasi keine andere Kamera.

Call to Action und Ansprechpartner auf jeder Seite

OK, unser Unternehmen ist noch nicht so groß, aber vielleicht fällt es trotzdem auf: Bei jeder Webseite, bei jedem Produkt und bei jedem Mitarbeiter ist eine passende Ansprechpartnerin gesetzt: Franziska Schoppel beim Web-Team, Zeljka Parad beim Software- und Systemhaus-Team und Laura Köpl im Vertrieb.

Screenshot 2016-07-31 18.35.55

SPAM oder Kontaktierbarkeit?

Auf jeder Seite kann man uns sofort kontaktieren. Keine versteckte Telefonnummer oder x Links, bis man zum Kontaktformular kommt: Wenn mich als Besucher ein Thema interessiert, sehe ich sofort eine kompetente Ansprechpartnerin mit Name, Video, Durchwahl (am Handy direkt anklickbar und das Telefon startet) und E-Mail-Adresse und kann mir aussuchen, ob ich sie anrufen will, oder ob sie mich anrufen soll, dazu ein Mini-Kontaktformular daneben. Wir bekommen vielleicht ein paar SPAMs mehr, weil die E-Mail-Adresse im Klartext auf der Webseite steht, aber wenn uns ein echter Mensch erreichen will, sind wir auch erreichbar.

Die richtige Menge Text

Soll man – wie mit diesem Blogpost – eine Textwüste produzieren oder versuchen, die Infos knapp und kompakt an die Frau bzw. den Mann bringen? Wir haben uns für das Kompakte entschieden (also das Gegenteil von diesem Blog) und den Text in kleine Boxen aufgeteilt, die keine langen Textzeilen haben und so gut zu lesen sind. Dazu gibt es auf fast jeder Seite immer an der gleichen Stelle zwei Aufzählungen “Unsere Leistungen” und “Ihre Vorteile” (=Kundennutzen).

Screenshot 2016-07-31 18.35.39

Vernetzung von Produkten und Referenzen

Jeden interessiert: Für wen haben die das schon gemacht?
So haben wir Produkte und Referenzen eng vernetzt. Unter jeder Produktseite laufen zugehörige Referenzen durch, und bei jeder Referenz sieht man die eingesetzten Produkte. So sieht der Besucher gleich, wo der tatsächliche Fokus und Zielgruppe des jeweiligen Produktes bzw. Dienstleistung ist.

Brauchbare Suche

Die einen klicken sich durchs Menü, die anderen erwarten eine funktionierende Suche. Sie soll nicht zu aufdringlich sein (daher nur die Lupe oben), aber sie soll funktionieren: Einmal die Lupe angeklickt, sitzt der Fokus im Textfeld, ich kann tippen und mit “Enter” suchen. Das Ergebnis ist sortiert, und dank Vorschaubild und Anreißertext weiß man schon beim Überfliegen der Treffer ungefähr, was einen erwartet.

Screenshot 2016-07-31 18.34.12

Ein Menü hat zwei Aufgaben: Einmal soll es einen schnellen Überblick über die gesamte Seite verschaffen, und zum anderen zum einfach und schnell zwischen den Seiten durchzuklicken.
Dazu gibt es zwei Menüs, 1x oben und 1x an der Seite links. Wer genau hinschaut, dem fallen Unterschiede auf: Das Menü oben dient zum Überblick über die gesamte Homepage. Daher muss man nicht in Untermenüs klicken, sondern Untermenüs werden in die Liste aufgelöst. Mit einem Klick z.B. auf Systemhaus sieht man sofort das gesamte Leistungsspektrum Systemhaus.
Wenn man jetzt über einen Menüpunkt einsteigt, erfüllt das Menü links einen ganz anderen Zweck: Es bleibt immer an der gleichen Stelle offen stehen und lässt den Besucher ganz schnell zwischen den Seiten des gleichen Themas wechseln und zeigt dem Besucher dann per Highlighting, wo er sich gerade befindet.

Screenshot 2016-07-31 21.05.00

Responsive

Wer die Seite auf dem Smartphone öffnet, sieht eine optimierte Variante der Homepage: Es ist auch ohne Zoomen lesbar, häufige Funktionen sind gleich am Anfang viel klarer rausgestellt. Der Kunde steht gerade im Serverraum und etwas geht nicht? Er geht mit seinem Handy auf unsere Homepage und findet ganz oben ein Hörersymbol, das nicht erst auf die Kontaktseite führt, sondern sofort unsere Nummer wählt.
Hintergrundvideos sind zugunsten der Ladezeit und Datenvolumen ausgeschaltet.
Eine gute Responsive-Seite ist heute Grundvoraussetzung für eine gute Suchmaschinenpositionierung.

Screenshot 2016-07-31 21.06.59

Schnelle Auslieferung

Langsame Ladezeiten nerven alle. Wir haben einen Cache programmiert, der die Webseite in durchschnittlich 5 Millisekunden ausliefert. Obwohl alle Inhalte hochdynamisch verknüpft sind, bekommt der Browser sofort Daten, die er anzeigen kann (Google bezeichnet das als TTFB = Time To First Byte). Woanders dauert das 1000 ms, bei uns hat der Browser nach 30 ms Ping-Laufzeit + 5 ms Server-Auslieferung + 200 ms Datenübertragung den gesamten HTML-Code.
Eine schnelle Seitenauslieferung ist heute Grundvoraussetzung für eine gute Suchmaschinenpositionierung.

Auch die Anzahl der Elemente wurde reduziert: Die Icons auf der Startseite sind keine Bilder, sondern SVG-Vektorgrafiken, die perfekt skalieren. Und sie sind nicht als Datei eingebunden, sondern inline. Das spart weitere Ladezeit.

Tests und Qualitätssicherung

Am Ende muss die Seite überprüft werden.

Zuerst mit echten Endgeräten:

  • Windows PC mit ganz vielen Browsern: Google Chrome (mein Lieblingsbrowser), Mozilla Firefox, Microsoft Edge, Microsoft Internet Explorer
  • Apple Mac Mini mit dem Apple-Browser Safari
  • iOS-Geräte: iPhone, iPad
  • Android-Geräte: Sony Z3, Samsung Galaxy Tab

Obwohl sich die Technik in den letzten 20 Jahren enorm weiterentwickelt hat und wir jetzt mit HTML5 und CSS3 (entwickelt mit SCSS) arbeiten, verhält sich im Detail jeder Browser immer noch etwas anders und man muss die Homepage genau wie 1996 doch per Hand für jeden Browser optimieren. Das ist der Fluch der Webentwickler, da so viel Zeit zu verlieren.

Wenn es da überall gut aussieht, setzen wir danach eine Reihe von Tools ein:

  • Google Test my Site gibt viele Hinweise auf Basisbewertungen von Google
  • Check gegen Werbefilter: uBlock Origin, Adblock Plus etc. haben viele kosmetische Filter, die anhand von Dateinamen, Tag-Namen und ähnlichem Werbung aus Webseiten herausfiltern. Wenn man zufällig eine Dateinamen wie in einer Filterliste benutzt hat, filtern die Blocker einem Elemente von der eigenen Webseite heraus. Das muss überprüft werden.
  • Grader Score: Ein Mini-Test, der einige Basics abklopft.
  • Sistrix Optimizer: Ein Test mit Fokus auf die Inhalte und Suchmaschinenoptimierung
  • W3C-Validator: Ein Test, der die Einhaltung der technischen HTML-Standards überprüft (steht noch auf der ToDo-Liste)
Screenshot 2016-07-31 18.58.23

All diese genannten Seiten haben oft in der Praxis nicht einzuhaltende Tests bzw. Lösungsvorschläge, so dass man niemals überall 100% erreichen kann (aktuell haben wir nur 100% beim Grader Score https://website.grader.com/results/www.kk-software.de, an den anderen arbeiten wir noch). Doch sie zeigen einem auf, wo man seine Homepage noch optimieren kann und man kann selbst entscheiden, welchem aufgezeigtem Defizit man welche Bedeutung zugesteht und was man nach eigener Kosten-Nutzen-Bewertung umsetzt. Aber je näher man überall an die 100% kommt (insbesondere bei Google), umso besser!

Lebendig halten

So, die Webseite ist fertig. Jetzt kommt der schwierige Teil: Die Website muss nicht nur mit Leben gefüllt werden, sie muss vor allem lebendig bleiben. Also besser wöchentlich statt monatlich neue News bringen. Die Produkte und Referenzen ständig erweitern. Das Suchmaschinenranking ständig überwachen.
Der Besucher muss spüren: Hier tut sich was!

Auch technisch wird ständig weitergearbeitet: Z.B. Unterstützen Tablets und Smartphones kein Autoplay von Videos. Hier zeigen wir nur Mitarbeiterfotos statt Mitarbeitervideos an. Um hier in Zukunft auch Bewegung zu haben, werden wir demnächst auf mobilen Geräten die Videos als animierte GIFs rausrendern, die dann auch automatisch ablaufen.
Dann sind die Kalkulatoren noch offline, die kommen auch in den nächsten Monaten: Für häufig kalkulierte und angebotene Leistungen wie „Managed Service“ oder „Homepageerstellung“ wird es (wieder) Kalkulatoren geben, in dem Interessenten selbst Umfänge und Preise für Leistungen zusammenstellen und sehen können.

Suchmaschinenoptimierung

Das Thema Suchmaschinenoptimierung ist so komplex, dem werde ich mich in einem separaten Artikel widmen. Die meisten ToDos in der Endphase (und insbesondere viele noch offene Tickets) bezogen sich auf SEO-Themen.

Fazit

Hier habt Ihr die Motivation hinter dem Relaunch unserer Homepage kennengelernt.
Und wer sich das aufmerksam durchgelesen hat und selbst eine Homepage betreibt, wird vielleicht bei sich das eine oder andere Defizit feststellen.
Aber keine Panik: Dafür gibt es Profis wie uns: Sprecht mich an, unser K&K-Webteam baut euch auch so eine schön Homepage oder optimiert eure bestehende Homepage.

Wo kommen die Pokestops in Pokemon Go her?

Jeder spielt Pokemon Go. So sieht es vor meinem Fenster nachts um 0:51 Uhr aus:

DSC04104

Auch die Mainpost berichtet GEROLZHOFEN – Eine Stadt im Pokémon-Fieber.

Warum sitzen aber jetzt die ganzen Pokemon-Go-Spieler genau vor meinem Fenster?

2016-08-01 20.12.43

Weil es weit und breit einer der wenigen Orte mit drei Pokestops an einer Stelle ist. Man kann in jeden dieser Pokestops ein Lockmodul installieren und dann 3x so viele Pokemons anlocken und fangen wie an anderen Orten, also auch 3x so schnell innerhalb des Spiels aufsteigen und der Einsatz bestimmter Items wie „Glücks-Eier“ lohnt sich nur an solchen Stellen.
Ich glaube, erst wieder in Würzburg oder Schweinfurt gibt es so eine Stelle. Denn eigentlich soll Pokemon die Spieler ja zum Laufen animieren.

Das hat was mit dem Spiel „Ingress“ zu tun.

Pokemon Go und Ingress sind beide von der Google-Tochter Niantic entwickelt worden. Ingress erschien Ende 2013 als erstes Augmented-Reality-Spiel (AR = erweiterte Realität), Pokemon Go Mitte 2016. Die Technik ist die gleiche: das Spielfeld ist die echte Welt und man spielt auf einer Google-Maps-Karte genau an der Stelle, an der man gerade in Echt steht. Möchte ich ein Ingress-Portal hacken oder einen Pokestop drehen, muss ich physisch dort hin laufen.

Mein Wohnzimmer, links in Ingress, rechts in Pokemon Go:

1-i
1-p

 

Wo kommen jetzt die Portale her? Aus Wikipedia?

Nein! Das ist User-generated content von Ingress-Spielern.

Einige Mitarbeiter bei K&K Software AG (auch ich) haben Ingress intensiv gespielt. Klar: Das erste Mal ein funktionierendes Augmented-Reality-Spiel konnten wir uns als Nerds nicht entgehen lassen. Und die Story von Ingress war auch etwas erwachsener  und die Spielmechanik etwas komplexer gegenüber Pokemon Go (vielleicht zu erwachsen & komplex, deshalb hat Pokemon Go nach 2 Wochen mehr Installationen als Ingress nach 3 Jahren).

Ingress war am Anfang im Prinzip eine leere Karte. Es gab nur ganz wenige Start-Portale von Google/Niantic. Wir sind damals mehrmals nach Rothenburg ob der Tauber gefahren, weil dort mehrere Portale an einem Ort waren. Aber man konnte sich die Ingress-Spielwelt gestalten, indem man Portale vorschlagen konnte (musste), um Orte zu haben, an denen man Ingress spielen kann. Diese Vorschläge wurden von Google Hamburg manuell reviewt und mussten irgendwie spektakulär oder ungewöhnlich sein. Historische Orte hatten immer eine gute Chance, angenommen zu werden. Daher hat man als Spieler primär historische Orte eingereicht und daher sind heute die Pokestops in Gerolzhofen primär an historische Orten. Hätten wir mehr moderne Skulpturen in Gerolzhofen, wären die auch Ingress-Portale geworden.

Google hat dann eifrig Bewegungs- und Nutzungsdaten gesammelt – und aus gut genutzten Ingress-Portalen sind Pokestops geworden. Nicht eben nicht aus allen Ingress-Portalen, sondern nur aus denen wo was los war.
Weil wir bei K&K Software und ich zuhause so viel Ingress gespielt haben, sind aus den drei Portalen am Gabelmannbrunnen jetzt drei Pokestops geworden.
Oder umgedreht: Weil in der Nachbarortschaft Dingolshausen früher niemand Ingress gespielt hat, gibt es heute dort kaum Pokestops und Arenen.

p1-i
p1-p

Aber: Bei Ingress war Niantic so fair, und hat die Urheber des Portals (bzw. Portalfotos) angezeigt. Im Screenshot oben z.B. Geo1 (steht beim Portalbild unten rechts). Bei Pokemon Go gibt es kein Hinweis mehr, dass die Spieler „an meinen Orten“ spielen.

Wenn man sich in Ingress die Portale anschaut, hat hebbet mit Abstand die meisten Portale in Gerolzhofen gemeldet, dann kommen viele von Geo1 und riserwood. Sie haben mir erlaubt, sie zu outen, das sind sie: hebbet | Geo1riserwood

Hier ein Portal von riserwood:

p3-i
p3-p

Und eines von hebbet:

p2-i
p2-p

Und die Arenen?

Wie sieht es mit Pokemon-Arenen aus?
Auch die sind User-generated content aus Ingress. Siehe in Pokemon Go oben links Foto und Name und rechts das Foto und Name, den ich in Ingress eingereicht habe. Nur ganz, ganz wenige Portale in Ingress haben kein „by“ im Bild stehen und sind wirklich von Google/Niantic vordefinierte Startpunkte.

p4-p
p4-i

Fazit

Googles Tochter Niantic hat eine populärere Story für seine 3 Jahre alte AR-Technik gefunden und die Elemente in einem neuen Gewand recycelt. Die Pokestops sind alle alte Ingress-Portale. Nicht jedes Ingress-Portal wurde ein Pokestop, sondern nur gut besuchte Ingress-Portale wie die vor unserer alten Firma.

Leider haben wir nach unserem Umzug in die neuen Geschäftsräume mit dem Ingress-Spielen aufgehört, sonst hätten wir jetzt 3 Pokestops an der Firma.
Immerhin: Ich kann vom Sofa aus 3 Pokestops aufrufen und freue mich, wenn immer wieder 3 Lockmodule hier installiert werden. 🙂

Links

Download Ingress für Android

Download Pokemon Go für Android