Wir alle hören dieses Wort „Responsive“ heutzutage oft in der Webdesign-Domäne. Die Leute empfehlen und gehen ga-ga über die Bedeutung der Verwendung von Responsive Design. Aber Neulinge in den Bereichen professionelles Bloggen und Webmastering brauchen oft ein bisschen Zeit, um all diese Begeisterung darüber zu bekommen, was eine responsive Website ist und wie man sie entwickelt.
Menschen erstellen ihre Websites oft Themen basierend auf einer Bilddatei (z. B. PSD). Während alle Website-Designs als Bild beginnen, sollte man sehr vorsichtig sein, dass ihr Design den Prinzipien der Reaktionsfähigkeit entspricht und mobilfreundlich ist. Lassen Sie uns in das Thema eintauchen und alles über dieses Thema erfahren.
Nun, die Reaktionsfähigkeit einer Website bezieht sich auf ihre Fähigkeit, die Anzeige an das Gerät anzupassen, auf dem sie angezeigt wird. Vorbei sind die Zeiten, in denen die meisten Menschen Desktop–PCs verwendeten – jetzt gibt es alle Arten von Geräten. Desktop, Laptops, Netbooks, Tablets, Mini-Tablets, E-Book-Reader, Smartphones und nicht so intelligente Telefone! Puh! Zu viele, um sich keine Sorgen zu machen!
Alle diese Geräte haben ihre eigenen spezifischen Bildschirmgrößen und Auflösungen. Eine „starre“ Website kann sich nicht an die unterschiedlichen Bildschirmgrößen anpassen (oder beispielsweise darauf reagieren). Das Erscheinungsbild der horizontalen Bildlaufleiste im Browser ist eines der auffälligsten Anzeichen dafür, dass die Website nicht reagiert.
Im Gegensatz dazu kann sich eine Website mit einem responsiven Thema anpassen und sicherstellen, dass der Inhalt bei jeder Bildschirmgröße leicht lesbar ist.
Nicht wirklich. Ein responsives Theme passt die Anzeige mit dem primären Ziel an, dass der Inhalt der Website vom Besucher verwendet werden kann. Um dieses Ziel zu erreichen, kann die Website einige ihrer Zubehörkomponenten (wie die Seitenleiste) ausblenden und die Größe anderer Komponenten (z. B. Bilder, Schriftarten usw.) ändern.)
Es ist ziemlich einfach zu wissen, wie reaktionsschnell das Thema Ihrer Website ist. Öffnen Sie es einfach auf verschiedenen Größen von Computermonitoren und Mobiltelefonbildschirmen. Wenn Sie Ihre Website in Ordnung sehen und der gesamte Inhalt lesbar ist, reagiert Ihre Website. Wenn Sie keine anderen Geräte zum Testen Ihrer Website haben, können Sie auch den Online-Test für die Reaktionsfähigkeit verwenden.
Die allgemeine Antwort ist, dass ja, es ist sehr wichtig. Aber bevor Sie sich entscheiden, Ihre Website zu überarbeiten, um sie in eine responsive Website umzuwandeln, sollten Sie sich Ihre Web–Traffic-Daten ansehen. Versuchen Sie anhand dieser Daten herauszufinden, wie viel Traffic Ihre Website von mobilen Geräten erhält. Wenn Sie jedoch erheblichen Datenverkehr von Geräten wie Tablets / Mobiltelefonen erhalten, sollten Sie sehen, wie Ihre Website auf solchen Geräten aussieht.
Derzeit erhalten asiatische Websites durchschnittlich 27% ihres Traffics von mobilen Geräten. Dieser Prozentsatz wäre für Websites in Gebieten wie Europa und Amerika viel höher, da mobile Geräte dort relativ viel beliebter sind.
Sie werden überrascht sein, dass die Reaktionsfähigkeit nur mit CSS leicht erreicht werden kann. Mit den aktuellen CSS-Standards können Sie Ihre Website für verschiedene Bildschirmtypen stilisieren. Dies bedeutet, dass Sie separate CSS-Regeln für verschiedene Bildschirmgrößen haben können. Zum Beispiel:
@media screen und (max-width:320px) {
.primary-sidebar { Anzeige: none } // Seitenleiste ausblenden, wenn die Bildschirmgröße 320px oder weniger beträgt
}
@ medienbildschirm und (min-width:1024px) {
body { font-size: 12px } // Schriftgröße für Bildschirmgrößen größer als 1024px einstellen
}
Solche angepassten CSS-Regeln steuern das Aussehen Ihrer Website abhängig vom verfügbaren Speicherplatz auf dem Bildschirm.
Wenn Sie sich für Responsive Design für Ihre Website oder Ihren Blog entscheiden, können Sie folgende Vorteile erwarten:
- Der Datenverkehr auf Ihrer Website wird zunehmen, da Benutzer mobiler Geräte sie verwenden können und möglicherweise nach neuen Informationen suchen. Wenn mobile Benutzer den Inhalt einer Website nicht verwenden können, kommen sie nicht zurück!
- Wenn Sie Werbung auf Ihrer Website verwenden, um online Geld zu verdienen, können Ihre Einnahmen steigen, da eine responsive Website auch auf Mobilgeräten Anzeigen schalten kann.
- Sie müssen keine unterschiedlichen Versionen Ihrer Website oder Ihres Blogs für verschiedene Plattformen entwickeln. Dies spart auch Zeit bei der Wartung, da mehr Versionen mehr Wartungszeit erfordern.
- Wenn Sie mehrere Versionen für verschiedene Gerätetypen entwickeln, besteht die Gefahr, dass Google doppelte URLs indiziert. Unterschiedliche URLs, die auf denselben Inhalt verweisen, werden als doppelte URLs bezeichnet. Google setzt eine schwere Strafe auf doppelte URLs zu glauben, dass der Inhalt zu duplizieren. Responsive Website-Design schützt Sie vor einer solchen Strafe.
- Sie müssen sich keine Gedanken über die korrekte Agentenerkennung machen, da dieselbe Website für alle Browseragenten funktioniert.
- Das Teilen von URLs auf Social-Media-Websites wird einfacher, da jeder Seite Ihrer Website nur eine URL zugeordnet ist.
Es gibt keine wesentlichen Nachteile von Responsive Design, außer dass die zusätzlichen CSS-Regeln die Größe der CSS-Datei erhöhen können und dadurch die Downloadzeit erhöht wird. Aber mit schnellerem Internet, das überall auf der Welt verfügbar ist – ich glaube nicht, dass dies ein echtes Problem darstellt.
Im Responsive Design werden unterschiedliche Bilder nicht für unterschiedliche Bildschirmgrößen verwendet. Stattdessen wird dasselbe Bild über CSS an den Bildschirm des Geräts angepasst. Daher müssen mobile Geräte auch die gleichen hochauflösenden Bilder herunterladen, die auf Desktop-Verbindungen bereitgestellt werden.
Nun, wir wissen, dass das Responsive Design eine kleine zusätzliche Belastung für die mobile Internetverbindung darstellen kann, Es ist wichtig, dass Sie testen können, wie schnell Ihr aktuelles (responsives oder nicht responsives) Design funktioniert. Das beste Online-Tool, um dies zu testen, ist PageSpeed von Google. Dieses Tool kann Ihre Website sowohl auf Desktop- als auch auf Mobilgeräten bewerten.
Die meisten Websites von Google sind jetzt responsive. Zum Beispiel verwendet die Chromebook-Website Responsive Design. Aber die Google ist ein Pionierunternehmen von allem, was mit Internet zu tun hat. Da immer mehr andere Unternehmen die Bedeutung von Responsive Design erkennen, wechseln Websites zu diesem neuen Paradigma. Schauen Sie sich die Websites von Wendys Restaurantkette, der Inbound-Marketing-Firma HubSpot und der Zeitung Boston Globe an, um sich inspirieren zu lassen.
Ja, es gibt viele große Websites, die Responsive Design noch nicht angenommen haben. Beispiele sind CNN und BBC. Dies sind massive Websites und ein komplettes Redesign, um Reaktionsfähigkeit zu integrieren, kann erhebliche Investitionen erfordern. Das könnte der Grund sein, warum diese Medienhäuser noch nicht reagieren.
Nein, es ist nicht wirklich teuer. Wenn Sie eine Website / ein Blog besitzen, die / das auf WordPress basiert, stehen viele responsive Themes zur Verfügung. Das Standardthema von WordPress (dh TwentyThirteen) ist ebenfalls so konzipiert, dass es reagiert. Die meisten kostenlosen Themen, die von WordPress und Blogger angeboten werden, reagieren. Wenn Sie jedoch ein Thema eines Drittanbieters verwenden, müssen Sie dessen Reaktionsfähigkeit überprüfen.