Optimierung für Smartphones und Tablet-Computer
digitalkamera.de jetzt mit Responsive Webdesign – zumindest teilweise
2024-05-13 Von "Responsive Webdesign" spricht man, wenn sich das Layout einer Website dynamisch an das Ausgabegerät anpasst. Das kam vor ungefähr zehn Jahren auf und ist eigentlich längst üblich. digitalkamera.de tat sich damit bislang schwer, aber seit heute sind zumindest weite Teile von digitalkamera.de viel besser für kleine Bildschirme von Mobilgeräten geeignet. (Jan-Markus Rupprecht)
digitalkamera.de-Startseite auf einem relativ schmalen Display – neu. [Foto: MediaNord]
Dass Websites auch auf mobilen Endgeräten wie Smartphones und Tablets gut aussehen und uneingeschränkt lesbar und bedienbar sind, darf man heute eigentlich voraussetzen. Dass das auf digitalkamera.de bislang nicht so war und auch heute noch teilweise so ist, dafür gibt es jede Menge Gründe:
- digitalkamera.de ist schon sehr alt. Die Website existiert seit 1997 und in dem aktuellen Design seit 2007, für Websites ist das fast "historisch". Zum Vergleich: Das allererste iPhone kam ebenfalls 2007 auf den Markt.
- Allein dadurch, dass wir fast zu Urzeiten des World Wide Web eine Website machen wollten, war es gar nicht anders möglich, als diese "von Hand zu stricken". Damals gab es noch keine Redaktionssysteme und als es sie dann gab, waren sie für eine Redaktion wie uns zunächst unbezahlbar (Lösungen wie Wordpress kamen erst viel, viel später auf den Markt).
- Dadurch ist digitalkamera.de "organisch" gewachsen. Was benötigt wurde, wurde rangestrickt. Detailseiten und Übersichtsseiten hatten in jeder Rubrik ihre Eigenarten und waren nicht gleich. In den letzten Jahren haben wir viel Zeit darauf verwendet, das im Hintergrund zu vereinheitlichen.
- Es gibt kein "Template", sondern das Design der Seiten ist direkt darin festgelegt. Wir können also nicht einfach ein neues Design "drübergießen", sondern müssen die verschiedenen Basis-Seiten individuell anpassen.
- Die Such- bzw. Recherchefunktionen in den Marktübersichten sind Speziallösungen, die genau an die jeweilige Produktgruppe angepasst sind (genau diese Baustelle haben wir offen).
- Wir sind kein Riesen-Team mit einer ganzen Entwicklungsabteilung, sondern haben nur sehr begrenzte Kapazitäten, die wir für solche "optischen" Details verwenden können. Es gab sehr häufig aktuelle Anforderungen im Redaktionsalltag, die unseren Programmierer vom Responsive Webdesign abgezogen haben.
- Die Priorität der Sache war nicht sehr hoch, denn die immer wieder aufkommenden Gerüchte, Google würde alle nicht für mobile Geräte optimierten Websites "gnadenlos abstrafen", haben sich zumindest für digitalkamera.de nicht bewahrheitet.
- Zumindest auf Tablet-Computern war digitalkamera.de ganz gut handhabbar. Und mit größeren Einschränkungen auch auf Smartphones. Im Grunde brauche man das Gerät nur ins Querformat zu drehen und/oder soweit in die Seite hineinzuzoomen, dass die rechte Randspalte aus dem Blickfeld verschwand, dann konnte man die Inhalte ganz gut lesen. Klar, das ist weit weg von "perfekt", aber der Leidensdruck war halt nicht riesig.
Die digitalkamera.de-Testrubrik haben wir schon länger mit einer Suche und Filtern ausgestattet, die im oberen Bereich der Seite liegen und sich auch für schmale Displays eignen. [Foto: MediaNord]
Lange Zeit war es unsere Vorstellung, dass wir bis zu einem Tag X an einem "perfekten" neuen Design arbeiten und dann den großen Schalter umlegen würden. Davon sind wir erst vor einigen Monaten abgerückt. Damit war der Weg dann aber frei für eine "halbgare" Lösung, mit der wir (endlich) deutlich schneller an die Öffentlichkeit gehen können. Die neue Zielsetzung war:
Auf einem großen Computer bleibt möglichst erstmal alles so wie es ist. Änderungen bezüglich der Bedienung auf Desktop-Computern und Tablet-Computern wollen wir erst nach und nach einführen, um unsere Leser nicht zu überfordern. Auch mobil wollen wir klar erkennbar digitalkamera.de bleiben und nicht alles auf den Kopf stellen. "Mobile first", also dass sich digitalkamera.de vor allem auf mobilen Geräten optimal bedienen lassen muss und die Desktop-Version fast egal ist, gilt für digitalkamera.de und unsere Leser auf gar keinen Fall. Hier gilt es, einen guten Kompromiss zu finden. Was wir deshalb jetzt gemacht haben, ist Folgendes:
- Alle Detailseiten, also News-Seiten, Testberichte, Fototipps, aber auch beispielsweise die Datenblätter sind jetzt so umgebaut, dass diese auf kleinen Displays ohne die rechte Randspalte angezeigt werden. Die Spalte kann auch richtig schmal werden. Die Bilder-Slider und die diversen Widgets (Preisvergleich, Gebraucht-Preisvergleich, Amazon usw.) sind entsprechend angepasst. Elemente der Randspalte rutschen in der schmalen Darstellung über und unter den Inhalt der Seite (Suche nach oben, Links und Schnellzugriff-Links usw. nach unten).
- Die Startseite sowie die Rubrik-Übersichtsseiten, bei denen das mit erträglichem Aufwand möglich war (News & Infos, E-Books, Bücher & Zeitschriften, Fototipps, Seminare & Reisen) können ebenfalls dynamisch schmaler werden. In diesen Fällen rutschen die Inhalte der Randspalte unter den normalen Seiteninhalt.
Wenn die Breite für die normale Navigation nicht ausreicht, verschwinden die nicht mehr passenden Menüpunkte und es erscheint als letzter Menüpunkt 'Mehr'. Tippt man darauf, erscheinen die übrigen Menüpunkte. [Foto: MediaNord]
Bei den Übersichtsseiten der Rubriken Kameras, Objektive und Blitzgeräte bleibt erstmal alles beim Alten. Diese Seiten erfordern eine komplette Neukonzeption. Das betrifft sowohl die Darstellung der Tabellen in der Content-Spalte als auch die Suche in der Randspalte. Ein Konzept, wie das aussehen soll und wie es bedient werden soll, haben wir schon vor mehreren Jahren entwickelt. Selbst ein funktionaler Prototyp der Objektivsuche existiert bereits, aber dabei hat sich herausgestellt, dass unsere Datenbank im Hintergrund das Konzept noch nicht so unterstützt, wie es optimal wäre. Hier liegt also noch ein Riesenstück Arbeit vor uns, das wir nun in den nächsten Monaten angehen werden.
Solange haben wir jetzt aber zumindest schon einmal eine Teillösung. Wer beispielsweise aus einer Internet-Suche auf digitalkamamera.de kommt oder von unserem E-Mail-Newsletter aus auf eine Newsmeldung klickt, der wird die Seiten auf mobilen Geräten jetzt viel besser lesen können. In Details gibt es ganz sicher noch einiges zu tun. Im Großen und Ganzen fanden wir aber den jetzigen Stand gut genug, um damit an die Öffentlichkeit zu gehen. Wenn Sie auf größere Probleme stoßen, freuen wir uns auf Ihre Nachricht an redaktion@medianord.de.