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

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?

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 .

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.

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.