Ich habe gerade eine neue Hauptnavigation auf der Website veröffentlicht. Die Gründe dafür waren zweifach.
Erstens musste ich ein paar neue Bereiche auf der Website hinzufügen. Schaut mal rein! Ich habe einen Galerie-Bereich hinzugefügt, in dem ich Screenshots von Designs posten kann, die mir gefallen. Ich habe schon ewig LittleSnapper verwendet, um solche Dinge festzuhalten, also dachte ich, ich poste sie auch mal online. Es gibt auch einen Kalender-Bereich, der sich noch in der Entwicklung befindet und auf dem ich praktische Dokumentationen zu allen CSS-Eigenschaften und Selektoren bereitstellen möchte. Außerdem habe ich den Angebote-Bereich in die Hauptnavigation verschoben. Ich werde hier nicht einmal darauf verlinken, damit ihr auf die Website gehen und die Navigation selbst ausprobieren könnt.
Zweitens musste ich Platz für den neuen Hauptsponsor der Website schaffen: Treehouse. Treehouse ist die umbenannte Think Vitamin Membership von Carsonified. Aber das ist mehr als eine Umbenennung, es ist eine komplett neue App. Für eine monatliche Gebühr erhalten Sie Zugang zu zahlreichen Schulungsvideos für Webdesign und -entwicklung. Anschließend setzen Sie dieses Training in die Praxis um, indem Sie Quizfragen zum Material beantworten. Wenn Sie bestehen, erhalten Sie das Abzeichen. Durch Ihr öffentliches Profil dienen diese Abzeichen als sozialer Beweis dafür, dass Sie Ihr Fach beherrschen. Sie können auch Lernpfaden folgen, die Sie von Anfang bis Ende durch die Erstellung von Web-Apps führen. Ich freue mich, Treehouse als Sponsor zu haben. Ich empfehle es uneingeschränkt.
Responsive halten
Es war eine lustige Herausforderung, das neue Design an die Responsivität der Website anzupassen. Probieren Sie es selbst aus, um zu sehen, wie es funktioniert. Hier sind Screenshots der vier verschiedenen Zustände
Die Treehouse-Anzeige ist ebenfalls responsiv und passt sich dem verfügbaren Platz an und ist jederzeit sichtbar.
Sieht fantastisch aus!
Der Schlüssel ist, dass der Benutzer nicht zu viel zwischen den Kategorien und ihren Unterkategorien innerhalb der Website navigiert. Diese Art von Menüs eignet sich nur für informative Websites oder Blogs, die viele Informationen für viele Kategorien enthalten.
Sieht großartig aus! Und Treehouse ist eine wirklich coole Plattform ;)
Schon bevor Sie das hier gepostet haben, bemerkte ich die neue Navigation und den neuen Sponsor. Ich saß hier 20 Minuten lang und analysierte Ihre CSS-Abfragen, da ich selbst mit Responsive Web Design beginnen möchte. Ich bin sehr froh, Ihre Website gefunden zu haben. Ihre Videos und Beiträge haben meine Designfähigkeiten und mein Wissen erheblich verbessert. Machen Sie weiter so, Chris!
Die neue Navigation sieht großartig aus.
Frage: Sie verwenden WordPress für Ihre Website… Wie ist Ihre Navigation im Backend codiert, oder verwenden Sie benutzerdefinierte Menüs??
Ich schließe mich dieser Frage an.
³
Ein Tutorial wäre toll.
Sieht auf mobiler Safari großartig aus, aber Opera Mini bricht den Header/Navigationsbereich und die Kreatur mit den kugelrunden Augen ist immer noch die grüne.
P.S.
Das ist mobile Safari und Opera Mini auf dem iPhone. Ich habe kein iPad, also kann ich dieses Gerät nicht überprüfen.
Großartig! Ich arbeite gerade an genau demselben Thema für ein Projekt, daher ist es schön, verwandte Beiträge im Web zu sehen, die sich mit responsiven Elementen von Websites befassen, und nicht nur mit Demos ganzer Websites.
Machen Sie weiter so – wie immer exzellente Arbeit!
David
Ich sehe die Zukunft des Designs
Du bist ein guter
Sehe die Treehouse-Anzeige nicht unter iOS, also muss sie Flash sein, richtig? In diesem Fall ist der Platz, den sie einnehmen soll, verschwendet. Wahrscheinlich haben Sie sie darauf angesprochen.
Ich weiß nicht, Mann. Das sehe ich: http://cl.ly/C7XC
Oh, warte, ist das ein iframe? http://imgur.com/0z787
Sieht großartig aus, Chris! :)
Ich bin total begeistert von den neuen TeamTreeHouse! Ich habe in zwei Tagen fast 30 Abzeichen freigeschaltet und arbeite an der iOS-Entwicklung. Tolle Kursänderung!
Sieht wirklich großartig aus. Und die Art und Weise, wie Sie die mobile Navigation gestaltet haben, hat mich gerade dazu gebracht, ein Projekt von mir neu zu gestalten :P
Übrigens, cooler Sponsor.
Ich bin süchtig danach, mein Browserfenster zu verkleinern und zu vergrößern, wie ein kranker und verdrehter Freak-Saddo. Sieh, was du aus mir gemacht hast, Chris, ich hoffe, du bist zufrieden mit dir!
Ernsthaft, tolle Arbeit, Kumpel!
Sehe ich das richtig? Oder sieht der gelbe Frosch kurz entsetzt aus, als er beim Vergrößern des Browsers über 1200 Pixel vom grünen Frosch abgelöst wird…
Lol, ich liebe es, wenn der Frosch grün wird.
boa, liebe es!
Die Ressourcen müssen ebenfalls responsiv sein, nicht nur der Code. Sie beanspruchen auf den meisten Ihrer Seiten die gleiche Bandbreite, obwohl viel weniger ausreichen würde.
Wenn ich darüber nachdenke, gibt es keinen Grund, warum man die Website nicht um die mobile Nutzung herum gestalten sollte, anstatt die größere Website zu vereinfachen. Das kann man doch ganz einfach machen, indem man ein paar Tags basierend auf dem Viewport ein- und ausblendet, oder?
Mobile Geräte machen nur 1,7 % aller Besucher von css-tricks aus. Rechtfertigt das, „die Website um die mobile Nutzung herum zu gestalten, anstatt die größere Website zu vereinfachen“? Ich glaube nicht… aber das ist nur meine 0,02 €.
Ich habe eine Mitgliedschaft bei Teamtreehouse abgeschlossen, danke für die Empfehlung. Ich habe direkt bei den Grundlagen begonnen, um sicherzustellen, dass ich keine Wissenslücken habe. Um ehrlich zu sein, finde ich die Tests nicht schwer genug, es fühlt sich an, als würde ich etwas zu leicht durchrutschen. Die Herausforderungen sind jedoch sehr gut.
Hallo Chris! Tolle Ergänzung für die Website, ich liebe die neue Navigationsleiste.
Ich habe gerade Ihre Website auf dem experimentellen Browser des Kindle Touch (nicht des Kindle Fire) überprüft. Sie wird perfekt konvertiert und sieht für ein Schwarzweiß-E-Ink-Display großartig aus. Nicht viele Leute, die Ihre Website besuchen, werden diesen Browser verwenden, aber ich dachte, Sie würden es gerne wissen.
Ich liebe die neue Navigation, die Farben passen wirklich gut zum neutralen Thema der Website. :D
Auch dieser Frosch ist perfekt. Schön und gruselig, starrt von hinter der Ecke. :0
Neue Nav ist **heiß**. #responsivewebdesign #winning
@chris… Es ist kaputt gegangen, glaube ich. CSSTricks kaputt ja? Das ist doch nicht so, wie es aussehen soll, oder? (IE9 – breiter Monitor – Win 7 – 26.11.2011 19:08 Uhr)
Großartige Neugestaltung (mal wieder) Chris! Weiter so mit den Verbesserungen und guten Inhalten!
Sieht wirklich gut aus, ich finde, das Layout fließt jetzt gut. Liebe die Animation der Hauptnavigation, wenn Sie die Homepage aktualisieren. Schöne Geste.
d.
Sehr professionell!
Neues Design sieht fantastisch aus! Einfach zu finden, was ich gesucht habe, und ich mag es, dass es sich an meinen Bildschirm anpasst, da es normalerweise Probleme mit großen Bildschirmauflösungen gibt, bei denen die Website nur einen winzigen Teil des Bildschirms einnimmt und der Rest ungenutzter Platz ist.
Und ich höre zum ersten Mal von Treehouse, aber es sieht auf jeden Fall vielversprechend aus.
liebe es!
Sieht großartig aus…
Ich hoffe, Sie wurden für die Treehouse-Anzeige gut bezahlt!
Ich kenne Ihre Website erst seit weniger als einer Woche und Sie haben schon eine Neugestaltung,… :}P Ihr Lynda.com-Tutorial ist ein großartiges Werk, das mir beibringt, wie man WordPress-Websites erstellt,… Können wir dasselbe von TreeHouse erwarten,… ? & Wo sind die kostenlosen Gutscheine dafür,… lol
Ich glaube, ich habe noch nie eine so responsive Website gesehen.
Es ist ein fantastischer Code, gut gemacht. Wie haben Sie die Unterstützung älterer Browser gehandhabt? JavaScript?
Glückwunsch zum Sponsor! Haben Sie erwogen, den Almanach gemeinschaftlich erstellen zu lassen / wiki-basiert zu machen, vielleicht mit Ihrer endgültigen Genehmigung, bevor Änderungen live gehen?
Brillant.
Hallo Chris-
Gute Arbeit an dem neuen Layout. Ich finde mich immer öfter hier wieder, um ... nun ja ... Inhalte zu finden! Gibt es jemals einen Ersatz für dieses oft fehlende Attribut? Ich glaube, Sie stimmen mir zu. ; ) Tolle Arbeit!
Ich liebe dieses neue Layout absolut. Der zusätzliche Weißraum ist wirklich schön und die Responsivität ist fantastisch. Sieht gut aus!
Chris, die neue Navigation ist großartig! Ich kann nicht aufhören, mein Browserfenster zu vergrößern und zu verkleinern. Und obwohl ich ein treuer Leser bin, glaube ich nicht, dass ich herausfinden könnte, wie Sie das gemacht haben, ohne den Quellcode anzusehen.
Ich liebe es, Chris!! Ich habe auf Twitter gefragt, ob wir einen Rabatt auf Treehouse bekommen, wenn wir von Ihrer Seite kommen. Vielleicht melde ich mich dort an. Prost und es sieht großartig aus!!!
Ich mag den lächelnden Frosch **:D**
Eine Frage, die mich neugierig gemacht hat: die obige responsive Navigation, wenn sie in zwei/vier Stapel aufgeteilt wird, wie teilt man sie und endet im Video-Menü und Foren/Videos/Galerie mit Media Queries, um das Blockmenü zu erstellen? Haben Sie es zerschnitten oder einfach die Berechnung der richtigen Breite angepasst und dann das überflüssige Element von selbst herunterfallen lassen?
Oh… ich verstehe es wirklich nicht.. **T_T**
Gut gemacht, Mann, ich liebe es!
Mach weiter so! Inspirierende Sachen!
Sie haben die Website tatsächlich geändert, während ich navigiert habe lol, das hat mich anfangs etwas verwirrt, aber ich habe sofort nachgesehen, ob Sie ein responsives Design implementiert haben, was zu meiner Überraschung auch der Fall war, etwas, das ich für ziemlich intuitiv hielt.
Sieht wirklich cool aus.
Die neue Navigation ist großartig, aber denken Sie nicht, dass die Bilder der Artikel und des Almanachs vertauscht werden sollten? hahaha.
Ich liebe die neue Navigation! Und Bonuspunkte dafür, dass Sie „rejiggers“ gesagt haben, weil es mich an die alte Dame aus Futurama denken ließ… „My kajigger!“
Tolles Beispiel für Navigation und responsives Design. Danke!
Liebe die Ikonographie, Chris. Weiter so.
Ich liebe es wirklich (und analysiere es schon seit ein paar Tagen), aber wie @Hompimpa – ich würde gerne einen Beitrag oder einige Informationen darüber sehen, wie Sie die responsiven Konzepte auf die Navigationsleiste angewendet haben.
Ich verstehe alle Konzepte des responsiven Designs und möchte sie in meine Projekte implementieren. Allerdings weiß ich nicht wirklich, wie man sie am besten umsetzt (abgesehen von übermäßiger Positionierung, was ich nicht wirklich gerne mache).
Hervorragend! Liebe es, Chris :)
Super! Chris, ich liebe den Regenbogen
SUPER! Kumpel, mach weiter so!
Tolle Arbeit! Aber die ausgewählte Schriftart hat Probleme bei der Darstellung in Opera und Chrome unter Windows XP, siehe: http://i.imgur.com/0P5VT.png
Grüße
Als ich die Zoomstufe änderte und die Navigation sah, wurde mir klar… was ist das Besondere. Es sieht wirklich großartig und professionell aus!!! Ich mag auch die Animation der Homepage.
Sehr schöne Auffrischung, Chris. Dies ist ein großartiges Beispiel für responsives Design.
Während es für viele einfach ist, den Quellcode zu durchsuchen und es herauszufinden, würde ich, wie viele andere Kommentatoren, gerne einen Beitrag über Ihren technischen Ansatz zu diesem Design und Ihre Kommentare zum verwendeten HTML/CSS sehen.
Ich bin neugierig, ob Sie von Anfang an die vier Breiten im Auge hatten? Haben Sie vor dem Coden skizziert, wie jede davon aussehen würde? Haben Sie bei Ihrem Designprozess von breit nach schmal (Elemente entfernen) oder von schmal nach breit (Elemente hinzufügen) gedacht?
Ich liebe die neue Navigation und die neuen Bereiche sind auch großartig.
Wow Chris,
Ernsthaft, ich war seit den goldenen Zeiten von CSS Zen Garden nicht mehr so beeindruckt von dem, „was möglich ist“. Es ist immer gut, zu jemandem aufschauen zu können, der über verrückte Fähigkeiten verfügt. Ihre Arbeit war schon immer beeindruckend, aber diese neuen responsiven Änderungen setzen einen neuen Standard und heben die Messlatte für alle.
Machen Sie weiter so, und danke, dass Sie weiterhin teilen, was Sie tun und lernen.
– Josh
Ich bin mir nicht sicher, ob ich die Abzeichen auf Team Treehouse verstehe. Ich verstehe das Konzept, ein Abzeichen zu erhalten, um zu signalisieren, dass Sie einen Kurs abgeschlossen haben, aber wie werden diese Abzeichen Ihnen zugewiesen und welche Eitelkeitsvorteile bringen sie Ihnen auf der TTH-Website? Haben Sie ein Profil mit allen Abzeichen, die Sie verdient haben und das andere Benutzer sehen können, oder was? Es wird auf ihrer Website nicht klar (soweit ich sehen kann).
Schönes Navigationsdesign. Ich frage mich, ob wir angesichts der Codierung für responsives Design das Ende des Dropdown-Menüsystems erleben? Es scheint, dass viele responsive Designs diese Funktion weglassen. Hat jemand Gedanken dazu?
Ich liebe es. Weiter so!
Ich liebe Ihre neue Navigation… sie ist brillant!!
Ich liebe es einfach, wie sich Ihr Frosch verwandelt, wenn die Website neu geladen wird :D.
Es tut mir so leid, von Ihrem Hacker zu hören. Die Möglichkeit, dass diese Person dieselbe ist wie bei sohtanaka.com usw., ist nicht weit hergeholt.
Das andere, was erwähnenswert ist, ist, dass dies alles Designer-bezogene Webspaces sind… (hmm)
Liebe die neue Navigation. Wirklich großartig.
Ich mag es wirklich! und es ist wirklich clever, besonders wenn ich bei der Arbeit bin, wo der Bildschirm immer noch 1024×768 ist.