Nel 2011 non esisteva un blog o una rivista di design sul Web che non usasse HTML5? o? CSS3? in almeno alcuni titoli. Abbiamo parlato all'infinito delle nuove possibilità offerte da queste tecnologie, abbiamo discusso instancabilmente degli ostacoli che hanno presentato e divertito a creare demo con un supporto browser imbarazzante e modesto.
Anche se CSS3 e HTML5 sono ancora in cima ai nostri elenchi di discussione, ho deciso di guardarmi intorno e vedere quali altri termini e parole d'ordine sono temi importanti per il 2012. Continua a leggere per vedere cosa i web designer stanno facendo in giro e discutono in questi giorni. Lungo la strada troverai oltre cinquanta articoli eccellenti da verificare che ti spazzoleranno su ogni argomento.
RWD
Nel caso in cui non hai sentito, stiamo chiamando Responsive Web Design? RWD? adesso. È il modo breve e fresco per dirlo a fondo prima di metterti in imbarazzo scacciando l'arcaica versione lunga alla tua prossima conferenza sul web design. Potresti anche indossare una maglietta di Plone.
RWD è senza dubbio uno degli argomenti più caldi in assoluto nello sviluppo web in questo momento. Questo perché rappresenta davvero un importante cambiamento di paradigma che sta cambiando radicalmente il modo in cui ci avviciniamo ai progetti di web design.
C'è troppo clamore attorno al RWD? Ho sicuramente visto molti commentatori sul mio lavoro cantare questa melodia. Tuttavia, poiché una delle soluzioni leader per l'apertura del Web è stata ottimizzata per il maggior numero possibile di dispositivi senza creare siti personalizzati per ciascuno, personalmente ritengo che meriti l'attenzione.
Il guaio che sta dietro a diventare una parola d'ordine è che i web designer l'hanno già trasformato in un importante slogan di marketing, sia che sappiano davvero come implementarlo con successo in un contesto reale o meno. Diffidare di eccessiva sicurezza in questo settore, è una nuova tecnica e stiamo ancora imparando come sarà a lungo termine.
Discussione RWD
- Responsive Web Design (Seminale)
- Guida per principianti al responsive Web Design
- Come costruire una galleria di anteprime reattiva
- 5 modelli di progettazione Web reattivi veramente utili
- Responsive Web Design: cosa è e come usarlo
Punti di interruzione (o Device-Agnostic RWD)
Ci sono molti sotto-termini all'interno del regno RWD che stanno catturando molta attenzione: le domande dei media, il tipo reattivo, ecc. Uno che ha scatenato una tonnellata di conversazione e persino il dibattito è "punti di interruzione".
L'idea alla base di RWD è semplice al suo interno: usa il CSS intelligente per ridefinire il layout di un sito a diversi breakpoint predefiniti. La grande domanda che questo porta è ovvia, "Quali punti di interruzione dovrei usare ??
La soluzione più diffusa è cercare le larghezze comuni dei dispositivi e progettare appositamente per loro. Quindi imposta una query multimediale per iPad orientato verticalmente, iPad orientato orizzontalmente, iPhone verticale, iPhone orizzontale, ecc. In alternativa, puoi trovare una buona via di mezzo generica e indirizzare tre aree principali: desktop, tablet e telefoni.
Recentemente ho pubblicato un articolo sul motivo per cui dovremmo smettere di pensare a larghezze specifiche del dispositivo e iniziare a utilizzare RWD per creare siti che lavorino letteralmente a ogni larghezza immaginabile all'interno della ragione. Sembra difficile, ma in pratica non è più un lavoro rispetto agli altri metodi. L'ho chiamato? Design responsive focalizzato sul contenuto? perché consente al contenuto stesso di determinare i punti di interruzione, non le dimensioni più comuni del dispositivo. Da allora altri siti hanno scritto sulla stessa idea con un nome forse migliore, "Device Agnostic? RWD. Oggi ho trovato un articolo di Marc Drummond pubblicato molto prima della mia discussione di tecniche simili con il termine sintetico "Natural Breakpoints".
Indipendentemente da come lo chiami, questo dibattito illustra perfettamente il punto che ho evidenziato nell'ultima sezione: il RWD non è affatto una pratica perfettamente definita a questo punto. Nuovi metodi e idee sono in costante aumento e ci si può aspettare di vedere molte più discussioni sul fronte breakpoint quest'anno.
Discussione sul punto di interruzione
- Design reattivo: perché lo stai facendo male
- Approccio dispositivo-agnostico al web design reattivo
- I punti di interruzione predefiniti di progettazione Web reattiva sono guasti
- Breakpoints di ripensamento nel design reattivo
SVG
Apple ha deciso che il futuro dell'informatica è uno con una migliore risoluzione. Piaccia o no, l'industria volontà segui questa decisione (lascia tutti gli Apple che odiano i commenti che ti piacciono, succederà ancora gente). Apple sta spingendo fuori? Retina? mostra su tutta la sua linea iOS (iPhone, iPad, iPod Touch) e altri importanti produttori di dispositivi stanno già cercando di capire come combineranno o batteranno questa tecnologia.
Per i web designer, questa è una brutta lattina di worm. È già abbastanza brutto che dobbiamo progettare per tonnellate di schermi di dimensioni diverse, ora andremo a finire con grandi cambiamenti nella densità dei pixel. Le immagini a risoluzione più elevata richiamano tutti i tipi di problemi con le dimensioni del file, come e quando offrire immagini diverse a dispositivi diversi, ecc.
Uno dei principali risparmiatori che stiamo cercando a questo punto è SVG, o Scaleable Vector Graphics, che sostanzialmente ti permette di incorporare i tipi di immagini che compili in Adobe Illustrator direttamente in una pagina web. Il vantaggio è che, poiché la grafica è costruita come vettori, sono infinitamente scalabili e appariranno assolutamente perfetti su qualsiasi dispositivo che la Silicon Valley possa immaginare.
- Pronto o no, qui arriva HD Web Design
- Risoluzione Indipendenza con SVG
- 20 Usi Svg che faranno cadere la mascella
- Giocare con SVG Design
- Utilizzo di SVG per sfondi flessibili, scalabili e divertenti
preprocessori
La rigidità del movimento degli standard web ha portato a un'industria del web design piuttosto rigida in cui si seguono le regole o si affrontano le conseguenze.Questa rigidità è stata scossa fino al midollo con un'idea radicale: cosa succede se c'è un modo migliore per codificare? Ci sono cose su CSS, JavaScript e anche la sintassi HTML che fa davvero schifo, quindi perché non trovare il modo di abbandonarli senza abbandonare gli standard che hanno reso il web quello che è oggi? Inoltre, perché dobbiamo aspettare qualche panel di esperti per aggiungere funzionalità che vogliamo alle nostre lingue preferite? Perché non possiamo farlo da soli?
Entra nel mondo dei preprocessori. Alcuni ribelli scatenati e pazzi hanno messo insieme questi sistemi per cui puoi scartare gli standard di codifica mentre scrivi, quindi eseguire il tuo codice attraverso un pulitore magico che sputa la sintassi valida. Immagina CSS e JavaScript senza la scomoda necessità di punti e parentesi o HTML senza quei fastidiosi tag di chiusura. Inoltre, immagina di scrivere meno codice e di fare di più con esso che mai prima possibile (puoi dire variabili CSS?).
Alcuni anni fa questi preprocess sono stati accolti da un'accoglienza tutt'altro che calorosa e da un assoluto disprezzo da parte di altri. L'ultima parte dello scorso anno, però, per qualsiasi ragione, hanno davvero toccato il loro passo. Improvvisamente i preprocessori sono la tendenza più calda in circolazione.
Se non lo hai già fatto, è il momento di incontrare i preprocess che stanno facendo un tale splash. Sass, LESS e Stylus estendono i CSS con grandi funzioni come variabili, mixin, operazioni matematiche e persino drastica semplificazione della sintassi. I fan di Sass dovrebbero anche dare un'occhiata ad un altro progetto degli stessi che ripropone drasticamente l'authoring HTML: HAML. Se sei un guru di JavaScript, non guardare oltre CoffeeScript come un modo per salvare te stesso centinaia di linee di lavoro del codice.
Discussione preprocessore
- Sass vs. LESS vs. Stylus: sparatoria preprocessore
- Salva un sacco di tempo scrivendo il tuo HTML con Haml
- 10 MENO Esempi di CSS che dovresti rubare per i tuoi progetti
- Super Sweet CSS 3D Text Effects con Sass e LESS
- MENO CSS ha di più con 1.2.0
- Rocking Out con CoffeeScript
- Scrivere meglio JavaScript con CoffeeScript: Nozioni di base
- Entrate MENO: la linguetta dei fogli di stile programmabili
Pinterest è il nuovo social sito più alla moda sul web. È assolutamente esploso in popolarità nell'ultimo anno e sembra essere ancora in continua ascesa. La parte interessante è che Pinterest è noto per il suo pubblico particolarmente femminile, la maggior parte dei quali sembra ossessionata dall'intreccio di foto di Ryan Gosling avvolti in luci di Natale o di cuccioli che si abbracciano. Allora perché diavolo l'ho elencato come una parola d'ordine del web design?
Ci sono due ragioni per questo. La prima è che gran parte del successo dietro Pinterest può essere attribuito al suo design, che sta cambiando il modo in cui i progettisti pensano ai siti basati su gallerie. Come ho già sottolineato prima, la combinazione di un layout in stile massoneria con scrolling infinito rende l'esperienza utente semplicemente avvincente e in grado di rubare ore della tua vita. La tua prima vera immersione in Pinterest probabilmente finirà con te che guardi dal tuo schermo e ti chiedi in che anno è e per quanto tempo sei stato sotto questo malefico incantesimo.
A prescindere dall'interessante caso di studio di design, Pinterest viene gradualmente accettato da tutti i tipi di utenti, non solo da Gosling Gazers. Una nicchia di utenti che sta davvero iniziando a trovare una casa in questo sito sono i designer. Siamo persone di mentalità visiva e Pinterest ci offre una fantastica piattaforma per salvare e condividere l'ispirazione visiva. Non devi cercare oltre il nostro account per vedere che questo è vero (fine auto senza vergogna).
Pinterest Discussione
- Addictive UX: Perché Pinterest è così stupefacente
- Usando Pinterest per l'ispirazione del design
- Come Pinterest ha cambiato il web design
- Pinterest è una bonanza web per i progettisti
- 3 Modi di impatto I web designer possono usare Pinterest
CS6
Adobe non ha rivali nella sua capacità di fare in modo che i progettisti di broke distribuiscano regolarmente quantità di denaro ingiuste. Il continuo sviluppo di Adobe Creative Suite significa che hai bisogno di tasche profonde per essere in grado di tenere il passo con la migliore tecnologia del settore. Questo è particolarmente vero nel mondo dei blog di design. Se pubblico un tutorial su Photoshop e commetto l'errore di usare qualcosa di antico come CS3, sarò castigato a non finire.
Adobe sta per rompere il mondo ancora una volta con CS6, la prossima importante iterazione di Creative Suite. So che alcuni di voi stanno roteando gli occhi e si lamentano solo di te appena ho acquistato CS5 e condivido il tuo dolore, ma la buona notizia è che Adobe apporta davvero miglioramenti su larga scala ad ogni versione.
La frenesia di CS6 è ai massimi livelli da quando Adobe ha rilasciato un'anteprima beta gratuita di Photoshop. Le nuove fantastiche funzionalità includono un'interfaccia rinnovata (ora oscura è un'opzione), digita stili simili agli stili di paragrafo in Illustrator e InDesign, una galleria sfocatura che semplifica molto la simulazione di profondità di campo e di inclinazione, uno strumento di ritaglio ripensato, la ricerca di livelli, maschere di gruppo di livelli e molto altro. Non preoccuparti nemmeno di resistere, lo sai che lo vuoi.
CS6 Discussione
- Miglioramenti di Photoshop CS6
- Le prime 7 funzioni di Photoshop CS6
- Photoshop CS6 Blur Gallery Tutorial
- Adobe Photoshop CS6 Beta colpisce 500.000 download
- La nostra prima occhiata a Photoshop CS6
Patterns
Questo è interessante che potresti erroneamente interpretare all'inizio. Di? Modelli? Non intendo plaid, scacchi, o qualsiasi tipo di progettazione di texture visive ripetitive. Invece quello a cui mi riferisco è l'analisi sistematica del web design e di come è comunemente realizzato sia dal punto di vista visivo che di programmazione.
Se hai appena risposto con un grande,? Huh ?? quindi permettimi di spiegare.L'anno scorso ho scritto un articolo intitolato 10 esempi di layout del sito Web di Rock Solid dove ho discusso modelli di layout popolari visti in innumerevoli siti sul web e perché funzionano bene. Questi non hanno nulla a che fare con il colore, la consistenza, la tipografia o qualsiasi cosa specifica, ma piuttosto danno un'occhiata allo strato di base assoluto del disegno su cui è costruito il resto.
Questo argomento si estende anche alla codifica. Il sito Web Pears mostra schemi tipici di accoppiamenti HTML e CSS per elementi di progettazione comuni come menu di navigazione, piè di pagina e griglie di miniature.
Il riconoscimento, l'analisi e la condivisione dei pattern è una tendenza che si sta riscaldando e mi aspetto che continui a crescere in popolarità, soprattutto perché il Responsive Web Design spinge nuovi paradigmi e pratiche sia nella codifica che nel layout.
Discussione modello
- Modelli di navigazione reattivi
- 5 modelli di progettazione Web reattivi veramente utili
- Modelli di layout multi-dispositivo
- Modelli di progettazione JavaScript essenziali
- Pro e contro di 6 pattern di layout CSS
Prefissi fornitore
Tutti abbiamo usato CSS3 abbastanza a lungo per abituarci o per essere stufi della follia dei prefissi dei fornitori specifici del browser. Quando si utilizza qualcosa di abbastanza nuovo in CSS, le probabilità sono che si debba ripetere ancora e ancora per tutti i possibili browser. Un perfetto esempio di come impazziscono i gradienti CSS. Ecco il codice consigliato per implementare un gradiente a due colori semplice:
Pazzesco vero? Alcuni dicono che questa è una buona cosa per il web, altri dicono che è assolutamente tossico. Anche se abbiamo usato i prefissi per un po ', il caldo in questo dibattito è improvvisamente cresciuto al massimo. Ognuno ha un'opinione diversa sul perché i prefissi aiutano o fanno male e sembra che un consenso o anche alcuni suggerimenti solidi per un sistema migliore non siano dove sono in vista.
Discussione prefisso
- Ogni volta che chiami una caratteristica proprietaria? CSS3 ,? un gattino muore
- Il prefisso del prefisso del venditore
- I prefissi dei fornitori non sono compatibili con gli sviluppatori (Paul Irish)
- TL; DR su Vendor Prefix Drama (Chris Coyier)
- Prefissi fornitori - In procinto di andare a sud
- Grande domanda: i prefissi dei fornitori sono dannosi per il Web?
- Prefissi fornitore CSS Minaccia Web aperto
Miglioramento progressivo
Il vecchio? Progressive Enhancement vs. Graceful Degradation? il dibattito non è una novità Per la maggior parte, sembra che tutti noi abbiamo iniziato con un degrado aggraziato e poi siamo passati al miglioramento progressivo come metodo decisamente superiore.
Il movimento di progressivo miglioramento ha stimolato tonnellate di discussioni e idee negli ultimi due anni. Argomenti come? Mobile prima? design abbraccia il miglioramento progressivo come il modo migliore per garantire che il numero massimo di persone possibile goda del web nella massima misura possibile.
La domanda per il 2012 è, "cosa viene dopo? È possibile che i concetti inerenti al miglioramento progressivo stiano effettivamente trattenendo il web piuttosto che spostarlo in avanti? Dovremmo evolvere le nostre idee o forse abbandonare del tutto questa pratica? Controlla gli articoli qui sotto per le ultime novità nel dibattito.
Progressive Enhancement Discussion
- Progressive Enhancement è una barriera per progredire
- Il miglioramento progressivo è più rilevante che mai
- Miglioramento progressivo Mobile Mobile | Il tuo sito è il futuro?
- Progressive Enhancement 2.0 - Nicholas Zakas
- Miglioramento progressivo: tutto ciò che devi sapere è qui
gamification
Il santo graal di qualsiasi tipo di design è l'impegno. Questo è ciò a cui miriamo tutti in ogni progetto che intraprendiamo. In definitiva, vogliamo che le persone sperimentino, godano e, si spera, tornino anche ai nostri progetti.
Diverse tendenze sono andate e venute che promettono di tenere la chiave di questa sfuggente creatura, ma il favorito attuale è la gamification. Il concetto che guida questo è piuttosto semplice: la gente ama i giochi, quindi trasformiamo tutto in un gioco. Devi solo dare un'occhiata a Foursquare per vedere un esempio efficace. Queste persone volevano creare un'app che ti permettesse di condividere il tuo arrivo in qualsiasi luogo. Era un concetto interessante, ma come avrebbero fatto in modo che le persone usassero effettivamente l'app? Qual è l'incentivo?
La risposta: rendilo un gioco! Il check-in ti fa guadagnare badge (pixel senza valore ma buoni per vantarti). Essendo l'utente che frequenta una posizione più ti rende il sindaco, che a sua volta può guadagnare sconti e premi nel mondo reale. C'è persino una classifica che ti dice quotidianamente come ti classifica rispetto ai tuoi amici. Si scopre che la competizione genera interazione.
Questa idea sta portando ad un radicale ripensamento di ogni tipo di sito Web, applicazione e social network. Nuove startup stanno spuntando tra le dozzine che promettono di giocare su una nuova area che nessun altro ha mai rivendicato.A livello micro, le aziende esistenti stanno cercando di gamify piccole parti del loro sito o app per rendere il banale eccitante. La gamification porterà a un cambiamento a lungo termine verso una rete più divertente o è solo una tendenza passeggera che sparirà più velocemente di quanto tu possa dire Gowalla?
Discussione sulla gamification
- Gamification - Nuggets of Wisdom o Fool's Gold?
- Il futuro del web design è l'impegno
- I vantaggi e le insidie della gamification
- Marketing online e gamification by design
Cosa mi sono perso?
Sono sicuro che almeno alcuni degli argomenti di cui sopra sono perfettamente in linea con quello che hai pensato, parlando e / o preoccupandoti ultimamente. Lascia un commento qui sotto e facci sapere quale di questi è stato nella tua mente il più e su che parte stai nei molti dibattiti sopra.
Questo elenco di dieci argomenti senza dubbio scalfisce appena la superficie dei concetti di hot web design in questo momento. Fateci sapere su eventuali altre parole d'ordine che avete sentito molto ultimamente e cosa ne pensate.
Fonti di immagini: Yutaka Tsutano e Phil Roeder