Ich habe eine brandneue Serie in The Lodge abgeschlossen! Es dreht sich alles um den Aufbau einer Website von Grund auf. Genauer gesagt, um die Website meines Freundes Jeff, des Keramikkünstlers, Website.
Es ist eine 40-Video-Serie, die von einer leeren Leinwand bis zum fertigen Produkt reicht. Sie deckt jede getroffene Entscheidung, jede geschriebene Codezeile, jedes platzierte Pixel und jeden umgeschalteten Schalter ab.
Wir beginnen, wie alle nicht-persönlichen Redesigns beginnen, mit den Wünschen der Kunden nach einer neuen Website. Was treibt sie an? Welche Ziele haben sie? Können wir tiefere Themen entdecken? Können wir alles organisieren und auf den Punkt bringen?
Dann betrachten wir Jeffs Arbeit und die jüngsten ästhetischen Änderungen daran, insbesondere wie er sie fotografiert. Wir nehmen Anregungen daraus für das Design der neuen Website.
Jeff ist von der Idee einer Mobile-First-Philosophie überzeugt. Nicht, indem wir sie ihm erklären, sondern indem wir einfach vorschlagen: „Hey, was hältst du davon, die Website zuerst am Handy zu entwerfen?“ und ihn die offensichtlichen Vorteile selbst herausfinden lassen.
Dann entwerfen und bauen, bauen, bauen wir!
Wir möchten Jeff so viel Kontrolle wie möglich geben, daher nutzen wir die Fähigkeiten von WordPress, um es zu einem wirklich angepassten CMS zu machen, das ihm diese Kontrolle gibt. Der Slider auf der Homepage wird von „Custom Post Types“ gesteuert, die Jeff einfach über den WordPress-Adminbereich hinzufügen, entfernen, bearbeiten und sogar neu anordnen kann. Veranstaltungen werden auf die gleiche Weise gehandhabt. Nicht nur über kategorisierte Beiträge oder Seiten, sondern über Eingabebildschirme, die wir speziell für diese Art von Inhalten erstellen.
Wir beenden die Arbeit, indem wir sicherstellen, dass die Website auch auf größeren Bildschirmen gut aussieht, und fügen sogar zusätzliche Inhalte hinzu, da wir den Platz dafür haben.
Interessiert? Melden Sie sich für The Lodge an, um sie anzusehen. Wenn Sie das tun, erhalten Sie auch Zugang zur über 150 Videos umfassenden Serie, die das Redesign von CSS-Tricks (v10) detailliert beschreibt!
Wunderschöne Seite! Aber sie versagt gnadenlos in IE8. Ich weiß, IE8 ist eine Qual, aber sollten Websites nicht immer noch irgendwie halbwegs funktionieren in IE8 noch etwa ein Jahr lang? Oder ist es sicher, sie einfach zu ignorieren?
Meine Meinung ist wie folgt:
Scheiß auf IE<9. Der einzige Weg, solche schrecklichen Browser zu überwinden, ist, ihre Benutzer zum Upgrade zu zwingen. Vielleicht alle Styles deaktivieren, aber wenn Sie immer noch IE8 verwenden, sind Sie wahrscheinlich daran gewöhnt, dass Websites nicht funktionieren.
Ok, vielleicht eine zu aggressive Haltung, aber so mache ich es, wann immer es möglich ist.
Wie immer ist es eine Fall-zu-Fall-Entscheidung mit vielen beteiligten Faktoren. Wenn ich Zeit habe, würde ich definitiv zurückgehen und sie zumindest in IE 8 einfach und navigierbar machen.
Natürlich entwerfe ich lieber „zukunftsorientiert“, wie jeder rationale Mensch auch (SVG-Bilder werden in fünf Jahren noch wertvoll sein, aber IE8-Kompatibilität ist eine sehr vergängliche Ware). Und jetzt, da ich den Segen von The Chris Coyier habe, IE8 noch mehr zu einem nachträglichen Gedanken zu machen, werde ich testen, die Grenzen noch weiter auszudehnen…
Das sind alles Tricks, um ihre Versionen zu aktualisieren, so wie wenn man Google in einem anderen Browser als Chrome benutzt, wird angezeigt, dass man einen schnelleren Browser bekommt, also Chrome, und wenn man Bing in einem anderen Browser als IE benutzt, wird angezeigt, dass man einen schnelleren Browser bekommt, also IE. Das sind alles Tricks für erzwungene Promotionen.
Scheiß auf <IE9?
Ihr habt Glück, Leute… Wir arbeiten in Italien immer noch für IE7…
Interessanter Ort für ein Menü.
Ich habe die ersten 6 Videos angesehen… bisher eine fantastische Serie… ich hoffe, Sie machen mehr… Diese kleinen Brot-und-Butter-Seiten sind wahrscheinlich einige der häufigsten Seiten, an denen viele Webdesigner arbeiten.. Eine praktische Serie wie diese ist also sehr hilfreich…
Bitte machen Sie weiter mit diesen Lodge-Tutorial-Serien!
Danke Michael! Das ist sehr ermutigend.
Da IE8 der neueste Browser ist, den man unter Windows XP bekommen kann, denke ich, dass er unterstützt werden sollte, da ihn leider immer noch viele Leute benutzen. Es ist nicht besonders schwierig zu tun. Jedenfalls habe ich mir die Keramik-Seite kurz angesehen und sie sieht wirklich sauber aus. Gut gemacht!
Der obere Slider sieht in Chrome unter Mac fehlerhaft aus, ich kann nach rechts scrollen und der gesamte Seiteninhalt verschiebt sich aus dem Bildschirm. In Safari verhindern Gesten, dass ich zurückscrolle, sodass ich, sobald der Inhalt weg ist, nur die Seite neu laden kann, um ihn zurückzubekommen. Ansonsten sieht es auf einem 27-Zoll-Bildschirm beeindruckend aus.
Die mittlere Maustaste ist derzeit auf dem Desktop problematisch. Ich kann die Seite horizontal scrollen und mit ihr durch die Bilder gleiten, während alle Bilder in neuen Tabs im Hintergrund geöffnet werden. Ich würde mir auch eine Art „Das ist ein Slider!“-Anzeige auf dem Desktop wünschen, oder noch besser Pfeile zum Durchklicken, da die Maus kein praktisches Werkzeug für Touch-basierte Steuerung ist. Das Deaktivieren von Outlines (wenn nicht im :hover-Zustand) wäre auch gut, da ich jetzt riesige Fokusrechtecke weit außerhalb der aktiven Linkblöcke bekomme. Ein alternativer :focus-Stil könnte eine Lösung sein.
Schön zu sehen, dass eine weitere Serie online geht. Der Ansatz von Anfang bis Ende ist für einen Webdesigner, der gerade erst anfängt, wirklich wertvoll. Es wäre schön, etwas mehr Transparenz bei den Videotiteln zu haben, allein schon damit wir entscheiden können, ob die Serie Elemente abdeckt, die uns interessieren, z. B. eine Inhaltsübersicht. Außerdem, @chris, gibt es einen Tippfehler im letzten Absatz Ihrer Lodge-Anmeldeseite. Dort steht 19 Videos und nicht 190 – das hat mich leicht verwirrt, als ich es sah. Tolle Arbeit, weiter so. Ich liebe auch ShopTalk.
Ein Inhaltsverzeichnis ist eine tolle Idee! Erledigt.
Schönes Design Chris, du hast erstaunliche Arbeit geleistet. Besonders in Bezug auf den oberen Slider und die wechselnden linken Ränder in der Navigation. Es fühlt sich großartig an. :)
Chris, das ist eine sehr erfreuliche Seite. Einfach und doch elegant. Das reicht für mich, um mich sofort für The Lodge anzumelden.
Ich liebe die Seite, Chris. Weißraum ist exzellent, Typografie funktioniert gut, und die Steuerung ist intuitiv. Was ich jedoch nicht verstehe, ist, warum verstecken Sie Inhalte auf der Homepage in der Tablet-/Mobilversion (“.home-article “ : < 713px)?
Als responsiver Webentwickler mag ich die Idee, jemandem sagen zu können: „Hey, schau dir den Homepage-Artikel unter xyz.com an“ und die gleiche Inhalts-Erfahrung auf jedem Gerät erwarten zu können, aber die Anzeige-Erfahrung für jedes Gerät optimieren zu lassen.
War das eine technische Einschränkung oder eine Designentscheidung?
Hallo Jonathan,
Dies ist eine „Mobile First“-Serie, also denken Sie nicht daran als „Inhalte verstecken“ in der Version für kleine Bildschirme, sondern denken Sie daran, zusätzliche Inhalte in der Version für große Bildschirme freizulegen, wenn dafür Platz vorhanden ist. So wird es in der Serie gedacht und angegangen. Der Artikel wird standardmäßig nicht einmal geladen, er wird per Ajax geladen, wenn die Bedingungen stimmen.
Sie haben jedoch einen Punkt bezüglich des „Hey, schau dir den Homepage-Artikel unter xyz.com an“. Das ist ein soziales Verhalten, das ein Designer nicht kontrollieren kann. Ich denke jedoch, es wäre in Ordnung. Der allererste Link in der sehr großen, prominenten Navigation auf der Homepage ist „LATEST WRITING“ und der Titel des Artikels. Sicherlich könnte das jeder herausfinden. Die Tatsache, dass der Artikel vollständig angezeigt wird, ist eher ein Bonus.
Danke für die Erklärung, Chris. Ich habe den Ajax-Ladevorgang verpasst, da ich die Seite zunächst bei höherer Auflösung geladen und dann skaliert habe.
Ich habe viel mit Kunden zu tun, die Inhalte bei niedrigeren Auflösungen verstecken möchten, daher ist das für mich ein heikles Thema. Sie machen jedoch ein überzeugendes Argument dafür, dass der Artikel sofort verlinkt ist, sodass der Inhalt weiterhin zugänglich ist, und ich finde es großartig, dass er bei höher auflösenden Geräten per Ajax geladen wird.
Danke für die Zusammenstellung der Serie. Ich werde sie mir auf jeden Fall ansehen.