Das große v10 Redesign-Projekt

Wir schauen uns die Kontaktseite an und entscheiden, dass es sich um eine sehr allgemeine Seite auf CSS-Tricks handelt, die keiner besonderen, speziellen Gestaltung bedarf. Der einzige Unterschied zwischen einer allgemeinen Seite und einem Blog...

Die Video-Archivseite ist der Teil der Website, auf dem die Leute alle verfügbaren kostenlosen Videos zum Ansehen durchsuchen können. Sie dient dem Browsen, ähnlich wie die Homepage für die Snippets oder die Homepage für die Demos.

Diese Seiten sind...

Wir haben gerade einen spannenden Teil dieses Redesigns abgeschlossen, bei dem wir eine Menge unschönen Markup auf der Video-Archivseite wegwerfen und durch neues, intelligentes, sauberes, automatisch generiertes Markup ersetzen konnten. Aber wir haben noch mehr Arbeit...

In diesem Screencast arbeiten wir am "Demos"-Bereich von CSS-Tricks. Es ist ein ziemlich beliebter Bereich der Seite, obwohl ich ihm nicht so viel Zeit widme, wie ich sollte. Der Zweck davon ist...

In diesem Screencast beschäftigen wir uns mit der Gestaltung einer weiteren sehr wichtigen Seite. Dies ist eine der Seiten, auf deren Gestaltung ich mich von Anfang an gefreut habe, weil sie im letzten Design besonders vernachlässigt wurde. In diesem neuen...

In diesem Screencast beschäftigen wir uns mit dem HTML, CSS und dem WordPress-Template der einzelnen Videoseite. Wir haben bereits gestaltet, wie diese in unserem Photoshop-Dokument aussehen soll, also müssen wir sie nur noch...

In diesem Screencast werden wir die Code-Aufbereitung des Templates für einzelne Videos abschließen.

Wir beginnen damit, unser CSS etwas zu organisieren. Einige Teile der Datei videos.scss sind global für videobezogene Seiten. Einige sind spezifisch für die Archivseiten und...

In diesem Screencast beschäftigen wir uns mit dem Angebote-Bereich. Der Angebote-Bereich ist im Grunde eine "Wand aus Anzeigen". Es ist ein Bereich der Seite, zu dem die Leute selbst navigieren müssten, daher mache ich mir keine Sorgen, dass ihnen Anzeigen...

In diesem Screencast beschäftigen wir uns damit, weitere Module zur Homepage der Seite hinzuzufügen. Ziemlich wichtige Dinge! Im Moment haben wir nur eine Handvoll davon. Wir haben ein paar Hotlinks, ein paar...

Die Artikel-Archivseite auf CSS-Tricks ist ziemlich wichtig. Anstatt paginierte Blog-Posts zu haben, wie die meisten Blogs, verlinke ich einfach zu den Archiven. Ich denke, das erspart den Leuten die Mühe von Klicken-und-Scrollen, Klicken-und-Scrollen, Klicken-und-Scrollen... Stattdessen gehen sie direkt...

In diesem Screencast werden wir einige weitere der Module aufbauen, die wir auf der Homepage haben wollen.

Ein kleiner Kniff und wir zeigen drei Hotlinks statt zwei. Ein bisschen kopieren und einfügen...

In diesem Screencast tauchen wir in einen brandneuen Bereich der Seite ein: Die Foren! Dies ist ein riesiger Bereich der Seite. Vielleicht nicht so sehr im Traffic (ich habe mir immer gewünscht, er könnte im Traffic wachsen), aber sicherlich im...

In diesem Screencast werden wir uns tatsächlich mit dem Code des Forenbereichs beschäftigen.

Die "Hauptdatei" der Foren, falls es so etwas gibt, ist default.master.php. Sie ist ein bisschen wie index.php in einem WordPress-Theme, nur dass buchstäblich jede Ansicht...

In diesem Screencast arbeiten wir weiter am Code von Vanilla Forums und bringen unser Theme auf Vordermann. Wir entscheiden uns sofort dafür, den wilden Move zu machen und das gesamte CSS, das von Vanilla kommt, zu löschen...

Wir beschäftigen uns weiter mit dem Theming des Forenbereichs der Seite. Bisher haben wir gute Arbeit geleistet, aber je tiefer wir graben, desto schwieriger werden die Dinge. Teilweise einfach, weil ich nicht viel Erfahrung mit...

Wir haben aufgehört, um zu entscheiden, ob wir den Kampf um ein statisches Login-Formular gewinnen können oder nicht. Wahrscheinlich könnten wir das, aber bei weiterem Herumspielen mit den Foren sehen wir, dass es nicht nur das Login ist, das standardmäßig...

Wir stürzen uns direkt auf die Gestaltung des Hauptinhaltsbereichs der Homepage der Foren. Wohl der wichtigste Teil der Foren, da er das Erste ist, was die Leute sehen, wenn sie auf den Foren ankommen. Das gibt uns die Möglichkeit...

Es war ein langer Weg, die Kontrolle über alle benötigten Teile zu erlangen, mit ein paar Schwierigkeiten und Überraschungen unterwegs. Wir können endlich damit beginnen, diese Module auf der Homepage gemäß dem... zu gestalten.

Man könnte argumentieren, dass die Homepage der Foren die wichtigste Seite ist, aber es gibt genauso gute Argumente dafür, dass einzelne Thread-Ansichten die wichtigsten sind. Daten deuten darauf hin, dass Leute diese "Deep Links" in höheren Zahlen landen als...

Wir stecken noch mitten im Forenbereich. In diesem Screencast betrachten wir die Anmeldeseite. Eine weitere ziemlich wichtige Seite, da wir möchten, dass die Erfahrung des Beitritts zu den Foren so einfach und einladend wie möglich ist.

Wir sind ein...

In diesem Screencast machen wir eine kleine Pause vom Kampf mit dem Vanilla Forums-Styling, um Restrict Content Pro (RCP) einzurichten, unser WordPress-Plugin zur Verwaltung von Abonnenten von The Lodge, dem privaten Zugangsbereich (in dem Sie sich gerade befinden...).

Auf der rechten Seite der Foren gibt es eine Reihe von Modulen. "Module" optisch, "Module" buchstäblich im Code und "Module" in dem Sinne, dass der Inhalt, den sie enthalten, eine zusammenhängende Gruppe ist, getrennt/unterschiedlich vom Inhalt anderer Module.

Die erste...

Seid nicht böse, aber ich musste ein wenig vorgreifen, weil es mühsame, langweilige Arbeit war, verschiedene Ansichten zu überschreiben, indem ich die richtigen Dateien an die richtigen Stellen in unseren Vanilla Forums-Themes platziert habe. Wir haben...

Wir versuchen, die Gestaltung der Foren hier abzuschließen. Einer der wichtigsten Navigationsmechanismen in den Foren ist die Paginierung. Am unteren Rand der Seite können Sie zur nächsten Seite wechseln oder zu...

Wir haben ein wenig Vorarbeit für diesen neuen "Privaten Zugangsbereich" auf CSS-Tricks geleistet. Wir haben uns WordPress-Plugins angesehen, um uns zu helfen, wir haben uns sogar für eines entschieden und es eingerichtet. Aber jetzt müssen wir tatsächlich mit dem Aufbau des... beginnen.

Im letzten Screencast haben wir dieses Foto von iStockPhoto mit der verschneiten Hütte und dem Wald besorgt. Wir haben es in den Hintergrund gelegt, hinter den Hauptinhaltsbereich und die Seitenleiste unseres Photoshop-Dokuments, und es passte dort schön, in...

Verwenden von...

Im letzten Video haben wir herausgefunden, wie wir verschiedene Inhalte innerhalb unserer Templates basierend auf dem Anmelde- und Abonnementstatus der Benutzer ausliefern können. Wir nutzen diese Fähigkeit in diesem Screencast, um an der "Verkaufsseite" zu arbeiten – das heißt, der...

Einer der Gründe, warum WordPress fantastisch ist, ist, dass es sein eigenes voll funktionsfähiges Benutzern authentifizierungssystem mitbringt. Dies von Grund auf neu zu schreiben wäre heutzutage ziemlich dumm, wenn man nicht vorhat, einen ganzen Haufen an Innovationen mitzubringen...

In diesem Screencast sehen wir uns an, wie wir Dateien auf Amazon S3 (Simple Storage Service) so hosten können, dass wir auf diese Assets verlinken und sie nutzen können, aber sie nicht vollständig öffentlich machen. Nur zugänglich machen...

Wir erstellen ein Modul für die allgemeine Seitenleiste der Seite, das nur für The Lodge bestimmt ist. Wenn Sie eingeloggt sind, werden Sie begrüßt und erhalten relevante Links zum Zugriff auf die Inhalte und zu Ihrem Abonnement. Wenn...

Unser "Widget" für The Lodge in der Seitenleiste der Seite (wird auf den meisten Seiten angezeigt, einschließlich der Homepage) hat zwei Zustände. Einer für den Fall, dass ein Benutzer ausgeloggt ist, und einer, wenn ein Benutzer eingeloggt ist. Der Zustand für ausgeloggte Benutzer...

Die Anmeldeseite für The Lodge ist aus offensichtlichen Gründen sehr wichtig: Dies ist die Seite, die das Geld sammelt und den Zugang zum Mitgliedsbereich gewährt. Sie muss gut aussehen und besser funktionieren.

Text ist ein Teil...

Die Homepage von The Lodge, wenn Sie eingeloggt sind (d. h. /lodge/), wird eine Art "Portal"-Seite sein. Diese Serie, die wir "The Big v10 Redesign Project" nennen, wird schließlich nur eines der Projekte sein, die auf dieser... angezeigt werden.

Wir sind kurz davor, dieses Ding zu starten! Es ist an der Zeit, die letzten kleinen Dinge zu überprüfen, die vor dem Start noch behoben werden müssen. Bedenken Sie, dass die Seite noch lange nicht perfekt ist. Aber sie ist gut genug...

Das ist der große Moment! Wir haben eine Liste von Dingen, die wir tun müssen, und wir werden einfach damit beginnen und diese Seite online stellen.

Vielleicht die auffälligste Änderung (letzte Sekunde vor...

Ich habe das Video vielleicht nur 10 Minuten nach dem Start der Seite gedreht. Die Kommentare beginnen einzutreffen, und hier reagiere ich auf einige davon. Wie bei allem dieser Art gibt es sowohl positive als auch...

Etwa einen Monat nach dem Start sprechen wir darüber, wie der v10-Start verlaufen ist.

Wir gehen das Dokument durch, das wir ganz am Anfang dieses Prozesses erstellt haben, in dem wir alle Ziele für das Redesign aufgeschrieben haben. ...