Reponsive Web Design: Lädt es auf jedem Gerät die gleiche Datenmenge herunter?

11

Ich möchte mein Blog und meine Website auf WordPress neu gestalten, um immer mehr mobilen Benutzern und Tablet-Benutzern gerecht zu werden.

Ich höre auch über Responsive Design. Ich möchte wissen, ob ein responsives Webdesign die gleiche Datenmenge auf einen Computerbildschirm sowie auf ein mobiles Gerät herunterlädt.

Ich habe auch gesehen, dass viele große Marketingfirmen nicht in responsives Webdesign investiert haben und sich immer noch für eine separate Website entscheiden, die für Mobilgeräte optimiert ist. Was sollte ich also tun, ein responsives Webdesign oder eine separate Website, die für Mobilgeräte optimiert ist?

Nikhil
quelle

Antworten:

8

Wie von Ethan Marcotte in ALA 306 definiert , bezieht sich der Begriff "responsives Design" auf die Technik, je nach Bildschirmgröße des Benutzers unterschiedliche Stilregeln auf Ihr HTML anzuwenden. Für weitere Erklärungen zum reaktionsschnellen Design hier ein schönes Deck von Mike Bollinger .

In diesem Modell senden Sie genau den gleichen HTML-Code an den Client, unabhängig davon, ob der Bildschirm klein oder groß ist. Wenn jedoch Ressourcen (hauptsächlich Bilder), auf die im CSS verwiesen wird, für bestimmte Bildschirmauflösungen nicht angezeigt werden, können sie möglicherweise nicht heruntergeladen werden. Für große Bildschirme, die Sie high-res.pngin Ihrem CSS verwenden können, und für kleine Bildschirme kann low-res.pngder Webclient das Bild möglicherweise nur im aktiven Stil herunterladen. (Siehe @ DBUKs Kommentar für mindestens einen wichtigen Client, der derzeit beide herunterlädt! Hoffentlich werden die Clients besser!)

Diese Technik kann in Ihrem Fall sinnvoll sein, oder es kann sinnvoller sein, eine separate mobile Site zu erstellen.

Unterschiedliche Geräte können unterschiedliche Nutzungskontexte implizieren. Handys sind immer in Ihrer Tasche - wie würde der Benutzer Ihre Website in der Lebensmittelgeschäftslinie nutzen? Möchten Sie ihnen die gesamte Website senden? Oder nur ein paar Features? Oder ganz andere Funktionen? Was ist, wenn sie mit dem Fernseher auf der Couch sitzen und ihr iPad beiläufig durchsehen?

Mobile Geräte verfügen in der Regel über langsamere Prozessoren, weniger Speicher und langsamere Verbindungsraten (all diese "Wahrheiten" werden übrigens jedes Jahr weniger wahr). Möglicherweise möchten Sie aus Leistungsgründen eine separate mobile Site ausschließlich versenden.

Ich gehe davon aus, dass im Allgemeinen die Chance, vorhandenes HTML und responsives Design zu verwenden, umso größer ist, je statischer, textueller und inhaltsorientierter die Website (dh ein Blog) ist. Je interaktiver, multimedialer und benutzergesteuerter die Site (dh ein Geschäft) ist, desto besser ist die Chance, dass Sie separate Sites für einzelne Gerätetypen anpassen.

Vergessen Sie auch nicht, dass sich heutzutage auch die Frage stellt, ob das mobile Erlebnis eine Website oder eine App sein soll .

Peteorpeter
quelle
Ich denke, ärgerlicherweise werden Bilder immer noch heruntergeladen. Die Tests von cloudfour sind ein Beispiel - cloudfour.com/examples/mediaqueries/image-test .
DBUK
@DBUK Vielen Dank für die Korrektur - Ich hatte in früheren Änderungen an diesem Beitrag die Aussage "wird nicht heruntergeladen" im Vergleich zu "darf nicht heruntergeladen werden" ins Wanken gebracht. Meine Antwort wurde aktualisiert, um genauer zu sein.
Peteorpeter
Es ist neu für mich, also nicht sicher, ob es nur das iPhone ist. Warum ist mit dem Web nichts einfacher :(
DBUK
1
@ DBUK In der Tat. Wenn nach diesem Test beide Hintergrundstilregeln hinter Medienabfragen stehen, wird nur die niedrig aufgelöste heruntergeladen. Nur wenn die hochauflösende die Standardstilregel ist und dann von einer Medienabfrage überschrieben wird, werden beide heruntergeladen. Grundsätzlich ist es kompliziert!
Peteorpeter
Ein mobiler erster Ansatz würde dieses Problem also umgehen, z. B. Standardstil für niedrigste Auflösung und Verwendung von Medienabfragen für alle größeren plus Desktop?
DBUK
1

Responsive Design sollte nicht auf jedem Gerät die gleiche Datenmenge herunterladen, da nicht alle Geräte die gleichen Multimedia-Anforderungen haben. Mobile Sites sollten niedrig aufgelöste Bilder verwenden und weniger grafisch sein als Sites für Desktops / Laptops / Tablets. Und wenn Sie Ihre mobilen und regulären Websites kombinieren möchten, müssen Sie dies berücksichtigen, da Ihre Website sonst nicht sehr reaktionsschnell ist, oder?

Der Slidedeck-Peteorpeter enthält Links zu dem Skript "Responsive Images" der Filament Group, mit dem Sie mithilfe von JavaScript das Bild mit der richtigen Größe für das entsprechende Gerät bereitstellen können, idealerweise ohne mehr als eine Version herunterzuladen. Bei Layout-Bildelementen erfolgt dies normalerweise über Medienabfragen, in denen unterschiedliche Stile für unterschiedliche Bildschirmauflösungen angegeben werden.

Lèse Majestät
quelle
1

Ich denke, viele Unternehmen werden lange brauchen, um ihre Websites zu aktualisieren, verdammt, es gibt immer noch einige, die Tabellen verwenden. Responsive und der mobile erste Ansatz sind definitiv die Schlagworte des Augenblicks.

Wie im obigen Poster erwähnt, sollten Sie Bilder mit niedriger Auflösung für Ihr Mobiltelefon / Geräte mit niedrigerer Auflösung verwenden. Mithilfe von Medienabfragen können Sie alle niedrigeren Auflösungen auswählen. Ich habe jedoch gehört, dass die mobile Safari die Anzeige ignoriert: Keine Regel und lädt auch die Desktop-Versionen der Bilder herunter. Wenn Sie den reaktionsschnellen Bildweg einschlagen, wird der mobile Prozessor stark unter Druck gesetzt - 3 Byte pro 1 Pixel ... denke ich. Es gibt viele Lösungen, um das Herunterladen zusätzlicher Inhalte zu umgehen - einige davon sind ziemlich hackig - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=de_US#gid=0

Weitere Informationen zu den Nachteilen des reaktionsschnellen Webdesigns finden Sie unter http://www.webdesignshock.com/responsive-design-problems/ . Lassen Sie sich von diesem Blog-Beitrag jedoch nicht abschrecken. A Book Apart hat ein fantastisches Buch zu diesem Thema geschrieben - http://www.abookapart.com/products/responsive-web-design . Es lohnt sich auf jeden Fall, sich die E-Book-Version zu schnappen.

DBUK
quelle
Können Sie die 3kb per 1px-Anweisung näher erläutern? Ich verstehe nicht, wie die Verwendung von JavaScript zum Abrufen eines Bilds in voller Größe nur dann den Effekt haben würde, wenn die Bildschirmauflösung größer als 480 Pixel ist. Außerdem sollten Sie niemals display: noneBilder vor mobilen Benutzern verbergen. Das ist nur schlechte Praxis.
Lèse Majesté
"Einige Netzbetreiber komprimieren beispielsweise Bilder, bevor sie drahtlos an das mobile Gerät weitergeleitet werden" - w3.org/TR/mobile-bp Das würde bedeuten, dass das Mobiltelefon sie (?) Auf Kosten von 3 Byte dekomprimieren müsste pro Pixel (bei 24 Bit RGB zB JPG)? Ups, ich habe kb oben aufgestellt, verdammt. Dies geschieht ausschließlich unter CSS-Gesichtspunkten, wobei das Mobiltelefon alle Bilder herunterlädt. Mobil und Desktop, wobei Javascript-Lösungen nicht berücksichtigt werden.
DBUK