Responsive Web Design: Erstellen von flexiblen, langlebigen Websites

1. Einführung: Eines der besten und eines der schlimmsten Dinge am Web ist, wie häufig es sich ändert. Für mich ist das zumindest unglaublich spannend, weil ich verschiedene Techniken für das Design für das moderne Web neu untersuchen kann. Hi. Ich bin Ethan Marcotte. Ich bin ein unabhängiger Webdesigner, Autor und Sprecher, und in der heutigen Klasse geht es um responsive Webdesign. Responsive Design bedeutet, dass wir ein Web-Erlebnis erstellen können, das bis zu jedem Gerät und Browser bedient wird und sich je nach Größe des Bildschirms intelligent neu gestaltet. Also, in dieser Klasse werden wir uns ein Design ansehen , das für ein fiktives Magazin erstellt wurde und es dann in ein völlig reaktionsfähiges Design übersetzen, wobei die drei Zutaten verwendet werden, die jedes ansprechende Layout enthält: Fluid Grids, flexible Bilder und Medienabfragen. wir jede dieser Zutaten einzeln betrachten, werden wir sie zusammenstellen, um ein vollständig geräteagnostisches, vollständig reaktionsfähiges Design zu erstellen , und gegen Ende der Klasse werden wir uns einige Strategien ansehen, die Sie verwendet werden, um Ihren Designprozess neu zu gestalten, um Ihnen dabei zu helfen reaktionsfähiger Front-End-Entwickler für die Bildschirme zu werden, die wir heute kennen, sowie für diejenigen, die noch nicht erfunden wurden. Ich denke, dass Flexibilität im Herzen des Responsive Designs so wichtig ist, und es war immer wichtig, weil wir nie nur für eine Bildschirmgröße entworfen haben. Ich meine, es gibt Browser, die jetzt in den Dashboards von Autos eingebettet sind, und das ist nicht das Web, für das ich mich angemeldet habe, aber jetzt haben wir die Fähigkeit, tatsächlich eine Erfahrung zu entwerfen, die sich flexibel umformen kann, unabhängig davon, wo es passiert zu sein. Also, diese Klasse, denke ich, ist wirklich für Front-End-Designer und Front-End-Entwickler. Wir werden uns ein wenig CSS ansehen, aber Sie müssen kein CSS-Experte sein. Wir werden uns mit einigen der Grundlagen beschäftigen, wie Sie Ihre Entwürfe tatsächlich in ein reaktionsfähiges Layout übersetzen können . Für mich hoffe ich wirklich, dass du von dieser Klasse weggehst , mit einer echten Wertschätzung dessen, was es bedeutet, ein mobile-first Designer zu sein und wie das die Art und Weise, wie du über das Design für das moderne Web denkst, verändern wird . Ich bin so froh, dass du dich entschieden hast, dieser Klasse beizutreten. Lasst uns los. 2. Was ist Responsive Design?: Lassen Sie uns also die Klasse beginnen, indem Sie die Frage beantworten, was ist responsive Design? Denn wenn ich mit einem neuen Team oder einem neuen Kunden arbeite, ist das eine der ersten Fragen, die ich bekomme. Denn jeder ist unglaublich begeistert von dieser Phrase, responsive Web-Design. Aber jeder neigt dazu, eine etwas andere Vorstellung davon zu haben , was es für sie und für ihr Unternehmen bedeutet. Also, ich möchte heute beginnen, indem ich Ihnen ein paar davon erzähle, was es für mich als Designer bedeutet. Um das zu tun, würde ich Ihnen gerne eine Geschichte über einen Baum erzählen. Aber das ist ein ziemlich besonderer Baum, und er befindet sich im Herzen des Pando Forest, der in Utah ist. Jetzt ist Pando ein ganz besonderer Wald. Es ist ungefähr 100 Hektar groß. Also, sagen wir, du und ich reisen Seite an Seite durch diesen Wald, und während wir das tun, sind wir umgeben von einer unglaublichen Natur, diese schönen weißen Baumstämme, die überall um uns herum aus dem Boden schießen , soweit das Auge reicht. Nach einiger Zeit, die durch diesen Wald gereist ist ist, wende ich mich an dich und sage, dass ich dich angelogen habe, aber nur ein bisschen. Weil du siehst, Pando ist eigentlich kein Wald, Pando ist nur ein Baum. Sehen Sie, Pando ist eigentlich der lateinische Begriff für „Ich spreize“. Pando war nicht das, was man als Klonkolonie bezeichnet, es ist ein einziger riesiger zitternder Espenbaum. Jeder Baum, den du und ich mit unseren Augen sehen könnten, ist eigentlich nur ein Stamm und jeder einzelne von ihnen schießt aus diesem massiven unterirdischen Wurzelsystem, das sie alle teilen. Es gab etwa 40.000 Stiele, die heute in Pando geschätzt werden. Nun, Pando ist eigentlich ein ziemlich alter Baum. Es ist etwa 80.000 Jahre alt, was Pando im Grunde zu einem der größten und ältesten bekannten Organismen macht , die heute auf dem Planeten leben. Ich denke, das ist eine wirklich wunderbare Geschichte, mit der man anfangen kann. Weil ich als Designer oder vielleicht als Menschen denke, neigen wir dazu, Dinge zu betrachten, die visuell komplex erscheinen, und es ist unser Instinkt, sie als deutlicher und separater zu betrachten , als sie eigentlich standardmäßig sind. Darüber habe ich in meiner eigenen Designpraxis nachgedacht. Normalerweise, wenn ich einen anderen Wald betrachte. Welche all die verschiedenen Geräte und Browser, die ich gebeten werde , eine schöne und überzeugende Erfahrung zu liefern. Das ist ein komplexerer Wald, mit dem ich mich je beschäftigen musste, wenn ich für das Web entwerfe. Aber die Sache ist, dass, wenn wir für das moderne Web entwerfen, das ist nur Tischpfähle. Das Web ist überall und überall, wo unsere Benutzer zufällig mit welchen Bildschirmen zufällig am nächsten zur Hand sind. Zumindest für mich ist es wichtig, das Web als ein völlig flexibles Designmedium zu verstehen. Mit anderen Worten, wenn wir für das Web entwerfen, entwerfen wir eine komplette unendliche Leinwand. Es ist völlig flexible Leinwand, und unsere Designs müssen so flexibel und zugänglich sein , wie die Geräte, die unsere Benutzer in ihren Händen halten. Was für mich als responsive Designer aufregend ist, ist, dass es so viel exzellentes Responsive Design gibt Internet so viel exzellentes Responsive Design gibt, von dem ich mich inspirieren lassen kann. Ich bin sicher, Sie haben so viele wunderbare responsive Websites gefunden, aber lassen Sie mich Ihnen ein paar Beispiele zeigen, die ich heute wirklich mag. Das Spannende, was ich über Responsive Design denke, wie es heute geschieht, ist, dass es wirklich große reaktionsschnelle Arbeit, die in verschiedenen Branchen durchgeführt wird. Hier ist Amherst College, das ist ein wirklich tolles Beispiel für eine reaktionsschnelle Higher Ed-Website, und es ist schön, und es ist wirkungsvoll auf so ziemlich jeder Größe Bildschirm. Sie bemerken, dass, wenn ich die Größe des Browserfensters ändere, das responsive Design seine Form ändert, um es für kleine und große Bildschirme zugänglich zu machen . Auch Publisher haben Responsive Design in den letzten Jahren wirklich effektiv genutzt. Hier ist die Financial Times, die ein sehr stattliches und sehr schönes ansprechendes Layout hat, mit flexiblen Gittern, flexiblen Bildern und Medienabfragen, um eine wirklich schöne reaktionsschnelle Erfahrung zu schaffen. Aber es geht nicht nur um Publisher oder Higher Ed-Websites. Es gibt eine Reihe von Web-Anwendungen da draußen, die Responsive Design sehr effektiv als auch verwendet haben . Hier ist Adobe Type Kit, und sie haben eine sehr komplexe Oberfläche, die Sie auf dem Bildschirm klein und groß verwenden können, um nicht nur Schriftarten zu durchsuchen, sondern sie auch entlang einer Reihe von wirklich komplexen Achsen zu filtern. Der Grund, warum so viele dieser Organisationen und Unternehmen reaktionsschnell gegangen sind, ist, weil sie erkennen, dass geräteunabhängig zu sein nur Tischeinsätze für die Gestaltung für das moderne Web ist. Wir entwerfen so viel mehr als nur Desktop-Geräte. Mobile Computing ist in den letzten Jahren explodiert. Weltweit werden schätzungsweise acht Milliarden mobile Geräte im Einsatz sein, und diese Zahl scheint nicht bald zu sinken. Tablet Computing ist nicht unbedingt das neueste Kind auf dem Block mehr, aber es ist immer noch Etagen mir, dass im Jahr 2011 allein, einige 80 neue Tablet-Geräte auf den Markt in einem 12-Monats-Zeitraum. Das scheint mir wild zu sein. Mit all der Abwanderung, die wir sowohl im mobilen als auch im Tablet-Computing sehen, gibt es eine verständliche Menge an Investitionen und Experimenten, um zu verstehen, was der nächste Postdesktopkontext sein könnte. Also, es gibt eine beträchtliche Menge an Investitionen in Smart-TVs und Smart Watches und so viele neue verschiedene Bildschirmkontexte , die tatsächlich wirklich leistungsfähige Browser auf ihnen als auch. wie viele davon werden wir in Zukunft entwerfen. Wenn wir nun einen komplexen Markt wie diesen betrachten, ist es sehr verlockend zu sagen, dass wir mobile spezifische Erlebnisse oder Tablet-spezifische Erlebnisseoder Desktop-spezifische Erlebnisse entwickeln sollten mobile spezifische Erlebnisse oder Tablet-spezifische Erlebnisse . Aber eigentlich ist es viel leistungsfähiger und viel freier, wenn wir aufhörten für einzelne Geräte zu entwerfen und stattdessen ein wenig flexibler zu denken. Denken Sie daran, ein Erlebnis zu bieten, das auf jedem Bildschirm angezeigt werden kann. Denn letztendlich entwerfen wir nicht nur Geräte, entwerfen für die Menschen auf den anderen Seiten dieser Bildschirme. Denken Sie an einen Leser Ihrer Website, der möglicherweise an mehreren Punkten am Tag auf diese Website zurückkommt , mit dem Gerät oder Geräten, die am nächsten zur Hand sind. Dies ist etwas, das viele Verlage und Organisationen tatsächlich realisiert haben. Da sie ein wenig flexibler sind und nicht versuchen, die Erlebnisse über verschiedene Geräte hinweg zu steuern, können sie die Interaktion auf all diesen Geräten steigern und verbessern , indem sie ein wenig mehr Gerät unabhängig davon, wie sie für das Web entwerfen. Endlich bedeutet Responsive Design, dass Sie eine flexible Erfahrung entwerfen, die auf jedem Gerät bereitgestellt wird, das diese Website besuchen könnte. Nun, diese Erfahrung könnte sich in ihrem Layout oder seiner Präsentation je nach Größe des Bildschirms ändern , aber das ist in Ordnung. Denn letztendlich handelt es sich um eine Website, die Sie allen Benutzern zur Verfügung stellen. Dadurch wird Ihnen das helfen, mehr Geräte und mehr Menschen als je zuvor zu erreichen . Also, das sind nur einige der Dinge, die durch meinen Kopf gefahren wurden, als ich zum ersten Mal diesen Artikel namens Responsive Web Design schrieb. Dies ist ein Artikel, der 2010 veröffentlicht wurde, im Grunde besagt, dass die Flexibilität, die dem Web innewohnt, etwas ist, das wir als Stärke sehen müssen, anstatt etwas, das wir versuchen müssen, zu kontrollieren oder -Grenze. Jetzt, in dem Artikel, habe ich dieses hochrangige Rezept für das, was ein reaktionsfähiges Design ausmacht, vorgebracht . Insbesondere, dass jedes ansprechende Design mit einem flüssigen oder flexiblen Gitter-Layout beginnt . Ein Layout, das mit Prozentsätzen und Proportionen anstelle von unflexiblen Pixeln erstellt wurde. Dann gibt es Bilder und Medien, die selbst flexibel sind , die innerhalb dieser flexiblen Layouts funktionieren. Schließlich haben wir Medienabfragen, die ein wenig Pixiestaub aus der CSS-Spezifikation sind. Sie ermöglichen es uns, die Flexibilität auf eine Art und Weise zu kontrollieren, die für uns nützlich ist. Wir können diese flüssigen Layouts an verschiedenen Haltepunkten ändern und anpassen. Mit anderen Worten: Erstellen von Layouts, die ihre Form ändern und Informationen darstellen können. Mit anderen Worten, sie können auf die sich ändernde Form eines Browserfensters oder die Anzeige des Geräts reagieren . Also, das klingt alles sehr technisch. Aber letztendlich ist es wichtig zu erkennen, dass ein ansprechendes Layout am Ende des Tages ist nur flexibel in der Natur, aber dann ändert es und passt sich an bestimmten Haltepunkten um es zugänglich zu machen Bildschirmen schmal und breit. In diesem Kurs werden wir uns das Musterdesign für fiktive Zeitschriften ansehen, das von, für und über Dinosaurier erstellt wurde. Nun werden die Beispieldateien für diesen Entwurf im Ressourcenabschnitt für diesen Kurs zugänglich sein. Wenn Sie mitmachen möchten, tun Sie bitte. Aber dieses Design ist es, was wir verwenden werden, um Ihnen tatsächlich zu zeigen, wie diese drei Zutaten aus einem reaktionsfähigen Design zusammenpassen. Daher werden wir fließende Grids, flexible Bilder und Medienabfragen verwenden, um dieses Design in ein völlig flexibles, vollständig reaktionsfähiges Design zu übersetzen . Wir werden uns auch einige Strategien ansehen, um unseren Designprozess zu ändern, so dass Sie selbst ein flexibler Designer oder Entwickler sein können. Lasst uns damit anfangen. 3. Schritt 1: Fluide Raster: Beginnen wir also mit der Grundlage eines Responsive Designs, das wirklich ein flexibles oder fließendes Gitterlayout ist , das Ihre gesamte Erfahrung antreibt. Denn wirklich jedes Responsive Design beginnt mit einem flexiblen Fundament. Lassen Sie uns also einen Blick darauf werfen, wie wir ein Markup für ein Design übersetzen und es in ein völlig flexibles rad-basiertes Layout verwandeln können . Also, das ist das Markup, das ich für unser fiktives Magazin namens Rawr erstellt und skizziert habe, das von, für und über Dinosaurier ist . Wenn Sie schon einmal eine Webseite in Photoshop oder Illustrator entworfen haben, werden Sie wahrscheinlich mit der Funktionsweise eines solchen Layouts vertraut sein. Nun, das ist nur ein Bild von einer Website und von oben nach unten haben wir Dinge wie aktuelle Artikel, eine Titelgeschichte, einen Brief von Redakteuren an das Magazin und dann endlich eine Fußzeile ganz unten. Nichts wirklich super schick, aber das ist eigentlich wirklich ein schöner Anwendungsfall für uns zu zeigen, wie Sie ein Design mit fester Breite in etwas übersetzen können , das viel flexibler ist. Jetzt, im Ressourcenabschnitt für die Klasse, finden Sie einen Link zu einigen Beispieldateien, die ich erstellt habe , und ich werde diese heute verwenden, um im Grunde die drei Zutaten für das responsive Design zu durcharbeiten und Ihnen wie sie tatsächlich auf unser Beispiel-Layout angewendet werden können. Also werde ich mit dem allerersten Abschnitt über das Erstellen von Flüssigkeitsgittern beginnen. Also, in dieser HTML-Datei habe ich im Grunde ein einfaches, leicht gestaltetes Design für den letzten Artikelabschnitt unseres Beispiellayouts erstellt . Jetzt werden Sie feststellen, dass es nicht viel in der Art und Weise des Designs gibt, es gibt nur einige einfache Schriftgröße und einfache Stile und es gibt keine Bilder. Ich möchte mich wirklich nur auf den Inhalt und das Layout für diesen ersten Abschnitt konzentrieren. Also, wenn ich das in ein völlig flexibles Gitter übersetzen werde, muss ich zurückgehen und mein Design ansehen. Nun, in diesem Mock-up, werde ich mich nur auf die letzten Artikel konzentrieren. Ich habe ein sehr geradliniges Fünf-Säulen-Raster für dieses Breitbild-Layout. Nun, wenn ich dies in HTML und CSS übersetzen möchte, kann ich im Grunde etwas namens CSS-Grid verwenden, um dieses Layout ziemlich schnell zu erstellen. Werfen wir einen kurzen Blick auf den HTML für dieses eine Modul. Also, innerhalb dieser Artikel kürzlich div, habe ich vier Elemente. Ich habe den Header, der den Titel für diesen Abschnitt enthält sowie einen Link, um mehr Artikel zu lesen, und dann unter diesem Header habe ich zwei Artikel, die im Grunde Teaser für den Inhalt sind , den ich möchte, dass der Benutzer lesen oder klicken auf. Dann schließlich, haben Sie ein beiseite Element, das eine Liste von zusätzlichen Links enthält, im Grunde zu sekundären Geschichten. Wenn wir zum Layout zurückkehren, können Sie im Grunde sehen, dass das mehr oder weniger ist, was wir erstellt haben. Also, in meinem Mock up, werde ich mich nur auf diesen letzten Artikel konzentrieren Abschnitt. Was ich tun werde, ist, ich werde eine schnelle Bestandsaufnahme der verschiedenen Arten von Inhalten, die ich in diesem Modul habe. Nun, ganz oben habe ich einen Header, der den Titel für diesen letzten Artikelabschnitt ankündigt , sowie einen weiteren Link zur Seite, der es mir ermöglicht, einen Link zu mehr Artikeln zu erstellen. Dann unter diesem Header habe ich zwei prominente Geschichten, die im Grunde nur Teaser von Inhalten sind , um den Leser zu verleiten, auf diese Artikel zu tippen oder zu klicken. Dann habe ich eine Liste von verwandten Artikeln, die nach rechts in einer Seitenleiste abgeschoben werden. Jetzt werde ich mich nicht auf das Layout konzentrieren, ich möchte mich nur auf diese verschiedenen Inhaltstypen konzentrieren, denn was ich getan habe, ist, dass ich diese in ein ziemlich einfaches Markup übersetzt habe. Ich habe einen Container für dieses aktuelle Artikelmodul und dann habe ich einen Header mit meiner Überschrift, daher den Namen. Dann habe ich zwei Artikelelemente, die ein wenig Teaser-Informationen für diese beiden Inhalte enthalten . Dann habe ich in diesem beiseite Block eine geordnete Liste, die wieder eine Liste von Links zu sekundären Geschichten enthält . Wenn wir zurückgehen und unseren Prototyp betrachten, ist das mehr oder weniger unser Ausgangspunkt, wir haben kein Layout, aber wir haben einige leichte Schriftarten, die auf dieses sehr einfache Markup angewendet werden. Nun, wenn ich dieses Layout in HTML und CSS übersetzen möchte, gehe ich zurück zu meinem Raster und werfe einen Blick auf die Spalten, mit denen ich arbeite. Jetzt genau, jede einzelne dieser Spalten ist 180 Pixel breit und ich habe fünf davon und die Dachrinne zwischen jedem dieser Bereiche ist 25 Pixel breit. Nun, das ist nur in meinem Markup und ich habe es mit festen unflexiblen Pixeln zu tun. Nun, wenn ich dieses Layout ziemlich schnell in meinem CSS erstellen wollte, könnte ich das mit etwas namens CSS-Grid tun. Jetzt ist das CSS-Rasterlayout eine ziemlich neue Möglichkeit, Layouts für das moderne Web zu erstellen. Wenn Sie jemals etwas mit Floats oder absoluter Positionierung getan haben, kombiniert CSS Grid tatsächlich die besten Elemente von beiden und ermöglicht es uns, Layouts viel schneller zu erstellen, es ist unglaublich mächtig. Also, zum Beispiel, in meinem Artikel-neueren Block, könnte ich ein wenig CSS schreiben, das im Grunde sagt, innerhalb von artikles-recent möchte ich dies so einstellen, dass Gitter angezeigt werden und dann werde ich Gittervorlagenspalten machen und dann bin ich gehen, um 180 Pixel zu tun, und ich werde das fünf Mal schreiben. Dann werde ich Grid-Spalt-Spalt-25 Pixel schreiben. Nun, das sind all die Pixelmessungen, die ich direkt von meinem Markup genommen habe. Wenn ich das speichere und ich mein Browserfenster neu lade. Also, in Firefox gibt es ein wirklich praktisches Dienstprogramm, mit dem ich meine rasterbasierten Layouts schnell überprüfen kann. Also, ich habe den Inspektor meines Browsers geöffnet und wenn ich diesen Artikel-Block auswähle, auf dem ich gerade ein Rasterlayout erstellt habe, gibt es im rechten Bereich eine Option, um den CSS-Raster-Highlighter umzuschalten. Also, wenn ich auf dieses kleine Symbol klicke, wird mir das Skelett für das Layout zeigen, das ich gerade mit diesen drei Zeilen CSS erstellt habe. Ich habe im Grunde eine Bühne erstellt, die ein Rasterlayout ist, und indem ich Rastervorlagenspalten fünf Mal auf 180 Pixel setze, habe ich fünf 180 Pixel breite Spalten und Gitterspaltenabstand 25 Pixel erstellt im Grunde eine 25-Pixelrinne zwischen jedem einer dieser Bereiche. Jetzt wird jede Spalte erstellt, indem Sie einige Gitternetzlinien einrichten, eine auf der linken und eine auf der rechten Seite. Nun, jede einzelne davon ist tatsächlich nummeriert, und wir können diese Zahlen verwenden um die verschiedenen Teile unseres Rasters entlang dieser Rasterlinien auszulegen, anderen Worten, um unser Layout zu vervollständigen. Zum Beispiel ist unser Header-Element derzeit auf diese erste Spalte beschränkt, was wir wollen, ist die volle Breite dieser fünf Spalten über alle sechs Rasterlinien zu erstrecken. Um dies zu tun, kann ich es einfach in meinem CSS-Artikel-neueren Header ansprechen und ich kann grundsätzlich sagen, grid-column-start: eins und dann kann ich auch sagen, grid-column-end: sechs. Also, ich werde meinen Browser neu laden und jetzt haben wir einen Header, der die volle Breite unseres Rasterlayouts umfasst, von der ersten Rasterlinie ganz links bis zur sechsten Rasterlinie ganz rechts. Also, mal sehen, ob wir die Breite unserer Geschichten auch verbessern können. Moment erstrecken sich unsere beiden Geschichten im Grunde nur über eine Spalte, genau wie unsere Kopfzeile zuvor war. Also, lasst uns ein bisschen expliziter sein. Also, für die erste Geschichte, die Klasse zu Story-Lead ist, würde ich gerne Gitter-Spalten-Start-eins sehen, aber ich wollte, dass es zwei Spalten umfasst. Also, was ich tun werde, ist, dass ich sagen werde, Gitterspalte-Ende drei. Also, dass es im Grunde auf die Rasterlinie geht, die am Ende der zweiten Spalte ist. Ich werde mein CSS speichern, zu meinem Browser zurückkehren und erkennen, und jetzt erstreckt sich die Geschichte über zwei Spalten, anstatt in eine zerquetscht zu werden. Machen wir dasselbe mit unserer letzten Geschichte, die als story-alt eingestuft wird. Nun beginnt dieser bei der dritten Spalte im Grunde am Ende gleich nach dieser ersten Geschichte, und dann wollte ich auch zwei Spalten überspannen. Also, ich werde Grid Spalte und fünf zu tun. Wenn ich nun meine Arbeit speichere und den Browser neu lade, haben wir jetzt etwas, das dem Design, das wir in unserem Markup angelegt haben, tatsächlich etwas näher aussieht . Wir haben zwei Spalten überspannt, anstatt zu einer zusammengeknippt zu werden. Nun ist dies ein grundlegendes Layout und wir können dieses nur ein bisschen mehr verbessern. Grid-Column-Start und Grid-Column-Ende können tatsächlich ein wenig prägnanter ausgedrückt werden , weil wir diese Art von Schrägstrich Notation in einer Raster-Spalteneigenschaft verwenden können , um zu sagen, dass wir wollen dieses Element an dieser Rasterlinie beginnen und enden an dieser weit, indem Sie diese Schrägschreibweise verwenden. Also, für das Story-Lead-Element zum Beispiel, könnten wir im Grunde sagen, Grid-Spalte ein Schrägstrich drei anstelle von Gitterspalten beginnen eins und Gitterspalte Ende drei. Für story-alt, anstelle von grid-column-start drei und grid-column-end fünf, können wir grid-column-three slash fünf, nur eine etwas andere Art, das gleiche Layout mit ein wenig mehr Effizienz zu tun. Hier ist die Sache über diese Ebene, die wir gerade erstellt haben. Wir haben Pixel verwendet, um das Layout aus unserem Markup perfekt in Code zu übersetzen , aber die Sache mit Pixeln ist, dass sie ihre Form nicht wirklich ändern. Wenn ich also die Größe meines Browserfensters ändere, um zu simulieren, wie dies auf einem kleineren Bildschirm aussehen könnte, werden die Dinge etwas seltsam aussehen. Also werde ich mein Browserfenster ein wenig schmaler machen und während ich das tue, werden Sie sehen, dass das Layout seine Form nicht ändert. In der Tat bekomme ich diese wirklich coole kleine horizontale Bildlaufleiste, um zu bedeuten, dass ich mehr Layout habe, das von der rechten Seite des Bildschirms abschießt. Also, hier müssen wir das feste und flexible Layout, das wir in Skizze entworfen haben, nehmen und es in etwas Proportionales übersetzen. Es gibt eine sehr geradlinige Formel, die Sie verwenden müssen, um das zu tun. Wir werden hier ein bisschen über Mathematik reden und ich entschuldige mich dafür, weil ich selbst Angst vor Zahlen habe. Wenn Sie jedoch ein Layout mit fester Breite in etwas proportionales übersetzen , verwenden Sie diese Formel. Ziel geteilt durch Kontext gleich Ergebnis. Lassen Sie mich Ihnen zeigen, wie das funktioniert. Nehmen wir an, Sie haben ein Stück Ihres Designs, das eine Spalte in Ihrem Raster sein könnte, es könnte ein bestimmtes Modul sein. Nun, die Chancen sind gut, wenn Sie ein Programm wie Sketch oder Photoshop verwendet haben, um Ihr Layout zu entwerfen , das einen Zielpixelwert in diesem Layout hat. Anstatt diesen Pixelwert zu nehmen und ihn in unser CSS zu setzen, wie ich es gerade getan habe, wollen wir diesen Zielpixelwert nehmen und ihn in etwas Proportionales übersetzen. Um dies zu tun, teilen wir es gegen den Kontext, in dem es sitzt. Genauer gesagt haben wir uns gegen die Breite seines enthaltenden Elements und das Design geteilt. Sobald wir diese beiden Zahlen zusammen teilen, bleibt uns das prozentuale Ergebnis übrig, das wir dann in unser flexibles Raster übersetzen können. Lassen Sie mich Ihnen zeigen, wie das funktioniert. Jetzt bin ich wieder in meinem Mockup und werde mir die Eigenschaften des Layouts ansehen, das ich entworfen habe, und versuchen, die Beziehungen zwischen verschiedenen Breiten in meinem Layout zu verstehen. Jetzt, wie wir zuvor gesehen haben, ist die Breite jeder einzelnen Spalte 180 Pixel breit. Nun, das ist die Zielpixelbreite. Was ich tun möchte, ist,dass ich die Beziehung dieses Wertes mit der gesamten Breite des Designs verstehen möchte dass ich die Beziehung dieses Wertes mit der gesamten Breite des , das vom linken Rand des Gitters bis zum rechten Rand 1.000 Pixel breit ist. Also, anstatt 180 Pixel zu sagen, möchte ich 180 Pixel geteilt durch 1.000 Pixel, Zielpixelwert von 180 Pixeln geteilt durch den Kontext, in dem es sitzt, in dem 1.000 Pixel. Also, wenn ich diese beiden Zahlen gegeneinander aufteile, bekomme ich 18 Prozent. Wenn ich also den Rest dieser 180-Pixel-Referenzen durch 18 Prozent ersetze, habe ich jetzt die Anfänge eines flexiblen Rasters. Jetzt, wenn ich die Größe meines Browserfensters ändere, ändern sich die Pixelwerte dieser Spalten im Laufe der Zeit, aber die Proportionen, die ich in meinem Markup entworfen habe , bleiben intakt und das ist die Schlüsselkomponente eines flexiblen Rasters direkt dort. Die Beziehungen zwischen den Breiten und nicht die Breiten selbst. Jetzt ist noch ein kleines Stück Detailarbeit übrig, das ist diese 25-Pixel-Säulenlücke, die wir auch hier drin haben. Aber wir können dies auch in etwas mehr Prozent basierend übersetzen. Jetzt sind die 25 Pixel, was wir in unserem Mockup entworfen haben, aber wir können auch dieses Ziel geteilt durch Kontext gleich Ergebnisformel hier als auch verwenden . Wir teilen diese 25 Pixel gegen denselben Kontext wie zuvor, 1.000 Pixel die volle Breite unseres rasterbasierten Layouts. Also, 25 Pixel geteilt durch 1.000 Pixel sind gleich 2,5 Prozent. Also, wenn ich jetzt meine Arbeit speichere, sind sowohl die Spalten als auch die Dachrinnen völlig flexibel mit schmaleren Pixeleinsichten und jetzt habe ich ein völlig flexibles Raster. Jetzt ein kleines bisschen Finesse Arbeit, die wir mit diesem Layout tun können. Ich habe fünf Mal 18 Prozent geschrieben, aber es gibt tatsächlich ein wirklich tolles kleines Werkzeug innerhalb des CSS-Grids, das uns erlaubt, ein wenig prägnanter zu sein. Insbesondere gibt es diese Funktion namens repeat, die es mir erlaubt, im Grunde zu sagen, anstatt 18 Prozent fünfmal zu schreiben, ich kann im Grunde sagen, dass ich fünf Spalten habe, die 18 Prozent in der Breite sind und das wird im Grunde genau das gleiche Ergebnis, das ein wenig prägnanter ist. Gleiches exaktes Layout nur eine etwas andere Art, es auszudrücken. Das letzte, was man im Auge behalten muss und dann werde ich die Mathematik für ein wenig hinter sich lassen, ist, dass es auch diese sehr coole Einheit innerhalb des CSS-Gitters gibt, die als Brucheinheit bezeichnet wird , was im Grunde bedeutet, dass wir stellen den verbleibenden Raum perfekt dar. Anstatt 18 Prozent zu schreiben, können wir einfach ein f r sagen, das im Grunde sagt, dass für jeden Raum, der übrig bleibt, nachdem wir unsere Spaltenlücken zugewiesen haben, ich möchte, dass Sie diesen Raum fünf Mal in unsere fünf separaten -Spalten. Also, anstatt super komplexe Mathematik für jeden Teil Ihres Designs zu machen, manchmal, dass eine f r Einheit alles sein wird, was Sie brauchen, und dann haben wir unser völlig flexibles Gitter. 4. Schritt 2: Flexible Bilder: In der letzten Lektion haben wir also ein paar flexible Gitter mit dieser neuen Technologie namens CSS Grid Layout erstellt. Aber in unseren Rastern haben wir nicht wirklich viele Bilder aufgenommen. Also, lasst uns das reparieren. Was ich getan habe, ist im zweiten Abschnitt der Beispieldateien, die Sie in den Ressourcen finden, ich bin zurück in die flexiblen Raster gegangen, und ich habe einige Bilder hinzugefügt, eine wichtige Teile des Designs. Im aktuellen Artikelmodul habe ich einige Fotos an der Spitze der vorgestellten Artikel selbst aufgenommen. In dem Brief von den Redakteuren habe ich ein kleines Foto aufgenommen, dass ein Unternehmen in der linken Spalte die Byline ist. Ich habe auch weitergemacht und ein vollständiges Layout in einem flexiblen Raster für dieses wirklich spritzig aussehende Modul namens, unsere Coverstory, erstellt einem flexiblen Raster für dieses wirklich spritzig aussehende Modul namens, , und ich werde Ihnen einige Strategien für die Verwaltung von Bildern hier als auch zeigen. Aber fangen wir an der Spitze des Designs an, in erster Linie. Jetzt, wie zuvor, werden unsere Bilder in den HTML-Code fallen und die Gitter sind völlig flexibel. Also, mal sehen, was passiert, wenn wir die Größe der Gitter jetzt, wo wir Bilder aufgenommen haben, tatsächlich ändern. Ich werde mein Browserfenster ein wenig schmaler machen, um zu simulieren, was auf kleineren Bildschirmen passiert. Genau wie zuvor werden unsere Säulen völlig flexibel sein. Aber, oh meine Güte, die Dinge sind kaputt, jetzt, wo wir Bilder aufgenommen haben. Hier ist die Sache mit Bildern, ist, dass, wenn sie dem Endbenutzer angezeigt werden, Bilder tatsächlich native Dimensionen haben, sie haben eine Breite und eine Höhe. Da wir sie in unsere Designs fallen gelassen haben, ohne etwas mit ihnen in CSS zu tun, rendern sie nur an ihren nativen Dimensionen und brechen unser Layout. Sie entkommen den Spalten, in denen sie sitzen , und brechen die Erfahrung für den Endbenutzer. Aber genau wie jeder andere Aspekt unserer Designs können wir die Darstellung dieser Bilder mit unserem CSS steuern. Nun, wenn Sie möchten, dass flexible Bilder innerhalb Ihrer responsive Designs erscheinen, gibt es ein sehr einfaches Stück CSS, das Sie wissen sollten, damit sie innerhalb Ihrer flexiblen Gitter funktionieren. Das heißt, Bild, maximale Breite 100 Prozent. Das scheint nicht viel zu sein, aber dieser ein Stück Code sagt im Grunde, dass ein Bild in jeder Größe rendern kann, die es will, solange es nie breiter ist als das Element, in dem sich befindet. Mit anderen Worten, das bedeutet, dass das Bild in der gewünschten Größe gerendert werden kann Wenn diese Spalte jedoch kleiner als das Bild ist, wird die Größe des Bildes proportional geändert und so verkleinert, dass sie in diese Spalte passt. Lassen Sie mich Ihnen zeigen, wie es in unserem Musterdesign aussieht. Also, wenn das Bild max-Breite 100 Prozent hinzugefügt wird, und jetzt, wenn ich die Größe meines Browserfensters ändere, werden Sie feststellen, dass die Bilder proportional als auch skalieren. Sie sind völlig flexibel und skalierbar, genauso flexibel wie unsere Gitter. Nun können Sie feststellen, dass bei breiteren Bildschirmauflösungen einige dieser Bilder nicht unbedingt der vollen Breite der Spalte entsprechen, und vielleicht ist das für bestimmte Teile Ihres Designs in Ordnung. Aber zumindest für diesen möchte ich sicherstellen, dass diese speziellen Klassen von Bildern immer volle Breite haben. Um das zu tun, hatte ich ein etwas anderes Stück CSS, nur für diese Bilder. Wie Sie sich vielleicht erinnern, in der jüngsten Arbeit dieser Artikel zwei Artikelelemente, haben wir in der jüngsten Arbeit dieser Artikel zwei Artikelelemente,die die Teaser-Geschichten enthalten , die prominent in diesem Modul vorkommen. Nun, die Bilder selbst, die ich mit ein wenig HTML eingestuft habe, habe ich ihnen einen Namen von Kunst gegeben. Also, im Grunde kann ich sagen, dass ich innerhalb dieser Story-Elemente möchte, dass diese Kunstbilder immer eine Breite von 100 Prozent haben. Das ist ein wenig anders als die maximale Breite von 100 Prozent, was im Grunde sagt, dass das Bild niemals die Breite seines Containers überschreiten sollte. Breite 100 Prozent besagt, dass ich immer möchte , dass dieses Bild mit der Breite seiner enthaltenen Elemente übereinstimmt. Also, wenn ich zurückgehe, werden Sie feststellen, dass diese Bilder perfekt bündig gegen die Breite sind, die sie Spalte enthalten. Sie sind immer noch völlig flexibel, aber jetzt, unabhängig davon, wie breit diese Säule wird, wird es immer eine vollständige Blutung geben. Lassen Sie uns ein bisschen weiter runter gehen. Nun, wieder, wir haben dieses eingebettete Bild, das die Byline in den Buchstaben des Editors begleitet. Genauso wie zuvor, wenn ich die Größe meines Rasters so ändere, dass es viel kleiner wird, macht dieses Bild mit einer max. Breite von 100 Prozent schöne Arbeit, um sicherzustellen, dass die Größe des Bildes proportional angepasst wird. Nun, wie wir in einer späteren Lektion sehen werden, gibt es eine Menge Anpassungs- und Abschlussarbeiten, die in die Kontrolle gehen können , welche Bilder Sie Ihren Benutzern zur Verfügung stellen, aber diese Bildregel mit einer max . Breite von 100 Prozent ist wirklich der erste Schritt auf unserer Reise. Es ist eines der kritischsten Werkzeuge auf dem Toolkit des Responsive Designers. Daher haben wir es geschafft, einige der Bilder, die wir in unserem HTML enthalten haben, auf eine Weise zu beschränken , die die flexiblen Gitter, die wir für unser responsive Layout erstellt haben, nicht durchbrechen. Aber was, wenn wir es mit Hintergrundbildern zu tun haben? Das ist etwas, das in meiner Arbeit ziemlich häufig auftaucht und ich bin sicher, das gleiche gilt auch für Sie. Jetzt gehe ich zurück zu dem Entwurf, den ich in der Skizze für dieses bestimmte Layout erstellt habe . Es gibt insbesondere ein Element, auf das ich mich jetzt konzentrieren werde, nämlich dieses Hintergrundbild eines fossilen Fußabdrucks, das ich gerne in mein Design aufgenommen hätte. Also, um dies in meinem CSS zu tun, werde ich nur diese SVG-Datei einschließen. Also, auf dem Hauptelement, werde ich ein Hintergrundbild setzen, das auf den Pfad meiner Datei footprint.SVG zeigt, und jetzt werde ich die Eigenschaft background-repeat verwenden um zu sagen, dass ich nur eine Version des Bildes möchte, Ich möchte nicht eine ganze Kachel im Hintergrund, und ich werde es auf keine Wiederholung setzen. Jetzt, wenn ich das getan habe, habe ich ein massives Bild als Hintergrund für mein Design. Nun, das ist nicht das, was ich in der Skizze angelegt habe, im Idealfall würde ich gerne sehen, dass ich das oben rechts verankern würde und ich möchte es etwas kleiner machen. Um die Größe von Hintergrundbildern zu steuern, wie wir es mit Inline-Bildern tun, können wir die Eigenschaft Hintergrundgröße verwenden. Nun ist die Hintergrundgröße eine sehr leistungsfähige Eigenschaft und kann unter verschiedenen Umständen sehr praktisch sein. Zum Beispiel könnte ich es auf 200 Pixel setzen, auto. Nun, was das bedeutet, ist, dass das Bild auf eine Breite von 200 Pixeln skaliert wird, und dann habe ich seine Höhe so eingestellt, dass die Größe auf auto geändert wird, was im Grunde sicherstellt, dass es proportional in diese Breite von 200 Pixeln passt. Mal sehen, wie das aussieht. Also, jetzt haben wir einen kleinen Fußabdruck oben links in unserem Design. Nun, ich kann das ein bisschen prominenter machen, ich könnte die Hintergrundposition auf 95 Prozent und Null setzen, die sich im Grunde bei 95 Prozent des Weges über die horizontale Achse bewegen und sie in die rechte Spalte bewegen wird, und lassen Sie es dann in der oberen rechten Ecke verankern, indem Sie eine Hintergrundposition von Null verwenden. Also, jetzt haben wir es oben rechts verankert. Nun, das ist in Ordnung, aber genau wie bei unseren Bildern ändert sich die Breite dieses Footprints nicht. Wir können auch Proportionalwerte für unsere Hintergrundgrößen verwenden. Also, was ich tun werde, ist, dass ich diese Hintergrundgröße auf 30 Prozent setzen werde, was sie im Grunde auf 30 Prozent seines enthaltenden Elements setzt, anderen Worten, in diesem Fall das vollständige Browserfenster. Dann werde ich seine Hintergrundposition nur ein wenig von oben nach unten bringen, es fühlt sich ein wenig nahe am Rand des Browserfensters an. Also, jetzt, da ich die Hintergrundfarbe auf 30 Prozent eingestellt habe, ist das Bild viel prominenter, und auch, es wird proportional ändern. Also, auf kleineren Displays, wird dieses Bild nur viel kleiner sein, als es auf breiteren Displays wäre. Nun, wie ich bereits sagte, die Hintergrundgröße ist unglaublich mächtig. In der Tat gibt es einige andere Eigenschaften, die für Sie in anderen Teilen Ihres Designs nützlich sein könnten . Da gibt es dieses vor allem Cover. Es kann wirklich hilfreich sein. Eine responsive Website, von der ich denke, dass dies sehr effektiv verwendet, ist in virb.com. Also, dieses Bild, das Sie oben im oberen Bannerbereich direkt auf ihrer Homepage sehen , ist eigentlich ein Hintergrundbild. ich die Größe des Browserfensters ändere, werden Sie feststellen, dass dieses Bild immer seine Größe behält, um der Breite seines Containers anzupassen. Da dieser Container also schmaler wird oder kürzer wird, wird er auf eine Hintergrundgrößenabdeckung eingestellt, die im Grunde sicherstellt, dass das Bild immer den verfügbaren Platz davor perfekt abdeckt, es ist eine wirklich leistungsfähige Eigenschaft und es kann auch für uns sehr nützlich sein. Aber das sind nur einige der verschiedenen Strategien, mit denen wir Hintergrundbilder flexibler in unseren Designs verwalten können . Mit Hintergrundgröße und Hintergrundposition können wir wirklich genau steuern, nicht nur die Platzierung, sondern auch die proportionale Skalierung unserer Hintergrundbilder. Nun, Hintergrundgröße ist wirklich großartig, und in der Tat gibt es eine Möglichkeit, etwas sehr Ähnliches mit Inline-Bildern zu tun, und um Ihnen ein Beispiel dafür zu geben, werde ich Ihnen unsere Coverstory zeigen. Innerhalb des Cover-Story-Moduls gibt es ein sehr großes prominentes Bild, das inline in diesem Inhaltsbereich enthalten ist. Nun, es ist in einem rad-basierten Layout eingerichtet, genau wie wir es mit unseren anderen flexiblen Gittern getan haben, und wenn ich die Rasterlinien für dieses ein bestimmtes Bild, dieses Intro-Kunstbild,zeige dieses Intro-Kunstbild, ist das Inline-Foto im Grunde auf fünf Säulen. Aber es trifft nicht ganz die vollen fünf Spalten, und es hinterlässt auch eine kleine Lücke ganz unten im Bild. Im Idealfall würde ich gerne sehen, dass ich dieses Bild in voller Höhe haben möchte, so dass es den vertikalen Raum innerhalb dieses Moduls perfekt abdeckt. Nun, ich kann das tun, indem ich die Höhe 100 Prozent auf diesem Bild einstelle. also eine Höhe von 100 Prozent auf diesem Bild einstellen, haben wir dieses Bild tatsächlich ein wenig auf der vertikalen Achse gestreckt. Im Idealfall möchten wir sicherstellen, dass diese Proportionen intakt bleiben. Nun, die Art und Weise, wie wir das tun können, weil dies ein Inline-Bild ist, ist mit etwas namens Objekt-fit, die eine etwas neuere Eigenschaft in CSS ist. Also, was ich tun werde, ist, ich werde das Objekt fit auf Abdeckung setzen, und Sie werden feststellen, dass das Bild jetzt seine ursprünglichen Proportionen behält. Es ist im Grunde ein bisschen wie Hintergrundgröße Abdeckung, aber für Inline-Bilder. Wir haben dieses Bild über einen bestimmten Raum gestreckt, aber wir haben im Grunde gesagt, dass das Bild, das innerhalb dieses Raumes erscheint , proportional innerhalb dieser Leinwand skaliert werden sollte, und dies ist eine weitere wirklich wertvolle Eigenschaft, die kann Ihnen unter bestimmten Umständen hilfreich sein. In dieser Lektion haben wir uns also ein paar verschiedene Strategien für die Verwaltung von Inline-Bildern angesehen , die in unserem HTML und auch für Hintergrundbilder angezeigt werden. Indem wir einige dieser Techniken gemeinsam verwenden, können wir Bilder haben, die genauso flexibel sind wie unsere flexiblen Fluidgitter. 5. Schritt 3: Medien-Abfragen: In unseren letzten beiden Lektionen haben wir uns also mit den Möglichkeiten befasst, wie wir flexible Gitter und flexible Bilder gemeinsam nutzen können. Aber die Sache mit flexiblen Layouts ist, dass sie nicht immer die beste Erfahrung sind. Also, zum Beispiel auf unserem aktuellen Artikelmodul, sobald ich das Browser-Fenster in etwa, sagen wir, 50 Prozent, können wir bereits sagen, dass dies nicht die beste Erfahrung für den Benutzer ist. Einige der Linienlängen, beginnen, ein wenig eng zu fühlen. Sie fangen an, wirklich dramatisch zu wickeln. Dieses Layout ist nicht wirklich eine Freude mehr zu lesen. Es fühlt sich nicht so angenehm an wie auf einem breiteren Bildschirm. Dasselbe gilt, wenn wir etwas weiter zum Brief unserer Redakteure gehen. Auch hier sieht das Layout gut aus. Es ist proportional skalierbar, aber das Leseerlebnis ist nicht unbedingt ideal. Diese Top-Schlagzeile sieht wirklich schwer und prominent aus. In der Tat, wenn wir unser Browserfenster noch ein wenig mehr bringen, fängt es an, deutlich mehr Immobilien aufzunehmen, als es tatsächlich benötigt. Auch hier ist unser Raster flexibel skalierbar, aber es kommt bis zu einem bestimmten Punkt das Design, wo es anfängt, auseinander zu brechen. Also, nicht die beste Erfahrung, die wir beginnen können, unseren Endbenutzern zu dienen. Vielleicht müssen wir uns einen Weg ansehen, in dem wir dieses flexible Fundament nehmen und es ein wenig neu gestalten können . Vielleicht ändern Sie die Art und Weise, wie die Informationen angezeigt werden, bestimmten Bildschirm- oder Ansichtsfensterbreiten, inbestimmten Bildschirm- oder Ansichtsfensterbreiten,um etwas zu bieten, das nicht nur passt, sondern sich auch auf jedem Bildschirm wie zu Hause anfühlt. Hier kommen Medienabfragen ins Spiel. Dies ist ein bisschen CSS, das wir auf unsere flexible Grundlage anwenden werden, um die Erfahrung zu verbessern, so dass es auf kleinen und breiten Bildschirmen gleichermaßen schön aussieht. Also werde ich ein wenig einfaches CSS schreiben, das Ihnen zeigt, wie eine Medienabfrage funktionieren kann. Da wirklich Medienabfrage wie eine Frage ist, stellen wir einen Browser. Wir fragen den Browser, ob er bestimmte Merkmale oder Bedingungen erfüllt. Wenn es diesen Test bestanden hat und sagt, ja, ich erteile all diese Bedingungen, die Sie in Ihrer Medienabfrage geschrieben haben, dann können wir bedingt einige zusätzliche Stilregeln nur für diese besonderen Umstände anwenden . Ich werde mit etwas sehr Geradliniges beginnen , das heißt, dass auf dem Körperelement die Textfarbe schwarz sein soll. Aber wenn ich eine Bildschirmbreite habe, die mindestens 500 Pixel breit ist, möchte ich, dass die Farbe rot ist, und ich möchte, dass der Text fett ist. Lassen Sie mich Ihnen zeigen, wie das in der Praxis aussieht. So sieht der Bildschirm auf einem kleineren Gerät aus. Ich verwende den Responsive-Design-Modus von Firefox, um diesen schmalen Bildschirmeffekt zu simulieren. Aber da ich das Ansichtsfenster ein wenig breiter mache, sich der Text proportional. Aber sobald ich eine Bildschirmbreite von etwa 500 Pixeln getroffen habe, ändert sich das Design ziemlich dramatisch, weil die Bedingungen für Medienabfragen erfüllt wurden. In unserer Medienabfrage haben wir gesagt, Sie sollten nur die rote Farbe anwenden, Sie sollten nur die Fettschrift anwenden, wenn wir mindestens eine Mindestbreite von 500 Pixeln haben. Wenn das der Fall ist, werden wir die Dinge gut aussehen lassen, offen gesagt hässlich. Dies ist nicht die nützlichste Medienabfrage, aber im Kern ist dies die Flexibilität, die wir auf unsere responsive Designs anwenden können. Wir können das Layout ändern und die Typografie ändern und andere Aspekte unseres Designs ändern, auf eine Art und Weise, die für uns etwas nützlicher ist als roter Text. Lassen Sie uns also einen genaueren Blick auf die Syntax für Medienabfragen werfen. Nun haben wir vorher gesagt, dass dies eine kleine Frage ist, die wir dem Browser stellen und jede Medienabfrage im Grunde in zwei spezifische Komponenten zerlegt. Jede Medienabfrage beginnt mit einem Medientyp, der die Geräteklasse oder genauer die Medien, die wir zu stylen versuchen, skizziert . Nun, in der CSS-Spezifikation, gibt es vier akzeptable Medientypen, die skizziert werden. Bildschirm, wie mobile und Tablet- und Desktop-Browser. Es gibt auch den Sprachmedientyp, für mündliche Browser, die Inhalte lesen können, die dem Benutzer erlaubt sind. Es gibt auch den Print-Medientyp, für druckspezifische Stile und schließlich gibt es den All-Medientyp, im Grunde besagt , dass diese Medienabfrage für alle Medien gelten sollte. Nun ist der Medientyp völlig optional. Wenn Sie es auslassen, sagen Sie effektiv, dass dies für alle Medien gilt. Standardmäßig ist der gesamte Medientyp. Der zweite Teil der Medienabfrage ist, der echte Schlüssel zum Entsperren der Macht hinter einer Medienabfrage. Das ist die Medienfunktion. Dies ist wirklich die Frage, die wir tatsächlich den Browser stellen. Wie wir bereits gesagt haben, sagt diese spezielle Medienfunktion, ist Ihr Ansichtsfenster, ist Ihr Browserfenster mindestens 500 Pixel breit? Wenn dies der Fall ist, werden die Stile innerhalb der Medienabfrage angewendet. Nun gibt es eine ganze Reihe von verschiedenen Medienfunktionen, die Sie tatsächlich abfragen können. Wir werden nicht unbedingt alle in dieser Klasse abdecken. Wenn Sie daran interessiert sind, mehr zu erfahren, gibt es einen Link in den Ressourcen zu einer vollständigen Liste aller verschiedenen Optionen, die Sie zur Verfügung haben. Es ist fair zu sagen, dass das meiste, was wir in einem responsive Design tun, ist, indem min-width Abfragen angewendet werden, um komplexere Stile auf unseren Designs zu schichten , da Bildschirme im Laufe der Zeit breiter werden. Werfen wir einen Blick auf unser Beispiel-Layout und schauen uns einige Möglichkeiten an, wie wir min-width Media-Abfragen verwenden können, um einige dieser Widescreen-Stile auf gut, breitere Bildschirme zu isolieren. Wenn ich also beginne, Medienabfragen auf ein flexibles Layout anzuwenden, finde ich es wirklich hilfreich, sich die Bereiche anzusehen, in denen mein Design anfängt zu brechen und wo es anfängt zu brechen, wenn der Bildschirm schmaler wird. Wie bereits erwähnt, haben wir es immer noch mit einem flexiblen Gitterlayout zu tun, das fünf Spalten breit ist, was wirklich ideal für Breitbildgeräte und Browser ist. Unter diesem Breitbildpunkt möchten wir also ein anderes Layout anwenden. Wir wollen dieses fünfspaltige Layout nur anwenden, wenn Bildschirme mindestens über einer bestimmten Breite liegen. Also, ich werde beginnen, indem ich einige der Widescreen-Grid-Layout-Regeln, die wir für das aktuelle Artikelmodul geschrieben haben , und sie mit einer Medienabfrage umgibt. Also, ich werde Medien schreiben, min-width, 60em. Dann nehme ich alle diese Grid-Regeln, die wir für das aktuelle Artikelmodul geschrieben haben, und wende sie innerhalb dieser Medienabfrage an. Jetzt, 60em, ist im Grunde äquivalent zum Schreiben von 960 Pixeln. Ich verwende gerne m-basierte Medienabfragen, weil sie ein wenig zugänglicher sind. Wenn jemand die Textgröße in seinem Browser ändert, folgen die Medienabfragen mehr oder weniger dieser Präferenz für den Endbenutzer. Wenn Sie es bequemer sind, pixelbasierte Medienabfragen zu schreiben, ist das völlig in Ordnung. Dies ist eine stilistische Präferenz und eine, die ich finde, ist ein wenig zugänglicher, aber unabhängig davon, wie Sie es schreiben. Nun, da wir eine Medienabfrage haben, die besagt, über dieser Breitbildbreite, oberhalb einer Breite von 60em, wenden Sie dieses Rasterlayout an. Wenn ich meine Änderungen speichere und zum Browser zurückgehe und meine Arbeit aktualisiere, verliere ich, wenn ich unter den Schwellenwert von 60em fällt, mein rasterbasiertes Layout und Dinge linearisieren sich zu einem einzelnen Spaltendesign. Nun, an diesem Punkt, ist das nicht sehr attraktiv. Aber ich denke, man könnte sehen, wie auf einem kleineren Bildschirm das tatsächlich unglaublich gut funktioniert. Wir haben mit einem kleinen Bildschirm-freundlichen Layout begonnen, und wenn wir dann eine bestimmte Breite erreichen, können wir das Design so komplex machen, wie es sein muss. Wir können den Raum, der uns zur Verfügung steht, besser nutzen. Das ändert nichts an der Tatsache, dass wir immer noch diese peinliche Übergangszeit haben. Also, was ich tun werde, ist, ich werde eine Medienabfrage von 35em anwenden. Also, ich habe bei Medien geschrieben, min-width, 35 ems, was auf das mittlere Range-Layout ziemlich gut zielen sollte. Jetzt in diesem Bereich werde ich meine Artikel letzten Block anvisieren. Ich werde ein rasterbasiertes Layout deklarieren. Aber anstatt ein Fünf-Spalten-Layout zu machen, werde ich ein vierspaltiges Layout erstellen. Dann werde ich die Säulenlücke auf zwei Prozent bringen. Bevor ich fortfahre, möchte ich nur darauf hinweisen, dass wir uns auf Komplexität konzentrieren, da die Feder breiter und breiter wird. Alle Regeln aus der vorherigen Medienabfrage, werden wir die folgenden anwenden. Das ist also eine Art Schichteffekt, den wir in unserem Design tun, da die Dinge komplexer werden. Ich erwähnte, dass, weil wir Display, Gitter an dieser Stelle im CSS deklariert haben, was bedeutet, wenn wir unser Breitbildlayout treffen, wir die zweite Deklaration tatsächlich entfernen können. Wir haben es bereits zu einem schmaleren Haltepunkt erklärt, und so wird es immer noch ein Effekt sein, wenn wir auf den breiteren aufsteigen. Also, jetzt haben wir ein vierspaltiges Layout. Vielleicht erinnern Sie sich an diese seltsame Standardplatzierung von Elementen in unserem Rasterlayout aus der vorherigen Lektion. Aber was wir tatsächlich hier getan haben, wenn wir die Rasterlinien in Firefox einschalten, können Sie sehen, dass wir ein vierspaltiges flexibles Raster erstellt haben. Nun können wir das nutzen, um unser Design zu vervollständigen, genau wie wir es zuvor getan haben. An diesem Haltepunkt möchte ich immer noch, dass mein Header die volle Breite des Moduls überspannt. Also, um das zu tun, kann ich tatsächlich die Regel vom Breitbild-Breakpoint nehmen und sie auf den schmalen verschieben. Das ist etwas, das ich sowohl an diesem Mittelklasse-Breakpoint als auch auf dem Widescreen wahr möchte . Ich kann im Grunde sagen, Gitterspalte beginnen eins, und Rasterspalte und negative, um die volle Breite der Zeile zu haben. Nun, wir haben eine vollständige Zeile oben oben. Denken Sie daran, wir haben ein vierspaltiges Layout, mit dem wir arbeiten, anstatt ein Fünf-Spalten-Layout. Also, was ich gerne sehen würde, ist, dass ich möchte, dass alle Geschichten innerhalb meines Artikel-neueren Blocks ein Gitterspalte-Ende haben, und ich möchte zwei Spalten umfassen. Also, sobald ich das gespeichert habe, haben wir jetzt mehr oder weniger die Art von Layout, nach der wir in diesem mittleren Bereich suchen. Beide Geschichten werden über diese horizontale Achse gleichmäßig gewichtet, beide erstrecken sich über zwei Spalten, und die sekundären Geschichten sitzen darunter. Das ist viel besser als das, was wir vorher hatten, weil wir ein einspaltiges Layout für kleine Bildschirme hatten, und jetzt haben wir einen schönen mittleren Haltepunkt für alles in der Mitte, der sich nach oben bewegt. Also, das ist eine Verbesserung, aber es gibt ein bisschen Passform und Abschlussarbeit, die wir noch tun können. Insbesondere fühlt sich diese Liste von Geschichten hier unten ein wenig an , als könnte sie den verfügbaren Platz besser nutzen. Um das zu tun, werde ich diese Liste tatsächlich wie ein Raster selbst an diesem bestimmten Haltepunkt behandeln . Was ich als nächstes tun werde, ist, dass ich sagen werde, wenn ich einen Haltepunkt von mindestens einer Breite von 35 ems erreicht habe , aber auch bei einer maximalen Breite von 60 ems. Ich möchte diese Liste ein wenig anders behandeln. So ist dies eine Möglichkeit, dass wir Medienfunktionen miteinander kombinieren können , um komplexere Medienabfragen zu machen. Wir können im Grunde sagen, wir wollen, dass es mindestens 35 ems breit ist, aber nicht größer als 65 ems, nur um den mittleren Bereich zu erreichen. Sobald wir diesen mittleren Haltepunkt installiert haben, kann ich einen kleinen Code schreiben, um meine Sidebar anzusprechen. Insbesondere werde ich Artikel-Recent-aside und Artikel-Recent-Teaser-Liste schreiben. Dadurch kann ich sowohl das beiseite Element, das die Sidebar enthält, auch die Liste darin ansprechen. Dann werde ich Display schreiben: Inhalt. Nun, dies ist ein magisches kleines Stück der CSS-Grid-Spezifikation, die es uns ermöglicht, diese Stücke von HTML auszuschalten. Mit anderen Worten, wir sagen dem Browser, so zu tun, als ob diese Elemente nicht existieren, und konzentrieren sich einfach auf alles, was innerhalb der Liste selbst ist, speziell auf unsere Links zu sekundären Geschichten. Sobald wir das tun, speichere ich meine Arbeit, ich gehe zurück zum Browser. Diese Listenelemente werden behandelt, als wären sie Teil des Gitters, das über ihnen sitzt, und so werden sie auf diesen vier Spalten angelegt. Nun gibt es verschiedene Möglichkeiten, wie Sie dieses Problem angehen können. Sie könnten andere Layoutmethoden verwenden um festzulegen, dass diese Elemente entlang der gleichen Rasterlinien liegen, aber das ist meiner Meinung nach eine wirklich effektive Möglichkeit, etwas Ähnliches zu tun. Da wir es tatsächlich auf eine maximale Breite von 60 ems gesetzt haben, werden Sie feststellen, sobald wir zu unserem Breitbild-Design gehen, sobald wir zu unserem Breitbild-Design gehen,dass sie wieder in die Seitenleiste springen. Wir haben diese Stile über unserem Breitbildlayout deaktiviert, und dann befinden sie sich im Grunde wieder in dieser fünften Spalte. So haben wir jetzt ein flexibles Raster, flexible Bilder und Medienabfragen arbeiten zusammen. Wir haben mit dem Breitbildlayout begonnen, und wir haben Teile des Designs deaktiviert , die für kleinere Bildschirme nicht geeignet sind. Das ist für mich das Zeichen eines wirklich effektiven Responsive Designers. Um sich diese harten Fragen zu stellen, nicht nur über den kleinen Bildschirm und den Widescreen, sondern sich selbst zu fragen, welche anderen Erfahrungen Sie vielleicht nicht unbedingt in Betracht ziehen, und haben ein Design oder Layout, das zu einigen spricht von diesen mittleren Rängen? Also, jetzt, da wir das aktuelle Artikelmodul reaktionsschnell gemacht haben, habe ich voran gegangen und tatsächlich sowohl den Brief von den Redakteuren als auch unsere Cover-Story-Module auf die gleiche exakte Weise übersetzt . Ich habe begonnen, indem ich dieses flexible Layout betrachtete und Wege betrachtete, wie es zerlegt wurde, und einige Medienabfragen angewendet, um nicht nur komplexere Stile zu deaktivieren, und einige Medienabfragen angewendet,um nicht nur komplexere Stile zu deaktivieren, sondern auch den Ansatz unter kleinere breitere Bildschirme. Nur um Ihnen einen schnellen Einblick in einige der Entscheidungen zu geben, die ich getroffen habe, der Brief für unsere Redakteure tatsächlich näherte ich mich in einer sehr ähnlichen Weise wie das aktuelle Artikelmodul. Also, in kleineren Layouts, habe ich mich für ein weiteres vierspaltiges Layout entschieden, das wieder mit CSS Grid angegeben wurde. Auch hier behandle ich die sekundären Links unten unten in einer sehr ähnlichen Weise wie im letzten Artikelblock. Dann unter einem bestimmten Bildschirmpunkt verlasse ich mich nur auf Text, um etwas Design für kleinere Bildschirme zu liefern. Mit anderen Worten, es gibt hier kein Rasterlayout zu sprechen, obwohl ich mich sicher bewerben könnte, wenn ich es möchte. Für die Titelgeschichte habe ich etwas sehr Ähnliches gemacht. Also, anstatt den Autotext und das Bild übereinander zu überlagern, beschloss ich, sie nur auf kleineren Bildschirmen zu stapeln. Es ist genauso wirkungsvoll, aber es ist ein bisschen einfacher, wenn ich nicht so viel Bildschirm-Immobilien habe, mit dem ich arbeiten kann. Aber dann, wenn der Bildschirm ein wenig breiter wird, kann ich anfangen, nach Möglichkeiten auf dem Widescreen zu suchen , um dann das vollständige Layout nur einzuführen , wenn ich über dieser Bildschirmbreite von 60 ems bin. Aber unter diesem Punkt gibt es einfach gestapelt. So machen Sie diese flüssigen Layouts reaktionsschnell, mit ein wenig Medienabfrage funktionieren. 6. Feinschliff deines Designs: In dieser Lektion möchte ich auf drei verschiedene Bereiche eingehen, die Ihren responsiven Designs eine zusätzliche Politur verleihen können , insbesondere Typografie, Fallback-Layouts und Bilddaten. So haben wir in unserem letzten Abschnitt einige Möglichkeiten untersucht, wie wir unsere flexiblen Layouts mithilfe von Medienabfragen neu gestalten können, um sicherzustellen, dass die Dinge auf dem kleinen Bildschirm, aber auch auf dem Breitbild schön aussehen . Also, was wir bisher getan haben, ist, dass wir eine wirklich schöne Anpassung auf der Rasterebene für jedes dieser Module haben . Dinge bewegen sich von einem einspaltigen Layout zu einem vierspaltigen Layout und schließlich zu einem Fünf-Spalten-Layout am oberen Ende. Aber wenn Sie ein wenig Zeit damit verbringen, über diese Designs zu schauen, werden Sie einige Bereiche bemerken, in denen sie noch ein wenig zusätzliche Aufmerksamkeit benötigen, speziell auf ihre Typografie. So, zum Beispiel, diese wirklich prominente Überschrift in den Briefen aus dem Modul unseres Redakteurs. Auf kleineren Bildschirmen , beginnt dieser wirklich große prominente Text gut zu fühlen ziemlich groß und prominent und. In der Tat, wenn Sie sich dies auf einem kleinen Bildschirmgerät oder auf einem Tablet ansehen, werden Sie wahrscheinlich feststellen, dass es beginnt, den Rest des Bildschirms zu überholen. In der vorherigen Lektion verwenden wir Medienabfragen, um unsere Raster so zu ändern , dass wir keine Breitbildlayouts bis zu kleinen Bildschirmbenutzern bereiteten. Wir sollten auch nach Möglichkeiten in unseren responsiven Designs suchen, um sicherzustellen, dass wir keine Breitbild-Topographie bis hin zu kleinen Bildschirmbenutzern bedienen. Also, was ich in dieser Lektion getan habe, ist tatsächlich die Suche nach einigen Möglichkeiten, Medienabfragen zu verwenden, um die Typografie anzupassen. Also, zum Beispiel, auf einem kleineren Bildschirmgerät, habe ich im Grunde die Typgröße schließen diese Überschrift beträchtlich. Als wir dann bei rund 35 M zu unserem Mittelklasse-Breakpunkt kamen, kann ich die Typengröße ein wenig höher schlagen. Sobald wir unser Breitbildlayout erreicht haben, haben wir die vollständige Überschrift und Ansicht. Dies kann nun auch auf unsere Coverstory zutreffen. Sie haben diese wirklich große, schöne Überschrift und diesen Autotext auf breiteren Bildschirmen. Aber auf kleineren Bildschirmen fühlt sich diese Art Größenbestimmung nicht unbedingt angemessen an. Also, wir können das auch festziehen, vielleicht machen Sie das Unterkopf etwas kleiner als auch und reduzieren die Polsterung auf dem Autotext als auch, um sicherzustellen, dass es sich wirklich schön und angemessen an jeder Größe Bildschirm anfühlt. sind also die Herausforderungen vor den ansprechenden Designern, nicht nur darüber nachzudenken , wie sich das Layout auf Makroebene verändert, sondern auch diese kleinen Details wie diese zu betrachten und sicherzustellen, dass sich die Dinge wie zu Hause fühlen auch auf kleineren Bildschirmen. Die andere Sache, über die wir sprechen sollten, ist, was zu tun ist, wenn Browser einige der Funktionen nicht unterstützen, die Sie möglicherweise verwenden, um Ihre responsive Designs zu unterstützen. Jetzt, für die heutige Klasse verwenden wir CSS Grid wirklich stark, um dieses flexible Fluid Grid bereitzustellen , das als Grundlage für unsere responsive Designs sitzt. Jetzt müssen Sie CSS Grid nicht verwenden, Sie können Floats oder Flexbox verwenden oder was haben Sie, wenn Sie das vorziehen, aber zumindest für mich finde ich es eine wirklich gute Möglichkeit, Layouts für das moderne Web zu entwerfen. Die Sache mit CSS Grid ist jedoch, dass es relativ neu ist und es gibt immer noch einige ältere Browser und Geräte, die es nativ nicht unterstützen. Also, was ist das beste Szenario für diese Geräte und Browser? Sie haben ein paar verschiedene Möglichkeiten. Einer davon ist, dass Sie CSS Grid vermeiden könnten. Das ist eine vollkommen gültige Wahl. Stattdessen möchte ich eigentlich etwas namens Feature-Abfragen verwenden. Jetzt haben wir in diesem Kurs umfangreiche Medienabfragen verwendet, um unsere responsive Layouts basierend auf den Eigenschaften der Medien anzupassen unsere responsive Layouts basierend auf , die unsere Designs darstellen. Feature-Abfragen ermöglichen es uns, den Browser tatsächlich zu fragen, ob er bestimmte CSS-Funktionen unterstützt, und wenn dies der Fall ist, dann können wir diese verbesserten Layouts bedingt implizieren. Nun ist die Art und Weise, wie Feature-Abfragen geschrieben werden, mit der Art unterstützt Direktive. Nun, wenn wir uns unsere entworfen in Internet Explorer, die Dinge werden ein wenig seltsam aussehen auf älteren Versionen von Internet Explorer, die CSS Grid nicht unterstützen. Also, die Fragen, die wir uns stellen müssen, ist, wollen wir ein Fallback-Layout liefern, das mit Floats oder mit Flexbox geschrieben ist , oder was haben Sie, das ist im Grunde visuell ähnlich dem, was wir mit CSS Grid erstellt haben? Das ist ein vollkommen gültiger Ansatz, und je nachdem, wer in Ihrer Zielgruppe ist und welche Arten von Browsern sie verwenden, könnte dies die beste Option für Sie sein. Für die meisten Projekte, an denen ich kürzlich gearbeitet habe, ist stattdessen, ein einzelnes Spaltenlayout für Browser bereitzustellen , die CSS Grid nicht verstehen, und dann für Browser, die dies tun, für modernere -Geräten und Browsern, diene ich ihnen ein vollständiges Grid-getriebenes Layout. Also, Liste vier unserer fiktiven Zeitschrift, Ich werde eine Feature-Query schreiben, und ich werde den Browser fragen, ob es Display-Grid unterstützt. Nun, wenn der Browser Feature-Abfragen versteht und er das Anzeigeraster versteht, kann ich erweiterte Regeln innerhalb dieses Blocks anwenden. Nun, wirklich, was ich sehen möchte, ist, dass ich die Breite des Körperelements nur auf Browser beschränken möchte, die es nicht verstehen. Also, stattdessen werde ich eine Marge von Null auto für alle Browser festlegen und eine maximale Breite von 30 ems für das Körperelement festlegen, das im Grunde eine schöne, zentrierte Spalte in der Mitte des Browserfensters erstellt , wenn sie CSS Grid nicht unterstützen. Jetzt, für Browser, die CSS Grid unterstützen, möchte ich diese maximale Breite deaktivieren und den Rand auf Null zurücksetzen. Dies sind meine fortschrittlicheren Layout-Regeln. Wenn wir nun zu Internet Explorer zurückkehren, Sie sehen, dass die Dinge perfekt in der Mitte des Browserfensters zentriert sind . Nun, das ist vielleicht nicht unbedingt Layout, dass Sie und ich eine beträchtliche Menge an Zeit damit verbracht haben, zu entwerfen, aber das Wichtigste ist, dass es jedem Browser und jedem Gerät Zugriff auf die Inhalte auf unserer Webseite erlaubt , unabhängig von ihre Fähigkeiten. Für Browser, die etwas fortgeschritten sind, erhalten sie ein etwas raffinierteres Erlebnis. Also, diese Feinabstimmung Lektion, haben wir uns mit Möglichkeiten beschäftigt, unsere Topographie ein wenig zu massieren und auch eine bessere Erfahrung für weniger fähige Geräte und Browser zu bieten. Es gibt auch verschiedene Möglichkeiten, wie wir unsere Bilder auch reaktionsschnell machen können. Manchmal ist die einfache Größenänderung eines Bildes nicht notwendigerweise der beste Ansatz. Möglicherweise möchten Sie verschiedene Dateiformate für verschiedene Geräte bereitstellen , wenn diese die Art von Bild, die Sie ihnen bereitstellen möchten, nicht unterstützen . Vielleicht möchten Sie Bilder mit höherer Auflösung für Displays mit höherer Qualität bereitstellen , ohne weniger leistungsfähige Geräte mit Bildern zu überladen , die nicht gerendert werden. Oder vielleicht möchten Sie unter bestimmten Umständen sehr spezifisch über die Zuschnitte von Bildern sein , die Sie für bestimmte Geräteklassen anzeigen. Wenn Sie einige Zeit damit verbringen, durch dieses vollständige Seitenlayout zu blättern, das ich erstellt habe, werden Sie verschiedene Instanzen sehen, in denen ich verschiedene Teile der responsiven Bildspezifikation verwendet habe , um genau das zu tun. Beispielsweise verwendet das Logo, das auf dem Masthead angezeigt wird , das Bildelement und innerhalb des Bildelements werden Sie feststellen, dass ein Quell-Tag vorhanden ist. Nun, dieses Quell-Tag verweist auf eine SVG-Datei, die eine nette, gestochen scharfe Vektorwiedergabe unserer kleinen Logo-Marke ist, aber es wird nur für Browser serviert, die das Bildelement verstehen und das außer SVG-Bildern basierend auf dem Typ Attribut, das wir auf diese Quelle gesetzt haben. Wenn ein Browser das Bildelement nicht versteht oder SVG-Bilder nicht akzeptiert, haben wir ein Bild innerhalb unseres Bildelements gelassen, das als Fallback fungiert, das auf eine einfache alte SVG-Datei verweist. Mit anderen Worten, wir können dieses Bild in höherer Qualität an die Browser und Geräte liefern , die es verstehen, und wenn sie es nicht tun, lassen wir sie mit einem schönen Fallback. Wir können auch sehr präskriptiv darüber sein , welche Arten von Bildern wir auf verschiedenen Bruchpunkten zeigen wollen. Wir können auch das Bildelement verwenden, um dies zu tun. Sie werden auf der Titelgeschichte bemerken, auf kleineren Bildschirmen, ich lade einen etwas anderen Zuschnitt des Bildes. Es ist etwas stärker auf das Gesicht des Dinosauriers fokussiert, aber auf breiteren Bildschirmen gehen wir zurück zu diesem vollen, quadratischen Bild, das über dem vollständigen Modul überlagert ist. Es ist eine etwas andere Ernte und es ist ein bisschen breitbildfreundlicher. Ich kann angeben, welches Bild geladen wird, wo das Bildelement wieder verwendet wird. Aber jetzt verwende ich tatsächlich das Quell-Tag, um tatsächlich über einen bestimmten Haltepunkt zu sagen, ich möchte diese Medienabfrage verwenden, um dieses Weißbildbild bedingt zu laden. Dann habe ich standardmäßig dieses einfache, alte Bild-Tag, das als Basiserfahrung für kleine Bildschirmbenutzer fungiert. So haben wir in unserer Lektion bisher verschiedene Möglichkeiten zur Anpassung unserer Layouts untersucht, um sie flexibler und reaktionsfähiger zu machen In der nächsten Lektion werden wir jedoch einen Schritt von HTML und CSS zurücknehmen und stattdessen sprechen Sie über unseren Designprozess und darüber, wie er sich ändern muss, jetzt, da wir für mehr Geräte als je zuvor entwerfen. 7. Ein responsiverer Prozess: In der Lektion bisher haben wir eine Menge und reaktionsschnelle Layouts gesucht. Aber jetzt möchte ich ein wenig mehr darüber sprechen, wie sich Ihre Arbeit als responsiver Entwickler oder Responsive Designer in den nächsten Monaten oder einigen Jahren ändern könnte . In einer der ersten Lektionen sagte ich, dass die Dinge, die ein Design reaktionsfähig machen, flüssige Gitter, flüssige Bilder und Medienabfragen sind . Aber die Sache ist, dass es hier wirklich nur um Layout geht, um eine visuelle Hierarchie zu etablieren und zu definieren, wie sich diese Hierarchie im Laufe der Zeit mit Haltepunkten und flüssigen Rastern ändern muss . Die Sache ist, dass alle diese Zutaten wirklich nur auf das Layout, über die Einrichtung einer visuellen Hierarchie und dann die Verwendung von Medienabfragen, um zu artikulieren, wie sich diese Hierarchie ändern muss, wenn Bildschirme breiter oder kleiner werden. Die Sache ist, dass Design so viel mehr ist als das. Es gibt dieses Zitat, das ich liebe von Paul Rand. Er sagte einmal, dass Design die Methode ist, Form und Inhalt zusammenzustellen. In jüngerer Zeit sagte ein Kollege und Freund von mir, Mark Boulton, dass Design das Zeug um das Endergebnis ist. Design ist nicht nur der letzte Satz von Mockups oder die Website, die Sie gestartet haben, es ist der Prozess, den Sie gemacht haben, um dorthin zu gelangen. Der Weg, den Sie zu den harten Fragen gegangen, die Sie sich als Designer oder Entwickler stellen mussten . Das ist es, was letztendlich Ihr Design prägt. Also, wenn wir uns fragen, was macht ein Design reaktionsschnell? Ich denke, der Schwerpunkt liegt ein wenig auf dem falschen Teil der Phrase. Mit anderen Worten, wie muss sich unser Prozess ändern, um Responsive Design für uns viel einfacher zu machen ? Wie müssen wir reaktionsfähigere Designer oder reaktionsfähigere Entwickler werden? Also möchte ich in dieser Lektion ein wenig darüber sprechen, wie meine Praxis in den letzten Jahren verändert hat. Ich möchte zunächst über eine spezifische Fallstudie sprechen, nämlich die Neugestaltung des Boston Globe, die die erste groß angelegte reaktionsschnelle Neugestaltung war, die vor ein paar Jahren stattgefunden hat. Nun, als ich und meine Kollegen hereingeholt wurden, um bei diesem Projekt zu helfen, hatte das Team bereits diese Suite von wirklich schönen Comps für ein Breitbild-Layout erstellt , ähnlich wie wir es in diesem Kurs heute getan haben. Die Herausforderung, die wir herausfinden mussten, war wie Sie diese Bilder einer Website tatsächlich aufnehmen und sie in ein völlig reaktionsfähiges Fluid-Design übersetzen. Denn die Herausforderung bei Mockups ist, dass sie Bilder mit fester Breite einer Website sind. Sie sind nicht unbedingt so flexibel wie die Leinwand, für die wir eigentlich im modernen Web entwerfen. Nun, du könntest das umgehen, oder? Da Comps repliziert werden könnten, können Sie verschiedene Versionen eines Layouts an verschiedenen Breakpoints anzeigen, aber das ist unglaublich teuer. Ausbrechen kleiner Bildschirm- und Mittelklasse-Breakpoints für all diese verschiedenen Seiten wird in Photoshop oder in Sketch wirklich schwierig. Diese Design-Tools sind also nicht unbedingt so flexibel, wie wir sie brauchen, wenn wir reagieren. Wir fanden auch die Art und Weise, wie wir den kreativen Prozess managen war ein wenig zu unflexibel für reaktionsfähige Produkte. Genauer gesagt, als es auf den Punkt kam zwischen Design und Front-End-Entwicklung zu wechseln, hatte der Kunde die Idee, dass er die Arbeit bereits genehmigt hatte. Sie hatten sich auf den Comps abgemeldet, und so war es nur mehr oder weniger ein Design im Browser, das das Design in den Comps repräsentierte, die sie genehmigt hatten. Leider waren diese Comps nicht annähernd so flexibel, wie wir sie brauchten. Deshalb haben ich und die anderen Teamkollegen, mit denen ich zusammenarbeitete, sehr früh erkannt, dass wir diese Wand zwischen Design und Entwicklung brechen mussten und stattdessen schneller über das Design und den Browser iterieren mussten. Wir alle arbeiteten effektiv als ein kreatives Team. Einige von uns entwerfen in erster Linie in Illustrator oder in Photoshop. Andere arbeiten hauptsächlich mit HTML und CSS. Wir alle entwarfen diese Responsive Seite gemeinsam. Die Art und Weise, wie wir das durchgearbeitet haben, war, wo wir uns als Gruppe setzen und tatsächlich die nächste Reihe von Arbeiten zusammen überprüfen, insbesondere die Comps, die die Hälfte des Teams erstellt hatte, zu überprüfen. Als wir als Designteam einberufen sind, stellen wir uns das Design vor. Also, das Design Hälfte des Teams würde ein wenig eine Geschichte erzählen, wie sie dorthin kamen, einige der Entscheidungen, die sie in diesem Layout getroffen haben, und wie es die Bedürfnisse des Unternehmens erfüllt. Von da an war es wirklich auf der Entwicklung der Hälfte des Design-Teams, eine Menge Fragen zu stellen, und sie waren breit gefächerte Fragen. Sie können Fragen des Layouts beantworten, darüber, was passiert, wenn Sie zwei dominante Informationen haben. Nehmen wir an, in einem Modul, und dann, was waren die Erwartungen an das Design Hälfte des Teams wenn Sie den Vorteil von zwei Spalten nebeneinander verloren haben. Wenn Sie dieses Modul auf einem kleinen Bildschirm rendern, welche dieser beiden Informationen sollten zuerst angezeigt werden? Sie könnten Fragen der Interaktion behandeln. Wenn Sie sich zum Beispiel ein Fotokarussell ansehen, wie es in Photoshop entworfen wurde, ist es wahrscheinlich ziemlich einfach zu erraten, wie das funktionieren könnte , wenn Sie eine Maus auf Ihrem Gerät zur Verfügung haben. Wenn Sie auf ein Element tippen oder klicken, um das Karussell voranzubringen. Aber was passiert, wenn Sie keine Maus haben? Was passiert, wenn Sie sich auf einem Touch-basierten Display befinden? Wollen Sie ein Preis-Leistungs-Verhältnis für Berührung aufbauen und in der Lage sein, durch diese Fotos zu wischen? Was passiert, wenn jemand das Design nicht so sieht wie du und ich, und sie diese Informationen in einem sprechenden Browser vorlesen lassen? Das ist auch etwas, das wir entwerfen können. Also, was sind die Erwartungen von der Designhälfte des Teams darüber, was diese Erfahrung sein sollte? Ich werde ehrlich sein, ich war am Ende einiger dieser Fragen in vielen Projekten und sie sind schrecklich. Weil ich als Designer sehr häufig einige dieser Optionen nicht in Betracht gezogen habe. Aber wir haben schon sehr früh bei der Neugestaltung des Boston Globe festgestellt, dass es in Ordnung ist, wenn wir keine Antworten hätten. Wirklich, was wir versuchen zu tun, ist sicherzustellen, dass jedes Mitglied des Teams ein gemeinsames Verständnis davon hat, was uns bis zu diesem Punkt gebracht hat, denn irgendwann wird der Prozess, den der Hälfte des Teams obliegen , die die Arbeit der anderen Hälfte. Sie müssen also in der Lage sein, Empfehlungen darüber zu geben, wie sie vorgehen sollen. Das habe ich von jedem meiner Klienten gehört, seit ich am Boston Globe gearbeitet habe. Wenn man Design und Entwicklung näher zusammenbringen kann, führt dies immer zu stärkeren digitalen Responsive-Produkten. Die Qualität der Arbeit verbessert sich, desto enger können Design und Entwicklung zusammenarbeiten. Ein Teil davon ist, die Prototyping-Phase als Teil des Entwurfsprozesses zu behandeln, denn sobald Sie ein gemeinsames Verständnis davon haben, wie die Comps bis zu diesem Punkt gekommen sind, müssen Sie sie aus Comps holen und es zu codieren. Mit anderen Worten, Sie müssen sie in einen flexiblen reaktionsfähigen Prototyp bringen , der tatsächlich die Leinwand ist, für die wir wirklich entwerfen. Sobald Sie dies tun können, können Sie Front-End-Entwickler tatsächlich Empfehlungen dazu geben, wie Sie mit einem kleinen Bildschirmlayout beginnen und flexible Gitter, flexible Bilder und Medienabfragen einführen, um einen Prototyp zu erstellen, der reaktionsschnell wie möglich. Nun, im Prototyp, sie sehr häufig nicht unbedingt Referenzdesigns für jeden dieser Haltepunkte haben . Mit anderen Worten, sie entwerfen im Browser, und sie geben gute Empfehlungen öfter als nicht, aber sie sind nur Empfehlungen. Deshalb finde ich es am anderen Ende der Prototyping-Phase unglaublich hilfreich, als Team zurückzukreisen und tatsächlich eine interaktive Designüberprüfung zu haben. Aber anstatt Designs auszudrucken und sie an eine Wand zu kleben oder sie auf den Bildschirm zu projizieren, ist es wirklich unglaublich hilfreich, den Prototyp auf so vielen Geräten und Browsern wie möglich zu laden , und übergeben Sie es an Menschen. Eigentlich, lassen Sie sie mit dem Design in diesen verschiedenen Geräten arbeiten, und sprechen Sie darüber, wie sich das Design tatsächlich für sie anfühlt. Diese interaktiveren Designbewertungen sind eine unglaublich leistungsfähige Möglichkeit, ein Responsive Design live in so vielen Geräten und Browsern wie möglich zu überprüfen . Sie können einfach ein laufendes Gespräch darüber führen, wie sich das responsive Design anfühlt. Fühlt sich das Layout angemessen an, da wir es auf unterschiedlich großen Bildschirmen betrachten? Fühlt es sich richtig an, wenn ich auf einem Touch-basierten Display bin und ich durch verschiedene Elemente wische? Oder was am wichtigsten ist, benötigen Elemente tatsächlich zusätzliche Entwurfsrichtung? Suchen Sie in Ihrem Design nach Möglichkeiten, bei denen einige Teile des Elements auseinanderbrechen könnten, und vielleicht kann das Design die Hälfte des Teams dekoppeln, und geben Sie einige Empfehlungen, wie Sie einige dieser Details wählen können. Mit anderen Worten, wenn Sie Prototyping und traditionelle Design-Tools eng zusammen verwenden können, wird das immer zu einem besseren Responsive-Produkt führen. Mit anderen Worten, Ihre Photoshop-Comps oder Ihre Sketch-Dateien als kanonisch zu behandeln, als perfekte Referenz, als perfekte Referenz, ist etwas, das den Wert Ihres reaktionsfähigen Produkts gefährden wird, da es sich um Bilder einer Website unter das Ende des Tages. Sie können Ihnen nicht sagen, was auf unterschiedlich großen Bildschirmen passiert oder wenn Schriftarten nicht geladen werden oder wenn ein Teil Ihres Designs nicht tatsächlich im Browser gerendert wird. Mit anderen Worten, HTML und CSS sind die besten Design-Tools, die wir haben, um einige dieser Lücken zu füllen. Aber im Idealfall werden wir mit diesen zusammen arbeiten. Nun, die andere Sache, die unglaublich mächtig ist, und ich denke, das gilt für jedes reaktionsfähige Projekt, ist, einen harten Blick auf die Informationen zu werfen, die wir auf diesen Bildschirmen entwerfen, und das war sehr wertvoll für uns auf dem Boston Globe. An jedem Punkt des Prozesses haben wir uns immer gefragt, welchen Wert dieser Inhalt für den mobilen Nutzer hat? Mobile first wurde von Designer namens Luke Wroblewski vor über 10 Jahren geprägt. Zu dieser Zeit argumentierte er, dass mobile Bildschirme unsere Priorität im Designprozess sein müssen . Er hat das aus einer Reihe von Gründen argumentiert. Der mobile Verkehr war damals explodiert und ehrlich gesagt explodiert er jetzt noch. Aber auch diese Geräte haben all diese wunderbaren Fähigkeiten. Also, wenn wir anfangen, für sie zu entwerfen, wird das tatsächlich das Produkt verbessern neue und spannende Funktionen einführen. Aber schließlich, und ich würde sagen, vielleicht am wichtigsten, er argumentierte, dass mobile Bildschirme zwingen uns zu konzentrieren. Dass es sich um Bildschirme handelt, die 80 Prozent kleiner sind als die, für die wir traditionell entworfen haben. Wenn wir also damit beginnen können, dort zu entwerfen, können wir einen Konsens darüber aufbauen, was für unser Design am wichtigsten ist, und das nutzen, um die Erfahrung für alle zu verbessern. Dies ist etwas, was ich von jedem erfolgreichen Responsive Design im Maßstab gehört habe. Eines meiner Lieblingsbeispiele ist eigentlich die innig verstorbene Virgin America-Website, und nach der Neugestaltung interviewten ein Kollege von mir und ich das Team hinter dem Redesign. Design-Lead für das Projekt, sagte ein Kerl namens Joe Stewart einmal: „Aus welchem Grund auch immer, Leute denken, es ist in Ordnung, Benutzererfahrungen auf Mobilgeräten fokussiert zu haben, aber wenn Sie auf den Desktop kommen, geht es darum, die Küchenspüle. Eines der großartigen Dinge an Responsive ist, dass es Sie zwingt , diese mobilen Entscheidungen auf einem Desktop zu treffen.“ Am Ende des Tages geht es bei Mobile First darum, für den Fokus zu entwerfen. Unabhängig davon, ob Sie für ein kleines Bildschirmlayout oder ein Breitbildlayout entwerfen, werfen Sie einen harten Blick auf jede einzelne Information , die derzeit auf diese Seite geschlitzt wird, und fragen Sie sich, ob es tatsächlich irgendwelche Wert für den mobilen Benutzer? Wenn dies nicht der Fall ist, lohnt es sich vielleicht, eine harte Unterhaltung über den Wert zu führen, den es für jeden Benutzer hat. Da unser Publikum heutzutage so überwiegend mobil ist, muss das wirklich unser Ausgangspunkt sein. Das große Geheimnis über mobile First Design, ist, dass, wenn Sie wirklich auf das konzentrieren können, was wirklich wichtig für Ihre Benutzer ist, es wird Ihre nicht-mobilen Benutzer viel glücklicher als auch. Also, dies sind nur einige der Strategien, die Sie beachten müssen , wenn Sie reagieren entwerfen. Schauen Sie sich die Art und Weise an, wie Sie mit Designern und Entwicklern zusammenarbeiten, und stellen Sie sich auch einige dieser harten Fragen zu einer mobilen obersten Priorität in Ihrem Layout. Wenn Sie das tun können, werden Sie sich mit einigen wirklich schönen ansprechenden Designs, die passen und fühlen sich wie zu Hause auf jeder Klasse von Gerät es könnte sie besuchen kommen. 8. Letzte Gedanken: Also, in dieser Klasse haben wir die wichtigsten Zutaten eines Responsive Designs verwendet. Fluid Grids, flüssige Bilder und Medienabfragen, um mehr geräteunabhängige und flexible Layouts zu erstellen. Wir verbringen auch ein wenig Zeit damit, uns einige Möglichkeiten zu suchen , wie wir unsere reaktionsfreudigen Erlebnisse optimieren können. Um Typografie oder Bilder entsprechend den Bedürfnissen des Geräts oder des Browsers anzupassen, um sicherzustellen, dass die Dinge auf jedem Bildschirm zu Hause passen und sich wie zu Hause fühlen. Ich hoffe wirklich, Sie werden diese Klasse einfach als Sprungpunkt verwenden. Dann verwenden Sie einige der Techniken, die wir uns heute angesehen haben, um Ihr eigenes Vokabular zu erstellen , um schöne responsive Websites zu erstellen. Ich würde gerne einige der reaktionsschnellen Arbeit sehen, die Sie tun, vielleicht teilen Sie in der Projektgalerie. Vielen Dank für die Teilnahme an dieser Klasse, ich bin wirklich aufgeregt, die Arbeit zu sehen, die Sie getan haben. 9. Was kommt als Nächstes?: ( MUSIK)