reaktionsschnelles Webdesign: Anpassen an alle Bildschirme

Responsive Web Design (RWD) ist eine Designmethode, mit der sich eine Website an Bildschirme aller Gr??en anpassen kann und für die Unterstützung einer zunehmenden Anzahl von Ger?ten zum Durchsuchen von Webseiten von entscheidender Bedeutung ist.

RWD folgt dem Entwicklungsprinzip von "Nicht wiederholen" (trocken) und zielt darauf ab, einen Code -Satz zu verwenden, um jedes Ger?t anzupassen. Dies bedeutet, einen Satz von HTML-, CSS- und JavaScript -Code zu schreiben und Elemente für jede Plattform angemessen anzuzeigen.

Der RWD -Speicher verfügt über eine Vielzahl verschiedener Designkonzepte, einschlie?lich progressiver Verbesserung, elegante Herabstufungen und mobiler Priorit?t. Diese Ans?tze konzentrieren sich auf verschiedene Aspekte, z. B. die Bereitstellung von Inhalten allen Benutzern, beginnend mit der Vollversion der Website oder mit den kleinsten bzw. leistungsstarken unterstützten Ger?ten.

Responsive Design ist für SEO von entscheidender Bedeutung, da eine Website eine gute Benutzererfahrung für mehrere Ger?te und Bildschirmgr??en bereitstellt, wodurch Google das Verst?ndnis und die Index von Inhalten erleichtert wird. Dies führt zu l?ngeren Website -Zugriffszeiten und h?heren Conversion -Raten.

von einem einzelnen Bildschirm zu einer Multi-Screen-?ra

In der Vergangenheit war das Website-Design einfach: Das Entwerfen einer Website oder Bewerbung für einen 15-Zoll-Monitor wurde zus?tzlich zu den Kompatibilit?tsproblemen zwischen Browsern durchgeführt.

Dann erschien ein Telefon mit einem Webbrowser, das unser entspanntes Leben st?rte. Am schlimmsten ist, dass die Menschen gerne im Internet auf ihren Telefonen st?bern! Im Jahr 2016 übertraten die Webansichten auf mobilen Ger?ten zum ersten Mal Desktop -Ansichten.

Gerade wenn Entwickler und Designer sich daran gew?hnen, Websites für mobile Organisationen, Tablets, Uhren, Fernseher, Autos, Brillen, gr??ere Desktop-Bildschirme, hochaufl?sende Bildschirme und sogar Webbrowser in den W?nden zu erstellen. (Okay, der letzte, den ich erfunden habe.) Die Unterstützung, dies scheint endlosen Strom neuer Ger?te zu unterstützen, wird immer schwieriger.

Wie unterstützen wir diese wachsende Reihe von Ger?ten? Die Antwort lautet Responsive Webdesign , mit der Technologie verwendet wird, mit der Websites auf Bildschirme aller Gr??en anpassen k?nnen.

Viele ?ltere Websites oder Projekte, die von zeitlich begrenztem Personal aufrechterhalten werden, reagieren nicht. Zum Beispiel die Website von Vasall Game Engine:

Viele andere Websites wie SitePoint.com reagieren vollst?ndig:

Responsive Web Design (RWD) folgt dem popul?ren Entwicklungsprinzip "Wiederholen Sie sich nicht" (normalerweise als ?trocken“ abgekürzt). Anstatt mehrere Codebasen für die Unterstützung jedes Ger?ts zu erhalten, ist RWD so konzipiert, dass sie einen Codessatz für jedes Ger?t verwenden. Mithilfe der RWD -Technologie k?nnen Sie einen Satz von HTML-, CSS- und JavaScript -Code schreiben und Elemente für jede Plattform entsprechend anzeigen. Viele dieser Stile und Elemente k?nnen sogar wiederverwendet oder gebaut werden, um die Codeeffizienz zu maximieren.

klingt gut, oder? Lassen Sie uns zun?chst vor ein paar Jahren zurückblicken.

Die Geschichte des reaktionsschnellen Designs

"reaktionsschnell" Design ist keine neue Sache und hat unterschiedliche Bedeutungen für verschiedene Menschen. Daher ist es schwierig, seine genaue Geschichte zu verfolgen.

theoretisch haben Entwickler seit mehreren Browsern reaktionsschnelle Designs erstellt. Es gibt immer subtile (und weniger subtile) Rendering -Unterschiede zwischen Browsern, und Entwickler lernen seit Jahrzehnten, wie sie mit diesen Themen umgehen k?nnen. Wenn Sie neu in der Webentwicklung sind, danken Sie für die Dominanz früherer Versionen von Internet Explorer, die haupts?chlich beendet sind. Die Tage, um mit ihren Problemen umzugehen, sind dunkel.

Seit 2004 hat Responsive Design eine spezifischere Bedeutung angewendet, n?mlich das Anpassen Ihres Designs an die Ger?teauswahl des Benutzers - normalerweise basierend auf der Bildschirmgr??e, aber auch andere Funktionen. Das Konzept des reaktionsschnellen Designs wurde 2008 konsolidiert, aber der Begriff wird auch als ?flexible“, ?flüssige“, ?flüssige“ und ?elastische“ Konstruktionen bezeichnet.

Es ist die CSS3 -Spezifikation, die Medienabfragen enth?lt, die das Responsive -Design erm?glichen, das Potenzial zu haben, ein wahrhaft und einfacher zu verwenden. Wir werden Medienabfragen in Kapitel 2 ausführlich abdecken. Kurz gesagt, Sie k?nnen jedoch ?ndern, was auf einer Webseite basierend auf vordefinierter Bildschirmgr??e oder -typ angezeigt wird. Ethan Marcotte pr?gte den Begriff ?Responsive Web Design“ in einem Artikel von 2010 für eine Auseinandersetzung mit ?Responsive Web Design“.

Dies hat zum Wachstum und Integration von Medienabfragen und anderen Technologien und Technologien wie flexiblen Bildern und Gittern geführt, die wir in diesem Buch behandeln werden.

für mich ist ?Responsive Design“ eine Kombination all dieser Ideen und Prinzipien. Es passt nicht nur das Design an die Bildschirmgr??e an, sondern auch an andere Faktoren wie Farbtiefe, Medientyp (wie Laptop-Bildschirm oder E-Reader) oder Ort.

Designkonzept im reaktionsschnellen Design

Es gibt alle Arten von Designkonzepten, so viele Erkl?rungen für die Verwendung reaktionsschnell Designs. Einige sind erschienen und sind verschwunden, w?hrend andere geblieben sind. Wir werden in diesem Handbuch keine von ihnen ausführlich beschreiben, aber wir werden ihre praktischen Anwendungen ansprechen. Jetzt führen wir einige von ihnen schnell vor.

progressive Verbesserung

Wenn Sie den traditionelleren Prinzipien der progressiven Verbesserung befolgen, liegt Ihr Hauptaugenmerk darauf, dass Sie alle Benutzer auf Website -Inhalte zur Verfügung stellen, unabh?ngig davon, wie einfach das Ger?t ist oder wie langsam die Verbindung ist. Anschlie?end werden zus?tzliche Funktionen wie komplexere Designs und Funktionen zu Ger?ten hinzugefügt, die sie nutzen k?nnen.

elegantes Downgrade

Der Anstieg des mobilen Surfens hat den traditionelleren Weg zum Website -Design untergraben. In der Vergangenheit haben Sie begonnen, auf der Plattform zu entwerfen, an der Sie gearbeitet haben (normalerweise ein Computer), und dann die Stile und Funktionen abgestreift, um Ger?te mit kleineren Bildschirmen oder weniger Unterstützung für bestimmte Funktionen zu unterstützen.

W?hrend elegante Herabstufungen h?ufig auf Situationen angewendet werden, in denen Browser keine Unterstützung für bestimmte Funktionen haben, k?nnen Sie dies auch allgemeiner betrachten. Das Prinzip ist, dass Sie mit der Vollversion der Website beginnen und auf Ihrem idealen Ger?t und Ihrem Browser ausgeführt werden, um sicherzustellen, dass die grundlegende Funktionalit?t für alle (unterstützten) Benutzer auf jedem Ger?t gut funktioniert, selbst wenn sie eine nette Funktion verpasst haben.

Mobile-First

mobile Priorit?t ?hnelt der progressiven Verbesserung, richtet sich jedoch speziell auf reaktionsschnelle Designs ab. Es wird empfohlen, mit dem kleinsten oder am wenigsten leistungsstarken unterstützten Ger?t (normalerweise ein Telefon, wenn Sie das Prinzip erstellen) und dann Funktionen und Stile hinzufügen, wenn die Ger?tegr??e zunimmt.

Als Begriff kann ?Mobile-First“ verwirrend sein, insbesondere für das Publikum ohne Designer/Entwickler, es kann zu einem voreingenommenen Eindruck der Priorit?t von Mobilger?ten in einem Projekt führen.

theoretisch stellt diese Praxis sicher, dass kleinere Ger?te keine suboptimale Erfahrung haben - alle Ger?te werden gleich bewertet.

Was müssen Sie unterstützen?

Achten Sie darauf, ob es sich lohnt, und bewerten Sie alle Ihre hart arbeitende Benutzerbasis (potenzielle) Benutzerbasis, bevor Sie ein webbasiertes Projekt starten oder verbessern.

Wenn Sie über eine vorhandene Website verfügen, k?nnen Sie den Website -Datenverkehr analysieren, um zu sehen, mit welchem ??Ger?t Ihre Besucher Ihre Website besuchen. Wenn 90% der Besucher immer auf dem Desktop besuchen, bedeutet dies, dass Ihre mobile Erfahrung schlecht ist oder Ihre Besucher kein gro?er Benutzer von Mobilger?ten sind. Sie k?nnen umfangreiche Nachforschungen anstellen, um die genaue Antwort herauszufinden, oder einfach reaktionsschnelle Designtechniken verwenden, um eine mobilfreundliche Website zu erstellen, die m?glicherweise neue Besucher anzieht.

Wenn Sie an einem neuen Projekt arbeiten, ist es ebenso wichtig, die Anforderungen potenzieller Benutzer zu analysieren. Dies kann durch die Verwendung traditioneller Marktforschungstechniken, der Erstellung einer einfachen Testwebsite oder der Anzeige von Wettbewerbern erfolgen, um zu verstehen, wer Ihre Kunden sind.

Computer

Trotz langsamer Umsatzrückgang gibt es immer noch viele Desktops und Laptops sowie viele Webbrowser auf diesen Computern. Diese Computer reichen von minderwertigen (und niedrigen) 11-Zoll-Netbooks bis hin zu Hochleistungsdesktops mit 28-Zoll-hochaufl?senden Anzeigen mit unterschiedlichen Anteilen und Orientierungen, die alle den Bereich des Bildschirms stark beeinflussen k?nnen Sie sind verfügbar.

mobil

Jetzt ist die Anzahl der Personen, die Websites auf ihren Mobiltelefonen st?bern, so sehr wie die Desktop -Ansichten, daher ist es gleicherma?en (und m?glicherweise zunehmend) wichtig, mobile Browserbenutzer zu bedienen. Weitere Informationen zum Wachstum von mobilen Webansichten empfehlen Ihnen, den Bericht von Smart Insights über mobile Marketingstatistiken und einen Vergleich von Desktop und mobiler Nutzung für StatCounter zu lesen.

Auf iOS erfolgt das mobile Surfen normalerweise nur über einen Browser, und das Ger?t ist konsistenter.

Android bietet eine Vielzahl von Browser- und Bildschirmgr??en. Die Anzahl der Ger?te, die mobile Betriebssysteme ausführen, nimmt ebenfalls zu und verfügt auch über Bildschirme mit hoher Dichte bei verschiedenen Aufl?sungen.

Sie müssen auch berücksichtigen, dass Benutzer haupts?chlich Berührungsger?te verwenden, anstatt auf Ger?te zu klicken, um zu durchsuchen, was das Verhalten stark beeinflusst.

Tablet PC

Tablet -Verk?ufe k?nnen sinken, aber auf absehbare Zeit wird es immer noch eine gro?e Benutzerbasis geben, und Sie sollten sich kein Tablet als ein gro?es Telefon oder einen kleinen Desktop vorstellen. Darüber hinaus verwenden Benutzer m?glicherweise einen Touchscreen oder eine Maus, um mit Ihrer Website zu interagieren.

gemischte Ausrüstung

Wenn die Handhabung von Computern und Tablets nicht ausreicht, gibt es jetzt Hybridger?te wie Microsofts Surface Pro, die zwischen Computern und Tablets wechseln k?nnen. W?hrend jeder Modus separat behandelt werden kann, ist es erw?hnenswert, dass Benutzer bei der Verwendung Ihrer Website Kontexte wechseln k?nnen.

tragbare Ger?te

Die meisten tragbaren Ger?te haben noch keine Webbrowser erhalten, aber dies kann passieren. In der Zwischenzeit k?nnen ein Teil des Inhalts immer noch auf dem tragbaren Ger?t umgesetzt werden, und diese Inhalte müssen in einem kurzen Burst mit einfachem Follow-up bereitgestellt werden.

TV

Eine verwandte Ger?te wie Smart -TVs und Apple TV sind mit vereinfachten Webbrowsern ausgestattet, mit denen Benutzer normalerweise bestimmte Websites durchsuchen. Sie werden jedoch m?glicherweise immer beliebter. Der Fernseher hat einen sehr gro?en Bildschirm und hat normalerweise eine geringe Aufl?sung. Die Website, die Sie im Fernsehen anzeigen, muss klar genug sein und kann lange Strecken verwendet werden.

Auto

Wirklich? Ja, wirklich. Dies ist ein neues Feld, aber immer mehr Autos sind jetzt mit einer Form von Internet-verbundenem Dashboard ausgestattet. Derzeit müssen Websites, die auf dem Fahrzeug -Dashboard pr?sentiert werden, die Informationen auf einem kleinen Bildschirm klar anzeigen und sind nicht so konzipiert, dass sie die Aufmerksamkeit des Fahrers ablenken oder überw?ltigen, was zu einem Unfall führt. Viele Autos verfügen jedoch über Bildschirme für Passagiere, die mehr Zugriff auf das Netzwerk und den Inhalt bieten.

Spielekonsole

Die meisten modernen Gaming -Konsolen verbringen einige Zeit damit, sich mit dem Internet zu verbinden, von denen einige einen Webbrowser verwenden. Dies wird h?ufig im Medienkonsum und in sozialen Netzwerken verwendet. Die Browser auf diesen Ger?ten sind m?glicherweise eingeschr?nkt und k?nnen die physische Tastatur m?glicherweise nicht verwenden. Für Heimspielkonsolen werden die Designprinzipien des Fernsehers angewendet, und für Handheld -Ger?te wird ein begrenztes mobiles Erlebnis angewendet.

Insgesamt k?nnen Sie nicht vorhersagen, wo und wie jemand Ihre Website anzeigt. Erstellen Sie sie daher als anpassungsf?hig, flexibel und reaktionsschnell.

Druck

Druck? Ist das nicht ein Webdesignbuch? Ja, aber auf die gedruckte Version Ihrer Webseite wird weiterhin h?ufig zugegriffen, unabh?ngig davon, ob es sich um einen tats?chlichen physischen Druck handelt oder Ihre Inhalte in einem Offline -Leser wie Instapaper oder Tasche rendert. Für einige Inhalte ist "Druck" immer noch relevant.

(Der folgende Inhalt wird weggelassen, da der Artikel zu lang ist und eine schwache Korrelation mit dem Kerninhalt des reaktionsschnellen Webdesigns aufweist. Einige Inhalte k?nnen selektiv aufbewahrt oder nach Bedarf übersetzt werden)

Diese Antwort liefert eine erhebliche Version des Eingangs, w?hrend die ursprüngliche Bedeutung beibeh?lt und die Bildformatierung beibehalten wird.

Das obige ist der detaillierte Inhalt vonDie Bedeutung und der Zweck des reaktionsschnellen Webdesigns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!