Share
Ich hatte kürzlich das Vergnügen, zwei Wochen in Malaysia beim Envato Meetup zu verbringen. Was für ein Platz! Während unseres Aufenthalts dort habe ich die Gelegenheit genutzt, meinen Kollegen über die Schulter zu schauen und dabei Tipps und Tricks zu sammeln. Hier sind fünf brillante Webdesign-Tipps vom Envato-Team, von denen ich denke, dass Sie sie lieben werden…
Stu ist ein großer Befürworter der Verwendung von CSS-Präprozessoren, insbesondere Sass with Compass. Während der Envato-Konferenz führte er uns durch, wie er sie beim Erstellen der Marktplatzthemen verwendete, und demonstrierte auf perfekte Weise, wie effizient Sass bei der Arbeit an großen Projekten mit mehreren Standorten sein kann.
Unsere Marktplätze sind alle Varianten des gleichen Themas:
Bei einem Standard-CSS-Ansatz müssten Sie (z. B.) Basis-Stylesheets erstellen, die den Großteil des strukturellen Stylings enthalten, mit zusätzlichen Stylesheets zum Ändern der Farben und Grafiken für jede Site. Im besten Fall erhalten Sie mehrere Kopien von sehr ähnlichen (wenn nicht identischen) CSS-Dateien.
Nicht so bei Sass. Durch das Schreiben eines einzelnen Satzes von Basis-SCSS-Stylesheets (Partials) sowie einer Sass-Variablendatei für jede Site-Variante würde Ihre Projektstruktur folgendermaßen aussehen:
Partials sind Teile von Stilregeln, die in Ihrer Hauptdatei enthalten sein können - sie können auch in anderen Dateien wiederverwendet werden. Wenn dem Dateinamen ein "_" vorangestellt wird, werden die SCSS-Teildateien nicht selbst in das implementierbare CSS kompiliert. Sie tragen lediglich zu den Anwendungsdateien bei, die Sie erstellen möchten.
Beispielsweise haben Sie möglicherweise eine Sass-Datei, die alle Formularstile in Ihrem Projekt vorgibt. Sie nennen die Datei "_forms.scss" und fügen sie ohne Unterstrich oder Dateierweiterung in Ihre Anwendungsdatei ein:
@import "forms";
Es wird kein "_forms.css" generiert, aber die Regeln in "_forms.scss" tragen zu der Datei bei, in die Sie es gezogen haben.
In Ihren variablen Dateien werden alle Aspekte des Designs festgelegt, die geändert werden können, z. B. Verbindungsfarben, Logos usw. Sie können beispielsweise folgendermaßen aussehen:
/ * themeforest variables * / $ link_color: # FFE59E;
Dieser Wert kann dann in der Hauptanwendungs-Sass-Datei oder in beliebigen importierten Teilen verwendet werden:
eine color: $ link_color;
Um ein ganz neues Thema zu erstellen, müssen Sie lediglich die Variablen in einer Datei ändern (oder in eine andere _variables.scss ziehen). Um ein Feature für alle Themen zu ändern, müssen Sie nur die Funktion beibehalten ein Datei; das partielle, wo dieser bestimmte Stil auftritt.
Wir haben Sass und Compass bereits in Webdesigntuts + eingeführt, schauen Sie also, ob Sie den Sprung noch nicht gemacht haben.
Cameron hat es zu seinem persönlichen Kreuzzug gemacht alles wir reagieren schnell. Er hat bereits sein RWD-Zeichen auf den neuen Rockable Press- und Creattica-Websites hinterlassen und wird in Kürze an Tuts + arbeiten.
Hier finden Sie einen guten Tipp, mit dem Sie Ihre Weblayouts in verschiedenen Auflösungen in Sekundenschnelle visualisieren können.
Besuchen Sie die Website von Benjamin Keen, auf der er ein gutes "Responsive Design Test Bookmarklet" von JavaScript hat. Ändern Sie die Größe der zu testenden Ansichtsfenster und generieren Sie dann das Bookmarklet.
Jetzt müssen Sie nur noch den Link in Ihre Lesezeichen ziehen. Wenn Sie eine Site im Browser anzeigen, klicken Sie auf das Bookmarklet. Das Layout wird in allen Auflösungen angezeigt!
Aber warte! Es gibt mehr! Cameron ist noch einen Schritt weiter gegangen und hat diesem Bookmarklet einen Hotkey zugewiesen. Jetzt muss er nur noch die entsprechende Phrase (zum Beispiel "rwd") in die URL-Leiste eingeben und das Bookmarklet wird wirksam. Perfekt, wenn Sie (wie ich) es vorziehen, nicht immer eine sperrige Lesezeichen-Symbolleiste anzuzeigen.
Cameron hat Firefox verwendet, mit dem Sie Hotkeys für Lesezeichen mit der praktischen Smart-Keyword-Funktion zuweisen können. Normalerweise arbeite ich in Chrome, dem diese Funktion leider fehlt. Es gibt jedoch eine Möglichkeit, dies zu umgehen, weil es ist möglich, Hotkeys zuzuweisen, um Suchmaschinen auszulösen. Fügen wir nun unser Bookmarklet auf diese Weise zu Chrome hinzu:
Klicken Sie zuerst mit der rechten Maustaste auf die URL-Leiste und gehen Sie zu "Suchmaschinen bearbeiten…".
Dann haben Sie die Möglichkeit, eine Suchmaschine oder Abfrage hinzuzufügen. Dies wird als Hotkey fungieren. Geben Sie ihm einen Namen (wie auch immer Sie möchten), weisen Sie eine Phrase zu (z. B. Camerons "rwd") und fügen Sie das Bookmarklet-JavaScript in die endgültige Eingabe ein.
Hinweis: Ihr Bookmarklet muss URL-kodiert sein. Stellen Sie daher sicher, dass es so aussieht:
Accentsconagua
javascript: document.write ('% 3C! DOCTYPE% 20html% 3E% 3Chtml% 3E% 3Chead% 3E% 3Cmeta% 20charset =% 22utf-8% 22% 3E… nicht das:
Javascript: document.write ('… Erik Meyer hat ein praktisches Tool zum Codieren von URLs, wenn Sie es benötigen.
So, das war es! Besuchen Sie die Seite, an der Sie gerade arbeiten, geben Sie das Stichwort in die URL-Leiste ein und schlagen Sie! Sofortiger RWD-Test!
Pinterest nicht macho genug für dich? Köstlich auch… (Warten Sie, verwenden die Leute immer noch lecker?) Sie benötigen einen Weg, um tatsächliche Inhalte mit einem Lesezeichen zu versehen, in Ihrer Dropbox zu sichern und sich visuell von dem, was andere Lesezeichen machen, inspirieren zu lassen? Rodney meint, es gibt nichts Besseres als Gimme Bar:
Die modulare Benutzeroberfläche ist für alle, die andere Dienste verwenden, ein vertrauter Anblick. Folgen Sie Ihren Favoriten, sichern Sie sie und teilen Sie sie über alle sozialen Kanäle, die Sie angeschlossen haben.
Lesen Sie, was Rodney sonst noch bei Twitter und Dribbble macht!
Hier ist das Ding; Als ich Jacob um ein kurzes Trinkgeld bat, schlug er lahm eine Lorem ipsum-Erweiterung vor, die Ihnen helfen wird, Fülltext in Ihre Entwürfe zu pumpen.
Aber Jacob hat mir während der Envato-Konferenz unabsichtlich eine alternative, unschätzbare Lektion beigebracht: "Vertrauen Sie Ihr iPad nicht Jess Hooper an". Jess arbeitet im Büro in Melbourne und ist Mitglied des Überprüfungsteams. Sie bot mir freundlicherweise an, sich um mein iPad zu kümmern, als sie die Gruppe verließ und eines Abends ins Hotel zurückkehrte.
Am nächsten Tag, als ich mich durch den malaysischen Dschungel kämpfte, kam dies auf dem Handy eines anderen durch:
Ein Tumblog, das meinem iPad und seinen Shenanigans an diesem schicksalhaften Tag gewidmet ist.
Spass beiseite, Jacob ist ein sehr talentierter Designer. Sie haben seine Arbeit an Orten wie Million.envato.com und 1.000 WordPress Themes-Sites sowie in vielen der Marketplace-Bundle- und Rockable-Sites gesehen. Der Tipp zum Mitnehmen ist:
Baue ein Tumblog, wann immer du die Chance hast.
Es ist geradlinig, es ist schnell, es macht Spaß und Sie können Ihre Theming-Fähigkeiten üben. Jess, ich werde dich zurückholen.
Sehen Sie sich Jeffs Arbeit an, und auch wenn er Sie nicht lehrt, lernen Sie von ihm. Was ich diesmal von ihm abgeholt habe, klingt vielleicht nicht nach dem größten Zeitsparer der Welt, aber hier ist es:
Sie müssen die Tags der Listenelemente nicht schließen, lassen Sie den Browser dies für Sie tun! *
* keinesfalls zwingend
Das fühlt sich irgendwie unnatürlich an, ein bisschen wie das Auslassen der Anführungszeichen in Ihren HTML-Attributen:
aber entspannen Sie sich, es ist in Ordnung. Wenn Sie beim nächsten Mal Listenelemente auflisten, versuchen Sie, diese wie folgt auszuführen:
Viele Aspekte des HTML-Markups, von denen wir gelernt haben, dass sie obligatorisch sind, sind in der Tat völlig optional. Wir neigen dazu, dies als ungültig zu betrachten, da XHTML-Validierung uns bisher dazu verprügelte. Wenn Sie lieber gehen möchten Markiert aus, wenn Sie Zeit sparen, legen Sie sie weg. Browser wissen immer noch genau, was Sie meinen.
Das gleiche gilt für , und
Ich hoffe, Sie fanden diese zufälligen Tipps in gewisser Hinsicht hilfreich (ich weiß, dass ich es getan habe)…
