Share
siamo veramente fortunato a lavorare in un settore come il settore web. Al giorno d'oggi, abbiamo così tanti nuovi suggerimenti e tecniche e modi di lavorare tutto il tempo. Siamo anche molto fortunati di trovarci in un'epoca in cui, con l'introduzione di queste nuove tecnologie, i nostri browser possono (per la maggior parte) essere abbastanza veloci da raggiungere, quindi mettiamo queste nuove tecnologie nei nostri progetti ( e ansimare, persino nel lavoro dei clienti!) più che mai.
CSS3 è una di quelle (leggermente) nuove grandi tecnologie. Insieme a esso sono arrivate una miriade di cose che rendono la nostra vita più facile sia come designer che come sviluppatori. Mentre i nostri browser stanno migliorando, possiamo essere più avventurosi con le nostre idee e progetti che creiamo.
Tuttavia, siamo anche in un'epoca in cui stiamo progettando per un numero maggiore di utenti, dispositivi, browser e tecnologie rispetto a quello che abbiamo mai fatto prima. Prima dell'età dello smartphone, del tablet e del frigorifero collegato a Internet, c'era davvero solo un modo per accedere a Internet; attraverso un normale computer. E la risoluzione dello schermo più comune per un tempo era 640px x 480px o 800px x 600px!
Oggigiorno abbiamo migliaia di dispositivi, dimensioni dello schermo e contesti diversi che ci aspettiamo di soddisfare. Se guardiamo solo gli schermi e le dimensioni dello schermo che dobbiamo soddisfare, abbiamo migliaia di dispositivi mobili (telefoni cellulari, smartphone, tablet, netbook ecc.), Schermi Retina, schermi standard, schermi ad alta definizione, schermi piccoli e grandi e così, così molto di piu.
Anche se può essere davvero difficile, la quantità di cose che dobbiamo soddisfare diventerà sempre più grande, quindi è qualcosa che dobbiamo adattarci e imparare da.
E cosa significa questo per il nostro processo? È un compito impossibile testare il tuo sito Web su ogni singolo dispositivo che potrebbe essere visto sul tuo sito. Invece, dobbiamo cambiare in modo efficace il nostro processo per il meglio. Sono sicuro che, come sviluppatore, hai dovuto farlo da solo, ed è lo stesso di un designer.
Potremmo dover prendere ulteriori misure per migliorare il nostro processo di progettazione in meglio. Un esempio di questo si sta facendo più comodo nell'iterizzare le idee di progettazione per la tipografia (ad esempio) nel browser, più rapidamente. Qualunque cosa sia, posso garantire che il tuo processo debba essere leggermente aggiustato.
Anche se sembra che i CSS3 siano una cosa più recente, con l'adozione di molte delle popolari tecniche CSS3 utilizzate negli ultimi due anni, le prime bozze per CSS3 risalgono al 1999; quattordici anni fa!
A differenza delle precedenti specifiche CSS (come i CSS2), il CSS3 era diviso in diversi moduli - e alla metà del 2012 erano finiti cinquanta moduli pubblicati. Quattro di questi in particolare sono stati pubblicati come raccomandazioni, in cui il modulo ha subito una massiccia quantità di revisioni e test prima di essere raccomandato per l'uso completo. I quattro moduli CSS3 consigliati dal W3C non sono ancora stati:
Altri moduli, come "Background and Borders", "Multi-Column Layout", "Flexible Box Layout" sono attualmente al livello "Candidate Recommendation", dove il W3C è soddisfatto delle caratteristiche significative di quel modulo.
A questo livello, si ritiene che le implementazioni (ad esempio dei browser) debbano eliminare i prefissi del browser che hanno installato. Altri moduli che vengono esaminati includono "Animazioni CSS", "Trasformazioni CSS" e "Effetti filtro CSS", ma questi sono tutti nello stato "Bozza di lavoro" (come lo sono molti, molti altri moduli!) E quindi non sono così come pronti come quelli con lo stato CR.
Tuttavia, accanto ai quattro principali moduli consigliati dal W3C, ci sono molte tecniche CSS3 popolari che vediamo spesso nei nostri siti web oggi. Questi includono:
Diamo un'occhiata a ciascuno di questi in un po 'più in dettaglio.
L'introduzione dei gradienti CSS ha significato che invece di utilizzare uno sfondo di immagine per creare un aspetto particolare su un sito Web, per i browser moderni è invece possibile utilizzare CSS3.
Questo è ottimo in quanto consente di risparmiare peso della pagina e garantisce anche che si mantengano le prestazioni al minimo non richiedendo il numero di immagini.
Raggio di confine significa che ora possiamo includere gli angoli arrotondati per i browser moderni nei nostri progetti senza dover ricorrere all'utilizzo di immagini per ciascuno di essi. E immagina se avessi un'immagine di sfondo con un bordo, un angolo arrotondato, un gradiente e un'ombra - quel tipo di cose era un incubo nel passato, mentre ora sono più facili da implementare per i browser che li supportano.
Se sei fortunato, otterrai clienti che comprendono anche il miglioramento progressivo e, se non lo sono, puoi spiegarglielo e istruirli. Nel mondo di oggi in cui molte persone possiedono smartphone, tablet e computer (o una combinazione di questo e altro), le persone dovrebbero aspettarsi e comprendere che i siti Web non sono tutti realizzati per eseguire le stesse su tutti i dispositivi o schermi su cui sono visualizzati. In una certa misura, comprenderanno che certe immagini estetiche si degradino con garbo per altri browser. Gli angoli arrotondati sono uno di questi!
Con l'introduzione dell'ombra di box CSS3, ora possiamo avere ombre esterne per i nostri elementi box. C'è anche una versione di testo che possiamo usare (text-shadow, se non puoi indovinare) anche per i nostri contenuti.
Hai anche la possibilità di avere sia una sfumatura di inset o di serie standard, il che significa che possiamo - sì, hai indovinato - abbandonare ancora una volta l'uso delle immagini per questi stili.
CSS3 ci ha anche introdotto per poter fare riferimento a più immagini di sfondo nel nostro codice. Questo è grandioso, perché significa che possiamo divertirci di più sovrapponendo gli elementi di sfondo uno sopra l'altro per creare effetti di fantasia che altrimenti avremmo potuto fare fatica a ricreare in CSS o con una sola immagine di sfondo.
Infine, da IE9 in su e con tutti gli altri browser moderni, non è più necessario creare un'immagine di sfondo piccola, ripetibile e trasparente!
Questo da solo è stato sufficiente per farmi amare usando CSS3 e significa semplicemente che possiamo essere liberi di usare la trasparenza nei nostri progetti in cui riteniamo che sia appropriato.
Le animazioni e le trasformazioni sono grandi; insieme alle transizioni, ci aiutano ad aggiungere molta più interattività nei nostri siti web. Sebbene questi possano essere difficili da visualizzare nei nostri progetti, è sicuramente un modo in cui possiamo usare CSS3 a nostro vantaggio per dare vita ai siti web.
L'inclusione della regola @ font-face per CSS3 è stata geniale per i progettisti, poiché significa che possiamo essere un po 'più sperimentali nella tipografia che utilizziamo nei nostri progetti. In sostanza, l'utilizzo di caratteri Web ha consentito ai designer molta più libertà di esprimere la creatività attraverso il loro lavoro.
I caratteri Web sono fantastici, in quanto ci offrono un nuovo modo per creare siti web visivamente sbalorditivi. C'è una così ampia varietà di scelta per i caratteri che ora possiamo usare nei nostri siti web, se non a centinaia, sicuramente nelle migliaia.
Non tutti saranno fantastici, e sicuramente ci sono alcuni preferiti da molti, ma ci sono così tante gemme che puoi trovare nei tuoi progetti che sembrano semplicemente belle rispetto ad alcuni dei vecchi font web sicuri.
I caratteri Web ci offrono anche un modo più sicuro di lavorare responsabilmente con i nostri design reattivi. Ti ricordi il giorno in cui i titoli "fantasiosi" sono stati creati con caratteri alternativi (che non erano considerati sicuri per il Web) e sono stati collocati come immagini o sfondi di immagini? I caratteri Web indicano che possiamo tranquillamente abbandonare questa pratica e lasciarla indietro, sapendo che avremo bellissimi siti web con caratteri completamente accessibili e scalabili.
Con l'introduzione dei caratteri web e @ font-face, sono comparsi alcuni servizi che ci aiutano a implementare i caratteri web nei nostri siti web. Questi servizi includono:
E anche con così pochi servizi, ci sono molti modi per implementarli nel tuo processo di sviluppo. Alcuni usano JavaScript e altri usano puro CSS per caricare i caratteri. Ma per quanto riguarda il flusso di lavoro dei designer; come si può lavorare con web i caratteri funzionano in mockup statici?
È un po 'complicato, in realtà, poiché non ci sono molti modi per integrare i caratteri web che usi con il software di grafica che potresti usare. Typekit ha recentemente annunciato l'intenzione di integrare Desktop Sync con Adobe Creative Cloud e ha iniziato a implementarlo per selezionare gli utenti.
A causa del fatto che Typekit è stato acquisito da Adobe, ora hanno questo modo di essere perfettamente sincronizzati con Photoshop e Illustrator e tutti gli altri prodotti Adobe, un'ottima notizia per i progettisti.
Oltre a questo, non c'è altro modo in cui possiamo facilmente integrare i tipi di carattere web che scegliamo di usare nei nostri prototipi, a meno che non lo facciamo acquistando la versione standard, "desktop" del font separatamente per il carattere web. Se non stai cercando il marchio per un sito web, allora questo può iniziare a diventare un po 'costoso e difficile da gestire.
Un'altra opzione che hai quando lavori con la tipografia è quella di entrare nel browser abbastanza velocemente; o lavorando con un servizio come Typecast, come spiegato nelle sezioni precedenti di Typography di questa serie, o acquistando i caratteri web sul tuo servizio preferito e vedendo come reagiscono con i tuoi contenuti in una versione prototipata del tuo design.
Tuttavia, se decidi di lavorare con i caratteri web nella tua progettazione, puoi essere certo che avrai un risultato finale più creativo e di migliore qualità per i tuoi utenti e che puoi essere orgoglioso di.
Le icone sono una grande cosa al momento; una cosa buona che sta accadendo nel mondo delle "tendenze". Penso che le icone e le immagini visive che possono rientrare in questo, ad esempio un logo, siano un ottimo strumento per guidare gli utenti in un sito web. Utilizzati insieme al testo, possono essere di grande aiuto visivo.
Tuttavia, in un mondo in cui dobbiamo garantire che le immagini e i layout funzionino bene su così tanti dispositivi e dimensioni dello schermo, dobbiamo assicurarci che le nostre icone e immagini funzionino bene su tutta la linea ed è più a prova di futuro. Fortunatamente, ci sono un paio di opzioni a nostra disposizione che possono aiutarci ad assicurarci di farlo.
L'incantevole PNG (che ci ha offerto un modo di includere uno sfondo trasparente in un'immagine, che non era una GIF poco raccomandabile) è un modo infallibile per lavorare con le icone nei tuoi siti web.
Ma non dimenticare; se vuoi offrire immagini bellissime a un pubblico di Retina, avrai bisogno di una sorta di backup CSS o JavaScript per assicurarti di farlo.
Lavorare con PNG non dovrebbe spesso cambiare nulla nel tuo flusso di lavoro. Puoi semplicemente salvare le immagini che hai creato alla dimensione richiesta e salvare direttamente da Photoshop.
I PNG funzionano bene anche per il ridimensionamento, a patto di ridimensionarli. Se devi ridimensionare un'immagine (che a volte accade quando vai da una finestra più grande a una finestra più piccola) il PNG apparirà spesso pixellato e sfocato, che ovviamente vorresti evitare.
L'ultimo punto su PNG ci porta rapidamente all'opzione SVG che abbiamo per le nostre icone. Finché si dispone di un'immagine basata su vettori (creata in Adobe Illustrator, ad esempio) e non basata su raster, ad esempio, come ad esempio in Adobe Photoshop, è possibile salvare l'immagine come SVG.
Come sviluppatore, è probabile che tu comprenda SVG e i diversi modi in cui puoi implementarli nel tuo sito web. Se non lo fai, SVG è un modo per implementare un scalabile grafica nei disegni del tuo sito web. In questo modo, non devi preoccuparti del fatto che la grafica gira a pixel o sfuocata dopo il ridimensionamento o il ridimensionamento e si adatta invece perfettamente alla dimensione richiesta di cui hai bisogno.
Funziona perfettamente per loghi, icone, praticamente tutto ciò che potrebbe essere necessario ridimensionare che hai già in formato vettoriale o che puoi facilmente ricreare in quel formato, se necessario. Quando progetti e salvi le tue immagini SVG, ti consiglio sempre di lavorare con le dimensioni ottimali che ti servono la maggior parte del tempo; in questo modo, il tuo browser deve solo lavorare per ridimensionare e scalare il logo in particolari circostanze e non sempre.
Come già sappiamo, i caratteri web sono infinitamente scalabili e possono funzionare perfettamente sui nostri siti Web nei browser attuali. Alcune persone molto intelligenti sono state in grado di combinare entrambi i tipi di carattere web e icone per creare caratteri web di icone o simboli. Piuttosto come Wingdings, questi spesso hanno più significato e contesto quando usati rispetto a una semplice icona.
Ci sono argomenti a favore e contro i caratteri web come icone: alcuni dicono che caricare un intero font per usare solo alcune delle legature non è ragionevole, poiché aggiungerà molto peso alla pagina e influenzerà le prestazioni.
Mentre questo potrebbe essere difficile da evitare con i caratteri web commerciali che hai comprato, lì siamo strumenti per creare i tuoi font web personali, in cui puoi evitarlo e creare solo un font con le icone di cui hai bisogno. Alcuni dicono anche che potresti perdere parte del contesto con i caratteri web, poiché a volte usano solo una lettera per visualizzare l'icona. Tuttavia, alcune persone intelligenti come la gente di Symbolset usano le parole chiave per i caratteri, che aiutano a aggiungere almeno un po 'più di contesto all'icona che hai.
E lì hai tre opzioni su come usare le icone nei tuoi progetti; la scelta è ora tua da fare! La maggior parte delle opzioni aggiungerà leggermente al tuo flusso di lavoro di progettazione in un modo o nell'altro, ma spetta a te vedere quale processo può adattarsi meglio al tuo flusso di lavoro.
Accentsconagua