Responsives Webdesign ist bereits das Schlagwort des Jahrzehnts und ideal für die vernetzte Multi-Screen-Welt, in der wir leben. Der Nachteil liegt jedoch in der Performance aufgrund der größeren Dateigrößen.
Dies hat einige Experten dazu veranlasst zu sagen, dass, wie in den frühen Tagen von Flash, reaktives Design etwas ist, auf das wir alle ohne guten Grund aufgeregt sein könnten. Im Moment gibt es zwar Leistungsprobleme, diese können jedoch durch kleine Anpassungen, Komprimierung und Bildgrößenanpassung in gewissem Maße überwunden werden.
Responsive Design lädt alle HTML-Elemente für jedes Gerät, einschließlich der für die Bereitstellung von Tablets und Desktops vorgesehenen Geräte. Dies bedeutet, dass alle Inhalte, einschließlich Bildern und Skripten, häufig bereitgestellt werden, unabhängig davon, auf welchem Gerät sie angezeigt werden.
Eine Studie Das vergangene Jahr hat gezeigt, dass 86% der derzeit online verfügbaren responsiven Websites eine vollständige Desktopseite an mobile Geräte liefern. Dies ist eindeutig ein Trend zu der Design-Technik, die adressiert werden muss, wenn wir den Fortschritt aufgeblähter Webseiten in ihren Tracks stoppen wollen.
Im Moment treibt das Responsive Design die Seitengröße in die Höhe und dies ist der Trend, der angegangen werden muss, insbesondere wenn man bedenkt, dass 57% der mobilen Nutzer gehen, wenn die Website nicht geladen wird innerhalb von 3 Sekunden.
Für diejenigen, die bereits ein Design haben und jetzt optimieren wollen, Mobitest kann verwendet werden, um die Leistung zu messen, um weiterzumachen und sie anzugehen. Natürlich ist die Optimierung bei der Planung eines Designs in diesem Stadium einfacher durchzuführen, und die Leistung sollte immer als ein wesentlicher Teil des Designs und nicht als nachträglicher Einfall angesehen werden.
Um die Leistung zu verbessern, muss die Größe der Seiten und Ressourcen, die damit geladen werden, reduziert werden. Dies kann unter Verwendung verschiedener Techniken durchgeführt werden, ohne das Erscheinungsbild der Website ernsthaft zu verändern.
Als erstes muss geprüft werden, ob nur die benötigten Ressourcen an das Zielgerät gesendet werden. Dies kann durch Minimieren der Anzahl von HTTP-Anforderungen erfolgen, sodass der Benutzer weniger Zeit auf das Laden des DOM wartet. Dies kann wiederum durch Komprimieren von CSS- und Javascript-Ressourcen erfolgen, für die Tools wie z Kompass - ein Open Source CSS Authoring Framework - kann verwendet werden. Dies ermöglicht Entwicklern, saubereres Markup zu erstellen und Sprites und Erweiterungen mit minimalem Aufwand zu erstellen.
In Bezug auf JavaScript, Werkzeuge wie UglifyJS kann verwendet werden, die Code komprimiert.
Dies kann als eine wichtige Technik in Bezug auf Responsive Design angesehen werden, da es verwendet werden kann, um sicherzustellen, dass Benutzer von Mobilgeräten und Smartphones die Aspekte der Website nicht herunterladen, die sie verlangsamen oder die sie nicht verwenden.
Bedingtes Laden kann verwendet werden, um das Laden aller Arten von Inhalten zu stoppen, einschließlich sozialer Widgets, Bildern, Karten und vielem mehr. Es ist wichtig, an dieser Stelle darauf hinzuweisen, dass die Website in jeder Phase der Optimierung gründlich getestet werden sollte, damit Sie leicht sehen können, was im Laufe der Zeit den Unterschied gemacht hat.
Wir alle wissen, dass Bilder normalerweise dafür verantwortlich sind, dass sie die größte Menge an Kilobytes auf einer Webseite aufnehmen. Es ist auch sicher zu sagen, dass Bilder, die für einen Desktop-Browser entworfen wurden, bei der Auslieferung an ein mobiles Gerät unterdurchschnittlich sind.
Wenn eine Website auch über viele Legacy-Inhalte verfügt, wirkt sich dies noch stärker auf die Leistung aus, und es muss verhindert werden, dass diese Inhalte geladen werden. Dies ist zwar möglich, indem Sie das Markup ändern, indem Sie die src- oder img-Elemente ändern, die PHP-Lösung Adaptive Bilder ist wahrscheinlich einfacher. Die Software erkennt die Bildschirmgröße und erstellt, speichert und liefert automatisch die entsprechenden skalierten eingebetteten HTML-Bilder, ohne dass das Markup geändert werden muss. In Verbindung mit Fluid Image-Techniken ist es eine praktische Lösung, die viel Zeit spart. Adaptive Images verwendet eine htaccess-Datei, eine PHP-Datei und eine einzelne Zeile Javascript, um die Bildschirmgröße der Besucher der Website zu bestimmen.
Es lohnt sich, auch über den Text nachzudenken, da dies natürlich passiert, wenn das Gerät verengt wird und Anzeigeprobleme auftreten können. FitText ist ein Tool, das helfen kann, dies zu beheben, ein jQuery-Plugin, das die Schriftgröße automatisch aktualisiert, mit Optionen für die zulässigen Mindest- und Höchstgrößen.
Dies ist ideal für Überschriften, die auf einem mobilen Gerät möglicherweise schlecht angezeigt werden, und erlaubt die Angabe der CSS3-Schriftgröße. FitText ist jedoch nur für Überschriften gedacht und sollte nicht im Absatztext verwendet werden.
Während responsives Design seine Probleme hat, wie jede relativ neue Technologie oder Technik, lohnt es sich trotzdem, eine Site auf diese Weise zu erstellen. Niemand möchte rückwärts gehen und obwohl es einfacher ist, eine mobile Website zu erstellen, ist es viel besser, so innovativ wie möglich zu sein.
Google stimmt zu, ihr Rat Responsive Design ist der beste Weg, um für Mobilgeräte zu entwerfen. Für die Suchgiganten bedeutet das natürlich, dass sie nur eine URL zum Crawlen haben, anstatt zahlreiche URLs für die Website, die im Wesentlichen die gleiche ist, also liegt es wirklich an ihren Interessen.
In dieser Zeit der Social-Sharing-Manie macht es aber auch Sinn, da mobile Benutzer eine Seite mit jemandem teilen können, der einen Desktop benutzt. Um eine einheitliche Erfahrung zu schaffen, sollte dies den gleichen Inhalt liefern.
Darüber hinaus verbessert eine reaktionsfähige Website die Produktivität der Mitarbeiter, da wesentlich weniger zu tun ist. Dies gilt für Inhalte, Updates und SEO, da diese beim Aufbau verschiedener Seiten separat durchgeführt werden müssen.
Mobile Geräte und Tablets werden in dieser, fast post-PC-Ära zur Norm für die Verbindung zum Internet und zum Surfen. Der Tablet-Umsatz ist weltweit in nur einem Jahr gestiegen und hat sich in dieser Zeit mehr als verdoppelt. Viele Verbraucher haben sich inzwischen für verschiedene Geräte mit Android und iOS entschieden.
Es gibt wenig Zweifel, dass sich bisher responsives Design trotz Leistungssorgen positiv auswirkt. Laut einem Bericht , die einige der weltweit führenden Marken befragten, wie sich eine reaktionsschnelle Website auf den Traffic ausgewirkt hat, waren die Besuche auf allen Geräten deutlich gestiegen.
Dazu zählten ein durchschnittlicher Anstieg von 23% bei den mobilen Besuchern sowie eine niedrigere Absprungrate von 26%, wobei Besucher an den Standorten rund 7,5% mehr Zeit verbrachten als zuvor.
O'Neill, der trendige Surfbekleidungshändler, berichtet von einer Conversion-Rate, die durch die Entwicklung einer responsiven Website um 65,7% höher für iPad und iPhone ist. Dies führte allein auf diesen Geräten zu einem Umsatzwachstum von 101,2%.
Bei den Android-Geräten war die Conversion-Rate mit 407,3% sogar noch besser, was einem enormen Umsatzwachstum von 591,4% entspricht. Eine geringere Conversion-Rate wurde bei nicht mobilen Geräten festgestellt, obwohl weiterhin Wachstum zu verzeichnen war.
Dies ist nur eine der Marken, die ihre Zahlen veröffentlichen und es ist ziemlich schwierig, die Daten von anderen sofort zu bekommen, so wie es vor ein paar Jahren mit den Auswirkungen von Social Media war. Es zeigt jedoch, dass die Erträge aus der Gestaltung einer responsiven Website erheblich sein können.
In diesem Sinne, welcher weitere Grund braucht ein Designer, um für seine Kunden responsiv zu entwerfen und zu versuchen, dass sie so gut wie möglich arbeiten? Es gibt keins, und diejenigen Designer, die sich nicht die Mühe machen wollen, mit Responsive-Techniken zu lernen, wie man eine Site designt, baut und optimiert, finden sich im Staub.
67% der Nutzer geben an, dass sie über eine mobile Website gekauft haben, und es wird davon ausgegangen, dass die Nutzung des mobilen Internets im nächsten Jahr die des Desktops überholen wird. In Anbetracht dessen ist es leicht einzusehen, warum Unternehmen sich immer mehr für die besten mobilen Web-Lösungen interessieren, die sie anbieten können.
Responsive Design mag derzeit noch in den Kinderschuhen stecken, aber es scheint klar zu sein, dass die Marktnachfrage es schnell wachsen lässt, so dass es sich lohnt, so viele Aspekte wie möglich in der Disziplin zu lernen.
Mit welchen Techniken haben Sie Responsive-Websites optimiert? Bietet die Bereitstellung alternativer Inhalte die Vorteile von Responsive Design? Lassen Sie es uns in den Kommentaren wissen.