Einführung in das Responsive Webdesign: Ein Design für jedes Gerät

1. Einführung: Hi. Ich bin Spencer. Ich bin Webdesignerin hier bei Skillshare. Ich bin eigentlich Teil des Teams, das das Video entworfen hat, dass Sie gerade die Szene ansehen. Wenn Sie also surfen, sich Ihr eigenes Profil ansehen, Ihr Projekt hochladen, wurde alles von dem Designprozess berührt, den ich und die anderen Designer hier machen. In diesem Schnellkurs lernen Sie die Grundlagen der Erstellung eines anpassungsfähigen Rasters kennen. Anpassungsfähig bedeutet, dass dieses Raster alle Elemente Ihres Designs enthalten wird und ob Sie es auf einem Laptop, einem Tablet, einem Telefon betrachten , alles wird sich wirklich entsprechend an ein Raster anpassen Bildschirmgröße, die Sie diese Website hochziehen. Mit ein paar Optimierungen können Sie normalerweise das Design anpassen, das Sie bereits in ein neues Raster passen müssen, das Sie erstellen. Aber Sie können auch einfach die Fähigkeiten verwenden, die Sie für alle frischen Designs haben, die Sie nach vorne kommen können. Das wird wirklich in ein Raster gesteckt. Sie können Raster hören und denken, dass Gitter begrenzt sind, dass sie Ihr Design einschränken werden, aber das ist wirklich nicht der Fall. Gitter sind ein zugrundeliegendes visuelles System. Sie sind nicht die visuelle Darstellung dessen, was Sie erschaffen. Also, ein wirklich einfaches Raster wird für alles, was Sie erstellen, funktionieren , ob es sauber, komplex, skurrlich ist, sogar Ihre Schneeflocke eines Designs. nicht allzu langer Zeit war Skillshare nicht reaktionsschnell und sah nicht gut auf Telefonen aus, was ein Problem ist, weil heutzutage viele Menschen ihren Handys, auf ihrem Tablet auf das Internet zugreifen. Was Sie in dieser Klasse sehen, ist, dass es nicht so unnahbar ist, es ist nicht so schwer zu tun. Also werde ich Ihnen den Prozess zeigen, was wir getan haben, um die Homepage zu nehmen und sie so anzupassen, dass sie in das Raster passt, das wir für Skillshare erstellt haben. 2. Vorwort: Warum Responsivität wichtig ist: Also, hier haben wir die Skillshare Marketing-Homepage von irgendwann im letzten Jahr, und das wird jetzt bei 100 Prozent gezeigt, und nur so wurde es entworfen. Es wurde für den Desktop, für einen Laptop entworfen. Zu Recht sieht es in dieser Größe ziemlich gut aus. Sie haben Ihre Schere an der Spitze, Hauptaufruf für Aktionen, möchten, dass Sie Mitglied von hier werden, oder Sie können klicken, um mehr zu erfahren und mehr Details zu erhalten. Dann haben wir einige Unterabschnitte unten. Also, diese bestehen hauptsächlich aus Bildern, Textlink, was der Titel ist, einige Unterkopie darunter, und sogar das gleiche für den Community-Bereich, Video, Presse, und wir haben eine Fußzeile am unteren Rand mit einer Reihe von Links in es. Wenn wir ein wenig herauszoomen und sagen wir, dass wir so tun, als wäre dies jetzt skaliert und passt auf ein Tablet. Es ist nicht so schlecht skaliert in dieser Größe, es ist nicht ideal, aber keines der Elemente ist wirklich so klein. So können Sie immer noch den Text lesen, der Button fühlt sich immer noch ziemlich groß an, Bilder sind immer noch schön, Sie wissen, was Sie gerade sehen. Also, insgesamt hat es irgendwie funktioniert, kein Deal Breaker. Aber wenn wir hier rüber gehen und schauen uns mobil, so das bei 100 Prozent. Also, was ich hier getan habe, ist, dass ich gerade das vorherige Design genommen und es nach unten skaliert habe, was passieren würde. Also, Sie haben Ihr Design, das ungefähr tausend Pixel hier ist, und ich denke, es ist ein bisschen mehr und wir skalieren es auf etwa 400 Pixel breit, was von dem Telefon abhängt, das Sie verwenden aber genau so, wie Illustrator macht es, es ist noch schwieriger zu lesen, aber Sie können irgendwie die Idee der Tastengröße und der Textgröße bekommen, dass Text wirklich klein und schwer zu lesen ist. Diese Texte Links vor und die Buttons, mehr sehr lesbar sind, können sie nicht wirklich einfach tippen, und es ist wirklich schwer zu verstehen, Sie müssen vergrößern, um wirklich etwas zu tun oder etwas auf dieser Seite lesen, was kein ideales Landeerlebnis ist. Dies, die Homepage, war eigentlich unsere meistbesuchte Seite auf Mobilgeräten. Knapp 20 Prozent unserer Besucher auf der Homepage kamen telefonisch. Irgendwie zu Recht so. Diese Seite von Mobile hatte über 40 Prozent Bounce Rate und was das bedeutet, ist, dass Menschen, die die Website von einem Telefon besucht wurden sofort verlassen mit einer viel höheren Rate als Desktop. Damit war die Anzahl der Leute, die taten, was wir wollten, dass sie von dieser Seite, die Mitglied geworden ist, wirklich gering. Viel niedriger als der Desktop und das liegt daran, dass Sie den Aufruf zum Handeln nicht wirklich gut sehen, Sie kommen nicht hierher und verstehen wirklich, was Sie tun sollten oder was Skillshare Ihnen sagen will. Also, wir wussten wirklich, dass wir diese Seite für Mobilgeräte optimieren mussten , sonst würden Sie weiter gehen. Also haben wir begonnen, ein Responsive Grid-System auf der gesamten Website zu erstellen, das würde alle unsere alten Seiten, wie diese, an ein neues Raster anpassen und als Grundlage für jede neue Seite verwenden, die wir entwickelt haben, um voranzukommen. Im nächsten Video erkläre ich ein bisschen mehr darüber, was ein grundlegendes Raster ist. 3. Projekt: Eine Homepage responsiv gestalten: Also kurz, bevor ich über Gitter und Haltepunkte spreche, möchte ich über das schnelle Projekt sprechen, das Sie hier erstellen werden, das darin besteht, eine Seite einer Website in ein ansprechendes Raster zu passen oder zu entwerfen. Also, wenn Sie gerade eine Website haben, die nicht reagiert, lassen Sie uns das beheben, lassen Sie uns dieses Projekt hier machen. Aber wenn Sie keine Website haben, oder Sie nicht wirklich wollen, um auf Ihrer Website zu arbeiten, Ich verstehe, dass, wir könnten die Website Ihres Lieblings-Restaurants wählen. Die meisten Restaurants verfügen über Websites. Sie sind ziemlich einfach, aber es gibt überraschend nicht reagiert. Sogar eine große Kette wie der Olivengarten. Sorry, Olive Garden, nicht mein Lieblings-Restaurant, hat eine einfache Website, nicht ansprechbar. Schritt eins ist so einfach. Du solltest es einfach jetzt tun. Fünf Minuten Spitzen. Schnappen Sie sich einen Screenshot der Website, die Sie tun, wie es ist , ob es Ihre eigene Website, die Website des Restaurants, das Sie tun möchten, oder ein Design, das Sie eingerichtet haben, aber noch nicht einmal gebaut haben. Schnappen Sie sich diesen Screenshot, laden Sie ihn in die Projektgalerie hoch, und das ist Schritt eins. Das letzte Projekt, das Sie für diese Klasse teilen werden, wird sein , den einen Bildschirm zu nehmen , den Sie tun, und Sie werden es in drei Größen hochladen. Es wird also Desktop, Tablet und Telefon geben , und es wird innerhalb dieses Rasters funktionieren. 4. Was ist ein Rastersystem?: Hier habe ich ein abgeschrägtes Design wie ein Drahtmodell. Eigentlich ist es total Wireframe. Wie Sie sehen können, habe ich ein Gitter drauf gelegt. Also, dies ist das 12-Säulen-Raster, das wir verwenden Skillshare, und es teilt den Raum horizontal in diese Einheiten genannt Spalten. Die Spalten sind die weißen breiteren Bits. Dazwischen haben wir die Dachrinnen. Also, diese 10 Zeilen und Dachrinnen sind wirklich nur da, um gleichmäßige Abstände zwischen den Spalten zu bieten. Von den Inhalten, die Sie sehen, welche der Text und die Bilder sind, sind diese im Raster enthalten, können aber je nach Breite variieren. Also, offensichtlich werden sie mehr als eine einzige Rastersäule aufnehmen. Dieser Text geht hier über alle 12 und diese Bilder sind in kleinere Einheiten von je vier Spalten aufgeteilt . Dadurch können drei Bilder in eine Reihe passen. Diese Spalten werden proportional mit dem Inhalt im Inneren schrumpfen. Also, wenn wir hier rausziehen, wenn wir zu einem kleineren Bildschirm kommen, der Intel ein kleineres Raster macht, macht also keinen großen spürbaren Unterschied davon, wie es funktioniert. So werden Sie sehen, dass viele der Texte in diese dritte Zeile gefallen sind, weil sich die Textgröße nicht geändert hat , nur der Speicherplatz, in dem wir sie anzeigen können, geändert hat. Aber es ist ein bisschen deutlicher, wenn man sich diese Smiley-Gesichter nebeneinander ansieht, wie diese Smiley-Gesichter auf dem kleineren Bildschirm noch vier Spalten aufnehmen, aber die vier Spalten sind jetzt nicht so breit. Was mit dem Text unten passiert, da dieser als eine Einheit enthalten ist , ist Text ähnlich dem, was wir gesehen haben, bevor fällt nach unten. Es fällt tatsächlich von zwei Zeilen auf drei, was bedeutet, dass alle Inhalte, die darunter sitzen würden , nur noch weiter nach unten geschoben werden. Jetzt ist es passiert, dass die Seite so allgemein, wenn Sie eine Seite wie diese nehmen, und Sie machen es ein wenig weniger breit in einem Raster, die Seite wird eine längere Bildlaufseite. So fragen Sie sich vielleicht, wie Sie sich für Ihr Grid-System entscheiden. Welche Größe, und wie viele Spalten und das ist eine gute Frage. Also, lassen Sie uns hier rüber scrollen. Dies ist nur eine Anzeige, die zeigt, dass im Allgemeinen, je mehr Spalten Sie in Ihrem Raster haben, desto mehr Layout-Optionen haben Sie. Also, im Moment, das ist ein Zwei-Säulen-Raster. Wenn wir also speziell auf die Smiley-Gesichtsobjekte schauen, können Sie sehen, dass Sie zwei Layout-Optionen haben, vier Elemente in einer Reihe. Sie haben eine volle Breite, die beide Spalten aufnehmen wird , oder Sie können ein Element in jede Spalte einfügen. Also, was Sie hier in halber Größe haben. Wenn wir dies durch das Spaltenraster in ein vierspaltiges Raster verwandeln, erhalten Sie viel mehr Optionen, denn wie Sie sehen können, behalten Sie die gleichen Optionen der vollen Breite, die jetzt über vier Hälfte liegt, die jetzt über Zwei, und wir kriegen diese Typen. Also, jetzt haben Sie einzelne Spalten, die halb so groß wie in einem zweispaltigen Raster sind, und wenn Sie mehrere Spalten haben, können Sie die Dinge in derselben Zeile größer und kleiner machen. Also, egal, ob Sie es als primären Abschnitt mit etwas sekundären Seite behandeln oder das Layout ein wenig mischen und abgleichen möchten, Sie haben diese Option. Dies wird also exponentiell wachsen, wenn Sie Spalten in Ihr Raster hinzufügen. Wir landeten mit einem 12-Säulen-Raster auf Skulptur gehen, wir spielten herum mit vielen verschiedenen Optionen. Also, das, was wir hier haben, ist eigentlich ein Raster mit 12. Wir wussten, dass wir ein Design wollten, das durch zwei, drei und vier teilbar ist. Also, hier sehen wir es teilbar durch drei, so dass wir Zeilen mit Familiengegenständen haben können und eine Vielzahl von, wenn wir kleinere Elemente wollten, konnten wir vier Bilder über und haben sie drei Spalten jeweils, und so weiter. Im nächsten Video zeige ich Ihnen, wie wir eines unserer Designs so optimiert haben, dass es in dieses neue 12-Säulen-breite Gittersystem passt . 5. Erstellen eines Rasters: Lassen Sie uns nun auf das Homepage-Design zurückblicken, das wir vor ein paar Videos gesehen haben, und darüber hinaus lag das Gitter, das wir im letzten Video gesehen haben. Also, was wir jetzt tun werden, ist zu zeigen, wie wir ein bestehendes Design optimieren können. Manchmal ziemlich leicht zu diesem Raster, so dass wir es reagieren können, und bei kleineren Bildschirmgrößen, die, wie wir gesehen, diese Homepage derzeit nicht tun. Also, die beiden oberen Abschnitte sind eigentlich ziemlich gut. Wir haben dieses Raster tatsächlich auf Basis dieser bestehenden Seiten entwickelt, die um 9:30 Uhr sind. Es wird also auf den ersten Blick so aussehen, als ob alles ziemlich gut darin passt, wie sich hier und hier rechts an das äußere Gitter ausrichtet. Wir müssen diese Tasten oder diesen Text nicht wirklich anpassen, ich werde es nicht tun. Ich glaube nicht, dass jeder Knopf in eine Dachrinne sein muss und dass alles in der Breite einer Rinne angeordnet sein muss, denke ich, das würde in diesem Fall tatsächlich ein bisschen seltsam aussehen. Also, lassen Sie das in Ruhe und wissen Sie nur, dass wir als Textumbruch einen Haltepunkt treffen , über den ich ein wenig später sprechen werde, dass ich die Tasten anpassen werde, wenn es auf eine bestimmte Größe kommt. Also, das können wir in dieser Größe allein lassen und das gleiche für diese. Also, das haben wir uns angesehen, aber weil wir ein Raster von 12 haben, und wir haben eine Reihe von drei, es funktioniert bereits. Es passt in das Gitter, sie sind 30 voneinander entfernt, die diese Dachrinnen sind. Also, dieser Abschnitt für gerade jetzt irgendwie bereits getan. Wenn wir jedoch zu diesem Stück kommen, haben wir eine Reihe von fünf Gegenständen. Was nicht funktioniert, weil 12 nicht durch fünf teilbar ist. Da diese Elemente keine Dachrinnen zwischen ihnen haben, würden sie, wenn dieses Gitter schrumpfen würde, nicht korrekt angeordnet sein. Also, wir haben hier ein paar Optionen. Wir sehen das, wir können sagen, dass wir zu einer Reihe von sechs Projekten gehen können, bei einem anderen Projekt hier, was bedeuten würde, diesen Kerl kleiner zu machen und es zwei sein zu haben, aber das schafft ein bisschen ein Problem. Also, abgesehen davon, ziemlich klein zu sein, können Sie sehen, dass mit bestimmten Namen und Followern, es wird ein Problem zu schaffen. Ich möchte wirklich nicht, dass dies in die nächste Zeile fließt und viel größer als diese Bilder wird. Also, ich glaube nicht, dass es zwei Nachteile sein wird, y wird funktionieren. Aber wenn wir zu drei gehen, dann haben wir mehr Platz als jetzt für Namen und Metaphern. Wenn dies in diesem drängt nach unten wächst, wird dies alles andere unter sich schieben. Geschwindigkeit willen werde ich nicht voran gehen und das tun, aber wie Sie Dinge nach unten bewegen, nur um sicherzustellen, dass sich alles entsprechend bewegt. Aber wie Sie hier sehen, da dies drei ist, können wir nicht fünf Artikel passen, die drei Spalten breit sind. Also, man muss abgeschnitten werden. Also, wir gehen auf vier, was in diesem Fall, denke ich, in Ordnung ist. Wenn Sie nicht glauben, dass vier genug sind, aber es so breit halten wollen, können Sie sagen, dass Sie zwei Reihen von Projekten haben und acht Projekte haben. Also werde ich voran gehen und das löschen, und durch TV-Magie werde ich das ziehen, was ich vorher gemacht habe, und bin bereit zu gehen. Ich werde es so reinlegen. Da hast du es. Jetzt können Sie sehen, dass sie von der Dachrinne abgesäumt sind, und Sie können sich vorstellen, wie dies schrumpft, die Rinne bleibt gleich. Diese werden alle proportional in diesem engeren Gitter zusammenarbeiten. Wir gehen weiter und machen dasselbe für diese Reihe von fünf. Also, nochmal, sagen wir einfach, dass vier gut genug für uns sind und wir werden einen ausschalten. Tut mir leid, TechCrunch. Wie Sie sehr. Aber du passt jetzt einfach nicht. Also würden wir voran gehen und diese alle Reihen von oder drei Spalten breit machen. Da hast du es. Dieser Abschnitt passt nun in das Raster. Für diesen Kerl unten haben wir fünf. In diesem Fall, und in all diesen Fällen möchten Sie vielleicht die UX dessen besprechen, was wichtig zu halten ist, möchten Sie vielleicht die Dinge neu konfigurieren, um in dieses Raster passen, eine größere Änderung vornehmen, aber ich denke, dass wir jetzt 're okay, Untertanen herauszunehmen, weil die in den Schulen leben. Nun, selbst wenn Links auf die gleiche Weise, wie diese Nachteile kleiner werden, wird dies auf sie schließen, und sie werden nur näher zusammen kommen. Lassen Sie uns diese also an diesen Gittern ausrichten. Es muss nicht alle unter dem gleichen Raster ausgerichtet werden, wenn Sie vier Spalten haben, aber ich denke, es sieht gut aus, es hält es ziemlich einfach. Also, so werde ich es hier zum Laufen bringen. Da hast du es. Nun, was einst nicht richtig in einem Gitter enthalten war, mit ein paar einfachen Optimierungen. Dies könnte einfacher gewesen sein als einige andere Seiten, die da draußen sind. Es passt wirklich gut in das Netz. Alles ist in der Spalte enthalten, Raum durch eine Dachrinne, die sein muss. Wie ich schon sagte, das sind sie nicht. Ich denke, wenn das einen Dachrinnenraum dazwischen hätte, ist es eigentlich zu viel. Ich denke, dass viel Platz zwischen dem Bild und dem Namen, sieht schlecht aus. Also, unter der Einheit, bin ich wirklich nicht so besorgt darüber, dass es kleiner wird. Da haben wir es dafür. Im nächsten Video werden wir über Breakpoints sprechen. Haltepunkte sind, wie Raster bei Bedarf basierend auf der Breite des angezeigten Bildschirms angepasst werden. 6. Live-Haltepunkt-Demo: Nun, lassen Sie uns eine kleine Live-Demo machen. Also, auf der Skillshare Website, skillshare.com/classes, werde ich Ihnen zeigen, nur indem Sie die Breite des Browsers ändern, dieses Raster schrumpft in Aktion und Bruchpunkte. ich es also kleiner mache, könnte man sehen, dass wir immer noch in Breakpoint eins sind, aber Bilder werden proportional kleiner, Rinne bleibt gleich und hält sie getrennt. Sie können den Text unten in diesen Einheiten sehen beginnt Umbruch. Ziemlich bald sehen Sie es in eine dritte Zeile eingewickelt. Also, nichts davon wird wirklich als Haltepunkt betrachtet, aber es schiebt immer noch den Inhalt unter. Wenn Sie mit diesem großen auf die Website kommen, sieht es gut aus. Wenn Ihr Fenster so breit ist, sieht es immer noch gut aus. Der Inhalt passt sich also wirklich dem Fenster an, in dem er sich befindet. Sobald wir anfangen, einige Haltepunkte zu betrachten, damit Sie schnell sehen können, fällt es auf eine zweite Zeile, also ist das ein kleiner Haltepunkt, den Sie dort einfügen, weil wir nicht wollten, dass sich der Gürtel mit der Suchleiste überlappt. Aber hier siehst du, dass es auf Tablet geht. Also, auf dem Tablet, ändert sich das Menü. Wir haben Hamburger-Menü an beiden Orten. Davor hatten wir Meine Klassen und die Glocke dort. Es geht hinein und es mag ein bisschen früh erscheinen, aber es ist immer noch im Allgemeinen gut, so wenige Haltepunkte wie möglich zu halten. Es vereinfacht das Design wirklich, es vereinfacht die Entwicklung und es funktioniert bis hin zum mobilen. Also, wenn wir uns in die Tablette bewegen, sehen wir ein paar andere Veränderungen wie die Schiene, die auf der linken Seite existierte, die all diese Hover hatte. Jetzt wird es entfernt und auf die Oberseite gelegt. Es hat nur Links gemacht, was Sinn macht, weil Sie keine Rollover-Zustände auf einem Tablet benötigen , weil Sie nur darauf tippen, so dass Sie tatsächlich den Rollover-Zustand erhalten können. Sie bemerken auch, dass sich die Dachrinnen auf 20 Pixel ändern. Da diese Gegenstände jetzt kleiner sind, halten wir sie in der Regel gerne ein wenig näher zusammen und denken, dass es als Raster ein bisschen besser aussieht. Wenn wir noch kleiner weitermachen, werden wir bald mobil treffen. Also, mobil gibt es ein paar andere Änderungen, die passieren. Also, wir haben das am Bruchpunkt, den Titel kleiner gemacht , und wir haben es zentriert ausgerichtet. Das ist also eine kleine Veränderung, die wir dort gemacht haben. Wir haben diese Optionen auch breiter gemacht. Wir haben es in voller Breite gemacht, was schön und mobil ist. Sie möchten, dass Dinge, die Sie wie Tasten oder Menüs tippen , ein bisschen größer sein, weil Ihre Finger sind ein bisschen dicker als Ihr Mauszeiger. Nichts für ungut. Wir sind auch in ein einspaltiges Raster verschoben. Also, diese Bilder sind eigentlich ziemlich viel größer jetzt, aber es ist eine viel einfachere Ansicht, die wirklich passt sich viel besser für mobile. Also, jetzt könnten wir uns ein anderes Website-Beispiel ansehen, das ist The New Yorker. Ich habe gerade einen zufälligen Artikel über Meeresschildkröten gefunden. Wenn Sie nach unten scrollen, werden Sie feststellen, dass es viel mehr Spalten gibt, und zwei, aber sie haben in der Regel zwei Abschnitte, so dass sie den Artikel und die Bilder haben, und dann den rechten Abschnitt ihre Anzeigen und Links, um verschiedene Artikel zu entdecken. Wenn wir also anfangen, das Fenster ein bisschen schmaler zu machen, können Sie einen kleinen Bruchpunkt sehen, an dem die Navigationselemente kleiner werden, so dass sie bequem in dieses neue dünnere Fenster passen. Der Titel ist etwas kleiner, und er wird noch kleiner, so dass er mit der Werbung dort passt. Aber im Allgemeinen sind scheinbar keine größeren Änderungen am Netz geschehen. Sobald Sie ein wenig in mehr gehen, dann sehen Sie es zu einem großen Bruchpunkt drehen, der eine lange Spalte ist. So Menü ist verschwunden und ein Hamburger geworden, ähnlich dem, was Sie in Skillshare gesehen haben. Sie handhaben es anders. Der Titel ist jetzt zentriert ausgerichtet, vereinfacht von dem, was in zwei Bereichen war jetzt in einem gebracht. Das fühlt sich eher wie ein allgemeiner Abschnitt an. Also, das Zeug, das sie im Recht hatten, wie die Werbung, enthalten sie jetzt in diesem Hauptinhaltsbereich. Also, wenn Sie sehen, wird es sogar noch kleiner. Sie haben nur den Textumbruch, da diese Spalten kleiner werden. Sie halten die Werbung in der Regel gleich. Ich schätze, das sind nur die Einschränkungen der Bilder, die sie haben. Sie wollen nicht, dass dieser Text zu viel kleiner wird, weil es ein Bild ist. Wo das ist, haben sie ein bisschen mehr Wackelraum mit, wie es behandelt wird. Scrollen Sie nach unten, bevor, wo wir auf der rechten Seite den beliebtesten Abschnitt sahen, nahmen sie ihn heraus und fügten ihn nach unten hinzu. Also, wieder ziemlich große Änderung innerhalb eines Bruchpunkts, können Sie kleine Dinge tun, wie ändern Sie einige Größen, halten Sie es an Ort und Stelle, oder Sie können große Änderungen wie Schneiden Sie es aus einem Abschnitt und Hinzufügen zu einem anderen. Eine Menge davon wird Urteilsruf basierend auf dem Inhalt sein. Ich wünschte, ich könnte sagen, dass es eine richtige Regel und einen richtigen Weg gibt, um damit umzugehen, aber es hängt wirklich davon ab, was du tust. Also, ich empfehle Ihnen, tatsächlich, wenn Sie dieses Projekt auf Ihrer eigenen Website machen oder wenn Sie dieses Projekt in der Klasse zu tun, zu verschiedenen Websites zu gehen, um zu spielen. Es ist so einfach wie Erweiterung und machen kleinere Browser und sehen, wie eine Reihe von Orten es tun. 7. Haltepunkte bestimmen: Haltepunkte sind Breiten, die Sie in Ihrem Entwurf festgelegt haben. Wenn Ihr Browser die Breite Ihres Haltepunkts wird, wird er dünner, Sie laden ihn auf ein Tablet, laden Sie ihn auf ein Telefon oder sogar, wenn Sie Ihren Browser erweitern, um breiter zu sein. Dies wird eine größere Änderung in Ihrem größeren Layout erzwingen , um es besser an die neue Breite anzupassen. So können Beispieländerungen die Größe Ihrer Dachrinne ändern. Also, in der Desktop-Version 3.1, haben wir und 30-Pixel-Rinnen und in der Tablet-Version haben wir 20-Pixel-Rinnen. Ein Teil davon ist nur proportional dachten wir, dass es ein bisschen besser aussieht, so dass Sie die Smiley-Gesichtsbilder sehen können. Die Bilder sind größer als sie auf dieser Tablet-Größe sind. Also, wenn Sie ein größeres Bild wie dieses haben, macht es Sinn, ihm ein wenig mehr Platz dazwischen zu geben. Aber wenn die Dinge etwas kleiner sind, wenn sie 10 Pixel weiter auseinander liegen, könnte es tatsächlich ein wenig zu weit auseinander aussehen. Aber das kommt auch ein bisschen aus der Notwendigkeit für uns, und wir setzen einfach eine Regel, dass in unserem Gitter die Säulen nie weniger breit sein werden als die Dachrinnen. Mit diesem 12-Säulen-Raster und mit Rinnen von 30 Pixeln hat das Raster ein Minimum von 750-Pixeln breit bevor diese Spalten dünner werden als die Rinnen, die wir nicht wollen. Das gleiche passiert bei Breakpoint zwei, die unsere Tablet-Version ist, aber das ist bei 500 Pixel breit, wenn die Spalten die gleiche Breite wie die Rinne haben, die wir nicht wirklich wollen, und dann brechen wir auf Handy. Auf Mobilgeräten reduzieren wir tatsächlich die Anzahl der Spalten und wir machen es zu einem sechsspaltigen Raster, und das neigt auch dazu sich für mobile Bildschirme zu eignen, wo und mobile Dinge einfach wirklich vereinfacht werden. Also, wir haben die Tasten tatsächlich größer gemacht, so dass es einfacher zu tippen ist. Wir haben das Layout aus dieser Dreierreihe auf ein einziges Spaltenstück vereinfacht. Damit können Sie sogar sehen, dass Sie sechs hier haben und es nimmt eine schöne Größe in zwei Reihen, aber wenn Sie sie alle einzeln auslegen, sechs wird super lang. Eine andere Sache, die Sie an einem Haltepunkt tun könnten, ist tatsächlich Inhalte zu aktualisieren oder zu entfernen. Das könnten ganze Abschnitte sein, oder es könnten Bilder sein. Also, und so etwas, wenn wir hier sechs an diesen ersten beiden Haltepunkten hinzufügen und es auf Breakpoint drei verschieben, würde ich wahrscheinlich drei davon ausschneiden und sagen, wir werden nur drei Bilder zeigen. Ich denke, dass eine Länge wie diese, für Mobilgeräte, passender passt, weil vermutlich, Sie könnten Inhalte darunter haben, dass dies nach unten drücken wird und Sie nicht möchten, dass Ihre mobile Seite zu lang von einer Schriftrolle ist, aber, natürlich, das hängt davon ab, was Ihre Inhalte sind. Andere Änderungen sind die Navigation. Also, hier können Sie sehen, dass wir viel Platz zwischen der Suchleiste und der Community-Registerkarte haben. Aber da es kleiner wird, wenn sich die Suchleiste schließt, können wir einen Haltepunkt setzen, um zu sagen: „Okay, bei X-Pixeln breit, sagen wir, es ist 800 Pixel breit, die Suchleiste kommt zu nah an die Community, also Lassen Sie uns das in die zweite Zeile fallen.“ Wir könnten sagen: „Wenn das zu nahe kommt, so würden wir es wahrscheinlich nicht weniger wollen als das, und das ist jetzt... was ist das? Dies ist bei 610 breit“. Also könnten wir sagen, um 610 und darunter, gehen wir zu einem Hamburger-Menü, das ist dieser zusammengestürzte Zustand. Also, alle diese Elemente würden nur unter hier versteckt werden und dann kann das so klein werden, wie es hier gezeigt wird. Bei all diesen Änderungen können Sie unterschiedliche Haltepunkte haben. Sie haben mehrere Haltepunkte in einem Design, um zu sagen, dass an einem anderen Haltepunkt Sie an einem anderen Haltepunktzu einer zweiten Zeile der Navigation fallen, dann würden Sie zu 20 Pixel breiten Rinnen wechseln. Im Allgemeinen ist es gut, sie auf so wenige Haltepunkte wie möglich zu halten. Es ist nur im Allgemeinen ein großartiger Führer, um nicht zu viele zu verfolgen, aber wirklich hängt es von Ihren Inhalten ab, also denke ich, sprechen Sie mit Ihrem lokalen Entwickler darüber, was möglich ist. Für unser nächstes Video, das tiefer in Breakpoints geht, werden wir einen Blick auf einige Live-Haltepunkte in Aktion werfen. Also, das wird eine Skillshare Website und ein Standortunterschied bei Skillshare sein. 8. Schlussbemerkung: Nur einwickeln. Ich erinnere mich, als ich recherchierte, etwas über Noten lernte, den Unterschied machte, als ich sie tatsächlich erschaffte und mit ihnen spielte, anstatt über sie zu lesen. Also, ich ermutige Sie wirklich, bei diesem Klassenprojekt einen Stich zu machen. Werfen Sie einen Blick auf den Projektführer, ich habe sogar ein Beispiel dafür, was Skillshare Grid ist geschrieben. Nicht zu sagen, dass Sie es folgen müssen oder unbedingt sollten Sie es basierend auf den Inhalten, die Sie haben, folgen. Aber das könnte ein wirklich einfacher Sprung vom Punkt sein , nur um zu sehen, wie wir es machen und wie Sie es auch wollen. Zögern Sie nicht, Fragen im Diskussionsbereich zu stellen. Außerdem ist es ein großartiger Ort, um Links zu hinterlassen oder irgendwelche Erkenntnisse zu teilen, die Sie haben Sie dies selbst tun oder in der Vergangenheit getan haben oder es zum ersten Mal durch diese Klasse lernen. Ich freue mich wirklich darauf, zu sehen, was ihr euch einfällt. Ich werde in der Projektgalerie sein, herumstochen, Kommentare hinterlassen, also zeig mir, was du hast. 9. Entdecke Design auf Skillshare: Art und Weise.