NEWS

Hardwareluxx 4.5

Das neue responsive Design ist da

Portrait des Authors


Das neue responsive Design ist da
180

Werbung

Das neue Design ist da - und wenn Ihr auf Eurem PC fast keine Veränderungen seht, dann haben wir alles richtig gemacht. Denn unser aktuelles Design-Update betrifft ausschließlich mobile Geräte, wobei wir das Desktop-Design nur an einigen Stellen aufgewertet und angepasst haben, wo es zwingend notwendig war. Ein responsives, mobiles Design wurde von vielen Lesern in den letzten Monaten und Jahren gewünscht. Kein Wunder, denn unsere Artikel und News lesen viele Anwender mittlerweile auf dem Smartphone oder Tablet. Zwar war unsere Webseite auch auf diesen Geräten halbwegs gut zu lesen, aber unser Anspruch war ein anderer. Letztendlich müssen wir auch technologisch nachlegen, da ein mobiles Design auch aus SEO-Gründen heute nicht aussen vor gelassen werden kann. Aus diesem Grund haben wir - zusammen mit externer Hilfe und Helfern aus dem Team (Danke an "Lopez" und "King_Bill") - in den letzten Wochen ein responsives, mobiles Design entwickelt.  

Zielvorgabe: Möglichst wenige Veränderungen 

Das neue Design sollte sich dabei stark am aktuellen Aussehen der Webseite anlehnen. Wir halten nichts von großen Umbrüchen und sahen auch keinen großen Bedarf, das Rad neu zu erfinden (deshalb ist das Design auch nur "Version 4.5"). So wollten wir das gewohnte Hardwareluxx-Feeling beibehalten und können unseren Lesern einen fließenden Übergang vom nicht-responsiven Design auf ein responsives Design bieten. Aus diesem Grund ist das heute vorgestellte Design aber auch eher als Anfang einer Serie von Updates zu sehen. Es verschafft Lesern, die auf Smartphone oder Tablet unsere Artikel lesen, die Möglichkeit, dieses mit einem guten Lesefluss und skalierten Bildern zu tun. Auch werden nichtoptimierte Werbeanzeigen auf mobilen Geräten nicht gezeigt. Überflüssige Bereiche für den mobilen Bereich haben wir abgeschaltet. Wir wollten unsere klare Linie bei den Tests und News beibehalten und nicht durch Design überladen. 

layout01

Smartphone-Ansicht im Portrait-Betrieb

Zunächst haben wir uns bemüht, die Änderungen dort umzusetzen, wo sie benötigt werden, um in einem mobilen Umfeld eine ansprechende Seite zu liefern. Also wurden beispielsweise die Header-Elemente in skalierbare Grafiken und Fonts umgeswitched, die auch auf Retina-Displays gut aussehen. Zudem haben wir uns bemüht, alle Elemente auch mit dem Finger klickbar zu machen. Weiterhin wurden allgemein gültige Standards berücksichtigt, die den Lesefluss betreffen. Einzelne Updates haben es auch auf den Desktop-Breakpoint geschafft, aber im Großen und Ganzen wollten wir diesen nicht verändern. Somit haben wir aktuell zwar leicht unterschiedliche Ansichten auf Mobile- und Desktop-Seite, die wir aber mit kommenden kleineren Updates beseitigen werden und nicht in einem rabiaten Schwung.

Hardwareluxx-Logo 2015

Weitere Neuigkeit: Unser neues Logo

Zukünftige Entwicklungen

Nach diesem ersten Update werden wir weitere Änderungen vornehmen. Diese werden zunächst das Forum betreffen. Hier kommt der bisherige Stil noch zum Einsatz, da vBulletin in der von uns eingesetzten Variante vBulletin 4.2 keinen responsiven Stil bietet. Es müssen zwei nebeneinander existierende Stile verwaltet werden, die je nach Device unterschiedlich ausgeliefert werden. Der Einsatz des - noch fehlerhaften und wöchentlich aktualisierten - vBulletin 5 können wir uns aufgrund der Größe des Forums nicht erlauben. Wir haben keine Lust auf einen Beta-Test an unseren Foren-Usern. Aus diesem Grund haben wir uns entschieden, alles beim alten Design zu belassen und in den nächsten Wochen einen mobilen Stil als Alternative zum Desktop-Stil anzubieten. 

Der Preisvergleich wird momentan bereits weiterentwickelt durch unsere Partner in den Niederlanden. Zwar wird es noch ein paar Wochen dauern, bis ein responsives Design folgt, das ist aber auch nur noch eine Frage der Zeit. 

Im Hintergrund werden sich anschließend diverse Dinge tun, von denen unsere Leser nur wenig mitbekommen werden. Wir arbeiten an einem neuen CMS im Untergrund, welches diverse neue Features ermöglichen wird. Wenn wir die Umstellung auf dieses neue Design vornehmen - voraussichtlich im Spätsommer - werden weitere neue Design-Elemente in die Seite einfließen. Letztendlich steht als Ziel bis zum Ende des Jahres ein weiteres Design-Update an, das mit vielem alten Staub aufräumen wird, den wir momentan noch mit herumtragen. Eventuell werden wir zu diesem Zeitpunkt auch auf eine andere Foren-Software wechseln, sofern vBulletin 5 bis dorthin nicht den gewünschten Entwicklungsstand erreicht hat.

layout01

Smartphone-Ansicht im Landscape-Betrieb

Feedback erwünscht!

Natürlich macht man sich in der Redaktion vor einem Design vielfältige Gedanken, wie eine mobile Webseite bestenfalls auszusehen hat. Wir haben somit die eigenen Lieblingsseiten analysiert und überlegt, was die Lieblingsseiten bezüglich ihres Designs besonders machen. Letztendlich wurden auch eine Menge Artikel aus dem Design-Bereich gelesen, um zu verstehen, was mobile Geräte momentan benötigen. Allerdings haben wir nicht jeden Trend verfolgt - beispielsweise wurden von uns keine fremdartigen Schriftarten verwendet, an die man sich erst gewöhnen müsste. Es kommt momentan weiterhin die gute, alte Verdana zum Einsatz. 

Wichtiger war uns der Lesefluss, die Anzeige von möglichst großen Bildern, die Navigation durch Hin- und Herwischen in großen Tabellen. Hinzu kamen die üblichen Navigationselemente durch die typischen Mobile-Menus. Besonders geachtet haben wir auf eine passende Zeilenbreite für den Text und eine möglichst gute Lesbarkeit. 

In den vergangenen Wochen wurde im Team viel beta-getestet. Aber da es eine fast unerschöpfliche Anzahl an Geräten und Browser-Kombinationen auf mobilen Geräten gibt, werden auch die Tests der Redaktion und der Moderation aus dem Forum nicht jedes Problem gefunden haben. Sollten sich beim Umgang mit dem responsiven Design also Probleme ergeben, bitten wir um ein Feedback mit Screenshot im zugehörigen Thread zu dieser News. Was wir auf jeden Fall von Euch benötigen, ist:

  • eine Problembeschreibung
  • einen Screenshot
  • Angaben zu Eurem Gerät (am besten Produktname und Browser)

Die Redaktion wird sich mit den Programmierern Euren Problemen widmen und dann auch entsprechend eine Möglichkeit suchen, sie zu beseitigen. 

Wir wünschen unseren Lesern viel Spaß mit dem neuen Design und bequemes Surfen mit der neuen mobilen Ansicht!

Quellen und weitere Links

    Werbung

    KOMMENTARE (180)