Responsive vs adaptive Design: Was ist besser für den Benutzer? Adaptive Layout: Was ist es und wie man verwendet

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 mobilen Browsern für betriebssysteme Android und ios haben die Größe der Seiten der Seiten 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. Bei kleinen Bildschirmen bewirkt das Gummi-Gitter, dass das Layout für den Hauptgehalt neu berechnet wird, und die Säulen sind 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 signifikanter Unterschiede zwischen der Hauptseite kontrollpunkteDie Unterstützung dieses Layouts ist eine herausfordernder 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 (Wende). 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 heruntergeladen werden. Mac-App. Geschäft).

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. Chrome, Safari, Firefox, dh 7 und höher, mobile Versionen von Browsern werden unterstützt.

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.

Grüße, zufällige Besucher und regelmäßige Blog-Reader-Website!

Während des Vorhandenseins dieser Site habe ich die Vorlage mehrmals geändert und sogar von Grund auf meine eigenen erstellt.
Eine der Hauptaufgaben bei der Auswahl einer neuen Vorlage ist ein adaptives Site-Layout unter allen Bildschirmauflösungen.

Kurzer Plan Artikel:

Im vorherigen Artikel schrieb ich bereits darüber und warum er brauchte. Aber wie kann man diese Anpassungsfähigkeit erreichen?

Es gibt verschiedene Möglichkeiten dafür. Jemand verwendet Javascript, jemand anderes. Aber ich glaube, dass der einfachste und richtige Weg adaptiv ist mit CSS..

So erstellen Sie ein adaptives Site-Layout

Erstens, Wenn Sie auf das adaptive Site-Design aussehen mussten, zwischen den Tags Fügen Sie den folgenden Code ein:

Was für ein Narr, den ich war, dass ich es nicht sofort gemacht habe, als ich versuchte, ein adaptives Site-Layout zu erstellen !!!
Das Problem der mobilen Browser in ihrer Skalierung des Site-Layouts, sogar adaptiv.

Stellen Sie sich vor, ich zeichne ein Design, dann schreibe ich alle notwendigen Stile und Anfragen, überprüfen Sie die Anpassungsfähigkeit der Site mit unterschiedlichen Berechtigungen. Alles scheint gut zu sein! Aber wenn ich meinen Blog auf dem Smartphone öffne, sehe ich, dass die Site einfach erschienen ist. Es hat sich nicht an ein mobiles Gerät angepasst und verringert einfach die Größe der Schriftart, Bilder usw.

Wie? Ich begann, alle Stile überprüft, ob ich die Klassen richtig verschrieben habe, letztendlich den Punkt erreichte, an dem JavaScript die Breite des Browserfensters in PX überprüfte. Ich war schockiert. Beim Überprüfen eines Laptops erhielt ich das Ergebnis von 1024px und über das gleiche Ergebnis, das ich erhielt, erhielt ich die Site auf dem Smartphone!

Aber das kann nicht sein!

Es stellt sich heraus wenn Sie den Code nicht registrieren, den ich oben angegeben habe, versteht der Mobilfunkbrowser nicht, dass der Standort adaptiv ist Und versuchen, die Site-Seite einfach zu reduzieren, damit er in einen kleinen Bildschirm des Mobiltelefons untersucht wird.

Aufgrund seiner Dummheit und Inkompetenz verlor ich viel Zeit. Aber jetzt erinnerte ich mich für immer))).

Adaptive Layout-CSS-Medienanfragen

Um ein Adaptiv mit CSS zu erstellen, müssen Sie Medienanfragen verwenden.

Es ist wie? Ja, sehr einfach. In der CSS-Datei müssen Sie Anfragen wie:

@Media-Bildschirm und (Min-Breite: 1440px) und (max-width: 1599px) ()

Dieser Code bedeutet, dass die Stile der Gefangenen zwischen "() für Bildschirme mit einer Mindestbreite von 1440 px und maximal 1599px arbeiten werden.

Das heißt, diese Stile von Standortelementen, die je nach Bildschirmauflösung angepasst werden müssen, müssen für jede mögliche Bildschirmbreite separat ausgeschrieben werden.

Die wichtigsten Bildschirmlösungen mit adaptivem Layout

• 320 px. - mobile Geräte (Porträtorientierung);
• 480 px. - mobile Geräte (Landschaftsorientierung);
• 600 px. - kleine Tabletten;
• 768 px. - Tabletten (Porträtorientierung);
• 1024 px. - Tabletten (Landschaftsorientierung) / Netbooks;
• 1280 px und mehr - PC.

Es ist für diese Berechtigungen, dass es notwendig ist, den Betonung vorzunehmen und ihnen beim adaptiven Layout besonders aufmerksam zu machen. Dies sind die häufigsten Arten der Bildschirmauflösung.

bootstrap Adaptive Design.

Es ist sehr praktisch, um ein adaptives Layout des Bootstraps zu erstellen. Der Komfort ist, dass alle Stile zum Anpassen von Blöcken, Schaltflächen, Tischen usw. Bereits in Bootstpap ausgeschrieben. Sie müssen nur herausfinden, welche Klasse zu welchem \u200b\u200bElement zugewiesen ist.

Laden Sie die frische Version des Bootstraps herunter und bringen Sie es an Ihre Site an. Beachten Sie, dass die Verbindung von Stilen und Skripts in WordPress eigene Eigenschaften hat.

Das Layout auf dem Bootstrap ist dadurch gekennzeichnet, dass die Breite des Blocks oder des Bildschirms in 12 gleiche Teile unterteilt ist. Wenn Sie eine bestimmte Klasseneinheit zuweisen, können Sie die Breite des Blocks einstellen, um gleich der gewünschten Anzahl von Teilen zu sein.

Ein solches Design ermöglicht es Ihnen beispielsweise, einen breiten Block für die Inhaltsbreite in 8 Teilen und eine enge für die Sensberbreite in 4 Teilen des Bildschirms auszuwählen:

Die Breite der Blöcke wird abhängig von der Bildschirmbreite automatisch berechnet. Und beim Anzeigen auf einem mobilen Gerät werden diese Blöcke aufeinander verschoben.

Sie können den Einzugsblock auch wieder von der Kante anpassen, auf der gewünschten Anzahl von Teilen. Zum Beispiel ein solches Design:

Es wird ein Block von 10 Teilen mit einem Gedankenstrich nach links vom Bildschirm erstellt.

Wenn Sie verstehen, arbeiten Sie mit dem Bootstrap mit sehr schnell zusammen. Was funktionieren diese Stile ordnungsgemäß richtig und es gibt nichts Kurven-Kurven auf der Website.

In der Zukunft möchte ich ein paar Lektionen bei der Arbeit mit Bootsrap posten. Daher rate ich Ihnen, diesen Moment nicht zu verpassen.

Überprüfen der Anpassungsfähigkeit der Site

Aber die Frage stellt sich jedoch: So überprüfen Sie die Anpassungsfähigkeit der Site? Hier wurden Sie von Medienanfragen an CSS verschrieben, verbundene Bootstrap und verwenden die gewünschten Klassen. Und wie prüfen Sie, dass auf allen Bildschirmauflösungen die Site ordnungsgemäß angepasst ist.

Sehr genau und vor allem kostenloser Servicedie Respekt und Dankbarkeit von Webmastern und Sesseren verdient, die an adaptiven Standorten tätig sind.

Nun, was ist dein Artikel? Alles klar? Wenn nicht, schreiben wir in den Kommentaren, wir werden zusammen verstehen.

Ja, um ein adaptives Site-Design zu erstellen, müssen Sie gut arbeiten. Diese Werke werden jedoch mit einer günstigen Einstellung zu Ihren Site-Suchmaschinen und den wichtigsten Besuchern Ihrer Website belohnt.

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 (adaptives Webdesign: Was ist es und wie man es verwendet wird). 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 Bewertung beinhaltet. 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 ist wie folgt: Entwickeln einer adaptiven Site mit mit Media. Abfragen, Sie ändern 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. In dem Artikel ist Ethan Marcotte gegeben detaillierte Bewertung. Erstellen Sie sie mit einem klassischen Codefragment 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
Optimierung email 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 Kampagnenmonitor, wie E-Mails für mobile Geräte mit optimiert werden können Medien-Anfragen. Und mehrere nützliche Methoden und Codefragmente werden für die 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. Und auch große Menge Verschiedene 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 von kleinen Bildschirmen (z. B. Telefonen) und kleinen Bildschirmen (z. B. 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

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

Ein Antwortdesign ist nicht nur die Entwicklung von Standorten für mobile Geräte, hier 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 das verstehen resident Design.Dies ist nicht nur ein Anliegen des mobilen Designs. 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 von Horizontal umgeschaltet vertikale AnzeigeFür kleine Geräte.

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, ist eine gute Idee, es wird die Site von der Skalierung anhalten große Bildschirme.Es wird jedoch nicht von der Reduktion der Seiten festgehalten. 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.

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

Ab dem Augenblick tablet-Computer Und Smartphones sind einer allgemeinen Öffentlichkeit verfügbar, immer öfter werden Websites mit Geräten mit Touch Control, 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. arbeiten mit Medienabfragen - CSS3-Modul, mit dem Sie einstellen können verschiedene Stile (oder sogar Stilblätter) abhängig von der Bildschirmauflösung, seiner Größe und anderen Eigenschaften.
• 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, gleichzeitig einigen Übergangspunkten zwischen verschiedene Arten Markups / Standortstile.
• 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, um dieselbe Art von Site und seine Funktionalität zu bieten verschiedene Browser. 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 mobile Version Venkakte Netzwerke, 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.