Spätestens seit den grossen Google-Algorithmus-Updates wie Panda und Penguin oder Venice bei der lokalen Suche ist klar, dass die Suchmaschinenoptimierung zukünftig immer mehr von breitem und tiefem Wissen sowie dem Erkennen der komplexen Zusammenhänge des Internets abhängt, verbunden mit einer gehörigen Portion Fingerspitzengefühl. So war 2012 dieses Thema auch der Dauerbrenner. Und dabei sind andere, ebenso wichtige Themen nahezu untergegangen – leider. So sollte jedem Seitenbetreiber auch das Webdesign immer stärker ans Herzen wachsen. Mit dem grandiosen Erfolg von Smartphones und Tablet-PCs nimmt nämlich die Zahl der mobilen Internet-Nutzer stetig zu – und damit die Zahl der User mit einem kleinen Bildschirm. Daher wird neben dem eigentlichen SEO auch Responsive Design 2013 prägend sein. Besonders die Möglichkeiten von HTML5 tragen dazu bei, dass es hier nunmehr gute Lösungsansätze zu vermelden gibt.
Ist eine Optimierung für den mobilen Internetzugang überhaupt nötig?
Viele Webseiten sind noch immer auf normale Bildschirme um die 20 Zoll optimiert. Dabei nimmt die Zahl der Surfer, die mobile Internet nutzen, permanent und schnell wachsend zu. Ein gutes Beispiel, wie wichtig das mobile Internet wurde, können Sie an der Facebook-Aktie erkennen. Sind Sie etwas damit vertraut, werden Sie sicherlich die Gründe für den zunächst rasanten Tiefflug mitbekommen haben: die Investoren hatten angezweifelt, ob der Netzwerkgigant die Einbindung des mobilen Internets schafft. Alleine daran lässt sich schon messen, wie enorm wichtig das mobile Internet wurde. Je nach Vorlieben der Nutzer haben mobile Zugriffe auf bestimmte Dienste sogar schon die Oberhand gegenüber dem klassischen Desktop-PC erlangt. So zum Beispiel bei Newsseiten. Dennoch ist eine Vielzahl der Internetseiten immer noch auf herkömmliche Monitore, wie sie die meisten zu Hause stehen haben, optimiert. Dabei kam hier mit HTML5 eine echte Lösungsmöglichkeit hinzu. Responsive Webdesign ist jetzt sehr einfach aufzubauen – ausserdem behandelt es das Internet so, wie es ist: es gibt kein mobiles und „stationäres“ Internet – nur verschiedene Zugangsmethoden.
Um was handelt es sich bei Responsive Webdesign?
Im Prinzip ist es sehr schnell erklärt, worum es sich bei Responsive Design handelt. Wie Sie vielleicht wissen, benötigen Sie für eine HTML-Seite auch sämtliche Befehle, die den einzelnen Containern Anweisungen erteilen, wie sie auszusehen haben, wie sie positioniert sind usw. Vor einigen Jahren schon erkannte man, dass es sehr viel Arbeit ist, diesen Befehlscode immer auf jeder einzelnen Seite mit einzubauen. So kam es zu den CSS-Stylesheets. 
Das sind Seiten, die praktisch den gesamten Quellcode aller Unterseiten steuern. Dazu bekommen sämtliche Container einen Namen zugewiesen. Auf dem CSS-Stylesheet gibt man die entsprechenden Befehle ein. Aber das wussten Sie sicherlich schon. Das besondere an Responsive Webdesign ist die Verwendung mehrerer CSS-Stylesheets. Ab HTML5 sind CSS3-Media-Queries integriert. Das heisst, der verwendete Browser des Users sendet Informationen zur Bildschirmgrösse, welche HTML5 „versteht“.
Die drei Werte von Responsive Design: flexible Schrift- und Image-Grössen sowie dynamische Grids
Nun wird ein dynamisches Grid gewählt, also ein flexibles Gitter, welches den Seitenaufbau bestimmt. Durchsetzen konnten sich hier mindestens drei Grids: vier-, zwei- und einspaltig. Das kann an die Bildschirmgrössen angepasst werden: zum Beispiel Smartphones bis fünf Zoll einspaltig, bis zehn Zoll zweispaltig für Tablets und vierspaltig für reguläre Desktop-Monitore und Notebooks. Ausserdem müssen hier auch die Schrift- und Imagegrössen anders gewählt werden, und zwar relativ. Das bedeutet, Sie dürfen keine festen Werte mehr wie XX Pixel verwenden, sondern prozentuale Angaben relativ zur Bildschirmgrösse. Denn dann können Sie aus einem Image auch drei verschiedene Grössen anfertigen, die in ihrer Auflösung jeweils optimiert sind. Das ist notwendig, denn schliesslich soll ja bei mobilen Endgeräten die Ladezeit ebenfalls kurz gehalten werden. Verweisen Sie hier zu Grafiken in Thumbnail-Grösse, lädt die Seite wesentlich schneller.
Was es bei Responsive Webdesign zu beachten gilt
Allerdings gibt es auch einige Haken und Fallen, auf die es aufzupassen gilt: noch nicht alle Browser verarbeiten CSS3-Media-Queries. Für diesen Fall können Sie aber eine Subdomain anlegen. So stellen sogar einige Seitenbetreiber speziell für Mobilgeräte eine extra Seite zur Verfügung, indem Sie einer Subdomain ein „m“ voraussetzen: m.domain.tld. Dennoch sollten Sie sich nicht ausschliesslich auf diese Seite verlassen, denn Subdomains haben es schwer im Ranking in Suchmaschinen. Ein weiteres Problem kann hier doppelter Content darstellen. Eine Stolperfalle, die wir bereits genannt haben, sind Grafiken. Verwenden Sie dieselbe Grösse wie für Desktop-Vorgaben, wird die Grafik zwar verkleinert, hat aber dennoch enorme Ladezeiten. Ausserdem müssen Sie berücksichtigen, dass Mouseover-Befehle auf dem Touchscreen zu Problemen führen können. Dennoch: Responsive Design ist zukunftsweisend. Noch vor wenigen Jahren – bevor Smartphones aktuell waren – stritten alle über feste Grössen und prozentuale Festlegungen. Nun scheint alles geregelt zu sein – dank Responsive Webdesign.
Die zahlreichen Chancen, die Responsive Design eröffnet
Zwar bedeutet Responsive Design einen höheren Arbeitsaufwand, der zahlt sich jedoch aus. Jede Seite, die nicht wenigstens innerhalb drei Sekunden lädt oder gar auf Desktop-PCs optimiert ist, wird auf mobilen Geräten sehr schnell weitergeschoben. Es geht also um Ihren Traffic und folglich das dahinterstehende Ziel der Webseite. Ausserdem bietet Responsive Webdesign mehr Möglichkeiten: Augmented Reality (AR) lässt sich einfacher und ausschliesslich auf Mobilseiten umsetzen, die spätere Seitenpflege ist bedeutend einfacher, die CTR (Click Through Rate) wird ebenfalls deutlich besser. Während m.domain.tld-Subdomains doppelten Content darstellen, ist es bei Responsive Design stets Unique Content, den Sie bereitstellen. Vergessen Sie aber ebenso niemals, immer genügend Usability-Tests (UI) wie Crowd-UI-Tests oder A/B-Tests durchzuführen, dann steht dem Erfolg Ihres Webprojektes nicht mehr im Weg.