Adaptives Website-Design ist ein praktisches System, um dieselbe Website auf verschiedenen Arten von Geräten online anzuzeigen. Einfach ausgedrückt ist dies die Möglichkeit, eine Webseite auf einem Laptop, Smartphone und anderen Geräten anzuzeigen.
Web-Reaktionsfähigkeit ist zu einer Notwendigkeit geworden, seit Menschen internetfähige Geräte in verschiedenen Formaten haben. Unternehmen, Online-Shops und sogar nur informative Websites bemühen sich, ihr Publikum zufrieden zu stellen, indem sie sich auf jede erdenkliche Weise daran anpassen. Responsive Design löst das Komfortproblem und ist daher ein unverzichtbares Arbeitselement.
Eigenschaften von Responsive Webdesign
Der Gest altungskomfort wird durch mehrere Hauptkriterien charakterisiert.
- Größe. Responsives Website-Design sollte geringfügige Unterschiede aufweisen, wenn die Seite auf verschiedenen Geräten angezeigt wird, sodass die Größen von Bildern, Text und anderen angezeigten Elementen der Größe der Geräte selbst entsprechen sollten. Dazu passen Webentwickler das Design so an, dass es mehrere Ansichtsversionen hat.
- Inh altsanpassung. Material, das die Seite füllt (Bilder, Videosund andere Multimedia-Elemente) müssen ebenfalls den geforderten Bildschirmauflösungen entsprechen, ohne dass die Darstellungsqualität darunter leidet.
- Designflexibilität. Einbeziehung von Elementen in die Entwicklung, mit denen Sie das Design der Website schnell anpassen können, wenn Sie die angezeigte Webseite ändern. Beispielsweise scrollt der Benutzer die Seite nach oben und unten, navigiert durch verschiedene Abschnitte oder ändert die Bildschirmposition von vertikal zu horizontal und umgekehrt.
- Elemente nach Gerät vereinfachen, um die Benutzerfreundlichkeit zu verbessern.
- Unwichtige Blöcke auf kleineren Bildschirmen ausblenden.
Grundlagen
Das Erstellen von Websites hat definitiv etwas mit Programmiersprachen zu tun, weil man einfach nicht darauf verzichten kann. Mittels HTML und CSS erkennt der Browser die Zusammensetzung und Anordnung von Objekten (Texte, Bilder, Videos) - so entsteht die Seite.
CSS ist verantwortlich für Farbe, Stile, Größen, Schriftarten, Ausrichtungen, Polsterung, Hintergrundelemente, Formulare usw. HTML ist für den gesamten Inh alt und die Struktur der Website verantwortlich. Somit entsteht eine Webressource im Aggregat der beiden wichtigsten Beschreibungsmethoden.
CSS hingegen ist ein unverzichtbares Designtool. Hat eine große Auswahl an Funktionen, die HTML überlegen sind:
- Sorgt für Designkonsistenz über mehrere Seiten, Site-Erscheinungsbild und steuert die Anzeige von HTML-Dokumenten.
- Gibt Ihnen die Möglichkeit, gleichzeitig Design und Inh alt zu erstellen.
- Wendet mehrere Stile und die Fähigkeit anAnzeige auf verschiedenen Geräten.
- Trifft komplexe Designentscheidungen.
- Gekennzeichnet durch hohe Geschwindigkeit.
Um eine Website zu entwickeln, müssen Sie einige grundlegende Konzepte kennen.
Ein CSS-Selektor wird durch den Namen eines Stils gekennzeichnet, der Eigenschaften und Formatierungsoptionen definiert. Es teilt dem Browser mit, auf welches spezifische Element sich die Eigenschaften beziehen.
Ein Grundstück ist eine bauliche Einheit. Es definiert externe Parameter (Größe, Lage, Farbe, Form usw.) und wird in einem bestimmten Code ausgedrückt.
Es gibt eine Reihe von definierten CSS-Eigenschaften, die ein einzelnes Objekt in Aussehen und Position beschreiben.
Zusammen bilden diese Elemente das folgende Schema:
Selektor { eigenschaft1: wert; Eigenschaft2; Wert }.
Layoutgrößen und Auflösungen
Die Designentwicklung beginnt mit der Erstellung des Layouts in Photoshop oder anderen Grafikprogrammen. Der Einfachheit halber werden spezielle Markierungen des modularen Rasters in die Leinwand eingeführt, spezielle Einkerbungen werden beachtet. So zeigt der Webdesigner dem Layouter die Prinzipien des Aufbaus der zukünftigen Seite und die richtige Anordnung der Webelemente.
Responsive Webdesign Auflösungen und Größen für die wichtigsten Gerätetypen:
- Dieses Design hält sich an das Prinzip, die Arbeit mit mobiler Erlaubnis zu beginnen. Das Layout für das Smartphone wird in der Größe 460 × 960 px erstellt.
- Die Größe des Tablet-Layouts beträgt 768 × 1024.
- Die Notebook-Größe beträgt 1280 × 802.
- PC-Größe ist 1600 × 992.
In der mobilen Version der Websitesollte so vereinfacht wie möglich sein, während alle Hauptfunktionen erh alten bleiben. Wenn das Layout für einen Online-Shop vorbereitet wird, sollte es bei aller Vereinfachung der Verwendung eine Hauptbeschreibung, einen Produktkatalog, eine Bestelloption, einen Warenkorb usw. enth alten - alle notwendigen Elemente für ein vollwertiges Funktionieren, wie bei der Vollformatanzeige auf einem PC. Der Komfort der mobilen Version besteht darin, dass Sie hier zusätzliche Seiten vermeiden können, um beim Laden Zeit zu sparen.
In adaptiven Inh alten können Sie mithilfe von HTML-Code einige Elemente ausblenden, die nicht wirklich benötigt werden. Beispielsweise zeigt die Website bei hoher Auflösung eine Produktkarte mit Beschreibung, Preis, Lieferinformationen und der Möglichkeit, Produkte in den „Warenkorb“hinzuzufügen. Bei der mobilen Auflösung wird der Vorgang auf ein Foto, einen Preis und eine Sch altfläche zum Kaufen vereinfacht.
Mittlere und minimale Auflösungen für Responsive Design sollten die Lesbarkeit und Lesbarkeit durch den Benutzer berücksichtigen.
Layout
Der Zweck des adaptiven Design-Layouts besteht darin, ein flexibles Layout zu erstellen, oder wie man auch sagt: "Gummivorlage". Unterm Strich geht es nicht um einstellige Seitengrößen, sondern um die proportionale Komprimierbarkeit des Templates zur einfachen Betrachtung auf allen Geräten.
Es basiert hauptsächlich auf CSS. Während der Entwicklung werden Kontrollpunkte der Bildschirmabmessungen bestimmt. Somit wird die Breite der verbleibenden Objekte bestimmt. Dazu wird die Breite der Seite durch die CSS-Eigenschaft max-width festgelegt, abhängig von diesen Kriterien wird die Größe anderer Elemente prozentual ausgewählt. Zum Beispiel die Blockgröße auf dem MainDie Seite ist 600 Pixel groß und die Breite des Seitenleistenblocks (Site-Sidebar) beträgt 400 Pixel. Die Inh altsbreite beträgt 60 % und die Seitenleistenbreite 40 %.
Es gibt verschiedene Arten von responsiven Layouts. Je nach Ausstattung und Aufbau individuell ausgewählt.
Aufrufe:
- Ein Layouttyp, der es erlaubt, Blöcke umzubrechen, wenn die Bildschirmauflösung reduziert wird. Auf mehrsp altigen Seiten werden zusätzliche Blöcke an den unteren Bildschirmrand verschoben.
- Wenn für jede Berechtigung ein separates Muster ausgearbeitet wird. Diese Art von responsivem Design dauert länger, ist aber am lesbarsten.
- Ein einfacher Designtyp, der darauf abzielt, alle Elemente zu skalieren. Es ist nicht flexibel.
- Der Panel-Typ ist praktisch für den Einsatz in mobilen Anwendungen, wenn zusätzliche Funktionen erscheinen, wenn die Position des Bildschirms selbst geändert wird.
Responsive Ebenen zu erstellen ist nur ein Teil der Arbeit. Adaptive Bilder sind ein separater Fall, der seine eigenen Probleme und Methoden zu ihrer Lösung hat.
Einzelbild muss bei unterschiedlichen Bildschirmauflösungen deutlich angezeigt werden. Hier gibt es ein Problem - wie kann sichergestellt werden, dass das Bild unabhängig von der Änderung der Auflösung immer gleich bleibt. Die Eingabe eines einfachen CSS-Codes reicht in diesem Fall nicht aus.
Beispiel: img {max-width: 250px;} - hier sollten Sie eine Methode anwenden, bei der die Größe des Containers begrenzt ist, der das Bild enthält, und nicht das Bild selbst. Es sieht in etwa so aus: div img {max-width: 250px;}. Diese Methode löst das ProblemLayout kleiner Bilder, aber nicht geeignet für große Illustrationen.
Daher bevorzugen viele Entwickler die Verwendung von Javascript-Sprachen, mit denen Sie jedes Bild anpassen können, ohne den Server zu überlasten. Javascript bietet eine Vielzahl alternativer Skripte.
Vor- und Nachteile eines responsiven Layouts
Positive:
- Speichere die Position aller Elemente. Dies ist praktisch, wenn der Benutzer an die Vollversion der Website gewöhnt ist.
- Domänen und Adressen speichern.
- Vollständige Anpassung für andere Berechtigungsformate.
Negative:
- Funktionale Flexibilität geht verloren
- Jede informative Überladung ist mit einem langen Start einer Webressource verbunden, was viele Benutzer dazu zwingt, auf schnellere Optionen umzusteigen.
Website erstellen
Die Seitenstruktur ist in mehrere Abschnitte und Blöcke unterteilt. Traditionell besteht das Layout aus dem oberen Teil der Seite (Kopfzeile), Logo, Menü, Inh altsblock und dem letzten Teil der Seite (zum Beispiel detaillierte Kontaktinformationen). Sehen wir uns an, wie man aus einer einfachen Vorlage ein ansprechendes Website-Design erstellt.
Hilfs-Tags zum Schreiben:
- wrapper - Tag, der alle Template-Elemente kombiniert;
- Überschrift h1 - Logo;
- header - Kopfzeile für Menü und andere wichtige Elemente;
- Inh alt - Block;
- colLeft - Inh altsgröße;
- colRight - Seitenleiste (Seitensp alte);
- footer - der letzte Teil der Seite;
- media screen - setztgewünschte Auflösung.
Beim Schreiben einer Website können sich diese Elemente je nach Bedarf in einer anderen Reihenfolge bewegen. Beispielsweise kann das Menü bei hohen Auflösungen vertikal angezeigt werden. In der mobilen Version kann das Layout so aufgebaut werden, dass das Menü in horizontaler Position herausgleitet.
- viewport - ein Tag, mit dem Sie die Größe des Textes in einer kleineren Version des Designs speichern können. Es befindet sich zwischen den Tags.
- max-width - zur Optimierung der Website, um ein Dehnen bei Auflösungen über 1000 Pixel zu vermeiden.
Beim Implementieren des Layouts hilft die jQuery-Bibliothek sehr, wenn Sie den Stil und die Struktur der Blöcke ändern müssen.
Was ist der Unterschied zwischen responsivem und mobilem Design
Für ein vollständiges Verständnis betrachten Sie einige anschauliche Beispiele, da Verwechslungen zwischen diesen beiden Konzepten nicht ungewöhnlich sind.
Sie müssen verstehen, dass die mobile Version ein Analogon der primären Website mit einer Subdomain ist. Die Außendarstellung der Seite wiederholt den Stil und die Funktionalität vollständig, während ihre Struktur und ihr Inh alt von der Hauptversion abweichen können, da die Version auf die notwendigen Elemente reduziert ist.
Responsive Design ist optimal für alle Geräteauflösungen. Es ist skalierbar und wird unabhängig von den Betrachtungsbedingungen korrekt gerendert.
Dies sind zwei unterschiedliche Präsentationen der Seite, um die unermüdlich gestritten wird, welche die bessere ist. Es sei darauf hingewiesen, dass noch keine endgültige Entscheidung getroffen wurde. Jemand lobt dieses Design und weist auf den Modetrend und viele Vorteile hin. Die mobile Version hat auch einige Vorteile, die Responsive Design nicht hat. Daher sollten Sie zunächst die Grundbedürfnisse verstehen.
Vorteile
Inwiefern ist Responsive Design besser als Mobile?
Vielseitigkeit. In unserer Zeit, in der der Markt so rasant wächst, ist es einfach notwendig, Informationen auf andere Weise zu präsentieren und die Wünsche der Verbraucher zu erfüllen. Responsive Design löst dieses Problem.
Effektive Werbung in Suchmaschinen. Was nicht auf die Hauptvorteile eines adaptiven Geräts zurückgeführt werden kann. Suchmaschinen ziehen es vor, Benutzern ansprechende Websites bereitzustellen.
Benutzerfreundlichkeit. Responsive Design wird normalerweise in den besten Designlösungen entworfen, was ein schönes Geschenk für die visuelle Wahrnehmung der Benutzer ist.
Leichtigkeit und Einfachheit sowohl bei der Umsetzung des Projekts als auch bei seiner Nutzung.
Gute Konversionsraten. Da es beim adaptiven Design mehr Anzeigemöglichkeiten gibt, erhöht sich die Conversion selbst.
Wirtschaft. Es ist relativ billiger, als eine separate mobile Version zu erstellen und zu bewerben.
Vor- und Nachteile der mobilen Version
Die Erstellung eines ansprechenden Designs für Mobilgeräte erfordert Vielseitigkeit und Konsistenz. Zunächst empfiehlt es sich, die Leistungsbeschreibung detailliert zu formulieren, was natürlich hilft, unnötige Arbeit zu vermeiden und Zeit zu sparen, sowie die Eigenschaften des Servers zu berücksichtigen, auf dem die Site gehostet wird.
Responsive Design für Mobilgeräte hat bestimmte Vor- und Nachteile.
Vorteile:
- Wenn Sie eine fertige Website haben, müssen Sie für die mobile Version kein Design von Grund auf neu entwickeln. Es können nur wenige Änderungen vorgenommen werden, wodurch dieses Layout von unnötigen Funktionen befreit wird.
- Durch allerlei Vereinfachungen gilt die mobile Version beim Download als schneller.
- Der Nutzer sieht in allen Inh alten die wichtigste Information.
- Schnelle Implementierung. Es gibt Plugins, mit denen Sie die mobile Anpassung umsetzen können, auch wenn Sie Tags und Codes nicht kennen.
- Suchmaschinen bevorzugen adaptive Versionen, da deren Analyse weniger Zeit in Anspruch nimmt.
Nachteil:
- Möglicherweise stimmen nicht alle mobilen Versionen mit den Auflösungen mobiler Geräte überein. Die Site wird natürlich geöffnet, aber die Bildschirmauflösung stimmt nicht immer mit dem Layout überein. Manchmal kann ein gut gest altetes Smartphone-Design anders aussehen, wenn es als Tablet geöffnet wird.
- Mobile Versionen erfordern separate kostenpflichtige Domains.
- Es gibt einige kleinere Probleme beim Posten von Inh alten. Liegen mehrere Versionen gleichzeitig vor, sollten die Inh alte für alle Formate auf einmal angepasst werden. Das Einreichen von neuem Material auf der Hauptseite und das Kopieren auf die mobile Version kann als Diebstahl angesehen werden. Um dieses Problem zu vermeiden, müssen Sie möglicherweise die Verbindung von Ressourcen nachweisen.
Umsetzungsmethoden
Hauptimplementierungsmethoden:
- Nachdem das Design von Layouts und Layout erstellt wurde, wird es mit den erforderlichen Abmessungen geladenBetreiberseite und Hauptcode. Dies ist eine klassische Methode zur Erstellung mittlerer und kleiner Versionen (Tablets, Smartphones usw.).
- BootStrap ist ein einfacher und übersichtlicher Satz von Anpassungstools. Geeignet zum Erstellen von Versionen für Landing Pages und andere nicht sehr komplexe Webprojekte. Es bietet eine gute Gelegenheit, viele verschiedene Stile in Schnittstellenfunktionen anzuwenden.
- Responsive Grid System ist ein beliebter Satz vielseitiger Tools. Einfach anzuwenden und erfordert keine tiefen Kenntnisse. Enthält eine Vielzahl von Infografiken.
- GUMBY - Ein CSS-Framework mit flexibler Reaktionsfähigkeit und großartigen Tools.
- Cookies - ermöglicht es Ihnen, responsive Bilder zu implementieren. Begleitet automatisch vom Browser angeforderte Dateien.
- ExpressionEngine ist eine weitere Möglichkeit, responsive Bilder zu erstellen. Bestimmt, ob das Gerät mobil ist und Bilder auf die erforderliche Auflösung ändern kann.
- ProtoFluid - Bietet schnelles Prototyping. Für alle Arten von Geräten geeignet.
