Share
Recentemente ho avuto il piacere di trascorrere due settimane in Malesia al Meetup Envato 2012. Che posto! Durante il nostro soggiorno ho colto l'occasione per dare un'occhiata alle spalle dei miei colleghi, raccogliendo consigli e trucchi mentre lavoravano. Ecco cinque brillanti suggerimenti sul web design del team Envato, che credo che ti piaceranno ...
Stu è un grande sostenitore dell'uso dei CSS Preprocessor, in particolare Sass con Compass. Durante la conferenza Envato ci ha insegnato come li ha usati nella costruzione dei temi del mercato, dimostrando perfettamente l'efficienza di Sass quando si lavora a progetti di grandi dimensioni e multi-sito.
I nostri mercati sono tutte varianti dello stesso tema:
Un approccio CSS standard ti consentirebbe (ad esempio) di creare fogli di stile di base per conservare la maggior parte dello stile strutturale, con fogli di stile aggiuntivi per modificare i colori e la grafica di ciascun sito. Nella migliore delle ipotesi, manterresti più copie di file CSS molto simili (se non identici).
Non così con Sass. Scrivendo un singolo set di fogli di stile SCSS di base (parziali), oltre a un file di variabili Sass per ogni variante di sito, la struttura del tuo progetto sarà più simile a questa:
I partial sono blocchi di regole di stile che possono essere incluse nel tuo file principale - possono essere riutilizzate anche in altri file. Anticipando il nome del file con un "_" i file SCSS parziali non verranno compilati in CSS da installare, contribuiranno solo ai file dell'applicazione che sceglierai di costruire.
Ad esempio, potresti avere un file Sass che detta tutti gli stili del modulo all'interno del tuo progetto. Denominare il file "_forms.scss" e inserirlo nel file dell'applicazione senza il carattere di sottolineatura o l'estensione del file:
@import "forms";
Non verrà generato "_forms.css", ma le regole all'interno di "_forms.scss" contribuiranno al file in cui lo hai inserito.
I tuoi file variabili imposteranno tutti gli aspetti del tema che possono essere modificati, come i colori dei collegamenti, i loghi, ecc. Potrebbero assomigliare a questo, ad esempio:
/ * Variabili di themeforest * / $ link_color: # FFE59E;
Questo valore può quindi essere utilizzato nel file Sass dell'applicazione principale o in qualsiasi partial importato:
a color: $ link_color;
Per generare un tema completamente nuovo, tutto ciò che devi fare è modificare le variabili in un file (o trascinare in un diverso _variables.scss). Per modificare una funzione in tutti i temi, è necessario solo mantenere uno file; il parziale in cui si verifica quello stile particolare.
Abbiamo introdotto Sass e Compass su Webdesigntuts + prima d'ora, quindi dai un'occhiata se non hai ancora fatto il salto.
Cameron ha reso la sua personale crociata da fare qualunque cosa noi rispondiamo. Ha già lasciato il suo marchio RWD sui nuovi siti Rockable Press e Creattica, e presto lavorerà la sua magia su Tuts + ...
Ecco un ottimo consiglio per aiutarti a visualizzare i tuoi layout web, a più risoluzioni, in pochi secondi.
Vai al sito di Benjamin Keen dove ha un grande JavaScript "Responsive Design Test Bookmarklet". Modifica le dimensioni delle finestre che desideri testare, quindi genera il bookmarklet.
Tutto quello che devi fare ora è trascinare il link fornito nei tuoi segnalibri. Ogni volta che visualizzi un sito nel browser, premi il bookmarklet e il layout apparirà in tutte le varie risoluzioni!
Ma aspetta! C'è più! Cameron ha compiuto un ulteriore passo avanti e assegnato un hotkey a questo bookmarklet; tutto quello che ora deve fare è digitare la frase appropriata (ad esempio "rwd") nella barra degli indirizzi e il bookmarklet ha effetto. Perfetto se (come me) si preferisce non avere una barra degli strumenti segnalibro ingombrante sul display in ogni momento.
Cameron utilizzava Firefox, che ti consente di assegnare i tasti di scelta rapida dei segnalibri con la sua comoda funzione Smart Keywords. Di solito lavoro in Chrome, che purtroppo non ha questa funzionalità. Tuttavia, c'è un modo per aggirare questo, perché è possibile assegnare tasti di scelta rapida per attivare i motori di ricerca. Ora aggiungiamo il nostro bookmarklet a Chrome in questo modo:
Innanzitutto, fai clic con il pulsante destro del mouse sulla barra degli indirizzi e vai a "Modifica motori di ricerca ..."
Quindi ti verrà data la possibilità di aggiungere un motore di ricerca o una query. Questo fungerà da tuo tasto di scelta rapida, quindi assegnagli un nome (qualunque sia la tua fantasia), assegna una frase (come "rwd" di Cameron), quindi incolla il bookmarklet JavaScript nell'input finale.
Nota: Il tuo bookmarklet dovrà essere codificato come URL, quindi assicurati che assomigli a questo:
javascript: document.write ( '% 3C% DOCTYPE 20html% 3E% 3Chtml% 3E% 3Chead% 3E% 3Cmeta% 20charset =% 22utf-8% 22% 3E ...!
non questo:
Accentsconagua
javascript: document.write ('... Erik Meyer ha uno strumento utile per codificare gli URL se ne hai bisogno.
Quindi è così! Visita la pagina su cui stai lavorando, digita la parola chiave nella barra degli indirizzi e batti! Test RWD istantaneo!
Pinterest non è abbastanza macho per te? Delizioso anche ... (aspetta, le persone usano ancora deliziose?) Hai bisogno di un modo per aggiungere un segnalibro ai contenuti reali, eseguire il backup su Dropbox e ottenere visivamente l'ispirazione da ciò che gli altri stanno aggiungendo ai segnalibri? Rodney dice che non c'è niente di meglio di Gimme Bar:
L'interfaccia modulare sarà una vista familiare per quelli di voi che pin e segnalibro con altri servizi. Segui, preferiti, fai il backup, quindi condividi tutti i canali social che hai collegato ...
Scopri cos'altro suona Rodney su Twitter e Dribbble!
Ecco la cosa; quando ho chiesto a Jacob un suggerimento, ha suggerito debolmente un'estensione di lorem ipsum, che ti aiuterà a pompare il testo di riempimento nei tuoi progetti.
Ma Jacob inconsapevolmente mi ha insegnato una lezione alternativa e inestimabile durante la conferenza Envato: "Non affidare il tuo iPad a Jess Hooper". Jess lavora nell'ufficio di Melbourne ed è membro del team di revisione. Si è gentilmente offerta di badare al mio iPad quando ha lasciato il gruppo e una notte è tornata in albergo.
Il giorno dopo, mentre mi stavo combattendo nella giungla malese, questo accadeva sul cellulare di qualcuno:
Un Tumblog dedicato al mio iPad e ai suoi shenanigans quel fatidico giorno.
A parte gli scherzi, Jacob è un designer di grande talento. Avrai visto il suo lavoro in luoghi come milioni.envato.com e 1.000 siti WordPress, oltre a molti bundle di Marketplace e siti Rockable. La mancia da prendere da questo è:
Costruisci un Tumblog ogni volta che ne hai la possibilità.
È semplice, veloce, divertente e puoi mettere in pratica le tue abilità tematiche. Jess, ti ricambierò.
Guarda Jeff che lavora e, anche se non ti sta insegnando, imparerai da lui. Ciò che ho raccolto da lui questa volta potrebbe non sembrare il più grande risparmio di tempo nel mondo, ma eccolo qui:
Non devi chiudere i tag delle voci dell'elenco, lascia che sia il browser a farlo per te! *
* assolutamente non obbligatorio ...
Questo sembra un po 'innaturale, un po' come omettere le virgolette dai tuoi attributi html:
ma rilassati, va bene. La prossima volta che ti ritrovi a sfornare gli elementi della lista, prova a farlo in questo modo:
Molti aspetti del markup HTML, che siamo stati addestrati a considerare come obbligatori, sono in realtà completamente opzionali. Tendiamo a considerarlo non valido a causa del modo in cui la convalida XHTML ha usato per sconfiggerlo. Se preferisci andartene Tag fuori, se ti fa risparmiare tempo, lasciali. I browser sapranno ancora esattamente cosa intendi.
Lo stesso vale per , e
Bene, spero che tu abbia trovato utili questi suggerimenti casuali per certi aspetti (lo so che l'ho fatto) ...
