Forum für CMS/made simple

czarnowski

kennt CMS/ms

Registriert: 18. Oktober 2012

Beiträge: 457

Fallen bei responsive Design

So mancher Webanbieter baut sich ein responsives Design.
Ziel ist es sich Wachstum und Besucher zu sichern die mobil unterwegs sind.

Aber es gibt allerhand Dinge zu beachten.

Responsive Design berifft heute nicht unbedingt nur die Bereitstellung von Inhalten für kleinere Formate.
HD Auflösung und Screens mit über 2500 Pixel Breite sind ebenfalls zu sehen und die gibt es nicht nur für Desktops sondern auch für Smartphone & Co.

So bietet das Galaxy S4 Full HD Auflösung der Nexus liegt über der 2500 er Auflösung.

Auf einen Nenner gebracht responsive Design betrifft alle Empfangsgeräte.

Bei mobilen gibt es jedoch die Besonderheit das 320 x 480 aktuell immer noch weltweit die gängigste Auflösung ist und insgesamt die Rechnerleistung von mobilen Geräten nicht an die von Desktops heran kommen.

Die meisten Fehler die man beim Entwurf macht sind folgende:

1. Versuch  HTML 5 untaugliche Browser  mittels Javascript noch einigermaßen ansprechen zu können.

Man kann aus einem nicht HTML5 fähigen Browser mittels JS keinen HTML5 Browser machen - so mancher denkt das tatsächlich.

Der Versuch ist zudem sinnlos, da bei komplexen HTML5 Websites eine solche per JS adaptierte Seite fertig gerendert  bis zu 6x langsamer ist.
Damit übersteigen die Empfangszeiten alles was akzeptabel ist.

Also Finger davon.

2. Responsive ohne JS geht in der Praxis aber bei sehr komplexen Seiten überhaupt nicht gut.

Bei CSS ist JS kein großes Thema - kann aber auch da manchmal enorme Vorteile bieten.
Aber Dinge wie viewport width und height sind mit JS zu ermitteln.
Die automatische Steuerung von angepassten Inhaltspräsentationen wie Imageformate sind Sachen die man mit JS machen muss.

Da verwendet man z.B. solche Konstrukte via JS

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

Die automatische Anpassung von Images via CSS ist keine wirklich gute Lösung da man in dem Fall dennoch immer das größte Format überträgt.
In dem Fall geht der Pagespeed bei kleineren Screens radikal nach unten.

3. Slider und ähnliches die nicht on demand arbeiten

Ein sehr häufiger Fehler.
Slider die zunächst alle Images laden die verwendet werden - das ist tödlich.
Sind die Images dazu nicht an den Viewport angepasst dann ist die Katastrophe total - völlig unbrauchbar insbesondere bei kleinen Screenformaten.
Ein klassischer Besuchervertreiber im mobilen Bereich.

4. Zu wenig Umschaltpunkte

Es gibt nicht wenige die tatsächlich nur einen oder zwei Umschaltpunkte bei den viewports haben.
Unvermögen oder Faulheit führen dazu das ein solches Web viele derjenigen vertreibt die man eigentlich gewinnen möchte.
Zugleich werden dann auch noch vorgefertigte 980 er Systeme verwendet die wegen 1. heute absoluter Unsinn sind.

Es gibt natürlich noch mehr Fallstricke aber das sind die wichtigsten.
Sieht man das anders ist Abstieg statt Aufstieg bereits garantiert.

Beitrag geändert von czarnowski (07. Mai 2013 11:55)