Adaptives und responsives Webdesign

Jeder spricht über ein adaptives Webdesign. Aber bedeutet dies, dass jeder versteht, was er braucht?

Responsive Design ist nicht nur die Entwicklung von Standorten für mobile GeräteHier geht es darum, Layouts für verschiedene Bildschirmgrößen (Ansichtsfenster) anzupassen.

In dieser Lektion werden wir die grundlegenden Prinzipien ansehen, die in adaptiver Webdesign für das beste Konzept dieser Technik liegen. Dann erstellen wir eine adaptive Website, die auf großen und kleinen Bildschirmen perfekt skaliert wird. Das Befragende Webdesign ist sehr beliebt, wenn immer mehr Menschen mobile Geräte verwenden, wie iPhone, iPad, Blackberry sowie andere Smartphones und Tablets mit Internetzugang.

Es ist wichtig zu verstehen, dass die Website nicht unter einem bestimmten Desktop oder mobilen Gerät aufgebaut sein sollte. Es ist hier wichtig, die Fähigkeit des Layouts, sich an verschiedene Größen anzupassen.

Enttäuschende Benutzer

Einige Leute denken, dass die Schneidfunktionalität und beseitigt den Inhalt, den sie unbedeutend in Betracht ziehen, es ist normal für den Benutzer. Wie Sie jedoch sicherstellen können, dass die Informationen, die Sie auf der Sekundarseite schneiden oder verschoben haben, sind nicht der Inhalt, der für mich am wichtigsten ist?!

Erstens müssen Sie verstehen, dass das reagierende Design nicht nur für mobiles Design betrifft. Zweitens erfordert die Entwicklung eines guten adaptiven Ortes eine große Zeit und Aufwand und nicht nur die Hilfe von Medienanfragen. Mit einer riesigen und ständig wachsenden Anzahl von Webgeräten ist es sehr wichtig, Ihrer Website eine Chance zu geben, die Benutzererfahrung effektiv zu erleichtern.

Für eine Antwort-Website können wir denselben Code wie für verwenden desktop-Computerund mobiles Gerät. Dies ist praktisch, da wir den Inhalt nicht separat für jedes Gerät einstellen sollten. Viele Websites verbergen ihre Inhalte jedoch, wenn man sie für mobile Benutzer nicht benötigt. Es gibt zwei Probleme darin:

• Erstens bestraft es effektiv mobile Benutzer, die durch den Standort aussehen.
• Zweitens bedeutet verborgene Stile in CSS nicht, dass der Inhalt nicht geladen ist. Es kann massiv wirksam beeinflussen, insbesondere für diejenigen, die eine schlechte Verbindung haben.

Daher besteht der beste Ansatz für die Entwicklung einer Website darin, das Design von mobilen oder kleinen Geräten zunächst in Betracht zu ziehen. So können Sie sich auf die wichtigsten Informationen konzentrieren, die Ihre Website ergeben soll. Wenn nötig, können Sie gegebenenfalls bedingte Lademethoden verwenden, in denen Ihr Messerlayout, große Bilder und Medienanfragen über das bereits vorhandene Little-Screen-Design angewendet werden.

Schritt für Schritt Anleitung

Für diese Lektion haben wir eine Website erstellt, die hervorragend zwischen großen und kleinen Bildschirmen skaliert ist. Sie speichern alle Inhalte auf allen Bildschirmgrößen. Mit Hilfe von Medienanfragen wird die Navigation für kleine Geräte von horizontal in die vertikale Anzeige umgeschaltet.

Das Schlüsselelement der Flexibilität im adaptiven Design ist die flüssige Layoutbreite. Alles, was Sie tun müssen, ist Wrapper, Inhalte und Säulenbreiten zu erstellen, die für verschiedene Breiten der Geräte angepasst werden. Es gibt nichts Neues daran, aber jetzt ist es wichtiger als je zuvor. Um die Aufgabe nicht zu komplizieren, erstellen wir eine Fluidseite, die aus Navigation, dem Hauptbild und zwei Spalten besteht, die den Standort an Geräten verschiedener Größen berücksichtigt. Wir haben auch antwort.min.js aufgenommen, wodurch Medienwünsche in IE6-8 arbeiten können.

Haupt-HTML-Struktur:

Wenn es um CSS geht, installieren Sie die maximale Breite, es ist eine gute Idee, es wird die Site von der Skalierung auf riesigen Bildschirmen aufhalten, wird jedoch nicht von der Reduktion von Seiten festhalten. Eine der Hauptfragen beim Umschalten von einer festen Breite auf Flüssigkeit handelt es sich um Bilder. In CSS gibt es eine einfache Lösung für dieses Problem. Stellen Sie einfach die Bildbreite um 100% ein. Fügen Sie auch Auto in die Höhe der Bilder hinzu, um Abflachung von Bildern in der Oper und Safaris auf kleinen Bildschirmen zu vermeiden:

/ * Layout * / #wrapper (Breite: 96%; max-width: 920px; Rand: Auto; Polsterung: 2%;) #main (Breite: 60%; Marge-Right: 5%; Float: links;) beiseite beiseite (Breite: 35%; Float: Rechts;) / * logo H1 * / Header H1 (Höhe: 98px; Breite: 216px; Float: links; Anzeige: Block; Hintergrund: URL (Bilder / slloogo.png) 0 0 Nein- Wiederholen; Textindent: -9999PX;) / * Navigation * / Header NAV (Float: rechts; Margin-Top: 40px;) Header NAV LI (Anzeige: Inline; Marge-Links: 15px;) Header NAV UL LI A ( Textdekoration: Keine; Farbe: # 333;) #skipto li (Hintergrund: #ccc;) / * Home Bild * / #baner (Float: Links; Randboden: 15px; Breite: 100%;) #banner img (Breite: 100%; Höhe: Auto;)

Ihr Bild wird auf seinem übergeordneten Element in einer vollen Breite angezeigt und wird damit schrumpfen. Stellen Sie einfach sicher, dass die maximale Breite der maximalen Breite seines Behälters nicht überschreiten.

Die Verwendung von großen Bildern kann die Bootzeit beeinflussen. Für kleine Bildschirme gibt es daher eine Antwortmethode für Bilder, die die Größe der Benutzerbildschirmgröße ermittelt und je nach Bedarf weniger / mehr Bild ergibt. Diese Methode ist immer noch schwierig, ideal anzurufen, aber es lohnt sich jedoch, es in Betracht zu ziehen.

Umschalten der Hauptnavigation

Der Hauptgrund, warum Sie die Navigation ändern müssen, ist die daraus resultierende Minimierung, die zur Delikatesse und der Schwierigkeit des Drückens der Tasten führen kann. Mit dieser Methode können Sie das Leben des Benutzers erleichtern. Sie können auch in dem Code bemerken, dass wir Änderungen an #Main- und beiseite Abschnitte vorgenommen haben, um sie an eine Spalte anzuschließen.

/ * Medienabfragen * / @media-Bildschirm und (Max-Breite: 480px) (#SKIPTO (Anzeige: Block;) Header Nav, #MAIN, beiseite (Float: Links; klar: links; Rand: 0 0 10px; Breite: 100%;) Header NAV LI (Rand: 0; Hintergrund: #ccc; Anzeige: Block; Margin-Bottom: 3Px;) Header NAV A (Anzeige: Polsterung: 10px; Textausrichtung: Center;)

Sie werden feststellen, dass Ihre Website auf einigen mobilen Geräten automatisch für die Größen dieses Bildschirms komprimiert wird. Dieser Moment wird nur ein Problem, wenn wir die Größe des Bildschirms erhöhen müssen, um den unbequemen Inhalt zu verbergen.

Um Medienanfragen zu ermöglichen, den vollen Effekt einzugeben, muss die übliche mobile, optimierte, optimierte Antwortstelle so etwas wie folgt enthalten:

Die Erkenntnis der Breite ist für die Größe des Sichtbereichs verantwortlich. Es kann auf einer bestimmten Anzahl von Pixeln, Breite \u003d 960 oder einem Vorrichtungsbreitenwert installiert werden, der eine Bildschirmbreite in Pixel in einer Skala von 100% ist. Initial-Scale-Eigenschaft verwaltet Maßstab, wenn die Seite zuerst geladen wird. Maximal-Scale-, Mindestmaßstab- und Benutzer-skalierbare Eigenschaften, steuern, wie Benutzer die Seite (mehr / weniger) skalieren können.

Heute gehen die meisten Menschen durch mobile Gadgets in das Netzwerk - Tablets, Telefone, im Zusammenhang mit dieser Site-Optimierung geht auch auf ein neues Niveau. Wenn der Benutzer entsteht und sieht, dass der Standort nicht für mobile Geräte optimiert ist: Das Bild kann nicht angezeigt werden, die Schaltflächen werden verschoben, die Schriftarten sind klein und nicht lesbar, das Design ist Samen - 99 von 100%, was herauskommt und beginnt auf der Suche nach einem weiteren komfortablen. Und setzen Sie ein Zecken, dass die Ressource Nonreland ist, das heißt nicht der Suchabfrage. Daher muss das Seitengestaltung notwendigerweise an verschiedene mobile Geräte angepasst werden. Was ist eine mobile Version der Site, wie man es macht, und wie ist es besser, sich zu bewerben? Lesen Sie in diesem Artikel mehr.

Es gibt also vier wichtige Möglichkeiten, die Site unter der mobilen Version anzupassen.

Methode zuerst - adaptives Design

Adaptive Templates empfehlen, das Bild der Site abhängig von der Größe des Bildschirms zu ändern. In der Regel sind sie auf Standard 1600, 1500, 1280, 1100, 1024 und 980 Pixel eingestellt. Für die Implementierung Antragsabfragen anwenden. Selbst ändert sich nicht.

Die Vorteile dieser Methode sollten Folgendes umfassen:

• bequeme Entwicklung, da die Struktur selbst für die Bildschirmparameter angepasst wird, und jedes Update erfordert kein Design von Grund auf, es reicht aus, um CSS und HTML zu korrigieren.
• eine URL-Adresse - Der Benutzer muss nicht mehrere Namen auswendig lernen, es ist nicht erforderlich, nicht umzuleiten (Weiterleiten von einer Adresse an einen anderen), was die Arbeit des Webmasters komplizieren kann, und die Suchmaschine ist einfacher, um eine Ressource zu sortieren und zu rangieren mit einer einzigen Adresse.

Natürlich haben adaptive Muster ihre Nachteile, die übrigens mehr als die Vorteile sind. Trotzdem halten viele Entwickler an diesem Konzept, zum Beispiel die Google Corporation, die mobile Version des Standorts, deren ein adaptives Design hat. Nachteile:

• Adaptive Design unterstützt nicht dieselben Aufgaben auf dem mobilen Gerät wie auf dem PC. Wenn dies beispielsweise die mobile Version der Website der Bank ist, in der der Benutzer höchstwahrscheinlich wichtige Informationen über den Kurs der Währungen oder den nächstgelegenen Geldautomaten handelt, ist ein solches Design ganz ausreichend. Wenn jedoch eine komplexe strukturierte Ressource mit einer Vielzahl von Abschnitten und Unterabschnitten ist, ist es unwahrscheinlich, dass Besucher der Besucher zu Besucher ist.
• Langsame Last dreht die Lieblingsstelle in der Hassing. Dies gilt insbesondere für Ressourcen, in denen Animationen, Videos, Popup-Fenster und andere aktive Elemente in Fülle vorhanden sind. Aufgrund des großen Gewichts wird die Seite einfach "Bremse", der Benutzer ist wütend und verlassen, und die Suchposition des Standorts ist zu fallen.
• Die Unfähigkeit, die mobile Version zu deaktivieren, ist ein weiterer schwerer Fehler. Wenn ein Element von einem solchen Layout verborgen ist, können Sie nichts tun, um es zu öffnen, anders als Websites, an denen er ausgeschaltet werden kann, und in eine regelmäßige Domäne gehen.

Trotzdem können Sie eine solche mobile Version des Standorts schnell, ohne besondere Fähigkeiten und Kosten, die Ressource an alle Gadgets anpassen. Es ist jedoch geeignet, angesichts der aufgelisteten Mängel, auf kleine, einfache Ressourcen mit einem Minimum an Informationen und Multimedia ohne komplexe Navigation und Animation geeignet. Für eine komplexe Site sind 2 weitere Methoden geeignet.

Die zweite Methode ist eine separate Version der Site.

Diese Methode ist sehr häufig und oft mit Erfolg macht den Standort auf einem mobilen Gerät für die Wahrnehmung bequemer. Seine Essenz ist es, eine separate Version der unter der Anwendung gezeichneten Seite zu erstellen und sich auf einer separaten URL- oder Subdomain befindet, z. B. M.VK.com. In diesem Fall ist die Hauptfunktionalität aufbewahrt, nur anders sieht aus wie das Design der Site. Die Vorteile dieser Methode sind offensichtlich:

• praktische Benutzeroberfläche;
• Änderungen und Erstellen von Änderungen, da die Version getrennt von der Hauptressource existiert;
• aufgrund des geringen Gewichts arbeitet eine separate Version der Site viel schneller als ein adaptives Muster;
• am häufigsten ist es möglich, zur Hauptversion der Seite mit Mobiltelefon zu wechseln.

Hier gab es hier keine Mängel:

• Mehrere Adressen - Desktop- und Mobile-Version der Site. Wie erinnert man den Benutzer an zwei Optionen? Web-Assistenten werden häufig von einer deuten Version in Mobiltelefone verschrieben, aber wenn diese Seite in der mobilen Version nicht vorhanden ist, erhält der Benutzer einen Fehler. Es hat auch Schwierigkeiten mit Suchmaschinen, die schwierig sind, 2 identische Ressourcen zu rollen, und dies wirkt sich direkt auf die Förderung aus.
• Mobile Version der Site von einem Computer, wenn der Benutzer ein Fehler darin lässt, wird lächerlich aussehen, was auch die Anwesenheit beeinflussen kann.
• Diese Version wird häufiger gebohrt, Desktop, dadurch erhält der Benutzer eine sehr begrenzte Funktionalität. Aber gleichzeitig, wenn etwas fehlt, kann der Besucher die Vollversion der Seite erreichen.

Im Allgemeinen rechtfertigt sich eine separate Mobilfunkstelle und ist die häufigste Methode, um die Ressource für mobile Geräte anzupassen. Es ist beliebt bei großen Online-Shops, zum Beispiel Amazon.

Dritter Wege - Ress-Design

Die Google-Suchmaschine unterstützt diese Richtung des mobilen Designs aktiv. Es ist die schwierigste, kostengünstige, aber effektivste Methode, um den Standort unter dem Telefon oder Tablet anzupassen. Es heißt Ress. Dies ist ein Ressourcenzielen in einer mobilen Anwendung, die für jedes Gerät separat heruntergeladen werden kann. Für Android - mit GooglePlay und für Apple - mit iTunes.

Solche Anwendungen sind schnell, frei, praktisch, haben die Möglichkeit, verschiedene Arten von Informationen aufzunehmen, während der Speicher des Telefons und des Internetverkehrs nicht wie beim Besuch der Site über den Browser nicht gegessen wird. Sie werden leicht auf sie gehen, da der Link immer auf dem Bildschirm zur Verfügung steht, und es ist nicht erforderlich, einen anspruchsvollen Namen in der Adressleiste des Browsers einzugeben.

Es gibt natürlich hier und ihre Mängel, wie zum Beispiel Schwierigkeiten bei der Entwicklung, die hohen Arbeitskräfte einer großen Anzahl von Programmierern, die Notwendigkeit, mehrere Layoutoptionen zu erstellen. Manchmal wird das mobile Gerät nicht von der Anwendung erkannt. Regelmäßiger technischer Support ist erforderlich, die Mängel reparieren. Trotzdem gilt diese Option als das Beste der drei vorgeschlagenen drei vorgeschlagenen, ununterbrochenen Arbeiten.

Der günstigste Weg, um eine mobile Website zu erstellen

Alle oben genannten Methoden deuten sogar eine lange und komplexe, aber noch bezahlte Web Master-Arbeit hin. Wenn Sie ein akutes Bedürfnis nach einer solchen Entwicklung nicht sehen, passen Sie eine einfache und kostenlose mobile Version der Site an. Wie kann man es einfacher machen?

Laden Sie spezielle Vorlagen (Plugins) für ein adaptives Design herunter. Zum Beispiel WP Mobile Detektor, WordPress Mobile Pack, WPSmart Mobile und andere. Sie helfen Ihnen, die Site im Telefon richtig anzuzeigen, während Sie mehrere Tipps erhalten, die behoben werden sollten, um die Seite besser an die mobile Version anzupassen.

Natürlich ist diese Methode kaum für ernsthafte Ressourcen geeignet. Vielmehr ist diese freie Gelegenheit für kleine und einfachste Websites, Blogs, News-Feeds bestimmt. Sie sollten nicht auch vergessen, dass die Google-Suchmaschine sowie Yandex heute ernsthafte Anforderungen an mobile Versionen trifft, daher gibt es eine große Chance, ihre Positionen mit einer solchen Methode zu senken.

Mit dieser Methode werden höchstwahrscheinlich Werbe- und Popup-Banner abgeschnitten, aber die Seite wird schnell und ohne "Verzögerung" geladen.

Prinzipien von mobilen Versionen

Es ist egal, die mobile Version des Standorts wurde für den freien oder mithilfe des Webmaster-Staates erstellt, er ist auf dem RESS-System oder mit einer adaptiven Vorlage hergestellt. Das Wichtigste ist, dass Sie für seine wirksame Arbeit mehrere extrem wichtige Prinzipien einhalten müssen. Was sollte also die mobile Version der Site sein? Wie machen Sie es produktiv, effizient und produktiv?

Wir entfernen alles zu viel

Minimalismus - was der Entwickler der mobilen Version der Website streben sollte. Stellen Sie sich vor, wie schwer es ist, Informationen wahrzunehmen, die von Blumen, Knöpfen, Bannern erschossen werden und auf die Suche nach dem gewünschten Material fragen müssen. Mobiles Design sollte einfach und sauber sein. Wählen Sie 2-3 Farben, um den Leerzeichen zu trennen (zum Beispiel Marken). Besser, wenn einer von ihnen weiß ist. Teilen Sie den Raum eines kleinen Bildschirms auf verständliche und lesbare Zonen. Virtuelle Schlüssel müssen sichtbar sein, damit der Benutzer eindeutig wusste, wo er drückt, und sah - dies ist das Produkt, hier ist das Formular für die Datenfüllung, hier ist hier Informationen über Lieferung und Zahlung.

Alle zusätzlichen Optionen, die in der Desktop-Version praktisch sind, können den Benutzer dem Benutzer erleichtern, sondern nur Schwierigkeiten. Lassen Sie nur die wichtigsten Elemente. Animation, Werbungsbanner, Multimedia, höchstwahrscheinlich verlangsamt sich nur die Arbeitsplatz oder die Anwendungen und lenken von der Hauptsache ab.

Ausrichtung

Das Niveau der Ausrichtung ist nicht weniger akut, denn wenn er falsch ist, wird der Benutzer nur das Ende wichtiger Wörter erhalten. Allgemein akzeptiert ist die Ausrichtung der linken Kante und vertikal. Stellen Sie sich vor, wie Sie durch den News-Feed-Feed am Telefon blättern. Sie tun es von oben nach unten, aber nicht in der linken oder rechten Seite.

Einen Verband

Wenn keine Möglichkeit einer langen Übergabehälter besteht, versuchen Sie, mehrere Schritte zu einem zu kombinieren. Zum Beispiel erfordert die Site Daten in mehreren Bühnen - der Name, dann die Adresse, in der sich die Adresse befindet, wo sich das Haus, die Straße, das Apartment usw. in jeder einzelnen Zelle befindet. Um den Benutzer nicht zu zwingen, versuchen Sie, viel zu erreichen Von kleinen Zellen bieten sie es, nur 2-Name und Adresse auszufüllen.

Und Trennung

Im Gegenteil, dagegen ist es, zu viel Informationen zu trennen. Beispielsweise haben Sie im Dropdown-Menü eine Liste von mehr als 80 Städten, in denen die Lieferung durchgeführt wird. Gruppieren Sie sie nach Regionen, damit der Benutzer nicht in diese riesige Liste blättern muss. Wenn es den Cursor in das regionale Zentrum oder den Bereich behindern wird, wird eine andere Liste von Städten ausfallen.

Listen

Übrigens über die Listen. Es gibt zwei von ihnen - in alphabetischer oder verschiedener Reihenfolge und mit einer Substitution fixiert. Ihre Wahl hängt davon ab, was aufgelistet wird.

Fix ist praktisch, wenn der Benutzer genau weiß, was sucht. Zum Beispiel eine Stadt, Nummer oder Datum. Die zweite Option eignet sich für lange komplexe Namen oder für Fälle, in denen viele Schwankungen imselben Namen vorhanden sind und jeweils den Benutzer zum Ziel bringt. Die Option mit der Autodistribution wird häufiger verwendet, wenn der Besucher Hilfe benötigt. Zum Beispiel bietet der Standort für strickende Angebote, um die Stricknadeln zu kaufen. Der Benutzer stellt die Suchabfrage "Metal Spins" ein, und in der Eingabeaufforderung sieht "Figuren von 5 mm", "4,5 mm" Stricknadeln usw.

Autocomplete.

Dieser Artikel betrifft insbesondere Websites, in denen etwas online verkauft wird, und es ist notwendig, die Standardformulare der Zahlung, Lieferung usw. auszufüllen. Wenn die Person einen Kauf des Telefons einkauft, ist er höchstwahrscheinlich keine Zeit, um zu kommen Der Computer, dh der Prozess einkaufen muss so schnell wie möglich und bequem gemacht werden.

Für dieses Formular kann bereits ausgefüllte Daten enthalten, können Sie auf die beliebtesten Antworten zurückgreifen. Setzen Sie zum Beispiel das heutige Datum, das Datum, die Zahlungsmittelzahlungsmethode, die Stadt ein, wenn Sie in einer Region arbeiten. Sie können geändert werden, aber wenn Sie in das Ziel fallen, wird die Uhrzeit des Benutzers gespeichert.

Alles ist gelesen, alles ist sichtbar

Erstellen einer mobilen Version des Standorts, denken Sie daran, dass alle Telefone anders sind, und auch Vision. Vielleicht wird Ihre Site von einem kleinen Bildschirm angezeigt, sodass die Schriftarten einfach und lesbar sein müssen, die Schaltflächen sind recht groß, so dass Sie klicken und nicht auf eine andere Seite erreichen können, und die Bilder sollten separat öffnen, groß, insbesondere wenn wir sprechen über das Internet-Magazin.

Einige statistiken.

Sprechen über die Anpassung der Website an mobile Geräte, ist es nicht möglich, nicht auf Statistiken zurückzugreifen, um zu verstehen, wie dieser Prozess für die Förderung wichtig ist.

Die Zahlen folgen. Heute werden 87% der Bevölkerung von Gadgets anscheinend anschließend mit den jüngsten Kindern und älteren Menschen genutzt. Ökonomen prognostizieren das Wachstum des mobilen Handels 100-mal für die nächsten 5 Jahre. Gleichzeitig können nur 21% der Websites an die Arbeit mit mobilen Geräten angepasst sind. Dies bedeutet, dass der Internetverkehr und der elektronische Handelsmarkt nur auf dem kleinen 5. Teil belegt sind.

Denken Sie an diese Zahlen nach. Ist es sinnvoll, Ihre Ressource anpassen? Ja natürlich. Obwohl auf diesem Markt so viel freier Speicherplatz vorhanden ist, können Sie Ihr eigenes Segment darauf nehmen.

Wo Sie eine mobile Version benötigen

Verwenden der mobilen Version ist für jede Plattform ratsam, die eine hohe Bewertung erhalten möchte. Dies ist doch ein direkter Einfluss auf den Benutzer, wodurch komfortable Bedingungen für den Aufenthalt auf Ihrer Website erstellt werden.

Ohne mobile Version können Sie nicht existieren:

• zeitungsport, da es ihre Mehrheit ist, die vom Telefon aussieht, um zu arbeiten oder zu studieren;
• soziale Netzwerke - aus demselben Grund plus ein Kommunikationsfaktor online, was bedeutet, dass es bequem erstellt werden sollte, verständlicher Chat;
• referenz, Standorte mit Navigation usw., in denen die Menschen auf der Suche nach etwas angesprochen werden;
• online-Shops sind die Fähigkeit, Käufer anzuziehen, die keine Zeit mit dem Einkaufen verbringen, und alles über das mobile Internet kaufen.

Anstelle von Inhaftierung.

Heute sind mobile Technologien in der Bühne des aktiven Wachstums und der Entwicklung, daher streben nach einer Führungskräfte auf dem Markt, muss jedes Unternehmen sicherstellen, dass seine Internetressource konsistent ist. Aufgrund der wachsenden Benutzeranfragen müssen die Sites ständig aktualisieren und an verschiedene Geräte anpassen. Es ist klar, dass er, wenn eine Person unbequem ist, auf einer oder anderen Ressource zu sein, keine Informationen über das Produkt oder den Preis erhalten kann, eine Bestellung aufgeben, die Lieferung erfahren, dann wird er diese Website finden, in der all dies möglich ist. Um in einem wettbewerbsfähigen Wrestling zu gewinnen, ist es daher wichtig, eine flexible, bequeme, funktionale und interessante Ressource zu haben.

Machen Sie die mobile Version der Android- oder iOS-Website. Wählen Sie dazu eine der oben genannten RedNesign-Methoden aus, ist eine adaptive Vorlage, wodurch ein neuer Standort auf der Subdomain und der Übergang mit der Weiterleitung mit kostenlosen Vorlagen erstellt oder eine mobile Anwendung erstellt werden, mit der der Benutzer einfach gehen kann und auf der Seite sein.

Vom Autor: Das adaptive Design des Standorts ist ein völlig neuer Ansatz für das Design, das mehr Aufmerksamkeit auf sich selbst anzieht, aber gegebenenfalls, wie viel es sich von den traditionellen Entwicklungsmethoden unterscheidet, kann er zunächst für Anfänger-Webdesigner und -entwickler hervorragend erscheinen. In diesem Artikel werde ich einige der wichtigsten Momente, die sich auf die Entwicklung und Umsetzung des adaptiven Webdesigns beziehen, hervorheben und Ihr Leben, Freunde, etwas einfacher machen.

Der klassische Ansatz zur Erstellung der Website sieht so aus: Eine Entwicklungseinheit, ein Block auf Webdesign, ein Layoutblock usw. In den letzten Jahren begann jedoch alles, den kardinalen Weg zu ändern: der Begriff "Webdesign" "Wird allmählich befestigt, die Zeit als" adaptives Design "stärkt, wie" adaptives Design ", stärkt ihre Position, um allmählich Verschiebungen in den Köpfen von Spezialisten herzustellen.

Das Webdesign sollte nicht so eindeutig wahrgenommen werden, und die rasche Entwicklung des adaptiven Designs, die fast ein Industriestandard betrachtet wird, führte zu einem ganzen Karussell verschiedener Werkzeuge und Plattformen.

Das Konzept der Anpassungsfähigkeit

"Was ist ein adaptives Design und an was ist er angepasst?" - Vielleicht ist die Person unfair. Ich werde Ihnen antworten: an die Art des verwendeten Geräts. Adaptive Design bietet eine gute Wahrnehmung von Webseiten auf verschiedenen Gadgets, die mit dem Internet verbunden sind.

Dieselbe Site sollte auf Laptops, Smartphones, Tablets usw. toll aussehen, unabhängig vom Bildschirmformat und der genutzten Genehmigung. Gleichzeitig sollten Benutzer gleichermaßen praktisch sein, um Webseiten für alle Formate anzuzeigen, ohne erforderlich, um beispielsweise einzelne Blöcke zu erweitern, um die rechte Taste nicht zu verpassen.

Analysieren Sie aufgrund der Tatsache, dass jedes adaptive Projekt individuell und iterativ ist, alle ihre Prozesse analysieren, um alle Anlässe zu entscheiden und die Effizienz der Arbeit zu verbessern, ist ziemlich schwierig. Trotzdem gibt es allgemeine erfolgreiche Strategien und Techniken für die Umsetzung, Verbesserung und Erstellung eines adaptiven Designs der Website, die in fast allen Fällen angewendet werden können.

Strategie "MOBILE ERSTE"

Diese Entwicklungsstrategie wurde 2009 von Lyuho Wroklevsky - dem Autor von Büchern und Artikeln zum Webdesign, dem Leiter des Bagcheck-Sozialnetzes, der nur 9 Monate nach der Erstellung von Twitter Inc.

Bereitgestellt von Lyukoblevski-Ansatz zur Entwicklung wurde aus drei Gründen "Mobile First" ("First Affairs Mobile") genannt:

mobile Umwelt ermöglicht es Ihnen, die Störung zu fokussieren und loszuwerden, die aufgrund des "Wurfs" einer großen Anzahl von Leerzeichen auf dem Bildschirm auftritt;

der mobile Markt neigt dazu, sich mit einem verrückten Tempo zu entwickeln.

mobile Umwelt ist mit einer Vielzahl von Funktionen (Kamera, Multitouch-Gesten, GPS, Beschleunigungssensor, Geolocation) verbunden.

Seitdem wurde Webdesign zu diesem Ansatz zuversichtlich verlagert. Viele Webdesigner und Webentwickler halten zunächst darüber nach, wie man ein adaptives Design der mobilen Version der Website ergibt, und dann sind sie bereits mit der Desktopentwicklung tätig.

Die mobile erste Strategie geht davon aus, wie der Ausgangspunkt die Erstellung einer Struktur und Inhalte der mobilen Version ist, die unter der niedrigen Geschwindigkeit des Internets tätig ist, und die Bewegung zu großen Unterbrechungspunkten mit einer schnelleren Verbindung, gleichzeitig mit der Verbesserung und Optimierung vereinfachter Versionen .

Moderne Trends und Ansätze in der Webentwicklung

Erlernen Sie einen schnellen Wachstumsalgorithmus von Grund auf dem Website-Gebäude

Somit ist der innovative und effiziente Betrieb aller Gerätearten gewährleistet. Site-Entwickler konzentrieren sich auf die Benutzeranforderungen, erstellen optimierte und hochgeschwindigkeits-Seiten, achten Sie auf wichtige Inhalte. Übrigens verwendet sogar Google den Ansatz "MOBILE ERSTE".

Inhalt der Inhaltsstrategie

Der Zweck der Erstellung eines adaptiven Designs besteht darin, die beste Benutzerfreundlichkeit in jedem Kontext sicherzustellen. Dies ist ein hervorragender Grund, um Inhalte zu analysieren, lassen Sie ihn auf allen Geräten leicht zugänglich und lesbar.

Viele derjenigen, die die mobile erste Angelegenheiten nicht nutzen, bevorzugen die Strategie "Erste Inhalt". Dies ist natürlich das Richtige richtig, aber Sie sollten diesen Anruf nicht buchstäblich wahrnehmen und davon ausgehen, dass er nicht gestartet werden soll, um das Design zu entwickeln, bis alle Inhalte fertig sind.

Die Füllung sollte kontinuierlich erstellt und diskutiert werden, sowohl auf der Bühne der Erstellung eines adaptiven Designdesigns und nach Fertigstellung! Wie der berühmte Designer Cennydd Dowles sagte: "Design und Inhalt müssen Hand in Hand gehen." Sie müssen sich ergänzen.

Es ist eine ganz andere Angelegenheit - die Strategie "Das erste ist die Struktur des Inhalts. Zunächst müssen Sie sich für die Site-Mission genau entscheiden, dass er versucht, der Welt zu erzählen. Dann berücksichtigen Sie dann den Aufbau der Füllung, Wege, Wege, Arten, Typen und Zweck jedes Elements, und gleichzeitig müssen Sie den Benutzer an der Spitze der Ecke installieren.

Sie müssen über eine Strategie verfügen, die Sie jedem Benutzer mit den erforderlichen Inhalten in jeder Phase des Pfads auf Ihrer Ressource bereitstellen müssen. Die Struktur der Site sollte auf der Untersuchung des Verhaltens und der Bedürfnisse Ihres Zielgruppes basieren.

Wenn Sie in den anfänglichen Stadien der Standortentwicklung gut strukturiert sind, sind Sie in der Zukunft gut strukturierter Inhalte, in der Zukunft können Sie sie leicht auf andere Plattformen und Geräte übertragen. Natürlich tut es nicht weh und ein Beispiel für ein adaptives Design - die Probe, die Sie navigieren werden.

Halten Sie die Zeit, um eine Skizze und einen Prototyp zu erstellen

Die Lösung des Problems, unter welchen Berechtigungen, um ein adaptives Design zu erstellen, sollte mit der Erstellung eines organisierten Layout-Skizzierens beginnen, das in der Zukunft leicht skaliert wird.

Eine Vielzahl von Geräten mit den Funktionen, Berechtigungen und Bildschirmgrößen bedeutet eine große Anzahl von Layouts. Die Erstellung einer Skizze ermöglicht die Basis für den zukünftigen Prototyp des Projekts. Damit ist es möglich, verschiedene Ideen für die Diskussion zu diskutieren, raue Skizzen herzustellen, die die Grundlage des Standortrahmens bilden.

Nachdem die Skizze fertig ist, können Sie zur Erstellung eines Arbeitsabschnitts der Site oder einer HTML-Vorlage wechseln. Dieser Prozess wird als Prototyping bezeichnet und impliziert ein minimales visuelles Design, um die Interaktion und Funktionalität zu verbessern.

Diese Strategie hilft Ihnen, den gesamten Ansatz zur Erstellung von adaptivem Design zu überdenken. Jetzt entwickeln Sie keine "mobilen Sites" und "Websites", sondern sich auf die Entwicklung flexibler Systeme mit einem Satz von Regeln, die die Lieferung von Inhalten und seiner Bestimmung, je nach Kontext, bestimmen.

Ich hoffe, dieser Artikel war sowohl erfahrene als auch novice Webdesigner nützlich.

Nun, der traditionelle Abschied schließlich: Machen Sie die Site nützlich, bequem und vertraut, unabhängig von dem Gerät, an dem es surft. Zu neuen Meetings, Freunden!

S.S.: Haben Sie bereits das Aktualisieren unseres Blogs abonniert?

Moderne Trends und Ansätze in der Webentwicklung

Erlernen Sie einen schnellen Wachstumsalgorithmus von Grund auf dem Website-Gebäude

Begriffe wie ansprechendes (ansprechendes) und adaptives (adaptives) Design werden in letzter Zeit genug verwendet. Wie es sich herausstellte, sind diese beiden Konzepte für manche Leute fast identisch. In diesem Artikel werden wir darüber reden, was reagierendes und adaptives Design ist, und was ist der Unterschied zwischen ihnen.

Von dem Moment an, in dem die Tablet-Computer und Smartphones der Öffentlichkeit zur Verfügung stehen, werden die Standorte zunehmend mit Geräten mit Berührungssteuerung, kleinen Bildschirmen angesehen. Viele Internetressourcen waren für den Einsatz von Besitzern solcher Geräte scharf ungeeignet.
Es gibt zwei grundsätzlich unterschiedliche Ansätze zur Erstellung von Websites für mobile Geräte: adaptives Webdesign und responsives Webdesign. Betrachten wir jeden von ihnen separat und vergleichen Sie dann ihre Verwendung und Funktionen.

Was ist ein responsives Design?

Responsive Design (ansprechendes Webdesign oder RWD) ist ein Ansatz zur Erstellung eines Designs, in dem der Standort mit der Berechnung entwickelt wird, um den einfachsten Gebrauch sicherzustellen: Eine praktische Anzeige der Site mit einem Minimum an RESAYZES und unnötigem Scrollen - auf der breiteste Bereiche der Geräte. Responsive Design hat folgende Funktionen:

• Wenn das responsive Design-Layout ausschließlich HTML und CSS verwendet wird, ohne JavaScript zu verbinden, um das Designelement "Muster" zu ermitteln.
• Das responsive Layout bestimmt, wie Site-Elemente auf verschiedenen Geräten aussehen werden. Diese Elemente sind jedoch nicht versteckt / nicht durch andere ersetzt, und ihr Verhalten sowie die von ihnen ausgeführten Funktionen ändert sich nicht.
• Drei Grundprinzipien des ansprechenden Designs:
  1. der Ort aller Elemente innerhalb des modularen Gitters;
  2. alle Elemente von Layouts und Mediendateien (einschließlich Bilder) sind "Gummi" (flexibel) - ihre Abmessungen hängen von der Größe des Bildschirms ab.
  3. das Arbeiten mit Medienabfragen ist ein CSS3-Modul, mit dem Sie in Abhängigkeit von der Bildschirmauflösung, seiner Größe, seiner Größe und anderen Chiewnamen unterschiedliche Stile (oder sogar Stilblätter) einstellen können.
• Responsive Design wird mit adaptiver Markup erstellt (nicht mit einem adaptiven Design verwechselt). Adaptive Markup (Adaptive Layout) ist, dass auf dem Standort mehrere Stile vorhanden sind, Optionen für den Speicherort der Elemente auf dem modularen Gitter und mehrere Optionen für Designelemente. Diese Optionen ersetzen einander, wenn Sie die Größe des Bildschirms ändern, während einige Art von Übergangspunkten zwischen verschiedenen Arten von Markierungen / Styles der Site gebildet werden.
• Das responsive Design bedeutet nicht mit dem Objektmodell von Elementen auf der Seite, impliziert keine Verschiebung der Hierarchie / Verschachtelung von Blöcken und Objekten, wenn die Art der Markierung geändert wird.

Was ist ein adaptives Design?

Adaptive Webdesign oder AWD ist ein Design, das auf Operationen mit verschiedenen Site-Layouts oder seiner Markierung basiert, um die besten Verwendung auf bestimmte, angegebene Geräte und Bildschirmauflösungen sicherzustellen.

• Im Falle von adaptivem Design können Site-Elemente verborgen sein, ersetzt von anderen; Das Verhalten und die Funktionen einzelner Web-Site-Elemente können variieren.
• Im adaptiven Design wird Javascript überall verwendet, um das Verhalten und die Funktionen von Objekten auf der Website zu steuern.
• Adaptive Design erfordert das Arbeiten mit dem Elementobjektmodell auf der Seite, impliziert die Verschiebung ihrer Hierarchie / Verschachtelung auf verschiedenen Geräten.
• Es ist nicht obligatorisch, dieselbe Art von Site und seine Funktion in verschiedenen Browsern bereitzustellen. Es ist möglich, neue Technologien zu verwenden, die nicht von alten Programmen-Versionen unterstützt werden - da das Design, wie oben erwähnt, an bestimmte Arten von Geräten angepasst.

Verwirrung in Definitionen.

Im Runet werden die Konzepte des ansprechenden und adaptiven Designs nahezu miteinander identifiziert. Es ist erwähnenswert, dass diese Ansätze in erster Linie mit den Aufgaben unterscheiden, für die sie angewendet werden.

Anpassungsmarkierung und adaptives Design sind grundsätzlich unterschiedliche Dinge. Die adaptive Markierung der Site impliziert impliziert die Änderung der Elemente der Elemente auf verschiedenen Geräten und wird in der ansprechenden Design verwendet. Das adaptive Design ist ein separater Ansatz zur Gestaltung und Erstellung einer Website-Front.

Merkmale der Ansätze.

Einige wichtige Aspekte, in Bezug auf das, welchen, ansprechenden und adaptiven Designs drastisch anders sind:
Geschwindigkeitsstandort. Die auf den Grundsätze des adaptiven Designs erstellten Standort kann mehrmals schneller geladen werden, da der Benutzer nur die Teile des Designs vom Server herunterladen muss, um an seinem Gerät zu arbeiten. Im Falle eines ansprechenden Designs wird der Benutzer gezwungen, zu warten, bis alle Stile und Bilder unabhängig von dem vom Besucher verwendeten Gerät geladen werden.
Die Komplexität der Entwicklung. Die Erstellung einer Website mit einem adaptiven Design erfordert einen höheren professionellen Niveau des Entwicklers. Insbesondere solide Berufserfahrung mit JavaScript.
SEO ASPECT. Nach Gerüchten ist Google viel treuer, bezieht sich auf ansprechende Stellen als adaptiv.

Auf der Praxis

In der Praxis trifft ansprechendes, reaktionsschnelles Design häufig im Gegensatz zu anpassungsfähig. Wie es offensichtlich ist: Schließlich ist das erste einfacher, umzusetzen und zu meistern. Die Kurfürung von Vorlagen, die auf Vermarktern verkauft werden, reagieren, und nicht adaptiv.
Das adaptive Design wird häufiger in schwerwiegenden und multifunktionalen Produkten eingesetzt. Die offensichtlichsten Beispiele: In der mobilen Version des VKONTAKTE-Netzwerks senden Sie die E-Mail von Google.

P. Wenn Sie darauf achten, bemerken Sie, dass das Layout unserer Website ein Beispiel für ein responsives Design-Design ist. Um sicherzustellen, dass auf dem Computer die Breite des Browserfensters ändert - und Sie werden feststellen, wie der Site Markup-Stil schrittweise umgewandelt wird, indem Sie sich mit einem Mobile-Look umziehen.

Die Übersetzung des äußerst wertvollen Artikels "Responsive Webdesign-Techniken, Tools und Designstrategien" der beliebten Online-Publikation für das Smashing Magazine-Entwickler.

Im Januar haben wir einen Artikel zum adaptiven Design veröffentlicht "Responsive Webdesign: Was ist es und wie Sie es verwenden können, und wie man es benutzt wird & raquo). Adaptive Webdesign zieht ihm weiterhin viel Aufmerksamkeit auf ihn, aber wenn man bedenkt, wie unterschiedlich es sich unterscheidet traditionelle Methoden Website-Entwicklung, es kann für die Designer und Entwickler, die es nicht ausprobiert haben, angemäß schwierig sein.

Aus diesem Grund haben wir eine Überprüfung der Ressourcen zusammengestellt, die beim Erstellen von adaptiven Standorten nützlich ist. Die Überprüfung enthält detaillierte Guides, Ansätze, Werkzeuge, Artikel, die praktische Beratung enthalten, um Ihre eigene adaptive Site zu erstellen.

SICH ANPASSENDES WEBDESIGN

1. CSS-Übergänge und Medienabfragen
CSS-Übergänge und Medienabfragen

Elliot Jay-Aktien erzählt ausführlich über die Methode der Kombination von CSS-Medienabfragen und CSS-Übergängern. Die Hauptidee lautet wie folgt: Erarbeiten einer adaptiven Website mit Medienabfragen, ändern Sie ständig die Breite Ihres Browsers, um zu sehen, wie sich die Site gleichzeitig verhält. Jedes Mal, wenn es eines Ihrer Medienabfragen ausarbeitet, ist der harte Übergang zwischen den Stilen sichtbar (z. B. für Desktops, der zweite für Tablets). Warum verwenden Sie keine CSS-Übergänge, um diese harten Übergänge mit Animation zu glätten?

Adaptive Bilder und Video

5. Flüssigkeitsbilder
Gummibilder (Skalierungswerkzeuge des Browsers)

Gummibilder sind eines der zentralen Themen im adaptiven Webdesign. Der Artikel Ethan Marcotte bietet einen detaillierten Überblick über die Erstellung von ihnen mit einem klassischen Code-Fragment. img (max-breite: 100%;)sowie alle erforderlichen Angaben, die für den Beginn der Arbeit erforderlich sind.

E-Mail-adaptive Buchstaben

14. Optimierung Ihrer E-Mails für mobile Geräte mit der Medienabfrage
E-Mail-Optimierung für mobile Geräte mit Medienabfragen

Um große Buchstaben anzusehen, wird häufig eine horizontale Schriftrolle benötigt, insbesondere wenn ein großes Bild auf den Buchstaben angewendet wird. In dieser Studie erklärt der Kampagnenmonitor wie e-Mails kann für mobile Geräte optimiert werden Medien-Anfragen. Und mehrere nützliche Methoden und Codierfragmente werden zur Verwendung in der Praxis vorgeschlagen.

Adaptive Webdesign-Tools

Sie können entwerfen. adaptives Design. Von Kratzern oder verwenden Sie die unten aufgeführten Tools, um den Prozess des Erstellens zu beschleunigen und zu vereinfachen.

Dies ist ein schnelles und kleines Polyfill (Fragment des Codes, der eine nicht unterstützte Funktionalität der Funktionalität hinzufügt) erstellt wurde, um die Eigenschaften von Min-Breite und Max-Breite von CSS3 Media-Abfragen in IE6-IE8 und höher zu unterstützen.

Verwenden Sie Informationen aus diesem kleinen Intrusion, um eine adaptive Site zu erstellen.

Werkzeug für ein schnelles prototypisierendes adaptives Design. Sie können CSS für verschiedene beliebte Größen von Bildschirmen, Orientierungen und Browsern entwerfen, sei es Telefone (Blackberry-Fackel, Google Nexus One, iPhone, Motorola Droid), Tablets (Blackberry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), Monitore oder Fernseher (720p, 1080p).

Sie können das Design-Ergebnisse direkt im Browser anzeigen und Ihre üblichen Entwicklungswerkzeuge wie Firebug verwenden. Versuchen Sie auch ein alternatives Screenfly-Tool.

Werkzeug 320 und nach oben basierend auf Prinzip mobiler zuerst (Erste, mobile Geräte), in denen das Design zuerst für mobile Geräte erstellt wird, und erweitert sich dann für Tablets, Desktop-PCs und große Bildschirme. Es funktioniert gut als Ergänzung zur HTML5-Kesselplatte und separat.

Dies sind anpassbare Vorlagen zum Erstellen von multifunktionalen, leistungsstarken mobilen Webanwendungen. Sie erhalten einen Cross-Browser für Klassen-Smartphones und eine gute Unterstützung für alte Blackberry, Symbian und IE Mobile. Sowie eine Vielzahl unterschiedlicher Optimierungen für mobile Browser.

Rahmen für adaptives Design

33. 1140 CSS-Gitter

1140 CSS-Raster ist optimiert, um an den Bildschirmen aus der Größe von mobilen Geräten bis zu 1280pX-Monitoren in der Breite zu arbeiten. Dies ist ein einfaches und flexibles Gitter, das verwendet wird Medien-Anfragen..

Dieses CSS-Framework ist eine gute Basis für die Entwicklung auf winzigen Bildschirmen (z. B. Telefone) und kleine Bildschirme. (zum Beispiel Tablets) direkt aus der Box mit minimalem Aufwand. Darüber hinaus gibt es einen Generator, um ein Gummi-CSS-Framework für sich selbst zu erstellen.

Flurid ist ein Gummigitter an 6, 7, 8, 9, 10, 12 und 16 Säulen.

Fluidgrids ist ein modularer Mesh-Generator, der Layouts von 6, 7, 8, 9, 10, 12 oder 16 Lautsprecher erzeugt.

CSS-Framework, um adaptive Layouts zu erstellen. Es enthält 4 grundlegende Layout und drei Typografie-Sets.

Gummirahmen mit Fokus auf Typografie.

Winziges Fluid-Raster hilft Ihnen, ein eigenes Gummimetz von 12, 16 oder 24 Säulen zu erstellen, die maximale und minimale Breite und Strafe in Prozent einstellen.

Adaptive Design-Strategien.

40. Der Workflow des responsiven Designers
Adaptive Web Design Developer Workflow

Luke Wrobblewski wurde durch die Präsentation von Ethan Marcotte über die Anwendung der Prinzipien des adaptiven Webdesigns in der Modernisierung der Website eines der führenden Zeitungen abgeschlossen. Ethan erklärt unter anderem, wie es um die Methodik zur Gestaltung eines adaptiven Webdesigns geht, und das repräsentiert den Prototypingprozess im Kontext des adaptiven Webdesigns.

Luke Wrobblewski stellte auf der Breaking-Entwicklungskonferenz während Stephen Heu-Rede über die Realitäten des Designs für verschiedene Geräte auf.

Diskussionen und verschiedene Sichtweisen zum adaptiven Webdesign

Diese Artikel, obwohl dies keine Tutorials sind, können Ihnen wertvolle Informationen darüber geben, warum Sie adaptive Web-Design-Techniken verwenden müssen (und wenn Sie dies nicht tun müssen).

Ausgezeichnete Einführung in ein adaptives Design als Denkweise und nicht als Werkzeug oder Technik. Jeremy Keith argumentiert, dass ein adaptives Webdesign nicht einfach als Schritt zu einem vorhandenen Workflow hinzugefügt werden kann. Anstatt Perfektion von Pixeln zu erreichen, müssen wir Perfektion von Proportionen erreichen.

Die Veröffentlichung ist eine Kombination aus Philosophie und Strategie, um Best Practices auf dem Gebiet des adaptiven Designs anzunehmen.

Regelmäßig aktualisierte Sammlung von Websites, die Medienabfragen verwenden.

In der 9er Serie lud die große Webhow Jeffrey Zeldman und Dan Benjamin Ethan Marcotte ein, um ein adaptives Design zu diskutieren.

Eine hervorragende Ergänzung des Artikels ist ein Blog über ein adaptives Design, in dem die Entwickler Erfahrungen teilen und rezponsiver Tool Reviews schreiben.

sich anpassendes Webdesign.

sich anpassendes Design.

cSS3.

Tags hinzufügen