Vor ein paar Tagen hielt ich einen viereinhalbstündigen Workshop auf der BD Conf in Dallas, Texas. Ich dachte, ich fasse die Notizen davon für die Teilnehmer zusammen. Und ich dachte mir auch, dass es nützlich sein könnte, sie öffentlich zu posten, damit alle davon profitieren können. Einiges wird vielleicht keinen Sinn ergeben, wenn Sie nicht dabei waren, aber das ist eben der riesige Vorteil, wenn man an diesen Veranstaltungen teilnimmt!
Wir begannen mit einem komplett leeren Ordner. Kein Framework, kein Startcode, nur komplett von Grund auf neu. Wir erstellten eine einfache Struktur im Ordner: index.html und Ordner für css, js und images.
Wir fügten diesen Projektordner zu CodeKit hinzu und demonstrierten, dass sich der Browser automatisch aktualisiert, wenn Sie Inhalte in HTML ändern, um diese Änderung anzuzeigen. Das macht CodeKit, und es erfordert nichts weiter Besonderes. Der Browser in unserem Fall war der ganz normale Chrome (funktioniert auch in Safari) und der Texteditor war Sublime Text 2 (könnte jeder Texteditor sein).
Wir haben etwas Textur von Subtle Patterns hinzugefügt.
Als wir CSS bearbeiteten, sahen wir zu, wie sich die Stiländerungen ohne Seitenaktualisierung selbst "injizierten". Wir sprachen darüber, wie nützlich das in einer bestimmten Anwendung ist. Stellen Sie sich eine Webanwendung vor, bei der es ein paar Klicks dauert, bis sie in einen bestimmten Zustand gelangt (offener Dialog, geöffnetes Dropdown-Menü). Eine Aktualisierung würde diese Dinge schließen, aber mit Stil-Injektion können Sie sie gestalten, ohne sich darum kümmern zu müssen.
Sofort nutzten wir Sass für unser Projekt. In unserem Fall die .scss-Variante von Sass, die fast wie normales CSS aussieht, mit geschweiften Klammern und allem Drum und Dran. Wir erstellten zusätzlich zum "css"-Ordner einen "scss"-Ordner, und CodeKit wusste, dass es unsere "style.scss" in "style.css" kompilieren sollte, wenn wir die Datei speicherten. Stil-Injektion funktioniert weiterhin.
Wir begannen, ein Grid für das Projekt zu erstellen. Selbst ein Layout mit einer Seitenleiste ist im Grunde ein Grid. Anstatt ein schickes Framework zu verwenden, denken wir nicht zu viel darüber nach und erstellen unser eigenes.
Sofort haben wir die Grid-Elemente in eine Datei namens _grid.scss in unserem scss-Ordner ausgelagert. Das ist eine Namenskonvention, die darauf hinweist, dass diese Datei in andere Dateien eingebunden wird und nicht direkt kompiliert werden soll.
Unser Grid-„Framework“ besteht darin, Elemente einfach im Prozentanteil nach links zu verschieben. Zum Beispiel 66,66 % breit neben 33,33 % breit. Oder vier Elemente mit je 25 % Breite. Diese haben wir mit Klassennamen wie grid-2-3 oder grid-1-4 versehen.
Wir haben die Clearfix-Klasse verwendet, damit das Grid nicht auf Null Höhe kollabiert.
Die Abstände zwischen den Spalten wurden durch Hinzufügen von linkem Padding zum Grid selbst und dann von rechtem Padding zu jeder der Spalten gehandhabt. Anfangs hat das das Grid ruiniert, bis wir universell box-sizing mit border-box hinzugefügt haben. Das bedeutete, dass das Padding von unserer eingestellten Breite abgezogen und nicht zu ihr hinzugefügt wurde, was das Problem sofort behob.
Mit den Spalten an Ort und Stelle haben wir unseren Inhalt in Module aufgeteilt. Module wurden aus einem weiteren neuen Stylesheet gestylt, das wir _modules.scss nannten und in das globale Stylesheet importierten. Der Trend war, gruppierte Stile in separate Stylesheets auszulagern, um die Organisation zu verbessern. Die "Command-T"-Funktion von Sublime Text 2 macht es sehr einfach, zu diesen Dateien zu springen, wenn man weiß, dass man sie braucht.
Als wir die Border-Box-Sachen hinzufügten, haben wir nur die Version ohne Herstellerpräfix verwendet, aber in Wirklichkeit brauchen wir ein paar Herstellerpräfixe, um die beste Browserunterstützung zu erzielen. Immer wenn wir an Herstellerpräfixe denken, denken wir: **„Wir sollten ein @mixin erstellen!“** und wenn wir das denken, denken wir: **„und damit meine ich die Verwendung von Compass!“**
Wir fügen Compass zum Projekt über CodeKit hinzu und geben die von uns eingerichteten Ordnernamen an. Nichts ändert sich wirklich, es ist nur so, dass wir jetzt @import "compass/css3"; in das globale Stylesheet einfügen und alle Compass CSS3 @mixins verwenden können. In unserem Fall haben wir @include box-sizing(border-box); verwendet.
Wir wechseln das Thema und fügen ein Logo zum Website hinzu. Es ist ein einfaches einfarbiges Logo, daher entscheiden wir uns für SVG. Weil: 1) Die SVG-Datei wird sehr klein sein 2) Sie wird bei jeder Bildschirmgröße sehr scharf sein 3) Die Browserunterstützung ist ziemlich gut, aber nicht perfekt.
Die Verwendung von SVG ist sehr, sehr einfach. Sie verwenden es genauso wie eine .jpg- oder .png-Datei: <img src="logo.svg" alt="logo"> oder background: url(logo.svg);
Sie können ein SVG direkt aus Adobe Illustrator speichern. Genauso wie Sie die Datei als .ai speichern, können Sie sie als .svg speichern.
Es gibt einige Browser, die SVG nicht unterstützen. Wir schauen uns CanIUse.com für die Unterstützungsebenen an. Für aktuelle Browser ist alles grün, aber IE 8 und darunter unterstützen es nicht. Wir öffnen auch BrowserStack und rufen die Website in einem Emulator eines Samsung Galaxy Tab 8.9 mit Android auf, und das SVG funktioniert dort nicht.
Wir konnten unsere lokale Website auf BrowserStack öffnen, da wir durch MAMP eine echte lokale Domain dafür erstellt und dann deren Local Tunnel-Funktion verwendet haben.
Wir entscheiden uns, dass wir diese älteren Browser unterstützen wollen, also erstellen wir eine .png-Version des Logos. Dann mussten wir die Unterstützung von SVG in jedem gegebenen Browser testen, also erstellten wir eine benutzerdefinierte Version von Modernizr, die diesen Test durchführte. Jetzt können wir einfach if (Modernizr.svg) { } else { } verwenden, um Support- oder Nicht-Support-Situationen zu behandeln.
Wir fügen schnell jQuery zur Seite hinzu, indem wir das Skript-Tag über ScriptSrc abrufen.
Für unsere SVG-Situation ohne Unterstützung zielen wir einfach auf das Logo mit jQuery und verwenden die .css()-Methode, um das background-image so zu ändern, dass es auf die .png-Datei statt auf .svg zeigt. Wir testen es in BrowserStack und es funktioniert hervorragend.
Wir wechseln wieder das Thema und fügen einige Medien zu unserem Hauptinhalt im Grid-Layout hinzu. Wir fügen ein YouTube-Video und ein Flickr-Foto hinzu, beide unter Verwendung des Copy-Paste-Codes, den diese Dienste anbieten (wie es ein Content-Ersteller wahrscheinlich tun würde). Beide haben sofort Probleme in unserem flüssigen Layout (ja, unser Layout ist komplett flüssig, wir haben bisher nur Prozente verwendet. Denken Sie daran, das Web ist immer flüssig, bis Sie diese Funktion explizit durch Setzen von nicht-prozentualen Breiten brechen).
Um die Medien flüssig zu machen, setzen wir im Wesentlichen die max-width auf 100% und überschreiben jede feste Höhe mit auto. Das funktioniert gut für das Bild, aber nicht für das Video. YouTube-Videos kommen als iframes, die kein Gefühl für das Seitenverhältnis haben wie Bilder. Wir schreiben zusätzlichen Markup und CSS, um diese Situation zu behandeln, und folgen im Wesentlichen dem intrinsic ratios for video model.
Dieses Konzept ist zwar cool, aber der zusätzliche Markup, den es erfordert, macht es für die meisten Websites (einschließlich meiner eigenen) unpraktisch, daher implementieren wir FitVids.js auf der Website. FitVids tut nichts anderes, als die CSS-Methode zu automatisieren, die wir gerade gelernt haben. FitVids benötigt jQuery zum Arbeiten, aber wir hatten das bereits wegen des SVG-Austausch-Krams, den wir gemacht haben.
Wir begannen, das Problem zu haben, dass zu viele Skripte geladen wurden. Wir sprachen darüber, dass Leistung Teil des Workflows sein sollte. Die Reduzierung der Anzahl der geladenen Ressourcen ist ein wichtiger Teil der Leistung, daher unternehmen wir einige Schritte, um Skripte zu minimieren und zu verketten. Mit CSS durch @import machen wir das im Grunde schon. Mit JavaScript machen wir das durch die Fähigkeit von CodeKit, Skripte miteinander anzuhängen/voranzustellen, während sie minimiert werden.
Wir wechseln das Thema und erstellen eine Navigation für die Website. Eine Reihe von Links, die auf breiten Bildschirmen gut funktioniert, aber auf kleinen Bildschirmen auf mehrere Zeilen bricht und umständlich wird. Wir schauen uns ein wenig Off-Screen-Navigationsmuster an und entscheiden uns, dass das der richtige Weg ist. Unsere wird einfach sein. Einfach auf einen Link klicken, um das Menü anzuzeigen, und der gesamte Bildschirm füllt sich mit der Navigation. Auf einen anderen Link klicken, um es zu verbergen.
Wir entscheiden uns für einen **"stated" CSS**-Ansatz. Wir werden jQuery verwenden, um auf Klicks auf unseren "Hide/Show Menu"-Button zu warten, aber alles, was es tun wird, ist, einen Klassennamen auf das Body-Element zu schalten. Dieser Klassenname steuert den visuellen Zustand der Seite. Mit dem vorhandenen Klassennamen und einem schmalen Bildschirm (bestimmt durch eine @media-Abfrage) erhält das Navigationsmenü die Vollbildbehandlung.
Wir experimentieren mit einigen zugänglichen Verstecktechniken, bei denen wir die Elemente außerhalb des Bildschirms bewegen, anstatt display: none; zu verwenden. Es wurde ein wenig knifflig, sie wieder sichtbar zu machen, aber schließlich verwendeten wir position: static;, was bedeutet, dass die Top/Left-Werte bedeutungslos wurden.
Wir wechseln das Thema und beginnen, uns mit der Idee des bedingten Ladens zu beschäftigen. Das Ändern des Layouts für verschiedene Bildschirmgrößen ist Teil des responsiven Designs, aber manchmal auch das Vorhandensein von unterschiedlichen Inhalten, die für die Situation besser geeignet sind. Wir nehmen das Beispiel von Google Maps. Auf einem kleinen Bildschirm wollen wir nicht nur die Langsamkeit und den Overhead eines eingebetteten interaktiven iframes vermeiden, sondern diese Erfahrung ist auch schlechter als die native Erfahrung, die die meisten Mobiltelefone haben (z.B. eine echte Karten-App oder maps.google.com).
Der Plan ist, "mobile first" zu gehen, indem wir ein statisches Bild einer Karte einbetten, das zu maps.google.com verlinkt, und dann auf großen Bildschirmen dies gegen den iframe austauschen. Wir verwenden die Bibliothek Enquire.js, um zu hören, wann bestimmte Media Queries übereinstimmen und Callback-Funktionen auszulösen. In diesen Callback-Funktionen laden wir den entsprechenden Inhalt mit $.load (jQuery Ajax).
Das ist ziemlich viel, wo wir aufgehört haben. Wir haben mit einigen zufälligen Dingen wie Schleifen in Sass und Dingen, die Compass über die einfachen Dinge hinaus tun kann, die wir in unserem Projekt gemacht haben, abgeschlossen.
Wenn Sie beim Workshop dabei waren, schicke ich Ihnen eine bereinigte Endversion des Projekts per E-Mail.
Das klingt nach einem tollen Vortrag! Du hast also keine Quellcodeverwaltung angesprochen?
Hallo. Das ist wahrscheinlich etwas vom Thema ab, aber in Bezug auf jQuery, das die Unterstützung für IE8/7 und 6 einstellt. Wäre es nicht schön, wenn Sie und andere führende Blogs eine spezielle Vorlage für Internet Explorer Version 9 und niedriger bewerben und befürworten würden, die schlicht und einfach aussieht.
Das könnte eine wirklich tolle Sache sein, wenn dies überall auf der Welt umgesetzt würde.
Ich mag die Idee!
Im Moment entferne ich einfach alle Stile von Benutzern, die eine frühere IE-Version als X verwenden, auf meiner Website, aber die Einbindung einer Art generischen CSS-Datei (und die Anpassung von Selektoren an mein Layout), die für IE-Benutzer weniger gut geeignet ist als die, die ich in einer Bedingung angebe, könnte cool sein. Ich bin kein Experte für Design, aber ich könnte mich in naher Zukunft an einem generischen Projekt für diese Art von Dingen (über GitHub) versuchen, zumindest für meinen persönlichen Gebrauch bei Projekten (wenn es das noch nicht gibt - ich kann nichts finden, aber ich kann mir vorstellen, dass es existiert).
Das ist einfach so fantastisch, Chris (und ich bin ein absoluter Nicht-Entwickler).
Ich würde gerne wissen, ob WP-Frameworks/Themes viele/die meisten dieser Methoden anwenden – z.B. WP Bootstrap, Roots, Foundation etc.
Tim
Wenn ich also nur IE9+ unterstütze, kann ich SVG anstelle von PNG verwenden?
Klingt nach einem großartigen Workshop – ich muss anfangen zu prüfen, ob solche Dinge in meiner Nähe stattfinden.