Das große v10 Redesign-Projekt

Wir haben das Markup für die Treehouse-Anzeige am oberen Rand der Seite platziert, aber wir müssen noch einige Styling-Arbeiten erlednen. Wir beginnen mit der Baumgrafik selbst.

Wir denken, dass wir Vektoren verwenden und als SVG ausgeben...

Die Anzeige, die wir platziert haben, ist großartig für große/Desktop-Bildschirme, aber auf kleineren Bildschirmen versagt sie ziemlich schnell.

Wir verwenden bereits einige Breakpoints in diesem Design, aber wo dieses Design anfängt zu brechen, ist nicht...

Das Suchdesign funktioniert einwandfrei, bis wir zu unserem „Baby Bär“ (kleines Mobiltelefon) Breakpoint gelangen. Dort müssen wir etwas anderes tun. Wir schaffen Platz darunter für den Navigationsbereich und verschieben sie dann nach...

Ein Desktop-Browser sehr schmal zusammenzudrücken, kann Ihnen einen vagen Eindruck davon vermitteln, wie ein responsives Design funktioniert, aber es ist keine genaue Darstellung eines tatsächlichen kleinen Bildschirms. Und tatsächliche kleine Bildschirme sind es, die wir entwerfen...

Zum ersten Mal in dieser Serie fügen wir dem Design direkt im Browser neue Elemente hinzu (nicht zuerst in Photoshop beginnen). Unser Ziel ist es, die „Hot Links“-Module zu gestalten...

Das oberste Modul in der Hauptseitenleiste der Website gehört Treehouse, als Hauptsponsor von CSS-Tricks. Basierend auf einem Gespräch, das ich mit Ryan Carson hatte, gehören einige der bestkonvertierenden Anzeigen denen mit...

Es gibt eine lange Tradition von Umfragen auf CSS-Tricks. Sie machen Spaß, sammeln wichtige Daten und erhöhen die Verbindung der Leute zur Website. Engagement FTW!

Wir holen uns das Markup von der Live-v9-Website für einige Dinge, um daran zu arbeiten...

Wir sind mit einem völlig brauchbaren Umfrage-Widget fertig geworden. Die Typografie ist sauber und alles ist perfekt nutzbar. Allerdings war es nicht gerade überzeugend oder unterhaltsam. Wir werfen einen kurzen Blick auf den Bereich mit mehreren Farben der Galerie als Inspiration für...

Wir haben bereits etwas Zeit damit verbracht, Seiten vorläufig zu gestalten, damit unsere Navigation funktioniert (Video #030) und Sie sich auf der Website bewegen können, aber was auf diesen Unterseiten ist, reicht nicht aus, um sich wie eine echte Seite anzufühlen. ...

Wir beginnen mit dem Layout des Galeriebereichs, das mir seit Beginn dieses Redesign-Prozesses im Kopf herumschwirrt. Hauptsächlich, weil die Galerie in v9 irgendwie schlecht war. Wir werden es besser machen...

Wir haben das Gitterlayout für die Galerie fertig. Leider ist das Laden etwas abrupt und unrund. Das liegt daran, dass CSS3-Spalten so konzipiert sind, dass sie den Inhalt gleichmäßig auf jede der Spalten verteilen, aber Bilder brauchen manchmal...

In dem wir die Probleme lösen, die wir beim schönen Laden des Spaltenlayouts hatten. Die Lösung bestand darin, das CSS zu entfernen, das dafür sorgte, dass die seitenverhältnisgetreuen Platzhalterboxen funktionieren, sobald das Bild geladen ist...

Wir fügen dem von uns eingerichteten Gitter für die Galerie etwas Responsivität hinzu. Bei den breitesten Bildschirmen ist es auf vier Spalten eingestellt. Dann beginnen wir, Breakpoints über unsere super einfachen @mixins hinzuzufügen, die wir eingestellt haben...

Wir haben einen guten Anfang beim responsiven Design gemacht. Das Menü bei den kleinsten Bildschirmgrößen bricht in ein 2x4 Gitter zusammen. Es passt gut auf den Bildschirm, aber zwischen dem und dem Branding nimmt es eine Menge...

Bisher haben wir Codeänderungen lokal vorgenommen, ohne eine Art von Versionskontrolle zu verwenden. Mit der zunehmenden Komplexität dieser Website wird dies immer unverantwortlicher. Was hat sich wann geändert? Warum hat es sich geändert? Wie können wir...

Während ich an diesem Design arbeitete, wurde jQuery 1.8 veröffentlicht. Dies ist nur ein kurzes Video, um die Tatsache zu bekräftigen, dass so etwas während der Entwicklung von Websites passiert und die Vorabentwicklungsphase der perfekte Zeitpunkt ist, um...

Es gibt sieben verschiedene Hauptbereiche der Website jenseits der Homepage. Also habe ich sieben verschiedene Illustratoren beauftragt, Designs anzufertigen. Dies ist das erste, in das wir uns vertiefen und implementieren werden. Es ist das...

Wir haben den grundlegenden Galerie-Header platziert, aber ihm fehlen die kleinen blauen Leute, die Erica in die Originalillustration aufgenommen hat. Wir hatten im Voraus darüber gesprochen und uns entschieden, dass es ziemlich cool wäre, wenn der Bildschirm...

Wir haben gerade den benutzerdefinierten Header für die Galerie fertiggestellt, also machen wir gleich weiter und fügen einen weiteren benutzerdefinierten Header hinzu. Dieser wurde von Ericas Bruder, Nick Sirotich, gemacht.

Da dies eine andere Illustration ist,...

Nicks Illustration hatte drei verschiedene Ebenen für die Köpfe. Es sind nur geringfügig unterschiedliche Variationen. Wir könnten die Bilder mit einer Animation oder mit JavaScript oder so etwas austauschen, aber eine immer laufende Animation (oder sogar eine, die jedes Mal läuft...

Das Einzige, was jetzt noch von unserem benutzerdefinierten Foren-Header fehlt, ist der Teil, der tatsächlich „Foren“ sagt!

Nick hat eine Hand gezeichnet, die ein Schild hält, das für diesen Bereich bestimmt war. Wir entfernen den Text, der dort war (nicht sehr...

Wie Sie wissen, werden einige Anzeigen auf CSS-Tricks irgendwie „selbst verwaltet“, wie der Hauptsponsor Treehouse. Ich habe das übernommen, weil es nur ein einziger Werbetreibender ist und wir eine sehr spezifische Beziehung haben und die Anzeigen...

Jetzt, da wir genau wissen, mit welchen Zonen wir arbeiten, gehen wir zurück zu Photoshop und erstellen ein Mockup, wie wir diese Anzeigenzonen aussehen lassen wollen.

Wir haben einen Präzedenzfall für die Seitenleistenanzeige. Sie wird im Grunde genauso sein wie...

Wir haben ein Mockup, wie unsere BuySellAds Zonen aussehen sollen, also bauen wir sie jetzt richtig auf. Die BuySellAds Website stellt den Code bereit, den wir auf unserer Website platzieren müssen, damit die Anzeigen angezeigt werden...

Wir haben eine weitere BSA-Zone, die in die Website integriert werden muss. Diese sollte etwas einfacher sein, da wir bereits das JavaScript eingerichtet haben und es nur eine Anzeige in einem Modul ist. Wir haben tatsächlich schon diese Top Treehouse...

Wir begeben uns auf die große Reise, die der Footer ist! CSS-Tricks hatte schon immer einen großen, schicken Footer, und dieses Design wird keine Ausnahme sein. Es ist jedoch nicht rein gratuitös. Wir haben viele Dinge, die es wirklich verdienen, zumindest...

Wir arbeiten daran, ein Design für den Footer in Photoshop zu erstellen. Kurze Erinnerung: Ich arbeite in Photoshop, weil ich mich dort kreativer fühle, bevor ich zum Browser wechsle. Ich verweile nicht in Photoshop, aber dort mag ich...

In diesem Screencast widmen wir uns noch mehr dem Photoshoppen und legen den untersten Footer mit Links zu meinen beiden größten anderen Projekten, CodePen und ShopTalk, fest.

Wir schreiben live im Screencast einige Texte, was natürlich eine...

Dies ist die letzte Photoshop-Arbeit, die wir speziell für den Footer erledigen werden, bevor wir mit der eigentlichen Erstellung beginnen.

In diesem Screencast fügen wir im Wesentlichen die Linkliste ein, die den „Photostar“ umgibt. Nichts allzu Besonderes...

Mit unserem fertigen Design für den Footer in Photoshop können wir beginnen, es in unser statisches HTML- und CSS-Mockup zu integrieren. Der erste Schritt ist, uns etwas HTML zum Arbeiten zu verschaffen. Wir haben bereits eine...

Mit der HTML-Struktur für den Footer an Ort und Stelle haben wir alles, was wir brauchen, um mit dem Styling zu beginnen und diesen Footer so aussehen zu lassen, wie wir ihn in Photoshop entworfen haben.

Wir erstellen eine neue SCSS-Datei nur für den Footer, weil das...

In diesem Screencast befassen wir uns größtenteils mit dem orangefarbenen „Photostar“, der den Footer dominiert.

Wir erstellen den Stern in einer separaten Datei in Photoshop, damit wir ihn auf die richtige Größe für das Web bringen können, nicht auf die Größe, die die meiste...

In diesem Screencast konzentrieren wir uns auf die Linien unter den Links im oberen Teil des Footers. Wir stolpern ein wenig herum und finden heraus, welche Elemente eine relative Positionierung haben sollten und welche nicht, damit wir diese Linien...

In diesem letzten Screencast zur Erstellung des Footers arbeiten wir am unteren Footer, wo sich die Bereiche CodePen und ShopTalk befinden.

Wir müssen das HTML ein wenig ändern, da wir erkennen, dass die vier Teile...

Der Header für den Almanach ist da, diesmal von Giovanni Difeterici.

Wir verwenden viele Techniken, die wir bereits etabliert haben, um damit zu beginnen. Wir erstellen eine neue .scss-Datei nur für den Almanach...

Die benutzerdefinierte Header-Illustration für den Videobereich ist da, diesmal von Alyssa Nassner.

Wir organisieren die Photoshop-Datei und benennen Ebenen und so weiter, nur damit wir organisiert bleiben und verstehen, was...

Der Snippets-Header ist da, diesmal von Reagan Ray.

Wir verbringen diesmal etwas Zeit in Photoshop, schieben die Dinge ein wenig herum, um sicherzustellen, dass wir einen Hintergrund haben, der genau die richtige Höhe hat, die wir...

Wir haben bereits lokal unter einer lokalen Domain (v10.whatup) gearbeitet. Jetzt ist es an der Zeit, mit dem Umzug nach WordPress zu beginnen. Wir werden weiterhin lokal unter einer lokalen Domain arbeiten, aber wir werden die bereits funktionierende lokale Installation verwenden...

Wenn wir mit der Arbeit in WordPress beginnen, ist es am besten, wenn wir eine exakte Kopie der Live-Datenbank schnappen, um lokal damit zu arbeiten. Einige Websites haben Dinge wie phpMyAdmin installiert, die eine GUI für Dinge wie den Export bieten...

Wir haben jetzt eine .sql-Datei, dank des Exports und Downloads, wie wir es im letzten Video getan haben. Jetzt müssen wir sie nur noch ausführen und unsere aktuell vorhandene lokale Datenbank überschreiben. Diese lokale Datenbank existiert bereits, weil...