Top 10 responsive Websites 2013: Was die alten Bestenlisten bewerteten und was davon heute noch zählt

Wer heute nach “Top 10 responsive Websites 2013” sucht, sucht in der Regel ein historisches Dokument: die Bestenlisten, die vor zwölf Jahren durch Fachblogs, Designmagazine und Agentur-Newsletter kursierten. Dieser Artikel reicht eine solche Liste nicht einfach nach. Stattdessen liest er die Listen als das, was sie tatsächlich sind: ein Bewertungsraster aus einem ganz bestimmten technischen Jahr, mit Kriterien, die teils nur 2013 sinnvoll waren. Und er beantwortet die eine Frage, die aus diesem Zeitdokument heute noch praktischen Nutzen ziehen lässt: Wenn Ihre Website aus dieser Bauzeit stammt, ist sie noch tragfähig, oder gehört sie migriert?

Warum ausgerechnet 2013 Bestenlisten entstanden

Der Begriff “Responsive Web Design” ist älter als die Listen. Ethan Marcotte veröffentlichte ihn am 25. Mai 2010 in A List Apart und nannte dort drei Bestandteile: ein fluides Raster, flexible Bilder und Media Queries. Zwischen diesem Text und den Bestenlisten von 2013 liegen drei Jahre, in denen sich die Technik vom Experiment zum Standard entwickelte.

Zwei Daten erklären den Zeitpunkt der Listen besser als jede Designmode:

1. Am 6. Juni 2012 empfahl Google im Webmaster Central Blog responsives Design ausdrücklich als bevorzugte Konfiguration für smartphone-optimierte Websites. Damit war die Entscheidung für viele Betreiber keine Geschmacksfrage mehr, sondern eine SEO-Frage.
2. Am 19. Juni 2012 verabschiedete das W3C CSS3 Media Queries als Recommendation. Die zentrale Technik hinter den gelisteten Seiten war zum Zeitpunkt der Auszeichnungen also gerade einmal ein Jahr offizieller Standard.

2013 war folglich das erste Jahr, in dem es genug fertige, öffentlich sichtbare responsive Projekte gab, um überhaupt zehn davon nebeneinanderzustellen. Die Listen sind Momentaufnahmen einer frühen Adoptionsphase. Sie sind kein Kanon, sondern das Protokoll einer Technik im Jahr ihres Durchbruchs.

Das Bewertungsraster von 2013

Die Kriterien, nach denen damals sortiert und bewertet wurde, unterscheiden sich deutlich von dem, was heute als gute mobile Umsetzung gilt. Wer die alten Listen verstehen will, muss dieses Raster kennen, denn es erklärt sowohl die Auswahl als auch die Bauweise der prämierten Seiten.

Sichtbare Breakpoints statt stufenloser Fluidität. Bewertet wurde häufig, ob beim Verkleinern des Browserfensters sichtbar “etwas passiert”. Ein Layout, das demonstrativ in drei Stufen umbrach, wirkte 2013 überzeugender als eines, das fließend skalierte. Das war ein Demonstrationskriterium, kein Nutzungskriterium.

Navigation als Kunststück. Das Zusammenfalten einer Hauptnavigation auf kleinen Bildschirmen galt als eigenständige technische Leistung. Entsprechend viel Raum nahmen in den Besprechungen Off-Canvas-Menüs, Select-Dropdowns als Navigationsersatz und die ersten Hamburger-Icons ein.

Bilder, die nicht brechen. Dass Bilder ihren Container nicht sprengen, war ein nennenswertes Qualitätsmerkmal. Dass sie in passender Auflösung und Dateigröße ausgeliefert werden, war es noch nicht, weil die Technik dafür schlicht fehlte.

Browser-Kompatibilität nach unten. Ein Projekt, das auch im Internet Explorer 8 nicht auseinanderfiel, bekam Pluspunkte. Dieser eine Anspruch prägte die Bauweise der Zeit stärker als jedes Gestaltungsideal.

Ladezeit spielte fast keine Rolle. In den Besprechungen von 2013 steht praktisch nichts über Dateigewicht, Requests oder Renderblocking. Genau das ist einer der Hauptgründe, warum viele der damals gefeierten Umsetzungen heute in Performance-Messungen schlecht abschneiden.

Die Technik unter den 2013er Layouts

Aus diesem Raster folgt eine erstaunlich einheitliche Bauweise der prämierten Seiten. Vier Punkte erklären, warum sich die Top 10 technisch so stark ähnelten:

CSS Grid Layout stand 2013 noch nicht zur Verfügung. Breit einsetzbar wurde es erst im März 2017 mit Chrome 57 und Firefox 52. Die Layouts der Bestenlisten basieren deshalb ausnahmslos auf Floats und prozentualen Breiten, inklusive der bekannten Nebenwirkungen: Clearfix-Hacks, erzwungene Zeilenhöhen und Spalten, die bei ungeplanten Inhaltslängen umspringen.

Auch für responsive Bilder gab es kein natives Werkzeug. Das Attribut srcset erschien erst mit Chrome 38 im September 2014. 2013 löste man denselben Fall mit dem JavaScript-Polyfill Picturefill von Scott Jehl. Die Bildlogik hing damit komplett am JavaScript, nicht am Markup, mit allen Folgen für Ladezeit und Ausfallsicherheit.

Der Internet Explorer 8 unterstützte keine CSS3 Media Queries. Wer ihn bedienen wollte, und 2013 wollte man das, band Polyfills wie Respond.js ein. In vielen Altprojekten liegt dieser Code bis heute im Head: Er lädt bei jedem Aufruf, blockiert und hat keinen Adressaten mehr.

Und am 19. August 2013, mitten in der Listensaison, erschien Bootstrap 3.0, die erste Version des Frameworks mit Mobile-First-Grid. Dieses Release ist ein wesentlicher Grund, warum so viele der 2013 gefeierten Seiten dieselbe Rasterlogik, dieselben Spaltenzahlen und dieselben Breakpoint-Grenzen zeigen. Die Listen bewerteten unbewusst auch die Verbreitung eines einzigen Frameworks.

Welche Seiten immer wieder auftauchten

Die Zusammensetzung der einzelnen Top-10-Listen war nie einheitlich. Jede Redaktion und jede Agentur traf ihre eigene Auswahl, und ein Großteil der damals genannten Projekte ist seither mehrfach relauncht oder komplett verschwunden. Wer eine bestimmte Liste sucht, sucht deshalb meist ein einzelnes Blog-Posting aus jener Zeit, keinen etablierten Bestand.

Ein Fall zieht sich allerdings durch praktisch alle Aufstellungen von 2012 und 2013: BostonGlobe.com. Die Seite ging im September 2011 als erste große responsive Nachrichtenseite online, umgesetzt von Filament Group und Upstatement, und diente den Listen durchgängig als Referenzfall. Sie war der Beleg, dass eine inhaltsreiche, werbefinanzierte Publikation ohne separate mobile Domain funktionieren kann.

Jenseits dieses einen Namens lassen sich die Listen auf drei Archetypen reduzieren:

• Nachrichten- und Magazinseiten, die zeigen sollten, dass responsive Layouts auch große Inhaltsmengen tragen.
• Agentur- und Studio-Portfolios, die ihr eigenes Können demonstrierten und deshalb bewusst auffällige Breakpoint-Effekte einbauten.
• Produkt- und Framework-nahe Seiten, die im Kern die Möglichkeiten des jeweiligen Rasters vorführten.

Für die Einordnung heißt das: Die Listen dokumentieren Machbarkeit, nicht Nutzerfreundlichkeit. Bewertet wurde, dass etwas technisch ging, nicht, wie gut es sich benutzte.

Was seit 2013 passiert ist

Zwei Google-Daten markieren, warum ein 2013er Stand heute nicht mehr genügt.

Am 21. April 2015 machte Google Mobilfreundlichkeit zum Rankingsignal für mobile Suchergebnisse, zwei Jahre nach den hier betrachteten Listen. Erst damit wurde aus der Empfehlung von 2012 eine messbare Konsequenz.

Seit dem 1. Juli 2019 indexiert Google alle neuen Domains standardmäßig mobile-first. Die mobile Fassung einer Seite ist seitdem die maßgebliche. Eine 2013 gebaute Website wird also nicht mehr an ihrer Desktop-Darstellung gemessen, sondern an dem, was auf einem schmalen Viewport tatsächlich ausgeliefert wird.

Dazwischen liegt eine Verschiebung ohne konkretes Datum: Mobile Nutzung ist vom Sonderfall zum Normalfall geworden. Belastbare Zahlen zum Anteil mobiler Endgeräte in Deutschland im Jahr 2013 liegen dieser Seite nicht vor, weshalb hier bewusst keine genannt werden.

Altlasten-Checkliste für eine Website aus dem Baujahr 2013

Hier liegt der eigentliche Gebrauchswert der alten Listen. Wenn Ihre Website aus dieser Zeit stammt, prüfen Sie diese neun Punkte. Jeder folgt direkt aus dem, was 2013 üblich war:

1. Viewport-Meta-Tag vorhanden und ohne Sperre. Ein user-scalable=no oder ein fixes maximum-scale war 2013 verbreitet und ist heute ein Barrierefreiheitsproblem.
2. Polyfills entfernt. Suchen Sie im Quelltext nach Respond.js, html5shiv, Selectivizr und Modernizr-Varianten für den IE8. Diese Dateien laden bei jedem Aufruf und haben keinen Adressaten mehr.
3. jQuery-Abhängigkeit geprüft. Sehr alte jQuery-Versionen tragen bekannte Sicherheitslücken. Prüfen Sie Version und tatsächliche Notwendigkeit getrennt voneinander.
4. Bilder auf natives srcset umgestellt. Wenn Picturefill im Einsatz ist, wird die Bildauswahl über JavaScript gelöst, das seit 2014 durch Browserfunktionen ersetzt ist.
5. Breakpoints gegen reale Inhalte gestellt. Die 2013er Rasterlogik kennt oft drei Stufen um 768 und 992 Pixel. Prüfen Sie stattdessen, bei welcher Breite Ihr längster realer Inhalt bricht.
6. Touch-Ziele gemessen. Navigationselemente, die für Mauszeiger gebaut wurden, sind auf Touchgeräten häufig zu klein oder zu eng gesetzt.
7. Tabellen und breite Inhalte kontrolliert. Datentabellen, iframes und eingebettete Karten sind der häufigste Grund für horizontales Scrollen in Altprojekten.
8. Hover-only-Interaktionen ersetzt. Klappmenüs, die nur auf Hover reagieren, waren 2013 normal und sind auf Touchgeräten nicht bedienbar.
9. Verhalten ohne JavaScript geprüft. Wenn Navigation oder Bilder ausfallen, sobald ein Skript fehlschlägt, liegt eine typische 2013er Architektur vor.

Dokumentieren Sie das Ergebnis pro Punkt mit einem konkreten Befund, nicht mit einem Gefühl. Die Liste ist bewusst so gebaut, dass jeder Punkt in wenigen Minuten beantwortbar ist.

Weiterbetreiben oder migrieren?

Aus der Checkliste folgt eine einfache Entscheidungsregel.

Weiterbetreiben ist vertretbar, wenn die Punkte 1 bis 4 sauber sind, kein horizontales Scrollen auftritt und das Layout ohne Hover bedienbar bleibt. Dann ist die Seite technisch alt, aber funktionsfähig. Investieren Sie in Inhalte, nicht in einen Relaunch.

Migration ist fällig, wenn mehrere der Punkte 5 bis 9 fehlschlagen, insbesondere wenn Bedienung oder Darstellung auf schmalen Viewports tatsächlich bricht. Seit 2019 bewertet Google genau diese Fassung. Ein Defekt dort ist kein kosmetisches Problem.

Ein Zwischenweg existiert und wird oft übersehen: Viele Websites aus dem Baujahr 2013 brauchen keinen neuen Entwurf, sondern eine Entrümpelung. Polyfills entfernen, Bildlogik auf Standardattribute umstellen, Breakpoints an den realen Inhalten neu setzen. Das ist ein überschaubarer Eingriff in eine bestehende Codebasis und verändert das Erscheinungsbild kaum.

Die Top-10-Listen von 2013 taugen dafür als Kalibrierung: Sie zeigen, welche technischen Annahmen in eine Website dieses Jahrgangs eingebaut wurden. Wer diese Annahmen benennt, weiß hinterher genau, was an der eigenen Seite eine Altlast ist und was einfach nur alt.