Der vollständige Prozess der Gestaltung einer Künstler-Website aus einer mobilen ersten Perspektive mit WordPress als CMS.
Hallo zusammen! Willkommen zur vollständigen Serie über den Aufbau einer mobilen ersten Künstler-Website mit WordPress. Dies unterscheidet sich leicht von der letzten Serie, in der wir während des Aufbaus aufgezeichnet haben. In diesem Kurs ist die „endgültige“ Website bereits fertiggestellt: JeffCampana.com…
In diesem Screencast werfen wir einen Blick auf Jeffs bestehende Website. Diese Serie ist nicht so sehr auf „Redesign“ ausgerichtet wie die v10-Serie, aber es gibt eine bestehende Website, und wir werden einige bestehende Inhalte davon verwenden. …
In diesem Screencast spreche ich über die Kommunikation zwischen mir und Jeff, als er mir zum ersten Mal eine E-Mail schickte, dass er die Website neu gestalten möchte.
Die allgemeine Stimmung von Jeff war: „Es ist Zeit.“ Es ist Zeit, die Website neu zu gestalten. …
Aus dem letzten Video wissen wir, dass wir fünf Hauptpunkte zu beachten haben, wenn wir mit der Gestaltung dieser Website beginnen. Wir behalten diese im Hinterkopf, während wir weitermachen.
Wir beginnen natürlich „mobile first“, …
Wir öffnen unsere Photoshop-Datei. Der eher albern aussehende „gestreckte“ iPhone-Screenshot, der uns einfach eine Leinwand im mobilen Kontext gibt.
Wir fangen so einfach wie möglich an: mit Jeffs Namen. Wir brauchen …
Wir haben den „Header“ des Designs platziert, wir müssen nur noch den Rest der Seite gestalten. Wir haben eine Liste der wichtigsten Ziele, die wir erreichen wollen, das wird uns helfen, uns zu leiten. …
Wir wollen lokal arbeiten, während wir an diesem Projekt arbeiten. Nur ein paar Gründe
Wir werden uns bald nicht mehr die alte Website ansehen. Das ist das letzte Mal! Unser Plan, jetzt, da wir eine richtige lokale Entwicklungsumgebung haben, ist, uns einen komplett neuen Anfang zu verschaffen. Wir wollen das …
Wir sind dabei, unser WordPress-Theme auf ein Minimum zu reduzieren. Wir machen uns keine Sorgen um das Design, das wir erreichen wollen, wir sind damit beschäftigt, das Alte zu entfernen und uns einen …
In diesem Screencast lassen wir CodeKit unser Projekt überwachen. Dies erleichtert viele Entwickleraufgaben erheblich.
Als Erstes nutzen wir es, um ein Bild verlustfrei zu optimieren. Einfach ein Klick.
Dann installieren wir Compass in der …
Wir haben Proxima Nova als Hauptschriftart für Jeffs Website ausgewählt. Sie ist heutzutage sehr beliebt, aber sie passt gut zu Jeffs Arbeit. Einfache, klare Linien, erzwingt nicht zu viel Persönlichkeit. Wir nutzen Typekit, damit …
Wir entscheiden uns für den RoyalSlider für den Slider auf der Startseite. Ich bin seit langem ein Fan des AnythingSliders, da ich an seiner Entstehung beteiligt war und denke, dass er sehr leistungsfähig ist. Allerdings denke ich, dass es ein …
Der Slider ist implementiert und funktioniert, er sieht nur nicht so aus, wie wir ihn entworfen haben. Wir gehen den Prozess durch, HTML und CSS zu entfernen, die wir nicht brauchen. Wir schauen uns auch die Einstellungen für den RoyalSlider an …
Der Slider funktioniert! Aber er ist nicht genau so platziert, wie wir ihn in unserer Photoshop-Datei entworfen haben. Wir brauchen mehr Platz darunter, um mehr von der Hauptnavigation freizugeben.
In diesem Screencast tauchen wir in das CSS ein, das mitgeliefert wird …
Wir haben einen Plan für die Homepage-Navigation, wir müssen sie nur noch in Code umsetzen. Homepage-Navigation, sage ich spezifisch, weil diese wahrscheinlich nur auf der Homepage verwendet wird. Es wäre ein …
Wir haben einen guten Anfang für die Homepage-Navigation, aber es gibt noch einige Styling-Sachen, die erledigt werden müssen. Wir beginnen damit, den Inhalt selbst zu vervollständigen, fügen ein paar weitere Navigationslinks für insgesamt fünf hinzu. Dann …
Wir sind fast fertig mit der Homepage-Navigation, aber es gibt etwas seltsamen Platz unter unserem Slider und über der Navigation selbst. Wir versuchen herauszufinden, warum.
Für diejenigen unter Ihnen, die sich exakte Lösungen ansehen möchten, ist dies nicht für …
Dies wird die einfachste Fußzeile auf einer Website sein. Sie besteht aus einem Copyright-Symbol mit Jeffs Namen (Es ist meiner Meinung nach immer schön, den Namen der Website in der Fußzeile in Klartext zu haben, um ihn leicht …
Wir beginnen mit der Arbeit am Blog-Bereich der Website. Wir möchten, dass der Blog-Bereich der Website unter /blog/ liegt – also erstellen wir eine Seitenvorlage dafür namens page-blog.php und verwenden die Einstellungen …
Der Blog gibt aus, was wir wollen, aber die Typografie und das Layout stimmen noch nicht ganz. Wir fügen hier und da nach Bedarf etwas Markup hinzu, um eine bessere Semantik und Elemente zu erhalten, die nur für …
Die Typografie stimmt immer noch nicht ganz, also verbringen wir etwas mehr Zeit damit, Anpassungen vorzunehmen. Das lohnt sich hier, denn die Typografie von Überschriften und Fliesstext wird praktisch überall auf der Website gut funktionieren.…
Es gibt nur einen Weg, vom Homepage zum Blog-Bereich der Website zu gelangen, und das ist durch Klicken auf „Neueste Beiträge“. Aber das führt zum neuesten Blogbeitrag. Wir brauchen auch eine Möglichkeit, …
In so gut wie allen WordPress-Themes gibt es eine Datei namens page.php. Dies ist die Vorlage, die „Seiten“ steuert – einer der Standard-Inhaltstypen, die alle WordPress-Websites haben. Seiten unterscheiden sich von Beiträgen darin, dass sie nicht …
Die Homepage-Navigation erfüllt unsere Bedürfnisse gut, aber diese riesige Navigationsleiste auf jeder Seite der Website ist nicht praktikabel. Wir brauchen etwas Dezenteres für die Unterseiten der Website.
In diesem Screencast erstellen wir …
Mit nur wenigen Plugins können wir die „CMS“-Fähigkeiten von WordPress wirklich erweitern: Advanced Custom Fields und Custom Post Types UI.
Mit diesen installierten können wir brandneue Inhaltstypen erstellen, die für die … sinnvoller sind.
Mit unseren beiden leistungsstarken CMS-erweiternden Plugins installiert, verbringen wir etwas Zeit mit deren Einrichtung.
„Events“ auf Jeffs Website ist ein perfektes Beispiel. Ein „Event“ sollte einen Titel und eine Beschreibung haben, daher sind diese Standardfelder in Ordnung, aber es …
Wir haben einen weiteren Beitragstyp, der die richtigen benutzerdefinierten Felder benötigt: die Homepage-Slides. Dies ist eine Art von Sache, die einfach und verlockend wäre, direkt in die Vorlage zu kodieren, aber wir werden die Extrameile gehen …
Im letzten Video haben wir gelernt, wie man einen benutzerdefinierten Loop erstellt und benutzerdefinierte Daten aus unseren benutzerdefinierten Beitragstypen und benutzerdefinierten Feldern ausgibt. Diesmal müssen wir es wieder tun, nur für den etwas komplexeren Events-Bereich. …
Ich dachte, wir könnten Events schnell abhaken, wie wir es im letzten Video besprochen haben, aber als ich den Events-Bereich ausarbeitete, musste so viel Code geschrieben werden, dass ich dachte, es wäre ein Abschlussvideo wert.
In einigen …
Einer der fünf Hauptbereiche der Website ist die Kontaktseite. Sie erfordert aber kaum Abdeckung, da wir sie einfach in Wufoo erstellt und den Code als Seite eingebettet und veröffentlicht haben.…
Wenn das Browserfenster größer wird, wird der Slider oben auf der Homepage lächerlich groß. Dies ist eine mobile erste Serie, aber da die mobile Version des Sliders bereits gut funktioniert (vielleicht sollten wir kleinere laden …
Wir arbeiten daran, die Website so zu reparieren, dass sie auf „Desktop“-Bildschirmen (d. h. größeren) immer noch gut aussieht. Die Homepage-Navigation ist eine weitere Sache, die auf Desktops etwas lächerlich groß wird. Anstatt das zu tun, verschieben wir stattdessen …
Als wir die Website für Desktops anpassten, haben wir die Homepage-Navigation auf die rechte Seite der Seite verschoben, um auf der linken Seite Platz für mehr Inhalt zu schaffen. Wir möchten diesen Inhalt nur hinzufügen, wenn …
Wir landen bei einem sehr einfachen Test, der einen Artikel aus dem Blog lädt, um ihn anzuzeigen, wenn Platz vorhanden ist.
// Load additional content if enough room
enquire
.register("(min-width: 700px)", {
match: function() {
$("#home-article").load("/blog/ #main-article");
}
})
Nur weil dies eine mobile erste Serie ist, bedeutet das nicht, dass wir die Interaktionen von Desktop-/Laptop-Computern ignorieren können. Wir verbringen etwas Zeit damit, sicherzustellen, dass es :hover/:focus/:active Zustände für „klickbare“ Elemente wie Links gibt. Wir nutzen die Sass-Fähigkeit, um …
Auf größeren Bildschirmen haben wir auf allen unseren Seiten mehr Platz. Wir haben das auf der Homepage behandelt, aber wir können auch auf den anderen Unterseiten besser damit umgehen. Eine einzelne Blogbeitragsseite ist wichtig.
Standardmäßig, …
Als wir uns mit der Verleihung von CMS-Fähigkeiten an den Homepage-Slider beschäftigten, haben wir jedem Homepage-Slide ein benutzerdefiniertes Feld mit einem Farbwähler gegeben. Das gibt uns Zugriff auf diese Farbe, wo immer wir sie brauchen. In der Vorlage werden wir …
WordPress treibt den Kommentarbereich von Jeffs Website an. Dies wird mit unseren CSS-Superkräften super einfach zu bereinigen sein. Wir erstellen eine .scss-Datei nur für Kommentare (das perfekte Beispiel dafür, wo eine Sass-Teildatei angemessen ist). Wir fügen …
Zum größten Teil haben wir bisher den iOS-Simulator verwendet, um die mobile Version unserer Website zu testen. Das ist ziemlich gut, viel besser als das Testen eines schmalen Browserfensters, aber es ist auch bei weitem nicht umfassend.
Wir benutzen …
Es ist Zeit, diese Serie abzuschließen. Es war eine unterhaltsame Reise!
Es gibt einige Unterschiede zwischen dem, was wir behandelt haben, und dem, was tatsächlich auf JeffCampana.com ist. Wie üblich ist einiges besser geworden, das …
© .