Responsive vs adaptive Design: Was ist besser für den Benutzer? Universal "Mobilisierung": Gehen Sie zum adaptiven Design

Hallo zusammen! Vor kurzem, untersuchte ich die Statistiken eines seiner Projekte, erkannte ich, dass es an der Zeit war, ein adaptives Design der Website zu erstellen, dh ein Design, das gut aussieht stationäre Computer und Laptops und auf mobile Geräteoh. Sehen Sie sich selbst an, die metrischen Hinweise.

Wie gefällt dir dieses Bild? Vielleicht ist der Prozentsatz des Mobilfunkverkehrs in einigen Themen weniger, in anderen, aber auf jeden Fall, die Besucher nicht bemerken, die Sie von einem Smartphone oder Tablet lesen, nicht mehr.

Wissen Sie, was Sie Ihre Website-Benutzer von mobilen Geräten sehen? Zum Glück, um es zu überprüfen, gibt es einen ausgezeichneten Service - responsinator.com

Hier ist alles einfach - Sie geben einfach die Site-Adresse ein und sehen, wie es auf mobilen Geräten aussieht. Lassen Sie uns den Blog zum Beispiel überprüfen, was wahrscheinlich ein Zeichen ist.

Alexandra Borisov hat ein wunderschönes Muster, sofort sichtbar - Geld wird in das Design und das Layout investiert und nicht klein. Von dem Telefon zur Lesung des Blogs ist jedoch sehr unangenehm, und ich werde nicht überrascht sein, wenn der Prozentsatz der Ausfälle zwischen Benutzern mobiler Geräte viel mehr als diejenigen, die die Website vom Computer besuchen.

Was zu tun ist? Ausgabe zwei: Überlassen Sie alles, wie es ist und angesehen, dass andere Projekte Ihre Suchmaschinen umgehen oder das Design Ihrer Website adaptiv machen.

Was ist ein adaptives Design?

Zuerst sah ich den Unterschied zwischen dem anpassenden und dem "Gummi-Layout" nicht, wenn sich die Größe der Blöcke in Abhängigkeit von der Bildschirmbreite ändert. Es gibt jedoch einen Unterschied.

Adaptive Design ist nicht leicht, um die Breite zu dehnen oder zu verkleinern, wobei er sich auf die Größe des Bildschirms anpasst, wodurch der Stil der Blöcke vollständig geändert wird.

Das einfachste Beispiel: Der Inhaltsbereich ist auf die gesamte Breite des Bildschirms und SIDBAR gestreckt oder wird nach unten übertragen oder verschwindet überhaupt von der Seite. Oder das Menü von der üblichen horizontalen Windel in die Dropdown-Liste.

So erstellen Sie ein adaptives Design für Ihre Website

Abhängig von Ihrem Budget- und Knowledge CSS / HTML können Optionen mehrere sein.

Bestellen Sie adaptives Layout bei Freelancer

Das richtigste, meiner Meinung nach die Option, und er ist das unbeliebteste. Weil das Vergnügen nicht billig ist. Und dennoch, wenn die Fonds zulassen, und es gibt keinen Wunsch, die Feinheiten des Layouts zu verstehen, ist es besser, ein Studio oder einen Freelancer zu finden, der Ihre Vorlage für mobile Geräte anpasst oder ein neues erstellt. Und wie Sie seine Arbeit an Geräten mit unterschiedlichen Berechtigungen überprüfen, wissen Sie bereits - responsinator.com, um zu helfen.

Finden Sie fertiges Design

IM in letzter Zeit Fast alle Designer versuchen, ihre Vorlagen für mobile Geräte anzupassen. Sie können das fertige Design beispielsweise hier durchsuchen, hier:

• www.templatemonster.com ist eine der beliebtesten Sammlungen bezahlter Vorlagen für verschiedene CMS und nur HTML-Sites.
• www.templatemo.com - viele kostenlose Versionen des modernen Designs.

Diese Option eignet sich für diejenigen, die kein exklusives Design jagen oder ihre Bearbeitungen in den Code machen können, um eine einzigartige Vorlage zu erstellen.

Verwenden Sie Framework.

Framework (Framework) - Sie können den Rahmen der Vorlage, der Hauptdateien und der Mesh-Blöcke sagen. Designer lieben sie, um die Arbeit und Zeiteinsparungen zu erleichtern, da das fertige "Fisch" -Muster erlaubt, keine Zeit auf der Routine zu verbringen. Wenn Sie mit Frameworks arbeiten können, erstellen Sie sie, um ein adaptives Design zu erstellen - eine großartige Lösung.

Eine große Liste an adaptiven Rahmenbedingungen für jeden Geschmack finden Sie auf Habré. Die meisten von ihnen sind jedoch ziemlich kompliziert im Gebrauch und schweren Volumen. Daher empfehlen diejenigen, die Minimalismus lieben, ich empfehle eine weitere Liste von leichten adaptiven Rahmenbedingungen aus unterhalb von Untereb.ru. Sehen Sie sich gleichzeitig den Blog an, es gibt viele nützliche "lecker" für Designer und Verse.

Machen Sie ein Layout selbst

Diese Methode für diejenigen, die keine einfachen Wege suchen und alles an sich selbst verstehen wollen. Um Ihre Vorlage adaptiv zu machen, müssen Sie im Wesentlichen zwei Dinge verwenden:

Ansichtsfenster Meta-Tag.
Dies bestimmt den Gerätetyp, aus dem der Besucher an die Site ging, und setze die korrekte Breite des Bildschirms ein. Kopieren Sie diesen Code einfach in Ihren Standortkopf.

@Media-Regel.
Dank, an den wir verschiedene Stile für dieselben Blöcke in unserer CSS-Datei verschreiben können. Es sieht aus wie das:

#Left (Breite: 600px; Float: links; Margin-Right: 10px;) #right (Breite: 400px; Float: rechts;) @media nur Bildschirm und (max-width: 1010px) (#Left, #right (Breite) : 98%; Float: Keine; Rand: 10px auto;))

In diesem Beispiel der Block #links. hat eine Breite von 600 Pixeln und befindet sich auf der linken Seite des Blocks #Recht 400 Pixelbreite. Wenn jedoch die Überwachungsauflösung weniger als 1010 Pixel beträgt, entfernen wir den Durchfluss um beide Blöcke und strecken sie auf 98% der Bildschirmbreite.

Und so müssen Sie die Regeln unter den nächsten Bildschirmengrößen registrieren:

• 320px Foriphone 3-5 in vertikaler Position
• 480px für iPhone 3-4 horizontale Position
• 568px für iPhone 5 Horizontale Position
• 384px für Smartphone in vertikaler Position
• 600px für smartphone horizontale Position
• 768px für iPad horizontale Position
• 1024px für iPad in vertikaler Position

Eine vollständige Liste der Genehmigungen finden Sie auf pssinginator.com oder im yandex.metric-Bericht für Ihre Website (Abschnitt Technologie / Anzeigeberechtigungen). In einem Wort sind diejenigen, die mit dem Layout der Websites vertraut sind, nicht schwierig, dieses Problem zu verstehen.

Weißt du, ich lebe selten Links zu bezahlten Kursen (weil ich nie empfehle, dass es nie benutzt wird), aber das ist wirklich das beste Trainingsmaterial des Layouts aller, den ich gewesen bin. Es ist dank Mikhail, dass die Vorlage meines Blogs jetzt nicht nur für verschiedene Bildschirmberechtigungen angepasst ist, es ist leichter als die vorherige Option geworden und ist besser optimiert suchmaschinen.

Wenn Sie übrigens einen Artikel von Mobiles lesen, schreiben Sie alles an Ort und Stelle, ist alles bequem? Und heute alles. Wenn Sie Fragen oder Ergänzungen haben - Willkommen in den Kommentaren, sind sie normalerweise für alle offen.

Adaptives Design der modernen Site Es ist einer der Hauptindikatoren seiner Qualität.

Es ist kein Geheimnis, dass der Anteil der Verwendung von mobilen Geräten zum Zugriff auf das Internet ständig zunimmt. Dieser Trend ist insbesondere sowohl für das Internet als auch für Runet charakteristisch.

Und wenn wir unsere Besucher, Leser und potenziellen Käufern nicht verlieren wollen, sollten Sie darauf achten, dass Ihre Website in mobilen Geräten von der Tablette an das Smartphone in mobilen Geräten lesbar sein kann.

Darüber hinaus sind die Suchmaschinen Rangstellen, die für mobile Geräte angepasst sind, treuer. Dies gilt insbesondere für Google PS, die solche Anforderungen an Websites direkt platziert.

Was ist ein adaptives Site-Design?

Die Bedeutung von adaptivem Design ist die Möglichkeit, an der Stelle an der Stelle an der Stelle an der Stelle auf dem Gelände auf dem Gelände an der Stelle auf dem Gelände auf dem Gelände aufzunehmen.

Die wichtigsten Kriterien für die Schätzung des Beendigungskomforts sind:

1. Zone anzeigen.
2. Inhaltsbreite.
3. Schriftgröße, Bilder, Windows für Video.
4. Aktive Elemente.

Mit anderen Worten, der Text sollte lesbar, Bilder und Videos sind deutlich sichtbar, Menüpunkte und Links sind spürbar, verfügbar und verständlich.

Wie kann ich Ihre Website adaptiv machen?

Um sicherzustellen, dass die Anpassungsfähigkeit der Website auf Geräten mit unterschiedlicher Bildschirmauflösung angezeigt wird, gibt es mehrere Möglichkeiten. Ihr Hauptsitz ist:

• Adaptive Website-Vorlage.
• Mobile Version der Site.
• Installation spezielle Anwendungen Auf dem Gerät des Benutzers.

Wenn Erfahrung zeigt, ist die optimalste Lösung zu erstellen adaptive Vorlage. Zwei weitere Methoden lösen dieses Problem auch, sind aber auf den ersten Weg merklich minderwertig.

Bei Verwendung der mobilen Version des Standorts ist die Anzahl der Arbeitskosten, Mittel und Zeit mit der Erstellung und Verfeinerung der adaptiven Vorlage vergleichbar.

Während des Betriebs werden jedoch die Aktionen hinzugefügt, um die Relevanz der mobilen Version des Standorts aufrechtzuerhalten, Synchronisation von Informationen mit der Hauptseite. Ja, und für CEO-Promotion fügt zusätzliche Fragen mit Doppelzusammenhängern usw. hinzu usw.

Die Vorteile der mobilen Version bestehen darin, dass alle unnötigen Elemente, Effekte, Werbung, Abonnements usw. entfernt werden. Die Site wird nicht nur korrekt auf mobilen Geräten angezeigt, sondern auch das Laden ist so schnell wie möglich. Dies ist der Hauptvorteil.
Solche Versionen ermöglichen sich große Portale, Standorte soziale Netzwerke, große Unternehmensstätten ...

Installieren der Anwendung auf mobile Geräte und hängt nicht von Ihnen ab. Erstens ist es nicht möglich, es auf einem beliebigen Gerät bereitzustellen. Zweitens erfordert es zusätzliches Wissen und Aktionen und nicht alle Benutzer übereinstimmen mit unnötigen Problemen.

Solche Anwendungen installieren normalerweise Benutzer, die dem Autor vertrauen und auf ihn auf ihn warten nützliche Informationen. Es ähnelt einem Abonnement per E-Mail.

Wir schließen zusammen: Erstellen eines adaptiven Designs für Ihre Website wird die profitabelste Lösung für eine kleine oder mittlere Seite sein.

Adaptive Site-Layout.

Um ein adaptives Design zu erstellen, müssen Sie auf Technologie zurückgreifen adaptives Layout.. Seine Essenz ist wie folgt:
Machen Sie ein Gummimuster

Das heißt, nicht dicht an die Breite der Seite zu werden, sondern auch relative Einheiten. Das heißt, machen Sie Ihre Vorlage im Verhältnis zum komprimierbaren, dh "Gummi".

Für diese Seite wird Breite festgelegt cSS-Eigenschaft Max-Breite anstelle der Breite und bereits relativ zu diesem Wert wird die Breite anderer Elemente in Prozent (%) ausgewählt.

Bestimmen Sie die Bildschirmbreite "Kontrollpunkte"

Entscheidet. kontrollpunkte (CT) Bildschirmbreite ist für die Planung der weiteren Aktionen erforderlich.

Beispielsweise.
Maximale Bildschirmbreite 1000 Pixel. Bildschirmbreiten-Tablette - 800 Pixel, Smartphone - 420 Pixel.

Diese Kontrollpunkte (CT) können unterschiedlich sein verschiedene Typen Standorte. Manchmal reicht man aus, zum Beispiel 600 Pixel, und die Qualität der Ansicht auf kleinere Berechtigungen wird von der "Gummiminess" der Vorlage bereitgestellt.

Bildschirmlayout-Planung für jeden CT

Gemäß diesen Kontrollpunkten ist der Speicherort einzelner Blöcke auf der Website, so dass sie korrekt auf mobilen Geräten reflektiert werden können.

Dazu müssen einige Blöcke, Sagebar zum Beispiel beispielsweise unter dem Hauptinhaltsblock stehen, und von Sekundärblöcken, wie Werbung, Schiebereglern, können sich auch Bildschirmschoner abgelehnt werden.

Sie können detailliertere Informationen zur Lösung solcher Probleme erhalten, indem Sie mit dem kostenlosen Kurs über das adaptive Design des WebFormMyelf-Teams vertraut sind.

Medienanfragen

Um die Kontrollpunkte festzulegen, müssen Sie Medienanfragen verwenden. Diese Richtlinien von CSS3-Standards dienen zur Verwaltung des Inhalts der Site-Seiten für verschiedene Bildschirmberechtigungen.
Es sieht aus wie diese Richtlinie wie folgt:

@Media nur Bildschirm und (Max-Breite: 520px)(Höhe: 80%; Anzeige: None;) .art-logo (Position: Fixed; oben: 10px;) .art-logo-text (Anzeige: None;) ...... ..... CSS-Betreiber .....)

Adaptive Blogging-Vorlage auf WordPress

Adaptive Vorlage für Ihren Blog auf WordPress kann auf verschiedene Arten bereitgestellt werden.

1. Installieren Sie das entsprechende Plugin.
2. Buy Ready Adaptive Template.
3. Passen Sie ein vorhandenes Muster unabhängig an oder bestellen Sie einen Dienst an einen Spezialisten.

Die Entscheidung, mit den Zeiten Schritt zu halten, begann ich auch mit der Vorbereitung auf die Anpassung meines Blogs. Über Anpassungs-Plugins auf WP im Internet viel genaue Information. Ich habe die Arbeit und Anforderungen der beliebten Plugins getroffen und entschieden, dass ihre Anwendung nicht die optimale Lösung für meinen Blog sein würde.

Kaufen Sie eine moderne adaptive Vorlage im Internet ist auch ganz einfach, es würde Geld geben. Es ist jedoch notwendig, dass Sie das Muster selbst mochten und alle Ihre Wünsche beantwortet haben.

Kurz gesagt, ich habe in der dritten Version angehalten und beschloss, meine Vorlage selbst anzupassen.

Adaptive Vorlage für WordPress unabhängig voneinander

Nachdem ich die Prinzipien der Anpassung des Designs für mobile Geräte gelesen hatte, begann ich fröhlich zu sein, aber ich hatte das Gefühl, dass mein Wissen über HTML, CSS, PHP, nicht genug war.

Und begann bereits dazu zu kauften, eine fertige Vorlage zu kaufen, erhielt aber in diesem Moment Informationen über den Verlauf von zwei Andrei Bernatsky und einen gehenden "WordPress-Master aus einem persönlichen Blog in die Premium-Vorlage". Einer der Blöcke dieses Kurs enthielt die Lektionen, um die fertige Vorlage für mobile Geräte anzupassen.

Der Preis des Kurses war vergleichbar mit dem Preis einer neuen modernen adaptiven Vorlage. Und ich beschloss, diesen Betrag für den Kauf eines Kurs auszugeben und anstelle eines fertigen Vorlagenwissens zu erhalten. Meiner Ansicht nach. Dass die Investition korrekt und vollständig gerechtfertigt war.

Google Service Site Download-Überprüfung für mobile und stationäre Geräte - https://developers.google.com/speed/pagsspeed/insights/
Hier geben wir Empfehlungen zu Ereignissen, um den Download Ihrer Website zu beschleunigen.

Ich wollte kurz mehrere Dienste beschreiben. Es kam aber auf einen intelligenten detaillierten Artikel und entschied sich nicht, sich nicht zu belasten, sondern einen Link dazu zu geben - http://habrahabr.ru/post/189726/.

Wenn Sie diese Publikation mögen, teilen Sie es mit Ihren Freunden auf sozialen Netzwerken.
Sie können einen Artikel durch Ihre Kommentare hinzufügen.

Internetnutzer Durchsuchen Sie Sites auf verschiedene Geräte mit Bildschirmen verschiedener Größen. Die Größe der Bildschirme ändert sich ständig, daher ist es wichtig, dass sich die Site an einen von ihnen anpasst. Es gibt zwei Hauptansätze, um Websites leicht anzupassen verschiedene Typen Geräte:

Responsive Design (RWD) — sich anpassendes Design - Site-Design mit bestimmten Eigenschaftenwerten, beispielsweise ein flexibles Mesh-Layout, mit dem ein Layout an verschiedenen Geräten funktioniert;

Adaptive Design (AWD) - Adaptive Design oder Dynamic Display - Design-Site mit Bedingungen, die sich je nach Gerät ändern, basierend auf mehreren Layouts der festen Breite.

1. Responsive Designtechniken

Die Philosophie des responsiven Webdesigns ist, dass der Standort unabhängig von der Bildschirmgröße von jedem Gerät bequem günstig war. Phrase sich anpassendes Design Ethan Marcotte wurde 2011 erfunden. Das Hauptmerkmal des responsiven Webdesigns ist auf das Mobile (Fluid) -maschenlayout, der automatisch darauf reagiert, die Größe des Bildschirms zu ändern, zu blasen oder wie ein Ballon zu verengt.

Sich anpassendes Design (deu Sich anpassendes Webdesign.) Kombiniert drei Techniken - flexibles Layout. Auf der Grundlage des Netzes, flexible Bilder und medienregister.

Flexibilitätslayout. Es basiert auf der Verwendung relativer Maßeinheiten anstelle von festen Pixelwerten, mit denen Sie die Breite entsprechend dem verfügbaren Raum einstellen können.

Flexibilität des Textinhalts Es wird erreicht, indem die Schriftgröße relativ zur Schriftgröße in den Standardbrowsern 16px berechnet wird, beispielsweise für die Schriftgröße der Festgröße: 42px relative Größe beträgt 42px / 16px \u003d 2,625EM.

Problem flexible Bilder Es wird mit der IMG-Regel gelöst (Breite: 100%; max-width: 100%;) für alle Bilder auf der Website. Diese Regel stellt sicher, dass Bilder niemals breiter als ihre Container sein werden und niemals ihre wahren Größen auf großen Bildschirmen überschreiten.

Medienregister Ändern Sie die Styles basierend auf den Merkmalen des Geräts, das sich auf die Anzeige des Inhalts bezieht, einschließlich Typ, Breite, Höhe, Orientierung und Bildschirmauflösung. Mit Hilfe von Medienregistern wird ein responsives Design erstellt, in dem geeignete Stile für jede Bildschirmgröße verwendet werden.

Feige. 1. Responsive Design.

Weitere renovative Designtechniken

Skalierbar vektorgrafiken - Verwenden Sie SVG-Bilder, die ohne Qualitätsverlust auf jede Größe skaliert werden und auf Retina-Displays gut aussehen.

Kartenschnittstellen - Verwenden Sie sogenannte Kartenschnittstellen - rechteckige Figuren mit abgerundeten Ecken, die Behälter für den Inhalt sind. Solche Blöcke sind selbst ausreichende Schnittstelleneinheiten und bewegen sie leicht auf dem Layout.

Feige. 2. Pinterest, map-basiertes Layout

Lass nur das Notwendigste - Guter Empfang, besonders für ein responsives Design. Erstellen Sie ansprechende und freundliche minimalistische Schnittstellen, die jetzt immer beliebter werden.

Feige. 3. Hotellook, Minimalismus im Webdesign

Prioritäten arrangieren und den Inhalt richtig ausblenden - Verwenden Sie versteckte Kontrollen, insbesondere für Geräte mit kleinen Bildschirmen. Popup-Fenster, Registerkarten, Off-Canvas-Menü und andere ähnliche Techniken helfen, die Anzahl der Elemente auf der Seite zu reduzieren. Den Speicherplatz von unnötigen Elementen freigeben, machen Sie die Benutzeroberfläche bequem und freundlich für den Benutzer.

Erstellen Sie einen großen Arretierraum für Schaltflächen - Je größer der aktive Bereich der Taste ist, desto leichter ist der Benutzer, mit dem Sie interagieren können.

Fügen Sie Interaktivität zu Ihren Schnittstellen hinzu. - Erstellen Sie als Reaktion auf die Aktion des Benutzers eine Antwortaktion - eine Animation, die funktioniert, wenn Sie das Element auf den Desktop-Geräten bewegen, und wenn Sie den Artikel auf mobilen Geräten berühren.

2. Konfigurieren des Ansichtsfensters mit dem META-Tag-Ansichtsfenster

Zu mobile Browser. Für Operationsräume android-Systeme. Und ios hat die Größe der Seiten der Site nicht automatisch geändert, ein spezielles Tag wird verwendet Mit dem Attribut Name \u003d "Ansichtsfenster". In diesem Tag darf es einen bestimmten Wert für Breiten- und Initial-Parameter einstellen:

- Initial-Scale \u003d 1 schlägt nahe, dass die Seitengröße im Browser 100% des Betrachtungsbereichs entspricht. Das heißt, das Verhältnis zwischen dem physischen Pixel und dem CSS-Pixel beträgt 1: 1;

- Breite \u003d Gerätebreite legt nahe, dass die Breite der Seite 100% Breite des Fensters eines beliebigen Browsers entspricht. Das heißt, die Breite der Site-Seite entspricht der Breite des Geräts, sodass er nicht skaliert werden sollte.

IM dieses Beispiel Der Inhalt im Browserfenster ist 2-mal mehr im Vergleich zur physischen Größe.

Auch Tag Sie können zur Steuerung verwenden, wie Benutzer die Breite der Seite erhöhen und reduzieren können:

Dieser Code erhöht die Breite der Seite auf den Wert, der der 3-fachen Breite des Gerätebildschirms entspricht, und reduziert es auf die Hälfte der Breite des Gerätsschirms.

Sie können Benutzern von Skalierungsfunktionen mit dem benutzerklappen Attribut berauben:

3. Universalvorlagen

Die meisten Layouts zum Erstellen eines responsiven Webdesigns gehören zu einer der fünf Kategorien der von Luchoklevski definierten Vorlagen:
Meistens flüssigkeit. (Der meiste Gummi),
Spaltenabfall. (Säulen einander),
Layout-Shifter. (Umzugslayout),
Kleine Verbesserungen. (Winzige Änderungen),
Aus Leinwand. (Außenbildschirm).
In einigen Fällen kann eine Vorlagenkombination auf der Seite verwendet werden, z. B. Spaltenabfall und Off-Leinwand.

3.1. Meistens flüssigkeit.

Das beliebte Layout besteht hauptsächlich aus Gumminetz. Auf den Bildschirmen einer großen oder mittleren Breite bleibt seine Größe in der Regel unverändert, nur Felder werden auf großen Bildschirmen eingestellt. Auf der kleine Bildschirme. Das Gummi-Gitter bewirkt, dass das Layout für den Hauptgehalt neu berechnet wird, und die Säulen werden ineinander angeordnet. Der Vorteil der Vorlage besteht darin, dass nur ein Kontrollpunkt zwischen kleinen Bildschirmen und großen Bildschirmen erforderlich ist.

3.2. Spaltenabfall.

Die Spalten werden um eine vertikale Senke platziert, wenn die Fensterbreite nicht alle Inhalte anzeigen kann. Infolgedessen befinden sich die Säulen vertikal ineinander. Die Auswahl von Kontrollpunkten für diese Layout-Vorlage hängt vom Inhalt ab und wird für jede Designoption separat bestimmt.

3.3. Layout-Shifter.

Das ansprechendste Muster, da er mehrere Kontrollpunkte für Bildschirme unterschiedlicher Breiten liefert. Die Hauptunterschied dieses Layouts besteht darin, dass anstelle der Neuberechnung des Zeichnungsbaums die Säulen den Inhalt untereinander bewegt wird. Aufgrund erheblicher Unterschiede zwischen den Hauptsteuerpunkten ist die Unterstützung dieses Layouts eine schwierigere Aufgabe, außerdem wird es wahrscheinlich nicht nur das allgemeine Inhaltslayout, sondern auch seine Elemente geändert.

3.4. Kleine Verbesserungen.

Die Vorlage lässt kleine Änderungen im Layout vornehmen, z. B. die Schriftgröße anpassen, die Größe der Bilder ändert oder den Gehalt bewegt. Es funktioniert gut auf Layouts, die aus einer Spalte bestehen, beispielsweise einzelne Seiten und Artikel mit einer großen Anzahl von Text.

3.5. Aus Leinwand.

Inhalt, der selten verwendet wird, z. B. Navigationselemente oder Anwendungsmenü befinden sich außerhalb des Bildschirms und sind nur dargestellt, wenn Sie die Bildschirmgröße erstellen können. Bei kleinen Bildschirmen öffnet sich der Inhalt mit einem Klick.

4. Adaptives Design.

Im Gegensatz zu responsiven Design, adaptives Design. (Adaptives Webdesign) auf der Größe der Geräte ausgerichtet. Es verwendet mehrere statische Layouts für verschiedene Arten von Geräten (mobile Geräte, Tablets, desktop-Computer), basierend auf Steuerpunkten (Drehen). Das heißt, die Layouts werden in bestimmten Größen des Gerätebrowserfensters geladen, und die Übergänge zwischen den Layouts treten abrupt und nicht reibungslos auf.

In der Regel haben adaptive Layouts sechs Layoutoptionen in Abhängigkeit von der Bildschirmbreite:
320
480
760
960
1200
1600.

In adaptiven Layouts wird die Hauptrolle von der Funktionalität abgespielt, d. H. Bei der Erstellung von Design, Merkmalen von Geräten, wie z. B. die sensorische Steuerung für mobile Geräte oder große Räume für Desktop-Monitore, werden berücksichtigt.

Grundlegende adaptive Designtechniken

Kleben Sie die Reihenfolge an - Jeder Standort sollte eine Vertrauensbeziehung mit dem Benutzer erstellen, damit er sich beim Navigieren und Interaktion damit anfühlt. Sequential-Design impliziert, dass der Benutzer beim Umschalten auf eine andere Seite der Site kein Gefühl hat, dass er an einen anderen Standort erreicht ist. Achten Sie auf kleine Details, bauen Sie eine visuelle Hierarchie auf, die wichtige Elemente hervorheben. Verwenden Sie das serielle Farbschema während der gesamten Site, verwenden Sie dieselben Elemente für verschiedene Situationen, z. B. das gleiche Popup-Benachrichtigungsdesign.

Verwenden Sie das Gitter - Die Struktur von 12 Säulen ist bevorzugter, um die Breite von Säulen und Inkrementen zwischen ihnen zu steuern.

5. Was ist der Unterschied zwischen ansprechendem und adaptivem Webdesign

Feige. 4. Reaktionliches und adaptives Design auf verschiedenen Geräten

Um responsive Layouts zu erstellen, werden Medienrekorder und relative Abmessungen der Gitterelemente verwendet, von% eingestellt. Im adaptiven Design bestimmen Server-Skripts zuerst den Typ des Geräts, mit dem der Benutzer versucht, auf die Website zuzugreifen (Desktop-PC, Telefon oder Tablet), und wird dann genau die Version der für ihn optimierten Seite geladen. Feste PX-Abmessungen sind für Gitterelemente eingestellt.

Daher ist der Hauptunterschied zwischen diesen Techniken ein ansprechendes Design - ein Layout für alle Geräte, adaptives Design - ein Layout für jeden Gerätetyp.

6. Nützliche Dienste und Werkzeuge

Android-Emulator für Windows, Linux und Mac OS X. iOS-Simulator ist nur für Mac OS X-Benutzer verfügbar und ist Teil des Xcode-Pakets (es kann kostenlos vom Mac-App-Speicher heruntergeladen werden).

Das auf jeder Website laufende PHP-Skript ermittelt die Größe des Bildschirms und passt die Größe des Bildes darunter an, das letztendlich eine kleine Bildgröße auf kleinen Bildschirmen ergibt.

Compliance-Tabellen der physikalischen Abmessungen der CSS-Werte der Höhe und der Breite sowie des Pixel-Verhältniswerts für mobile Geräte.

Sammlung von Websites mit Medienregister und ansprechendem Webdesign.

CSS-Framework basierend auf 12 Säulenmarkierung, maximal 960px. Unterstützte Chrome, Safari, Firefox, dh 7 und mehr, mobile Versionen Browser

Eine Reihe von Werkzeugen zum Entwickeln von Webanwendungen. Weniger Sprache, 12-Säulen-Adaptive Markup, Unterstützung für mobile Geräte, Tablets und Monitore, mehrfache Komponenten, Schaltflächen, Dropdown-Menüs, eigene Eingabefelder, Listen, Header, Etiketten, Symbole, Abrufen, Registerkarten, Fortschrittsbalken, Popup Tipps, "Akkordeon", "Karussell" und so weiter, verschiedene JavaScript-Plugins, Unterstützung für Gerüst, einschließlich der Verwendung von Bootstrap-Style, um bereits HTML erstellt zu werden.

Moderne Webentwickler und Vermarkter werden zunehmend bevorzugt, indem Sie das Design (Responsive Design) antworten, mit dem Sie eine Seite erstellen können, die für das Anzeigen auf jedem Gerät verfügbar ist. Obwohl dieser Ansatz von der Sicht von Google ziemlich gut ist, welche Antwortseiten "liebt" ist nicht die einzige Option, die sich an die Bedürfnisse des Benutzers anpassen kann.

Das sogenannte adaptive Design (adaptives Design) erschien nicht gestern, aber er hat er ernsthaft, dank der Verbesserungen, die er auf das Benutzererfahrung bringen kann, nur über ihn zu sprechen.

Um zu verstehen, welche der beiden Designtypen für Sie am besten geeignet ist, ist es notwendig, die Vorteile und Nachteile beider Methoden eindeutig zu präsentieren, und wissen, welche die meisten optimalen Lösungen für verschiedene Arten von Standorten und Geräten vorhanden sind.

Resonant-Webdesign.

Responsive Webdesign ist die Skalierung der Schnittstelle unter dem Benutzer unter Verwendung der Medienabfragen oder des CSS3-Moduls, mit dem Sie in Abhängigkeit von der Bildschirmauflösung, seiner Größe und anderen Merkmale verschiedene Stile (oder sogar styles'-Tabellen einstellen können.

Anwendung diese Methode Es ist besser für Standorte mit einer flexiblen oder "Gummi-Struktur" geeignet. Andernfalls verbringen die Entwickler ein paar Zeit und Ressourcen, um den Standort unter dem Tablet zu überarbeiten und handyUm den bestehenden Mangel an Flexibilität auszugleichen.

Neben der sich wechselnden Struktur hat das Antwortdesign mehrere andere Vorteile:

1. Das gleiche Erscheinungsbild der Ressource in verschiedene Browser und auf verschiedenen Plattformen
2. Verfügbarkeit an der Website derselben URL, die zur SEO-Optimierung beiträgt
3. Entwickler müssen nur einer Website dienen, wodurch die Zeit, die für Design und Inhalt verbracht wird, verringert.

Und obwohl die positiven Aspekte des Antwortdesigns offensichtlich sind, hat diese Methode eine Reihe von Mängeln. Der größte von ihnen ist die Downloadgeschwindigkeit, die aufgrund der hohen Auflösung von Bildern und anderen für die Registrierung erforderlichen visuellen Elemente erheblich reduziert wird sicht eines Aussentstehenden Ressource.

Wenn Sie die Wahl für einen Antwortansatz treffen, sind Ihre Designer immer auf diesen Faktor beschränkt, da komplexe visuelle Elemente auf mobilen Geräten zum Herunterladen "bremsen" können.

Adaptive Webdesign.

Adaptive Design funktioniert etwas anders. IT-Segmente Benutzer in der Kategorie, je nachdem, welches Gerät sie mit der Site durchsuchen.

Während die mit der Antwortdesign-Technologie erstellten Websites unabhängig von der Größe des Geräts gleich aussehen - ermittelt die adaptive Ressource, welches Gerät der Benutzer an die Site kommt, und demonstriert die Version seiner Version, die speziell für diese Art von Geräten entwickelt wurde.

Anstatt eine reduzierte Kopie der Ressource zu zeigen, identifiziert der Site-Server mit einem adaptiven Design den Typ des Benutzergeräts und zeigt eine vereinfachte Version des Blogs an, die nur die notwendigsten Elemente der Schnittstelle und der niedrigeren Qualitätsbilder enthält.

Mit anderen Worten, der Server nimmt den gesamten "schweren" Job an, anstatt den Standort zu zwingen, sich selbst zu optimieren. Unter den Vorteilen des adaptiven Designs kann das Folgende unterschieden werden:

1. Bilder werden viel schneller geladen, da sie komprimiert sind, und sich an das Benutzergerät anpassen
2. Die Site-Loading ist schneller, da der Server den Typ des Benutzergeräts bestimmt und den entsprechenden Softwarecode lädt
3. Entwickler genießen die Freiheit der Kreativität, weil sie schaffen können verschiedene Versionen Websites und anpassen Sie sie unter den entsprechenden Arten von Geräten, um sie für mobile Benutzer bequemer zu machen.

Die Attraktivität dieser Methode ist durch die Tatsache überschattet, dass es nicht so einfach ist, eine adaptive Site zu erstellen. Aufgrund der Designanpassung an verschiedene GeräteDie für die Entwicklung verbrachte Zeit steigt deutlich an. Wenn Sie außerdem die Raffinesse auf der Website vornehmen müssen, müssen Sie an alle ihre Versionen Änderungen vornehmen. Wenn Sie also ein kleines Budget haben und kein Team von Fachleuten gibt, die den adaptiven Standort unterstützen, ist es besser, diese Idee aufzugeben.

Für welche Option und was ist geeignet?

Auch wenn Sie einen der beiden beschriebenen Designtypen bevorzugen, ist es wichtig, dass zunächst alles erforderlich ist, um über den Komfort der Nutzer nachzudenken.

Wenn Ihre Benutzer bequemer sind, um mit der Ressource interagieren, die auf allen Geräten dieselbe Struktur aufweist, können Sie sich für ein Antwortdesign wählen. Wenn Ihre Benutzer technisch miteinander begleitet werden und Sie eine gute Grundlage für die Zukunft legen möchten, ist das adaptive Design die beste Lösung.

Adaptive Layout ändert das Seitengestaltung in Abhängigkeit von Benutzerverhalten, Plattform, Bildschirmgröße und Geräteorientierung und ist ein wesentlicher Bestandteil der modernen Webentwicklung. Sie können erheblich sparen und nicht für jede Genehmigung ein neues Design zeichnen, sondern die Größe und den Standort einzelner Gegenstände ändern.

In diesem Artikel werden die grundlegenden Elemente der Site und der Anpassung der Site in Betracht gezogen.

Anpassen der Bildschirmauflösung.

Im Prinzip können Sie die Geräte in verschiedene Kategorien zerschlagen und sicherstellen, dass jeder von ihnen separat ist, aber es dauert zu viel Zeit, und wer weiß, was in fünf Jahren sein wird? Darüber hinaus haben wir gemäß Statistiken eine Reihe einer Vielzahl von Genehmigungen:

Es wird offensichtlich, dass wir nicht in der Lage sein, für jedes Gerät auch separat einfach am einfachsten zu sein. Aber was zu tun?

Teillösung: Tun Sie alles flexibel

Natürlich ist dies nicht der perfekte Weg, aber es beseitigt die meisten Probleme.

Itan Marcott (Ethan Marcotte) erstellt eine einfache Vorlage, die die Verwendung flexibler Layout demonstriert:

Auf den ersten Blick mag es scheinen, dass alles einfach ist, aber es ist nicht. Schauen Sie sich das Logo an:

Wenn Sie das Bild reduzieren, werden die Inschriften nicht lesbar. Um das Logo zu halten, ist das Bild daher in zwei Teile unterteilt: Der erste Teil (Illustration) wird als Hintergrund verwendet, das zweite (logo) ändert seine Abmessungen im Verhältnis.

Das H1-Element enthält ein Bild als Hintergrund, und das Bild ist mit dem Hintergrund des Containers (Header) ausgerichtet.

Flexible Bilder

Die Arbeit mit Bildern ist eines der wichtigsten Probleme beim Arbeiten mit adaptivem Design. Es gibt viele Möglichkeiten, die Größe der Bilder zu ändern, und die meisten von ihnen sind ziemlich einfach zu implementieren. Eine der Lösungen ist die Verwendung von Max-Breite in CSS:

Img (max-breite: 100%;)

Die maximale Bildbreite beträgt 100% der Bildschirmbreite oder des Browserfensters, sodass die weniger Breite, desto kleiner das Bild. Bitte beachten Sie, dass die maximale Breite nicht in IE unterstützt wird, also weiten Sie die Breite: 100%.

Die vorgestellte Methode ist eine gute Option zum Erstellen von adaptiven Bildern, aber durch Ändern der Größe werden wir das Gewicht des Bildes für dasselbe hinterlassen, da die Downloadzeit auf mobilen Geräten steigen wird.

Eine andere Möglichkeit: Responsive Bilder

Die von der Filamentgruppe dargestellte Technik ändert nicht nur die Größe der Bilder, sondern komprimiert auch die Auflösung der Bilder auf den kleinen Bildschirmen, um das Laden zu beschleunigen.

Um diese Technik zu verwenden, sind mehrere auf GitHub verfügbare Dateien erforderlich. Machen Sie zuerst eine JavaScript-Datei ( rWD-Images.js.), Datei .htaccess. und rwd.gif. (Bilddatei). Dann verwenden wir ein kleines HTML, um große und kleine Berechtigungen zuzusetzen: Erst ein kleines Bild mit dem Präfix .r. (Um anzuzeigen, dass das Bild adaptiv sein muss), dann den Link zum großen Bild mit Data-FullSRC:

Für jeden Bildschirm breiter 480 px startet ein großes Auflösungsbild ( größere.jpg.), und auf kleinen Bildschirmen booten ( smallres.jpg.).

Im iPhone I. iPod Touch. Es gibt eine Funktion: Das für große Bildschirme erstellte Design wird einfach im Browser mit einer kleinen Auflösung ohne Bildlauf oder ein zusätzliches mobiles Layout gelöscht. Bildern und Text werden jedoch nicht gesehen:

Um dieses Problem zu lösen, wird das Meta-Tag verwendet:

Wenn die Anfangsskala eine Einheit ist, wird die Breite der Bilder zu einer gleichen Bildschirmbreite.

Konfigurierte Seitenlayoutstruktur

Bei erheblichen Änderungen in der Größe der Seite müssen Sie möglicherweise den Speicherort der Elemente als Ganzes ändern. Es ist bequem zu tun separate Datei. Mit Stilen oder effizienter über das CSS-Medienregister. Es sollte keine Probleme geben, da die meisten Stile gleich bleiben, und nur einige werden sich ändern.

Sie haben zum Beispiel die Hauptdatei mit Styles, die #wrapper, #content, #sidebar, #nav zusammen mit Blumen, Hintergrund und Schriftarten, sendet. Wenn Ihre Hauptstile das Layout zu eng, kurz, breit oder hoch machen, können Sie es definieren und neue Stile anschließen.

style.css (main):

/ * Grundlegende Stile, die von einer Tochtergesellschaft von Stilen * / HTML, Körper (Hintergrund ... font ... farbig ...) h1, h2, h3 () p, blockquote, pre, code, ol, ul () / * Strukturelemente * / #wrapper (Breite: 80%; Rand: 0 Auto; Hintergrund: #FFF; Padding: 20px;) #content (Breite: 54%; Float: links; Margin-Right: 3%; ) # Seitenleiste links (Breite: 20%; Float: links; Margin-Right: 3%;) # Sidebar-rechts (Breite: 20%; Float: links;)

mobile.css (Tochtergesellschaft):

#Wrapper (Breite: 90%;) #Content (Breite: 100%;) # Sidebar-links (Breite: 100%; klar: sowohl; / * Zusätzliche Stile für neues Design * / Border-Top: 1px fest #ccc; Margin-Top: 20px;) # Sidebar-rechts (Breite: 100%; klar: sowohl; / * Zusätzliches Styling für unser neues Layout * / Border-Top: 1Px fest #ccc; Margin-Top: 20px;)

Auf einem breiten Bildschirm sind die linken und rechten Seitenplatten auf der Seite gut platziert. Auf den schmaleren Bildschirmen befinden sich diese Blöcke für mehr Komfort.

Medienregister CSS3.

Überlegen Sie, wie Sie das CSS3-Medienregister verwenden können, um ein adaptives Design zu erstellen. MIN-WIDTH Setzt die Mindestbreite des Browserfensters oder des Bildschirms, in den bestimmte Stile angewendet werden. Wenn ein Wert unter min-Breite liegt, werden Stile ignoriert. Max-Breite macht das Gegenteil.

@Media-Bildschirm und (Min-Breite: 600px) (. Ghermiswerkyclass (Breite: 30%; Float: rechts;))

Der Medienrekorder funktioniert nur, wenn min-Breite größer oder gleich 600 px ist.

@Media-Bildschirm und (Max-Breite: 600px) (.acLASSFORSMALLSCREENS (CLEAR: Beides; Schriftgröße: 1.3 Uhr;))

In diesem Fall, Klasse ( aCLASSFORSMALLSCREENS.) Es funktioniert mit einer Bildschirmbreite von weniger als oder gleich 600 px.

Während min-Breite und Max-Breite auch auf der Bildschirmbreite anwendbar sein können, und an der Breite des Browserfensters müssen wir möglicherweise nur mit der Breite des Geräts arbeiten. Um beispielsweise Browsern in einem kleinen Fenster zu ignorieren. Dazu können Sie Min-Geräte-Breite und Max-Geräte-Breite verwenden:

@Media-Bildschirm und (Max-Geräte-Breite: 480px) (.classfor phonedisplay (Schriftgröße: 1,2 Uhr;)) @media-Bildschirm und (Min-Geräte-Breite: 768px) (.mimimimimImpadwidth (CLEAR: Beides; Unten: 2px fest #ccc;))

Insbesondere für iPad hat ein Medienregister orientierungderen Werte entweder sein können landschaft.(horizontal) oder porträt.(vertikal):

@Media-Bildschirm und (Orientierung: Landschaft) (.ipadlandscape (Breite: 30%; Float: rechts;)) @media-Bildschirm und (Orientierung: Porträt) (.IPADPORTRAIT (CLEAR: BEIDE;))

Die Werte des Medienregisters können auch kombiniert werden:

@Media-Bildschirm und (Min-Breite: 800px) und (Max-Breite: 1200px) (.classforamediumscreen (Hintergrund: # CC0000; Breite: 30%; Float: Rechts;)))

Dieser Code wird nur für Bildschirme oder Windows-Browserfenster von 800 bis 1200 px ausgeführt.

Laden Sie ein bestimmtes Blatt mit Stilen herunter verschiedene Werte Die Medienregister können sein:

Javascript

Wenn Ihr Browser das CSS3-Medienregister nicht unterstützt, können die Stile durch JQuery ersetzt werden:

Optionale Anzeige des Inhalts

Die Fähigkeit, IT-Elemente zu komprimieren und zu ändern, um auf kleine Bildschirme zu passen, ist wunderbar. Aber es ist nicht die beste Art. Bei mobilen Geräten wird üblicherweise ein breiterer Satz von Änderungen verwendet: Vereinfachte Navigation, fokussierter Inhalte, Listen oder Zeilen anstelle von Lautsprechern.

Hier ist unser Markup:

Linke Sidebar-Inhalte | Rechter Sidebar-Inhalt

style.css (main):

#Content (Breite: 54%; Float: links; Rand rechts: 3%;) # Sidebar-links (Breite: 20%; Float: links; Margin-Right: 3%;) # Sidebar-rechts (Breite: 20 %; Float: links;) .Shebar-NAV (Anzeige: None;)

mobile.css (vereinfacht):

#Content (Breite: 100%;) # Sidebar-links (Anzeige: Keine) # Sidebar-Right (Anzeige: None) .Shebar-NAV (Anzeige: Inline;)

Wenn die Bildschirmgröße abnimmt, können Sie beispielsweise ein Skript oder eine alternative Datei mit Stilrichtungen verwenden, um den weißen Platz in den Zoomen zu vergrößern oder die Navigation für mehr Komfort zu ersetzen. Wenn Sie also die Möglichkeit haben, Elemente auszublenden und anzuzeigen, ändern Sie die Größe der Bilder, Elemente und vieles mehr, Sie können das Design an beliebige Geräte und Bildschirme anpassen.