Verbesserung des reaktionsschnellen Webdesigns mit Ress

Dieser Beitrag wurde von NetBiscuits gesponsert. Vielen Dank, dass Sie die Sponsoren unterstützt haben, die SidePoint ermöglichen! Im Durchschnitt nutzt mehr als jeder dritte Besucher Ihrer Website ein mobiles Gerät. Allein im vergangenen Jahr hat die mobile Nutzung um mehr als 20%gestiegen. Wie sorgen wir für diesen Markt?

Key Takeaways

• ress oder responsive Webdesign-Serverkomponenten verbessert das traditionelle responsive Webdesign, indem die serverseitige Intelligenz einbezogen wird. Diese serverseitige Komponente erkennt die Funktionen eines Geräts und liefert eine optimierte Version der Website, was zu einer effizienteren und personalisierteren Benutzererfahrung führt.
• ress kann die Website -Leistung verbessern, indem nur Daten gesendet werden, die für das spezifische Gerät relevant sind, die Ladezeiten reduzieren und die Gesamtleistung verbessern. Es kann auch die Bereitstellung von Bildern und anderen Mediendateien basierend auf den Funktionen des Geräts anpassen und verhindern, dass diese Dateien die Ladezeit der Website unnötig verlangsamen.
• während die Implementierung von RES ein höheres Maß an technischem Know-how erfordert und aufgrund der Notwendigkeit einer serverseitigen Programmierung und der Erkennung von Geräte ressourcenintensiver sein kann, kann dies letztendlich zu einer höheren Benutzerbindung und potenziell erhöhten Einnahmen führen. Die Ress kann in Verbindung mit anderen Webdesign -Techniken verwendet werden und sowohl auf vorhandenen als auch auf neuen Websites implementiert werden.

separate mobile Websites

Wenn Ihre Zeit, Ihr Budget und Ihre geistige Gesundheit nicht wichtig sind, können Sie separate Websites für mobile und Desktop -Benutzer erstellen. Inhalte können für das Gerät neu verpackt und optimiert werden. Bedauerlicherweise…

1. Die Tage des Desktops oder des Handys sind längst vorbei. Es gibt eine Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen, Pixeldichten, Verarbeitungsgeschwindigkeiten, Netzwerkfunktionen und HTML5 -Funktionen. Und nur wenige von uns haben noch Wearables überlegt! Marken müssten zahlreiche Websites erstellen, um für jede Eventualität zu sorgen?
2. Es ist schwierig, das Gerät des Benutzers zu identifizieren. Benutzer-Agent-Saiten sind notorisch schwierig zu analysieren und erzählen Ihnen nichts über die Bildschirmabmessungen, die Netzwerkgeschwindigkeit oder andere Funktionen.
3. Sie benötigen normalerweise separate URLs für jede Stelle, z. www.site.com und m.site.com. Benutzer können auf der falschen Website für ihr Gerät landen. Wenn Sie nicht vorsichtig sind, werden Suchmaschinen für doppelte Inhalte bestraft.
4. Eine Website verwalten ist schwierig. Sie müssen jetzt mehrere Websites erstellen und bereitstellen und sicherstellen, dass sie gleichzeitig aktualisiert werden. Vielleicht überleben Ihre Entwickler die Tortur, werden aber inhaltliche Redakteure mit mehreren Vermögenswerten abwickeln, die auf unterschiedliche Ansichten abzielen?

Allerdings sind separate Websites eine attraktive Option für Unternehmen wie Amazon und eBay, da es eine gezielte Erfahrung bietet.

reaktionsschnelles Webdesign

Alternativ können Designer und Entwickler Designs verwenden, die auf die Ansichtsfensterabmessungen des Browsers reagieren (normalerweise den gesamten Bildschirm auf kleineren Geräten). Mit einem mobilen Ansatz implementiert die Site ein Standard-lineares Layout, das möglicherweise mit kleineren Text und Menüs, die von Hamburger-Symbolen zugegriffen werden. Mit zunehmender Abmessungen kann das Design erneut geflogen werden, um zusätzliche Säulen, größere Schriftarten, mehr Abstand, immer sichtbare Menüs usw. anzuzeigen. RWD löst viele Probleme mit separaten Ansichten. Wir haben eine einzelne Site mit einem Inhaltssatz, der auf eine unendliche Vielfalt von Bildschirmgrößen reagieren kann. Bedauerlicherweise…

1. Bildschirmgröße ist ein rohes Hinweis auf die Funktionen des Geräts und erzählt uns nichts über die Prozessorgeschwindigkeit, die Netzwerkbandbreite oder die HTML5 -Unterstützung. Ein Benutzer mit einem großen Monitor könnte immer noch einen zwanzigjährigen PC auf einer Dial-up-Verbindung verwenden.
2. Die gleiche Seite und Vermögenswerte werden (meistens) an alle Geräte geliefert. Es ist möglich, das Bildladen mithilfe von CSS -Hintergrundbildern in Medienabfragen zu begrenzen, das Element und das SRCSET -Attribut, aber die Unterstützung bleibt fleckig und es löst nicht jedes Problem. Client-Seite-Adaptionstechniken können die Seite des Seitens auch verlangsamen, und dies muss angesprochen werden. Zum Beispiel könnte ein großes Bild an einen Retina-Bildschirm mit hoher Dichte geliefert werden, obwohl der Benutzer eine langsame Verbindung hat.
3. Einige Optionen sind nicht allein auf dem Kunden implementiert. Es ist schwierig, den Inhalt neu zu faktorieren, z. Teilen Sie einen langen Artikel über mehrere Seiten. Alle Geräte erhalten dieselbe Seite, auch wenn es unpraktisch ist, auf einem kleinen Bildschirm zu lesen.
4. Die durchschnittliche Webseite überschreitet 2 MB. Viele verwenden ein reaktionsschnelles Webdesign, aber es folgt nicht, dass die Site auf einem Gerät mit geringem Stromversorgungsgerät reaktionsschnell ist. Das Erstellen einer schnellen, reaktionsschnellen Website ist jetzt basierend auf der Leistung von Google -Rate -Websites im Notwahrerplatz geworden.

Daher sind separate Websites schwierig und reaktionsschnelle Designs können nicht alle Probleme lösen. Gibt es einen dritten Weg, den wir in Betracht ziehen könnten?

ress: Responsive Web Design Server-Side-Komponenten

Ress wurde 2011 von Luke Wroblewski vorgeschlagen. Das Konzept verwendet das Responsive Webdesign, ergänzt es jedoch mit der Funktionserkennung, um geänderte Inhalte bei Bedarf zu servieren. Zum Beispiel könnten Sie:

• Servieren Sie kleinere Bilder auf kleineren Bildschirmen oder , wenn die Bandbreite begrenzt ist.
• Servieren Sie nur ein Videoelement, wenn das Gerät auf einer schnellen Verbindung HTML5 -Unterstützung verfügt.
• Vermeiden Sie es, Flash -Spiele oder -anzeigen auf iOS und zunehmend Android -Geräten zu servieren.
• zu Graustufenbildern auf E -Book -Lesern wechseln.
• Reduzieren Sie die Häufigkeit von AJAX -Umfrageanfragen zu langsameren Verbindungen.
• unnötige CSS3 -Effekte entfernen, wenn das Gerät keine Animationen unterstützt.
• Fall-Back zu PNG-Bildern, wenn SVG nicht verfügbar ist.
• Geben Sie zusätzliche Informationen an, wenn sich der Benutzer an einem bestimmten Ort oder einem bestimmten Land befindet.

Ress wurde nie zu einer weit verbreiteten Technik, da die Merkmalserkennung schwierig ist-insbesondere auf dem Server. Ihr Erkennungscode muss jedes Mal überprüft, aktualisiert und verwaltet werden, wenn ein neuer Browser oder eine neue Funktion veröffentlicht wird. Glücklicherweise gibt es Dienste von Drittanbietern wie NetBiscuits die harte Arbeit für Sie erledigen und ständig mit den neuesten Geräteinformationen aktualisiert werden. Der erste Schritt: Anmelden für ein NetBiscuits-Konto-Es gibt eine 30-tägige kostenlose Testversion, um den Service zu bewerten. Fügen Sie den NetBiscuits -Tracking -Code in Ihre Website -Vorlage ein, warten Sie einige Sekunden und sehen Sie sich die attraktiven Diagramme für Geräte- und Besucheranalyse an:

clientseitige Geräteerkennungs-API

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

Der Tracking -Code definiert auch ein globales JavaScript -Objekt mit dem Namen DCS, das mehr als 650 Hardware-, Browser-, Betriebssystem- und Netzwerkerkennungsparameter enthält. Beispiele: Bewerten Sie die Bandbreitenbewertung - ein Rang von Null (sehr langsam) bis 20 (typischerweise Edge/HSPA) bis 60 (3G) bis 120 (4G/WLAN):

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

Identifizieren Sie, ob das Gerät über einen Touchscreen verfügt:

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

mit einem Pixelverhältnis mit hoher Dichte:

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

Hat das Gerät telefonische Einrichtungen?

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

Ist SVG unterstützt? Sind lächelnde Animationen verfügbar?

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

Finden Sie heraus, wo sich der Benutzer befindet:

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

Schlagen Sie ein kompatibles HTML5 -Videoformat vor:

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

Erkennen Sie, welcher Browser verwendet wird:

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

Und ob es sich um die neueste Veröffentlichung handelt:

serverseitige Geräteerkennungs-API

<span><span><?php
</span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

<span><span><?php
</span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

Die Geräteerkennung ist auf dem Server am nützlichsten, auf dem Sie die Antwort ändern können, bevor sie gesendet wird. Code wird für PHP, Java und .NET bereitgestellt. PHP -Beispiele… Unterstützt das Gerät H264 HTML5 -Video und hat eine angemessene Verbindung?

Unterstützt das Gerät AJAX und hat eine JavaScript -Leistung besser als das iPhone 5 (ein Referenzgerät mit einer Punktzahl von 100)?

Wir haben vielleicht nie eine Lösung, die einfach zu entwickeln ist und auf allen Geräten perfekt funktioniert, aber Ress bietet einen guten Kompromiss, der viele der Leistungsprobleme löst, die mit reaktionsschnellem Webdesign gestoßen sind. Ein guter Geräteerkennungsdienst ist alles, was Sie brauchen.

häufig gestellte Fragen zur Verbesserung des reaktionsschnellen Webdesigns mit Ress

Was ist der Hauptunterschied zwischen Ress und herkömmlichem reaktionsschnellem Webdesign? . Andererseits kombiniert RES (Responsive Web Design mit Server-Seitenkomponenten) die clientseitige Reaktionsfähigkeit mit serverseitiger Intelligenz. Dies bedeutet

Wie verbessert RES die Website der Website? Bei herkömmlichem RWD werden alle Daten, einschließlich Daten für Elemente, die auf dem Gerät nicht sichtbar sind, gesendet. Bei RES sendet der Server jedoch nur Daten, die für das spezifische Gerät relevant sind, die Ladezeiten reduziert und die Gesamtleistung verbessert. ist so konzipiert, dass er mit allen Arten von Geräten kompatibel ist. Die serverseitige Komponente der RES kann die Funktionen des Geräts erkennen, das die Webseite anfordert und eine optimierte Version der Site entsprechend liefern. Dies sorgt für eine nahtlose Benutzererfahrung auf allen Geräten, von Desktops bis hin zu Smartphones. Eine schnellere Ladezeiten und eine verbesserte Benutzererfahrung können zu niedrigeren Absprungraten und höherem Benutzerbetrieb führen. Darüber hinaus ermöglicht RESs effizientere Kriechung und Indexierung von Inhalten durch Suchmaschinenbots. . Es umfasst serverseitige Programmier- und Geräteerkennung, die komplex sein können. Darüber hinaus kann die Wartung einer Ress-Website ressourcenintensiver sein, da regelmäßige Aktualisierungen der Geräteerkennungsdatenbank erforderlich sind, um neue Geräte und Browser aufzunehmen.

kann sowohl auf vorhandenen als auch auf neuen Websites implementiert werden. Die Integration von RES in eine vorhandene Website erfordert möglicherweise erhebliche Änderungen an der Architektur und dem Code der Website, die zeitaufwändig und komplex sein können. Ress kann die Bereitstellung von Bildern und anderen Mediendateien basierend auf den Funktionen des Geräts optimieren. Der Server kann Bilder ändern, sie in ein effizienteres Format umwandeln oder sogar für Geräte mit begrenzten Funktionen vollständig weglassen. Dies stellt sicher, dass Mediendateien die Ladezeit der Website nicht unnötig verlangsamen. Website und die verfügbaren Ressourcen. Während die anfängliche Implementierung aufgrund der Notwendigkeit einer serverseitigen Programmierung und Geräteerkennung möglicherweise teurer ist, kann die verbesserte Leistung und die Benutzererfahrung auf lange Sicht zu höherem Benutzerbetrieb und potenziell höheren Einnahmen führen.

Kann Ress in Verbindung mit anderen Webdesign -Techniken verwendet werden? Diese Techniken können Ress ergänzen, indem sie eine robustere und flexiblere Webdesignlösung liefern.

Wie wirkt sich Ress auf die Zukunft des Webdesigns aus? Durch die Kombination der Flexibilität von RWD mit der Effizienz serverseitiger Komponenten bietet RES eine maßgeschneiderte und effizientere Benutzererfahrung. Da weitere Geräte mit unterschiedlichen Fähigkeiten weiterhin auftauchen, wird der Bedarf an Techniken wie Ress, die sich an diese Geräte anpassen können, nur zunehmen.

Das obige ist der detaillierte Inhalt vonVerbesserung des reaktionsschnellen Webdesigns mit Ress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!