Wie gestaltet man eine responsive Website? Vor- und Nachteile von Responsive Webdesign
|
Ich habe mich vor Kurzem mit Responsive Design beschäftigt und mich damit beschäftigt. Einige der Bilder stammen aus dem Internet. 1. Warum brauchen wir Responsive Webdesign? Aufgrund der weit verbreiteten Nutzung mobiler Geräte und der allmählichen Unterschiede in der Größe von PC-Monitoren können herkömmliche Webseiten die Browsing-Effekte mehrerer Geräte nicht mehr erfüllen. Beispielsweise weisen herkömmliche Seiten in großen Browsern große leere Bereiche auf und können in kleinen Browsern und auf mobilen Geräten nicht vollständig angezeigt werden, oder die Seite wird verkleinert, um der Größe des mobilen Geräts zu entsprechen, und kann nicht normal durchsucht werden. Dies wirkt sich auch auf die Klickpunkte aus. Viele Leute vergrößern die Seite vor dem Durchsuchen, sodass die gesamte Seite kontinuierlich gezogen werden muss, was dem Benutzer eine schlechte Erfahrung bietet. Hier sind die Punkte in Kürze: Verschiedene Bildschirmgrößen Verschiedene Betriebssysteme Verschiedene Zugangsgeräte Verschiedene Anforderungen
2. Was ist Responsive Webdesign? Eine Website ist mit mehreren Terminals kompatibel. Derselbe Code kann durch Geräteanpassung unterschiedliche Effekte zeigen, um verschiedenen Zugriffsgeräten gerecht zu werden. Priorisieren Sie immer den Inhalt. Mobilgeräte zuerst: unaufdringliches JS und schrittweise Verbesserung. Browserbasiert: schrittweise Verbesserung der Funktionen und Geräteerkennung.
3. Alternativen zum Responsive Design Entwickeln Sie eine völlig unabhängige mobile Version für die Website und entwickeln Sie eine mobile Anwendung (App). Dies bringt jedoch einige Mängel mit sich: Entwickeln Sie eine unabhängige Version der Webseite, die durch Geräteanpassung umgeleitet werden kann. Dies erfordert die Wartung mehrerer Seiten. Es ist für Seiten auf Homepage-Ebene geeignet, jedoch nicht für Inhaltsseiten zur Entwicklung mobiler Anwendungen. Die Entwicklungskosten sind hoch und es ist nicht förderlich für die Aufnahme in Suchmaschinen.4. Vor- und Nachteile von Responsive Webdesign Vorteile: Einheitlicher visueller und bedienbarer Erlebnisstil für mehrere Terminals. Geringe Entwicklungs-, Wartungs- und Betriebskosten. Starke Kompatibilität zwischen verschiedenen Geräten. Flexible Bedienung: Responsive Design ist für Seiten gedacht, und nur notwendige Teile der Seite können geändert werden. Benutzerfreundlich: Benutzer können immer mit der Website verbunden bleiben, z. B. bleibt die URL unverändert. Sammelfreigabe: Sammeln Sie alle Social-Sharing-Links über eine einzige URL-Adresse. Suchmaschinen optimieren: Kann die Verbindung zwischen mobilen Websites und Desktop-Websites herstellen. Keine Umleitung: Enthält kein User-Agent-Targeting.unzureichend: Kompatibilität: Bei Browsern mit niedrigeren Versionen kann es zu Inkompatibilitätsproblemen kommen. Mobiler Bandbreitenverkehr: Im Vergleich zur mobilen Version der angepassten Website ist der Verkehr etwas größer. Das Laden dauert eine gewisse Zeit: Beim Responsive Design müssen einige scheinbar unnötige HTML- und CSS-Elemente heruntergeladen werden. Außerdem wurden die Bilder nicht auf die richtige Größe für das jeweilige Gerät angepasst, was die Ladezeit verdoppelte. Suchmaschinenoptimierung: Beim Responsive Webdesign ist es nicht einfach, Schlüsselwörter für Suchmaschinen zu ermitteln. Daher neigen Mobilbenutzer im Vergleich zu normalen Desktopbenutzern dazu, andere Schlüsselwörter zu verwenden, und es ist schwieriger, Titel und andere Dinge zu ändern. Google-Ranking: Wenn eine responsive Website nur auf mobilen Inhalten basiert, ist es schwierig, das Google-Ranking der Website zu beeinflussen. Da Google solche Websites nicht unterstützt, wird Ihre Website nicht indiziert. Zeitaufwand: Die Entwicklung einer responsiven Website ist eine zeitaufwändige Aufgabe. Wenn Sie eine vorhandene Website in eine responsive Website umwandeln möchten, kann dies mehr Zeit in Anspruch nehmen. Wer eine responsive Website möchte, gestaltet das Layout am besten von Grund auf neu: Das Layout beim responsiven Webdesign ist überwiegend flüssig, weshalb Designer kaum Kontrolle über die Gestaltungsart haben. Und nun ist es an der Zeit, dass Designer vorab verschiedene „Nachbauten“ präsentieren. Designer versuchen, Wireframes anzuzeigen und Prototypen für mobile bzw. Desktop-Layouts zu entwerfen. Erst wenn beide Layouts verbessert sind, kann eine responsive Webdesign-Strategie wirklich umgesetzt werden.5. Der Unterschied zwischen responsiv und adaptiv Reaktionsfähige Layouts: Fluid Web Das Ändern des Layouts einer Webseite, um sie für ein besseres Benutzererlebnis neu anzuordnen, erschwert das TestenAdaptives Layout: Feste Haltepunkte Vollständig skalierbare Webseiten sind kostengünstig zu implementieren, leicht zu testen und durch ihr Design besser steuerbar.6. Anzeigeelemente des Bildschirms des mobilen Endgeräts Browserkernel für Mobilgeräte: Trident (IE), Gecko (FF), Presto (Opera, aufgegeben), Webkit (Safari, Chrome), Blink (Google) Größe mobiler Geräte: iPhone (980), iPad (1024), Android (980 bei einer Auflösung von 480 x 800), WinPhone (1024) usw. Auflösung mobiler Endgeräte:
7. Responsive Webdesign-Prozess Benutzerforschung und Schätzung der Gerätespezifikation
Planung und Test von Framework-Prototypen
Visuelles Design
Vorderbaukonstruktion
|
>>: Praxis und Analyse der geschichteten Verpackung von Docker-Images für Spring Boot (empfohlen)
Artikel empfehlen
Vue verwendet den Rich-Text-Editor vue-quill-editor und lädt Bilder auf den Server hoch
Inhaltsverzeichnis 1. Vorbereitung 2. Definieren ...
Praktische Methode zum Löschen einer Zeile in einer MySql-Tabelle
Zunächst müssen Sie bestimmen, welche Felder oder...
Lösen Sie das Problem, dass Docker-Container sofort nach dem Start beendet werden
Kürzlich habe ich mir angesehen, wie Docker es Co...
CSS implementiert die Funktion zum Ausblenden des Suchfelds (Animation in Vorwärts- und Rückwärtssequenz).
Das Platzieren eines Suchfelds in der oberen Menü...
Detaillierte Erläuterung der Vue-Übergangseffekte und Anwendungsbeispiele für Animationsübergänge
Inhaltsverzeichnis Übergangs-Hook-Funktion Benutz...
UTF-8- und GB2312-Webkodierung
In letzter Zeit haben mich viele Studenten zur Ko...
MySQL-Hochverfügbarkeitslösung MMM (MySQL Multi-Master-Replikationsmanager)
1. Einführung in MMM: MMM steht für Multi-Master ...
Detaillierte Erläuterung der Verwendung der integrierten Funktion „locate instr position find_in_set“ in der effizienten Fuzzy-Suche von MySQL
Es gibt die folgenden vier häufig verwendeten Met...
MySQL-Methode und Beispiel für langsame Abfragen
1. Einleitung Durch Aktivieren des Slow Query Log...
Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL
Beim Verknüpfen zweier Tabellen konnte kein Fremd...
Erfahren Sie, wie nginx hohe Leistung und Skalierbarkeit erreicht.
Die Gesamtarchitektur von NGINX ist durch eine Re...
Webentwicklungs-Tutorial: domänenübergreifende Lösung – detaillierte Erläuterung
Vorwort Dieser Artikel stellt hauptsächlich die d...
Lösen Sie das Problem der Verkleinerung des Mysql-Transaktionsprotokolls und der Protokolldateien, die zu groß zum Verkleinern sind
1. MS SQL SERVER 2005 --1. Löschen Sie das Protok...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.10 WinX64 (Win10)
MySQL ist eine relativ einfach zu verwendende rel...
Eine kurze Analyse von MySQL-Sperren und -Transaktionen
MySQL selbst wurde auf Basis des Dateisystems ent...