Haben Sie eine "responsive Website"? Dies ist eine Website mit einem Layout, das sich je nach Gerät und Bildschirmgröße des Besuchers ändert. Responsive Webdesign ist heute eine bewährte Methode der Branche. Es wird von Google empfohlen und auf Millionen von Websites im Internet gefunden. Es gibt jedoch einen großen Unterschied zwischen einer Website, die einfach auf verschiedene Bildschirmgrößen „passt“, und einer wirklich reaktionsfähigen Website.
Ich sehe regelmäßig, wie Unternehmen ihre Website umgestalten und eine Pressemitteilung herausbringen, in der die Tugenden ihres neuen, mobilfreundlichen Designs gelobt werden. Wenn ich diese Websites besuche, finde ich oft ein Layout, das zwar skaliert und an verschiedene Bildschirme angepasst werden kann, aber das ist, soweit sie die Idee der Reaktionsfähigkeit annehmen. Das ist nicht genug. Eine wirklich reaktionsschnelle Website eignet sich nicht nur für kleinere oder größere Bildschirme. Auf diesen Seiten finden Sie auch die folgenden wichtigen Merkmale.
1. Optimierte Leistung
Niemand möchte gerne auf das Laden einer Website warten, und wenn jemand ein mobiles Gerät mit einer Verbindung verwendet, die möglicherweise nicht ideal ist, ist das Erfordernis für das schnelle Laden einer Website umso wichtiger.
Wie optimieren Sie die Leistung Ihrer Website? Wenn Sie im Rahmen einer Neugestaltung mit einer neuen Site beginnen, sollten Sie unbedingt ein Leistungsbudget als Teil dieses Projekts erstellen. Wenn Sie mit einer vorhandenen Site arbeiten und nicht bei Null anfangen, besteht der erste Schritt darin, die Leistung Ihrer Site zu testen, um festzustellen, wo Sie heute stehen.
Sobald Sie wissen, wo Ihre Site leistungsmäßig steht, können Sie mit den erforderlichen Verbesserungen beginnen, um die Downloadgeschwindigkeit zu erhöhen. Ein guter Anfang ist wahrscheinlich mit den Bildern Ihrer Website. Zu große Bilder sind die Hauptursache, wenn es darum geht, Websites langsam zu laden. Die Optimierung Ihrer Bilder für die Webbereitstellung kann Ihrer Website in Bezug auf die Leistung wirklich helfen.
Die Realität ist, dass eine verbesserte Website-Leistung und schnelle Download-Geschwindigkeiten ein Vorteil sind, den alle Besucher zu schätzen wissen. Schließlich hat sich noch nie jemand beklagt, dass eine Website "zu schnell" geladen wurde, aber wenn eine Website zu lange braucht, wird sie die Benutzer auf jeden Fall abweisen, ob sie auf ihren Bildschirm "passt" oder nicht.
2. Smart Content-Hierarchie
Wenn eine Website auf einem großen Bildschirm angezeigt wird, können Sie den Inhalt aufgrund der umfangreichen verfügbaren Bildschirmfläche auf verschiedene Arten gestalten. Sie können häufig wichtige Nachrichten und Bilder, Nachrichtenaktualisierungen, Ereignisinformationen und die Websitenavigation gleichzeitig auf dem Bildschirm anzeigen. Auf diese Weise kann der Besucher den Inhalt der gesamten Seite einfach und schnell scannen und entscheiden, was für ihn wichtig ist.
Dieses Szenario ändert sich drastisch, wenn Sie das Site-Design für kleine Bildschirmgeräte wie ein Mobiltelefon verwenden. Plötzlich arbeiten Sie mit einem Bruchteil der Bildschirmfläche, die Sie zuvor hatten. Dies bedeutet, dass Sie entscheiden müssen, was zuerst auf der Website angezeigt wird, was danach folgt, usw. Anstatt alles auf einmal zu sehen, haben Sie wahrscheinlich nur den Platz, um ein oder zwei Dinge anzuzeigen (eines davon ist wahrscheinlich Navigation). Dies bedeutet, dass Entscheidungen der Hierarchie getroffen werden müssen. Leider bestimmt oft das, was zuerst auf dem Bildschirm erscheint, und dann usw., wie die Seite selbst codiert wird. Es ist am einfachsten, beim Erstellen einer responsiven Site zuerst das anzuzeigen, was zuerst im Code auf dem Bildschirm angezeigt wird, gefolgt vom zweiten Element im Code und so weiter. Leider ist das, was auf einem Gerät möglicherweise am wichtigsten ist, auf einem anderen Gerät möglicherweise weniger wichtig. Eine wirklich reaktionsschnelle Site versteht, dass sich die Hierarchie von Inhalten je nach Situation ändern muss, und sie sollte klug sein, was sie wo anzeigt.
Verbesserungen bei CSS-Layouttechniken, einschließlich CSS-Rasterlayout, Flexbox und mehr, ermöglichen Webdesignern und -Entwicklern mehr Möglichkeiten, Inhalte intelligent zu verteilen, anstatt sich durch die genaue Reihenfolge der Inhaltsbereiche im HTML-Code zu beeinträchtigen. Die Nutzung dieser neuen Layout-Techniken wird immer wichtiger, da sich die Gerätelandschaft und die Anforderungen der Benutzer unserer Website ständig weiterentwickeln.
3. Erfahrungen, die die Stärken und Schwächen eines Geräts berücksichtigen
Bleiben Sie beim Thema Geräte - Jedes Gerät, mit dem jemand Ihre Website besuchen kann, hat sowohl Stärken als auch Schwächen, die dieser Plattform innewohnen. Eine großartige responsive Site versteht die Fähigkeiten und Einschränkungen verschiedener Geräte und verwendet sie, um individuelle Erlebnisse zu erstellen, die für jedes Gerät, das ein Besucher gerade verwendet, am besten geeignet sind.
Ein Mobiltelefon enthält beispielsweise eine Reihe von Funktionen, die Sie auf einem herkömmlichen Desktop-Computer nicht finden würden. GPS ist ein Beispiel für eine mobilzentrierte Funktion (ja, Sie können auch allgemeine Standortinformationen auf Desktops abrufen, das GPS-Gerät ist jedoch viel genauer). Ihre Website kann GPS-Informationen verwenden, um einer Person auf intelligente Weise sehr detaillierte und spezifische Schritt-für-Schritt-Richtungsinformationen oder spezielle Angebote zu übermitteln, die sich auf den aktuellen Standort beziehen.
Ein weiteres Beispiel für dieses Prinzip in der Praxis wäre eine Website, die versteht, welche Art von Bildschirmanzeige Sie verwenden, und Bilder sendet, die für diese Anzeige am besten geeignet sind. Wenn Sie einen Bildschirm mit einer hohen Pixeldichte haben, können Sie sich entscheiden, Bilder mit höherer Qualität an diesen Bildschirm zu senden. Dieselben Bilder wären auf einem weniger leistungsfähigen Bildschirm jedoch sinnlos, und die zusätzliche Qualität würde verloren gehen, während die zusätzliche Dateigröße ohne tatsächlichen Grund heruntergeladen würde.
Wirklich großartige responsive Sites berücksichtigen die gesamte Benutzererfahrung und arbeiten daran, diese Erfahrung nicht nur anhand des Gerätetyps oder der Größe des Bildschirms, sondern auch anhand anderer wichtiger Aspekte der Hardware anzupassen.
4. Inhalt mit Kontext
Anfänglich erhielt das responsive Webdesign seinen Namen aufgrund der Idee, dass das Layout einer Website auf unterschiedliche Bildschirmgrößen reagiert. Sie können jedoch auf viel mehr als nur die Bildschirmgröße reagieren. Aufbauend auf dem vorherigen Beispiel der Verwendung der Stärken und Schwächen eines Geräts können Sie diese sowie andere Daten wie Datum und Uhrzeit verwenden, um die Websiteerfahrung wirklich anzupassen.
Stellen Sie sich eine Website für eine große Messeereignis vor. Während eine responsive Website das Layout der Seiten der Website mit verschiedenen Bildschirmen skaliert, können Sie auch das Datum verwenden, um zu bestimmen, welcher Inhalt am wichtigsten ist. Wenn es der Zeitraum vor dem Ereignis ist, möchten Sie wahrscheinlich die Registrierungsinformationen gut sichtbar anzeigen. Wenn das Ereignis jedoch tatsächlich zu diesem Zeitpunkt stattfindet, ist die Registrierung möglicherweise nicht der wichtigste Inhalt. Stattdessen können Sie entscheiden, dass der Tagesablauf der Ereignisse kritischer ist, da er für die unmittelbaren Bedürfnisse des Benutzers relevanter ist.
Wenn Sie ein paar Schritte weiter gehen, können Sie das GPS eines Geräts nutzen, um zu ermitteln, wo sich diese tatsächlich auf der Messe befinden. Sie können ihnen interaktive Inhalte basierend auf ihrem Standort geben und ihnen nahe gelegene Stände oder Sitzungen zeigen, die gerade beginnen, um anzufangen.
5. Zugänglichkeit
Das letzte Beispiel, das wir uns ansehen werden, um herauszufinden, wie eine Website wirklich auf die Bedürfnisse eines Besuchers reagieren kann, ist der Zugriff auf die Website. Websites sollten von möglichst vielen Menschen, einschließlich Menschen mit Behinderungen, genutzt werden können. Ihre Website sollte von jemandem genutzt werden können, der einen Bildschirmleser oder eine andere unterstützte Software für den Zugriff auf den Inhalt benötigt. Auf diese Weise reagiert Ihre Website auf ihre Bedürfnisse, da Sie sichergestellt haben, dass die Erfahrung für behinderte Besucher immer noch angemessen ist.
Durch das Reagieren auf möglichst viele Datenpunkte und nicht nur auf die Bildschirmgröße kann eine Website so viel mehr als nur „mobilfreundlich“ sein. Sie kann in jeder Hinsicht zu einem wirklich reaktionsschnellen Erlebnis werden.
