Responsive Webseiten und Webapps

So überzeugt Ihr KMU im Internet

Wenn es um Webseiten geht, war es für Unternehmen noch bis vor ein paar Jahren ausreichend, die Kontaktinformationen und einen groben Umriss der Leistungen zu präsentieren. Heutzutage sind die Anforderungen ganz anders: Der Wettbewerb beginnt im Netz und die Unternehmenswebseite muss diesen Anforderungen entsprechen.

Ein Wort, das bei der Optimierung einer solchen Internetpräsenz immer wieder fällt, ist „Responsiveness“. [1] Dieses beschreibt eine Technik der Webseitenoptimierung für mobile Endgeräte wie Smartphones und Tablets. Doch dahinter steckt weit mehr als nur ein ansprechendes Mobil-Design.

Erkundigt sich ein potenzieller Kunde etwa spontan über ein Unternehmen, weil er den Namen von Kollegen, in der Werbung oder auch auf einer Fachmesse gesehen hat, wird er folgendes tun: Er nimmt sein Smartphone in die Hand und tippt den Namen in eine Suchmaschine. Landet er dann auf der entsprechenden Webseite, ist die Ernüchterung bei einer nicht mobiloptimierten Webeseite schnell gross. Das Problem: Die Übersicht fehlt, immer wieder wird lästiges Zoomen nötig und die Ladezeiten sind im Vergleich erheblich höher.

Gegenüberstellung einer mobiloptimierten und einer nicht mobiloptimierten Webseite

Links im Bild: Die alte Webseite von LearningCulture, die nicht mobiloptimiert ist. Die Schrift ist zu klein, die Ladezeiten hoch. Die Übersicht auf demSmartphone ist nicht gewährleistet. Rechtsim Bild: Die neue Webseite, welche sich automatisch der Grössedes Bildschirms anpasst und Elemente logisch untereinander anordnet.

Das stösst vor allem bei denjenigen an, die „schnell mal“ einen Blick darauf werfen wollten. Nicht selten sind diese Besucher schon als potenzielle Kunden verloren, bevor sie überhaupt damit begonnen haben, sich zu informieren. Und diese Gefahr ist keineswegs zu unterschätzen: 78 % der Schweizer zwischen 15 und 74 Jahren nutzen ihr Smartphone regelmäsig – und surfen dabei zu jedem erdenklichen Anlass. [2] Dabei legen besonders die sogenannten „Silver Surfer“, also die Kategorie der Internetbenutzer mit einem Alter von 50+ noch mächtig zu.

Statistik: Anteil genutzter Endgeräte im Internet Juli 2010 bis Juli 2016

Grafik: Immer mehr Webseitenaufrufe erfolgen von einem Mobilgerät aus.
Quelle: http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CH-monthly-201007-201607

Ist Ihre Webseite mobilfreundlich? Finden Sie es gleich hier heraus!

Erfolgreiche Strukturverschiebung ohne Informationsverlust

Der Clou an Webseiten, die sich dem Format des jeweiligen Bildschirms anpassen: Informationen werden genau dort angezeigt, wo sie der Besucher braucht. Dafür sorgt eine gut durchdachte Verschiebung der Elemente untereinander, sowie in manchen Fällen gar das Wegfallen weniger wichtiger Aspekte. Eine klassische Webseite sieht zwar auf dem PC oder Laptop ansprechend aus und präsentiert alles schön strukturiert, doch zoomt das Smartphone erst einmal auf einen Textblock, ist die dazugehörige Grafik vielleicht schon längst aus dem Sichtfeld verschwunden. Der ausgeklügelte Content- und Design-Plan verpufft so ohne die gewünschte Wirkung. Durch eine erfolgreiche Strukturverschiebung auf responsiven Webseiten wird dieses Problem einfach und für jedes Gerät kompatibel gelöst.

Strukturverschiebung auf einer mobiloptimierten Webseite

Grafik: Schematische Strukturverschiebung für verschiedene Bildschirmgrössen

Das Erstaunliche an dieser Methode: Statt mehr Arbeit zu verursachen, ist die Pflege des Systems – einmal eingerichtet – sogar ressourcenschonend. Denn wo Webseiten mit zwei verschiedenen Versionen für Desktop und Mobil meist auch doppelt aktuell gehalten werden müssen, gibt es im Falle einer responsiven Webseite nur eine Version und somit auch nur die einfache Arbeit für eine Vielzahl an Endgeräten.

Für die Entwicklung bedeutet das besonders zwei Änderungen in der Struktur der Webseite:

  • Kein statisches Grid-Layout: Klassische Websites basieren auf einer Tabellenstruktur mit festen Breiten (z.B. 1280 Pixel). Um die Struktur leichter aufbrechen zu können und das Design „responsive“ werden zu lassen, werden diese festen mit relativen Grössen ersetzt und variabel im Code hinterlegt. So kann die Anordnung statt nebeneinander (auf dem Desktop) gleichzeitig auch untereinander (auf dem Smartphone) ausgegeben werden.
  • Keine festen Schrift- und Bildgrössen: Um lästiges Zoomen zu vermeiden, müssen sich ausserdem Bilder und Schriften dem entsprechenden Endgerät anpassen. Hier arbeitet man in responsiven Designs oft mit prozentualen Werten. [3]
Nebeneffekt mit grosser Wirkung: das SEO Ranking

Tatsächlich sind diese Verbesserungen aber nur die offensichtlichen Vorteile. Mittel- und langfristig wird zusätzlich folgendes passieren: Die Webseite wird von Suchmaschinen besser indexiert und auf der Resultatsseite entsprechend an einer besseren Position angezeigt. [4]

Das sogenannte Search Engine Optimization-Ranking (kurz: SEO-Ranking), also die Reihenfolge der Suchmaschinenergebnisse, berücksichtigt schon seit geraumer Zeit die Nutzerfreundlichkeit. Zur Bewertung ziehen Seiten wie Google oder Bing unter anderem auch Kriterien wie die Struktur der Webseite, aber eben auch die Ladezeiten mit dem jeweiligen Endgerät heran. Testen Sie gleich hier, wie Google Ihre Seite bewertet!

Eine gute Platzierung auf den Resultatsseiten ist mitunter also auch ein Ergebnis der mobilen Seitenoptimierung. Doch auch hier gibt es Unterschiede: Zeigen Google & Co die gewünschten Informationen an, oder wird eine unglücklich ausgewählte Passage aus Ihrem Webseitentext zitiert? Im folgenden Beispielbild sehen Sie, wie Sie Ihr Suchergebnis weitgehend nach Ihren Vorstellungen beeinflussen können: mit den wichtigsten Unterrubriken Ihrer Seite und den dazugehörigen und vor allem aussagekräftigen Erklärungen. Für ein solches Ergebnis müssen Suchmaschinen Ihre Seite aber zunächst in der Struktur erkennen, die sie präsentieren wollen – sowohl in der Desktop- als auch Mobilansicht. Damit dies zuverlässig und berechenbar erfolgen kann, muss der Webseitencode dafür eingerichtet sein.

Suchresultat von nzz.ch auf Google

Grafik: Beispielhaftes Suchergebnis auf Google

Durch den Umbau auf eine responsive Seite erreichen Sie also langfristig mehr potenzielle Interessenten und führen diese benutzerfreundlich zu den gewünschten Informationen – ganz ohne nerviges Zoomen, langes Suchen nach Informationen und dem damit verbundenen Frust.

Ein Schritt weiter: Webapps

Zunehmend auch kleinere Unternehmen integrieren Web-Applikationen (kurz: Webapps) auf ihren Webseiten, um dem zunehmenden Bedürfnis nach sofortiger, unkomplizierter Erledigung der Kundschaft gerecht zu werden. Ein allgegenwärtiges Beispiel sind Web-Shops für den direkten Online-Verkauf von Produkten und Dienstleistungen. Die Möglichkeiten sind aber nahezu unbegrenzt und die grosse Dynamik der Online-Welt macht die Entwicklung von kundenspezifischen Apps günstiger und schneller als je zuvor. So können Patienten in Arztpraxen direkt im Internet Sprechstunden vereinbaren, Veranstalter verkaufen Tickets für ihre Events online und Verliebte können sich direkt vom Smartphone aus mit Blumen beschenken.

Mit der Einbindung von Webapps auf der Firmenwebseite können auch Sie nicht nur die Kundenfreundlichkeit weiter steigern, es lassen sich auch Aufgaben automatisch im Internet erledigen, um die sich sonst Ihre Mitarbeiter und Mitarbeiterinnen kümmern müssten. Eine Win-Win-Situation in Perfektion.

Zusammenfassend...

…ist es gar nicht so schwierig, im Internet nachhaltigan Boden zu gewinnen:

  • Eine responsive Seite ist einfacher und intuitiver zu bedienen, schont Ressourcen, verbessert Ihr SEO-Ranking und verbessert das qualitative Nutzererlebnis durch kurze Ladezeiten.
  • Webapps ermöglichen Unternehmen zentrale Interaktionen mit ihrer Kundschaft wie Terminvergaben oder die Buchung von Dienstleistungen ins Internet zu verlegen.

Der Erfolg Ihres Unternehmens lässt sich schon heute zu einem beachtlichen Anteil mit Ihrer Online-Präsenz verknüpfen – ein Trend der sich über die kommenden Jahre noch weiter ausprägen wird. Denn wo erkundigt man sich über benötigte Dienstleistungen und bevorstehende Produktkäufe? Die Antwort darauf war bereits im Jahr 2013 gemäss einer Erhebung von GE Capital eindeutig: Auf Suchmaschinen - und dort können Sie mit einer responsiven Webseite, dem passenden Content und einer geschickten Seitenbeschreibung ganz schnell ganz oben landen.