Smartphones und Tablet-PCs sind nicht mehr aus dem Alltag wegzudenken. Dabei ist die Zeit längst vorbei, als Mobilfunkgeräte ausschliesslich zum Telefonieren verwendet wurden. Ein inzwischen nicht minder wichtiges Nutzungsprofil ist der Einsatz der Geräte für den Internetzugang. So hat sich in den letzten Jahren ein neuer Begriff etablieren können: Mobile Internet. Damit kam es aber auch zu einer neuen Herausforderung für die Programmierer von Webseiten. Gingen die Webdesigner bis dahin immer von relativ festen Grössen von Desktop-Monitoren aus, nutzen die Verbraucher das Internet plötzlich auch auf den erheblich kleineren Displays von Smartphones und Tablets. Doch nicht nur die visuellen Anforderungen änderten sich damit dramatisch. Ebenso ist es immer noch wichtig, dass eine Internetpräsenz durch erfolgreiche Marketingstrategien vom interessierten Nutzer auch gefunden werden kann. Hier wuchsen die Anforderungen nicht nur, Webdesigner sahen sich plötzlich ganz anderen Problemen ausgesetzt, denn diese Marketing- und SEO-Techniken sind elementar beim Gestalten von Websites.
Shutterstock „©fet #116584966“
Design von Mobile Websites: Responsive Design und eigene mobi-Seiten
Früher gab es immer wieder Diskussionen, wie die Abmessungen eines Webdesigns auszusehen hatten. Einige Designer vertraten die Auffassung, dass beispielsweise die Breite einer Website innerhalb eines vorgegebenen Rahmens (von bis) definiert sein sollte, also statisch. Andere Designer wiederum bevorzugten ein flexibleres Prinzip, das sich allerdings aufgrund der technischen Möglichkeiten nur begrenzt umsetzen liess: eine Webseite sollte sich dynamisch an die Breite des Browserfensters anpassen. HTML5 brachte mit neu integrierten Funktionen für die letztgenannte Lösung, die heute als Responsive Design bekannt ist, den Durchbruch. Aber auch die Fraktion statischer Internetauftritte bekam Ihre Alternative, und zwar mit Seiten, die speziell für Mobilgeräte gestaltet werden. Damit sie sich auch von einem herkömmlichen Internetauftritt absetzen, werden sie oftmals unter der Domainendung „mobi“ eingerichtet. Selbstverständlich ist es schwer abzuschätzen, welches Modell nun das bessere ist, allerdings zeigen Tendenzen derzeit auf, dass es wohl das Responsive Design sein wird.
Lösungsansatz Responsive Design
Über den neuen HTML-Standard HTML5 sind Funktionen hinzugekommen, auf die der Webdesigner zurückgreifen kann. Mit einer Library-Anfragefunktion ist es serverseitig realisierbar, dass dieser eine Anfrage an das Endgerät sendet, welches auf das Angebot zugreift. Wer schon einmal einen Serverlog ausgelesen hat, mag sich vielleicht noch daran erinnern, dass dort Informationen wie das verwendete Betriebssystem eines Seitenbesuchers oder dessen geographische Position mitgeteilt werden. Ganz ähnlich funktionieren auch diese neuen Funktionen, allerdings beantworten sie gänzlich andere Fragen. Dabei geht es dann in erster Linie um die Grösse des verwendeten Endgeräts. Nun muss man noch wissen, dass eine sich Webseite aus unterschiedlichen Datenseiten zusammensetzt. Ganz grob umrissen ist das die Datei mit den eigentlichen Inhalten, dazugehörige Ordner mit Grafiken und Images und eine dritte Datei, die alles nach den Vorstellungen des Designers formatiert. Diese letzte Datei, das Cascade Style Sheet (CSS), ist der Schlüssel zum Responsive Design.
Wie Responsive Design die Inhalte anpasst
Mit dem CSS-Stylesheet erhält der Browser die notwendige Information, wie er eine Webseite zu formatieren hat. Das reicht von den Farben, Fonts und Schriftgrössen bis hin zur exakten Position einzelner Objekte. Aber auch die Abmessungen einer Webseite werden hier beeinflusst. So kann eine Webseite eine bestimmte Breite ebenso wie eine bis mehrere Spalten nebeneinander aufweisen. Genau diese Eigenschaften werden vornehmlich für das Responsive Design genutzt: je nach Antwort eines Endgeräts werden im Style Sheet unterschiedliche Formatierungen aufgerufen, also beispielsweise einspaltig und eine maximale Breite von xx Pixeln. Ist das zugreifende Gerät ein 32-Zoll-Monitor, fällt die Formatierung dagegen vielleicht vierspaltig und bis xxx Pixeln Breite aus. Vereinfacht gesprochen formatiert der Browser bei einem grossen Monitor eine komplexe, mehrspaltige Seite, während bei einem kleinen Smartphone alle Inhalte untereinander stehen. Besonders beim SEO hat das erhebliche Vorteile.
Wie unsere Seite im Internet gefunden wird
Wenn wir Internetinhalte finden wollen, erfolgt dies zumeist über Suchmaschinen. Wir geben einen Suchbegriff ein und aus den Suchergebnissen wählen wir die für uns passenden Auflistungen aus. Dabei werden vornehmlich die ersten Ergebnisse auf der ersten Seite, eventuell auch noch die Suchergebnisse auf den nächsten paar nachfolgenden Seiten genutzt. Was allerdings auf Suchergebnisseite 104.656 steht, interessiert niemanden mehr. Also müssen wir eine Seite so optimieren, dass der Algorithmus der Suchmaschine unsere Seite für so interessant befindet, dass sie möglichst auf Platz 1 gelistet wird. Dieser Algorithmus bezieht dabei völlig unterschiedliche Informationen, die er zur Bewertung der Positionierung (Pageranking) nutzt. Google wiederum ist die meistverwendete Suchmaschine, rund 90 bis 95 Prozent aller Internetnutzer suchen über diese Suchmaschine. Und der Suchmaschinenriese stellt Kriterien heraus, die eine Webseite zu befolgen hat, wenn sie ein gutes Ranking erreichen will.
Weshalb beim Seitendesign SEO beginnt
Dazu gehört unter anderem der doppelte Inhalt von Webseiten. Dass Inhalte wichtig sind, war den Programmierern bei Google schnell klar. Also wurden Seiteninhalte lange Zeit auch von schwarzen Schafen von „ehrlich“ erstellten Seiten kopiert und auf eigenen Webseiten online gestellt. Google hat dem mit dem schlechten Ranking von doppelten Inhalten einen Riegel vorgeschoben. Also ist aus SEO-Sicht immer wichtig, doppelte Inhalte zu vermeiden. Responsive Design ermöglicht genau das, denn die Texte sind immer dieselben, nur die Anordnung wird durch unterschiedliche Formatierungen verändert. Dazu kommt der Vorteil, dass sich über Responsive Design auch eine intuitiv und einfach zu bedienende Webseite mit ansprechendem Design erstellen lässt. Das ist beim SEO ebenso wichtig, denn Google bemisst auch die Haltezeiten, also die Zeiten, die sich Nutzer auf einer Seite aufhalten (Bounce Rate).
Mobile SEO muss noch effektiver an die Ansprüche angepasst werden
Nehmen wir nun die zum Responsive Design alternativen mobi-Webseiten, wird schnell eins klar. Für ein und denselben Inhalt werden unter Umständen zwei unterschiedliche Webseiten zur Verfügung gestellt: für das Mobilfunkgerät www.domain.mobi und für den Desktop-Nutzer eventuell www.domain.ch. Der erste Gedanke aus SEO-Sicht ist dabei der entstehende doppelte Seiteninhalt, der sich schädlich auswirken kann. Ist also eine umfassende Präsenz auch für Desktop-Anwender wichtig, sollte unbedingt Responsive Webdesign als tragende SEO-Strategie angewandt werden. Handelt es sich bei einer Webseite aber um Inhalte, die ausschliesslich mobilen Endgeräten zugedacht ist, können auch mobile mobi-Websites erstellt werden. Dann ist auch das Signal an den Nutzer klar: „aha, es handelt sich um eine für mein Endgerät optimierte Seite“. Daneben kommen natürlich auch andere SEO-Techniken zum Tragen, massgeblich entscheidendes SEO beginnt aber bereits beim richtigen Design.