Responsive ist gut und schön, allerdings sollte nicht nur die Darstellung des HTML und CSS bei der Umsetzung einer Seite bedacht werden sondern auch die Größe der Bilder die auf dem mobilen Endgerät herunter geladen werden müssen.findet man im Netz überall.
Dabei wird das Thema "Größe der Images" angesprochen.
Das Problem ist klar - ein Image mit einer Breite von z.B. 1000 Pixel für ein Empfangsgerät zu liefern das nur 640 Pixel maximal darstellen kann ist nicht sinnvoll.
Es werden jede Menge Bytes völlig nutzlos übertragen.
Bei einem echten mobilen Empfang führt es neben Zeitverlusten auch schnell zur Auffüllung des maximalen Transferkontos .
Aber die Einschränkung des Problembereiches auf mobile Endgeräte ist voll daneben.
Auch im Desktopbetrieb wirken unnötig übertragene Bytes verlangsamend - auch wenn es normal kaum Probleme mit dem Datenvolumen geben dürfte.
Das Datenvolumen aber könnte auch für Desktops irgendwann ein Problem werden - man denke an die Bemühungen der Telekom die Geschwindigkeit drosseln zu wollen wenn eine bestimmte Transfermenge überschritten wird.
Worum geht es also ?
Wir haben heute Empfangsgeräte die im mobilen Bereich zwischen 320 und 2560 Pixel Displaybreite anbieten.
Bei Desktops sind es Bereiche von 640 Pixel bis über 2560 Pixel.
Daraus kann man ableiten das die Imagegröße nicht ein Problembereich ausschließlich für mobile Geräte darstellt sondern ein allgemeines Problem.
Mit anderen Worten über responsive Webdesign zu reden um nur mobile Geräte zu meinen ist vollständiger Unsinn.
Und - die Größe eines Images ergibt sich nicht nur aus der Displaybreite sondern grundsätzlich aus der zur Verfügung stehenden Breite.
Es kann also so sein das bei einer Displaygröße von 1920×1080 Pixel in der Spalte in der ein Image gesetzt wird nur 200 Pixel zur Verfügung stehen.
Da ist eine Steuerung über normale Media - Queries - die auf die CSS wirkt - kaum möglich.
Es wird ein HTML Element benötigt mit dessen Hilfe Images in Abhängigkeit von der Medienbreite gesetzt werden können.
Das hat man bei HTML5 schlichtweg vergessen und es erst nachträglich erkannt und ein entsprechendes Picture Element vorgeschlagen.
Das Problem - die aktuellen Browser haben dieses Element noch nicht etabliert.
Aber es gibt Hilfe über Javascript - alle großen Libs haben da entsprechende Plugins im Angebot.
Damit kann also das Picture - Problem gelöst werden nicht aber die ganze Organisation die dazu notwendig wäre.
Das eigentliche Problem ist immer noch das die real zur Verfügung stehende Breite zB. einer Spalte nicht damit abgedeckt wird - obwohl man das Picture Element dazu nutzen kann.
Hier muss man also wissen mit welchen Spaltenbreiten wo gearbeitet wird und man muss eine Serie von Images dazu bereit halten und ansteuern.
Bei der Spaltenbreite gibt es folgendes Zusatzproblem.
Responsives Design mit festen Werten ist eigentlich ein Unding - wird aber gerne ausgeführt - eben weil man damit immer definierte Größen hat.
Responsive aber bleibt damit in weiten Teilen auf der Strecke es sei denn man hat für alle Screengrößen feste Werte definiert.
Das aber macht kaum jemand - der Aufwand wäre gewaltig.
Die Alternative wäre ein Fluid Grid - d.h. relative Größen werden verwendet, welche der Browser automatisch abhandeln kann.
Breiten werden in Prozent von der Screengröße angegeben und passen sich somit automatisch an.
Damit ändern sich aber auch die Spaltenbreiten und man muss ein größeres Set an Images bereit stellen um das Transferproblem in den Griff zu bekommen.
Die Screenbreiten wären 320,480,640,767,800,1024,1280,1449,1680,1920 und >=2560 .
In der Praxis wird man Imagebreiten wählen die als Kompromiss Spaltenbreiten mehrerer Auflösungen abdecken.
Die Imageerzeugung selbst ist kein Problem - das kann man automatisch nach dem Upload machen.
Dazu muss man sich allerdings im klaren sein in welchem Pixelbereich die einzelnen Spalten liegen, damit alles geliefert wird was kommt.
Und man muss eine Abfangroutine einsetzen, wenn ein Original Image kleiner ist als die vorgesehene Breite.
Das praktische Problem ist der Einsatz - man will sich schließlich nicht die Finger wund schreiben.
Auch das kann man mittels Plugins lösen, die zudem auch diese Abfangroutinen enthalten.
Praktisch muss man also nur noch die automatische Generierung der Images und die Plugins definieren - und das muss man in Abhängigkeit vom Design - Entwurf machen.
Das hört sich viel an - hat man das Problem erst einmal erkannt und ist sich dessen bewusst ist es jedoch einfach.
Responsive Webdesign ist unterm Strich einfacher
Wer sich über Smartphone diverse Verlagsseiten anschaut der stellt bei manchen folgendes fest:- Zunächst wird die ganze Seite normal geladen um dann automatisch auf eine Extra Mobilseite zu springen
- Zunächst wie 1. , dann Abfrage ob ein Sprung zur Mobilseite erfolgen soll, dann bei Ja wie 1. .
Das sind natürlich Dinge die voll daneben sind, denn u.U. hat man bereits aus Zeitgründen einen Nutzer verloren.
Und man hat tatsächlich 2 Ebenen zu schaffen und zu pflegen.
Arbeitet man responsive entfällt das alles , erfordert aber etwas mehr Gehirnschmalz bei der Planung und Realisierung.
Hat man das erst einmal drauf ist es sehr viel einfacher.
Hat man das erst einmal drauf ist es sehr viel einfacher.
Keine Kommentare:
Kommentar veröffentlichen