Gebot der Stunde ist nicht Responsive Design, sondern Responsive Performance
Responsive Design hat in letzter Zeit mehrere Leistungsprobleme gezeigt. Die Ironie ist – Responsive Design macht sich auf den neuesten Smartphones ziemlich gut, aber nicht darüber hinaus.
Sie könnten verwirrt sein, da die meisten Webbenutzer High-End-Smartphones haben. Eine große Bevölkerung verwendet jedoch immer noch mobile Geräte mit einer kleinen Bildschirmgröße, auf denen eine alte Version von Android oder iOS ausgeführt wird, und möglicherweise nur ein Feature-Telefon mit geringer Funktionalität. Infolgedessen bedient Responsive Design ein breiteres Publikum nicht so, wie es sollte.
Der lang gehegte Glaube, dass Responsive Design für mobile Geräte jeder Bildschirmgröße geeignet ist, hat viel mit diesem Problem zu tun. Da die Leistung sinkt und die Unzufriedenheit zunimmt, muss der Blick über das responsive Design hinausgehen. Der Fokus sollte stattdessen darauf liegen, eine reaktionsschnelle Leistung sicherzustellen. Dieser Beitrag ist ungefähr gleich.
Die große Frage ist also, was tun?
Verwerfen Sie das Desktop-First-Designkonzept
Ein wesentlicher Beitrag zu diesem anhaltenden Problem ist, dass der Fokus immer noch auf einem Desktop-First-Design-Ansatz liegt. Der Schwerpunkt liegt auf der Gestaltung einer Website für einen Desktop und dann auf der Gestaltung für andere Geräte wie Smartphones und Tablets. Für jede fehlende Funktionalität verwenden Entwickler großzügig Shims und Polyfills. Natürlich gibt es umfangreiche Bibliotheken, um eine schnelle Entwicklung zu gewährleisten. Dies löst jedoch nicht das Problem der Browser-Inkompatibilität. Ist es gerechtfertigt, sich auf ein Designkonzept einzulassen, das nicht die gewünschten Ergebnisse bringt?
Es ist nicht sehr schwierig, einen Mobile-First-Designansatz zu implementieren, bei dem das Ziel darin besteht, dem mobilen Benutzer auf seinem Bildschirm nur die beabsichtigten Informationen anzubieten, anstatt all die Dinge, die das Gerät zerstören. Luke Wroblewski konzipierte diesen Designansatz zum ersten Mal im Jahr 2011 und seitdem haben viele Branchenexperten seinen bahnbrechenden Designansatz gelobt.
Mehr Daten, auch wenn es nur den Bruchteil einer Sekunde dauert, können sich erheblich auf die Gesamtladezeit auswirken. Es ist jedoch auch wahr, dass Websites mit grafikreichen Inhalten gefüllt werden und immer mehr Menschen ihre mobilen Geräte verwenden, um darauf zuzugreifen. Wenn ein Benutzer die URL einer Website auf einem Mobiltelefon mit einem Bildschirm mit niedriger Auflösung eingibt, ist sein Ziel immer, auf den Inhalt der Website zuzugreifen, aber was er erlebt, ist ein Albtraum. Dies liegt an der Schwierigkeit, durch die endlosen unnötigen Anzeigen zu navigieren. Entfernen Sie solche vermeidbaren Inhaltselemente, damit Ihr Benutzer auf den Hauptinhalt zugreifen kann. Dies erhöht den Website-Traffic, da neben Benutzern mit High-End-Smartphones viele über Mobilgeräte mit niedriger Auflösung auf Ihre Website zugreifen. Die Bereitstellung einer Nur-Text-Version ist durchaus sinnvoll, wenn das Mobiltelefon über begrenzte Fähigkeiten verfügt. aber andererseits können Sie sagen, dass die Benutzererfahrung beeinträchtigt wird. Nun, das ist es, aber es ist immer noch besser, als überhaupt keine Inhalte zu erhalten. Zumindest in einem solchen Fall greifen die Benutzer auf die grundlegenden Informationen über Ihre Website zu. Macht es Sinn, eine Website so zu gestalten, dass sie ihre potenzielle Reichweite verringert?
Sie werden sicherlich akzeptieren, dass es niemanden begeistert, endlos zu warten, nur um eine Website zu überprüfen. Laut einigen Umfragen von Akamai und Gomez.com erwarten ungefähr 50 % der Webbenutzer, dass eine Website innerhalb von 2 Sekunden oder sogar noch weniger geladen wird. Es besteht eine größere Wahrscheinlichkeit, dass eine Website abgebrochen wird, wenn eine Website nicht innerhalb von nur 3 Sekunden im Browser geladen wird! Darüber hinaus verfügen die meisten E-Commerce-Websites heutzutage über eine große Anzahl von Social-Sharing-Schaltflächen wie Facebook, Google Plus, Twitter, LinkedIn usw. Wussten Sie, dass diese Schaltflächen Ihrer responsiven Website mehr als 500 KB hinzufügen und ihre Leistung beeinträchtigen? Allein der Facebook-Like-Button erfordert einen komprimierten Code von 270KB! Es erfordert auch mehrere HTTP-Anforderungen. Stattdessen,
Die Leistung einer Website wirkt sich direkt auf die Leistung eines Unternehmens aus, und eine langsam reagierende Website tut einem Unternehmen nie etwas Gutes. Ob Sie es glauben oder nicht, die meisten mobilen Benutzer sind nicht daran interessiert, zu recherchieren oder lange Artikel zu lesen. Die meisten von ihnen nutzen ihre Mobilgeräte für einen einfachen Zugriff auf Facebook, WhatsApp, Twitter und um sich der Freude am Online-Shopping hinzugeben. Außerdem ist Mobile kein Trend mehr, sondern die Zukunft.
Laut der Comscore-Statistik des letzten Jahres ist die Zahl der rein mobilen Internetnutzer in den USA stark gestiegen, während die Zahl der reinen Desktop-Nutzer auf 10,6 Prozent zurückgegangen ist.
Müssen Sie noch etwas sagen, um zu überzeugen?
Stellen Sie eine ordnungsgemäße Degradation sicher
In den letzten Jahren sind Sie vielleicht auf das neue Schlagwort in der Welt des Responsive Design gestoßen, und es ist „Graceful Degradation”. Ja, Graceful Degradation impliziert, dass eine Funktion, selbst wenn sie nicht erfolgreich funktioniert, so ausfallen sollte, dass sie eine akzeptable Benutzerfreundlichkeit ermöglicht. Das bedeutet, ein Website-Design für einen Desktop zu erstellen und dann schrittweise auf Tablets, Smartphones und Feature-Phones umzusteigen. Die Leistung eines responsiven Designs, bei dem die Website elegant degradiert, ist zwangsläufig hoch, da die Benutzererfahrung hier immer erstklassig ist. Die Website bleibt trotz aller Mängel funktionsfähig, und ein Besucher wird sicherlich von der Gesamtqualität beeindruckt sein.
Jetzt haben Sie vielleicht diese Frage im Kopf, was an anmutiger Erniedrigung so faszinierend ist. Die Antwort ist einfach. Dies liegt daran, dass Ihre Inhalte unabhängig vom Browser sichtbar und lesbar sind, was eine bemerkenswerte Leistung ist! Glücklicherweise, wenn Sie CSS3 verwenden, wird die elegante Degradation zu einer einfachen Aufgabe, da die meisten Eigenschaften von CSS3 automatisch degradiert werden, dh abgerundete Ecken werden quadratisch, der Text wird umbrochen, anstatt in einer einzigen Zeile zu laufen, Farbverläufe werden zu flachen Farben und vieles mehr.
Lassen Sie uns ein Beispiel für eine anmutige Erniedrigung geben. Angenommen, Sie haben eine responsive Website mit JavaScript-Funktionen entworfen und diese Funktionen werden von Ihrem Browser nicht unterstützt oder sind möglicherweise auf der Seite Ihres Clients deaktiviert. Was können Sie also tun, um den Inhalt zu erhalten? Nun, in einem solchen Fall ermöglicht die Graceful Degradation Ihrem Browser, den Inhalt innerhalb des „noscript”-Tags anzuzeigen.
Dies können Sie mit der unten angegebenen Codierung besser verstehen:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Es gibt noch ein weiteres Beispiel für Graceful Degradation, das ich teilen möchte, und es ist die Verwendung von HTML5 durch YouTube zum Abspielen von Videos. Angenommen, Ihr Browser unterstützt HTML5 nicht, das Video wird mithilfe von Flash angezeigt, und wenn Flash nicht installiert ist, erhalten Sie eine Nachricht, um es auf Ihrem Mobilgerät zu installieren. In beiden Fällen können Sie sich das Video ansehen. Ein Nachteil dieser sanften Verschlechterung ist jedoch, dass Sie trotz guter Leistung Kompromisse bei bestimmten Designelementen eingehen müssen, wenn Sie veraltete Browser verwenden. Ich denke, die Bestimmung der wesentlichen visuellen Elemente Ihrer Website im Voraus kann ausreichen.
Keine Notwendigkeit, ungenutzte Bibliotheken aufzubewahren
Eine bewährte Methode kann darin bestehen, nicht verwendete Bibliotheken nicht aufzubewahren. Ja, es ist wahr, dass es sehr zeitaufwändig ist, den Überblick über die verwendeten Bibliotheken und die unbenutzten zu behalten, aber es lohnt sich in der Tat. Manchmal haben Sie vielleicht bemerkt, dass Sie nach dem Einbinden einer Bibliothek nur eine einzige Funktionalität verwenden. Es können manchmal sogar zwei oder drei sein. Das Tool, das ich am häufigsten zum Erstellen eines responsiven Designs verwende, ist jQuery. Tatsächlich gibt es viele jQuery-Bibliotheken, die Entwicklern helfen, responsive Websites zu erstellen. Eine Einbeziehung mehrerer Bibliotheken wie der JavaScript-Bibliotheken, nur weil Ihnen einige Widgets gefallen haben, wird die Ladezeit Ihrer Seite erheblich verlängern. Es wird jedoch eine gute Praxis sein, zu analysieren, welche Bibliotheken in welchem Umfang verwendet werden.
Überprüfen Sie die Verfügbarkeit von Funktionen
Sie können überprüfen, ob Ihr Gerät eine bestimmte Funktion unterstützt oder nicht, bevor Sie diese aktivieren. So kommt es beispielsweise vor, dass Sie zwar die neuste Version von Google Chrome auf Ihrem veralteten Android-Handy installiert haben, Ihre Website aber immer noch nicht angezeigt wird. Manchmal stürzt der Browser beim Versuch, eine solche Website zu laden, so stark ab, dass das gesamte mobile Gerät nicht mehr reagiert. Sie müssen das Gerät neu starten, und das ist das Letzte, was Sie sich gewünscht haben, oder? Viele Benutzer bestimmter Webanwendungen leiden bereits unter diesem Problem.
Die Nichtverfügbarkeit von Funktionen auf Geräten und das Entwerfen von Websites oder Anwendungen hat zu einigen spürbaren Problemen geführt, wie dem sofortigen Absturz von Google Hangout-Apps auf Android-Geräten weltweit, unabhängig vom Browsertyp. Dies trotz der Tatsache, dass die App eine leichtgewichtige App war. Sie können argumentieren, dass Benutzer eine ältere Version von Android-Smartphones verwendet haben, aber es ist auch wahr, dass solche Geräte immer noch als brandneue Geräte in jedem der mobilen Geschäfte ab Lager erhältlich sind. Viele mobile Benutzer haben auch mit der YouTube- und Twitter-App das gleiche Leistungsproblem. Selbst ein Update von Googles Android System Webview-Dienst über Google Play lässt viele Smartphones zu einer Art Albtraum der Benutzer werden.
Bilder optimieren
Das Einfügen optisch ansprechender großer Bilder ist für die Designer immer verlockend. Das Problem entsteht, wenn sie diese Bilder nicht komprimieren, bevor sie sie in das CMS hochladen. Dies gilt insbesondere für mehrere E-Commerce-Websites im Internet. Laut einer aktuellen Studie von Radware werden die Seiten immer größer und ca. 45 Prozent der Top-100-Einzelhandelsseiten verwenden keine Bildkomprimierung. Das macht solche Seiten unhandlicher und dadurch verlängert sich die Ladezeit, aber als Designer kann man das Problem umgehen.
Machen Sie die Bilder kleiner, indem Sie ein geeignetes Bildoptimierungstool verwenden. Tatsächlich mangelt es im Internet nicht an solchen Tools. Einige der bemerkenswerten, die Sie verwenden können, sind Dynamic Drive, Smush it und Riot. Wenn Sie ein Profi in Photoshop sind, können Sie die Bildgröße auch selbst optimieren. Verwenden Sie eine intelligente Komprimierungstechnik und entfernen Sie sie von allen redundanten Metadaten. Das Konvertieren von Grafiken in PNG, farbintensive Bilder in JPEG und animierte Bilder in GIF reicht ebenfalls aus.
Für Extremfälle gerüstet
Wenn Sie mit dem Entwerfen beginnen, müssen Sie bemerkt haben, dass Sie versucht sind, die Seiten zu entwerfen, die einfacher sind. So können Sie Ihren Stakeholdern zumindest etwas zeigen. Das mag auf den ersten Blick nett erscheinen, aber wenn Sie Ihre Bemühungen am Anfang auf die herausforderndsten Szenarien konzentrieren, werden Sie ein gutes Ergebnis erzielen.
Beispielsweise eine Webseite mit einigen Artikeln, Blogs und Pressemitteilungen. Es muss auch einen Titel haben. Was passiert nun, wenn der Titelbereich, von dem Sie dachten, dass er „Tipps zum responsiven Webdesign” zeigen soll, einen Titel „10 wesentliche Tipps und Techniken für erfolgreiches responsives Website-Design” anzeigen muss? Das ist jetzt ein Extremfall.
Ein Versuch wie der obige, die Leistung Ihrer responsiven Website zu optimieren, scheint unsichtbar zu sein. Diese Bemühungen bringen jedoch gute Renditen mit glücklichen und zufriedenen Benutzern. Sie können auf verschiedene Tools wie Pingdom- Tools zurückgreifen, mit denen Sie die Ladezeit Ihrer responsiven Website mühelos überwachen können. Überspringen Sie nicht den wichtigen Aspekt des Testens, um sicherzustellen, dass Ihre responsive Website wie beabsichtigt funktioniert. Testen Sie es auf so vielen echten Geräten wie möglich.
Sie können auch Ressourcen wie Screenfly nutzen, mit denen Sie Ihre Website mit mehreren Bildschirmauflösungen testen können. Man kann argumentieren, dass all diese Strategien viel Zeit brauchen, aber andererseits muss man hart schwitzen, um die Vorteile zu nutzen. Heutzutage ist es unerlässlich, eine reaktionsschnelle Website mit einer reaktionsschnellen Leistung zu erstellen, zumal Google Websites anhand ihrer Leistung bewertet. Wenn Sie ein Designer oder Entwickler sind, beschränken Sie sich nicht auf eine der oben genannten Best Practices. Sie sollten nach weiteren Lösungen suchen und möglicherweise hart daran arbeiten, eine Website mit reaktionsschneller Leistung bereitzustellen.