30 utili tutorial sul web design reattivo
Quindi abbiamo raggiunto la fine del nostro "Responsive Web Design week", il post di stasera sarà l'ultimo della serie. Stiamo andando tutti fuori per aiutarti ad affinare le tue abilità nel manipolare quei codici per rispondere a piacimento quando vengono visualizzati su dispositivi diversi. E per fare questo, ci stiamo rappresentando 30 tutorial sul Web responsive trovato online Questo elenco non intende essere esaustivo, ma ti consentirà di comprendere le basi della progettazione di un sito Web adattivo che soddisferà tutti i tipi di dimensioni dello schermo.
Inizieremo con le esercitazioni introduttive in "Breaking the Ice", qualcosa di simile a una lezione RWD: 101 che dovresti seguire per comprendere il concetto prima di passare agli esercizi "Inizia a costruire".
Infine, termineremo con una sezione "Fai di più" in cui verranno illustrati tutorial che giocano con layout orizzontali, video "elastici", menu a discesa e navigazioni con fisarmonica da slide-to-top, miniature e il problema con le tabelle.
Ma prima…
Ecco un riepilogo dei due tutorial che sono stati presentati all'inizio di questa settimana dai nostri autori:
Navigazione sito web reattivo
Di Thoriq Firdaus - [Visualizza tutorial]
Ecco un tutorial per aiutarti a rendere la navigazione del tuo sito web reattiva. Uno degli aspetti più importanti di un sito Web è la facilità con cui si naviga attraverso diverse parti del sito. Scopri come ottimizzare questo con CSS3 con questo tutorial.
Responsive Resume
Di Jake Rocheleau - [Visualizza tutorial]
Se sei un professionista del Web e un curriculum online è già parte integrante della tua carriera, allora dovresti cogliere l'opportunità per trasformare anche il tuo curriculum responsive. Rendi più facile per i datori di lavoro e i clienti trovarti su qualsiasi dispositivo. E mentre ci sei, il tuo curriculum personale funge anche da portafoglio di ciò che puoi fare come sviluppatore.
Rompere il ghiaccio
Ora, dove eravamo? Ah sì, iniziamo l'azione rompighiaccio!
Guida per principianti al responsive Web Design
Di Nick Petit - [Visualizza tutorial]
Questo tutorial è un ottimo punto di partenza per i principianti in quanto descrive cosa significa design responsive web, come è venuto alla luce, così come le spiegazioni sulle griglie fluide e le domande dei media, tra gli altri. Controlla anche le risorse elencate nella parte inferiore del tutorial.
Introduzione al responsive Web Design: video
Di Nick Petit - [Visualizza tutorial]
Questo è un tutorial di circa 9 minuti che sfiora la superficie di ciò che riguarda il responsive web design, come è diventato, l'impatto che ha sul design di un sito web e quali elementi sono coinvolti nella produzione di un web design reattivo . Se stai cercando di capire in che cosa consiste il responsive web design senza entrare nella codifica, dovresti iniziare con questo video.
Come trasformare qualsiasi sito Web in un sito reattivo
Di Rochester Oliveira - [Visualizza tutorial]
Questo è un altro tutorial che parte dalle basi, ma suddivide tutto a poco a poco, incluso il sistema operativo e i browser che si stanno rendendo reattivi per il sito Web e gli elementi che sono interessati quando il sito viene visualizzato da dispositivi diversi. L'autore ha anche alcuni utili plugin per WordPress e jQuery per aiutarti a semplificare il tuo lavoro.
Design reattivo in 3 passaggi
Di Nick La - [Visualizza tutorial]
Questo tutorial spiegherà come è possibile produrre un web design reattivo con meta tag, struttura HTML e tutte le più importanti query multimediali. Hai bisogno di una certa conoscenza del CSS per capirlo ...
Progettare per un web reattivo
Di Max Luzuriaga - [Visualizza tutorial]
Ecco un articolo che non è tanto un tutorial quanto una guida alla creazione di un web design reattivo. Detto questo, l'autore ti dice letteralmente cosa fare e cosa non fare del responsive web design. Ci sono spiegazioni sul perché alcune funzionalità non sono sufficientemente reattive, su come lavorare con proporzioni e moduli, e soprattutto, è relativamente breve e facile da assorbire.
Responsive Web Design: una guida visiva
Di Andrew Gormley - [Visualizza tutorial]
Se le esercitazioni a testo non sono valide, prova invece questo tutorial video. È ancora piuttosto tecnico, ma se ti fa sentire meglio, non devi fare molta lettura. È lungo circa 25 minuti e il video-maker in realtà avanza velocemente attraverso le parti in cui codifica, quindi torna a spiegare cosa fanno i codici.
Inizia a costruire
Bene, iniziamo a creare alcuni modelli reattivi, a partire da ...
Griglie fluide
Di Ethan Marcotte - [Visualizza tutorial]
Di 'la griglia, e tu penseresti' strutture rigide ', diciamo fluida e penseresti che potrebbe fluire da un lato dello schermo verso il basso o verso l'alto o verso il lato quando applichi pressione al browser, ma metti quei due insieme e probabilmente penseresti di aver bisogno di guardare questo tutorial per apprezzare appieno come le griglie fluide possano aiutarti a rendere il tuo design più reattivo.
Immagini fluide
Di Ethan Marcotte - [Visualizza tutorial]
Alla fine di questo articolo, dovresti sapere chi è Ethan Marcotte. Ecco un suggerimento: è lui che ha ideato il concetto e il termine per i design responsive web. Il suo nome comparirà praticamente in tutti gli altri tutorial di questo elenco, quindi perché non prendere consigli sulle immagini fluide direttamente dal Maestro stesso?.
Modelli di navigazione scalabili in Responsive Web Design
Di Michael Mesker - [Visualizza tutorial]
Questo tutorial illustra le lezioni apprese dall'autore da un lavoro su un progetto di web design reattivo su larga scala. Leggi il suo 'walkthrough' su come creare modelli che sono più facili da configurare per risultati user-friendly e reattivi. È un ottimo aspetto dietro le quinte per capire come progettare le interfacce nel modo migliore per le visualizzazioni desktop, tablet e mobile.
Progettazione web reattiva con query media CSS3
Di Nick La - [Visualizza tutorial]
E un altro eccellente tutorial per farti imparare come progettare un modello di sito web reattivo cross-browser con HTML5 e CSS3. È un approccio passo-passo e ci sono demo di un web design prima e dopo l'implementazione delle media query per apprezzare meglio l'impatto delle query sui media.
Effetti CSS: spazio immagini fuori per abbinare altezza del testo
Di Zoe Mickley Gillenwater - [Visualizza tutorial]
Questo tutorial ti aiuta a fare in modo che le immagini a larghezza fissa cambino dimensione e spaziatura per allinearsi al testo che lo accompagna, indipendentemente da come viene ridimensionata la finestra del browser.
Layout adattivi con query multimediali
Di Aaron Gustafson - [Visualizza tutorial]
Scopri come utilizzare layout adattivi o flessibili con le query multimediali CSS. Segui semplicemente l'esercizio per imparare ad adattare il tuo design alla vista a doppia colonna o alla vista a colonna singola e per preparare il design per iPhone e iPad.
Immagini reattive: sperimentando il dimensionamento delle immagini sensibile al contesto
Di Scott Jehl - [Visualizza tutorial]
Ecco un tutorial che ha utilizzato l'approccio build-from-mobile-first. Questa tecnica specifica una dimensione maggiore per le immagini da utilizzare su risoluzioni dello schermo più grandi, meno richieste di immagini e sniffing UA.
Fare di più
Video elastici
Di Nick La - [Visualizza tutorial]
Questo tutorial si occupa del ridimensionamento dei video man mano che la finestra del browser viene ridimensionata. È essenzialmente un trucco CSS e c'è una demo per vedere il trucco al lavoro nel tutorial stesso.
Nascondere e rivelare porzioni di immagini
Di Zoe Mickley Gillenwater - [Visualizza tutorial]
Il tutorial è in realtà tratto dal libro dell'autore, che descrive come rivelare o nascondere parti di immagini a seconda delle risoluzioni dello schermo. Ti insegna come ritagliare dinamicamente le immagini quando le dimensioni dello schermo cambiano, mostrando solo parte dell'immagine piena quando c'è spazio limitato.
Responsive Content Navigator con CSS3
Di Mary Lou - [Visualizza tutorial]
Preferisci un modo più elaborato per gli utenti di navigare intorno a te? Quindi, dovresti leggere questo tutorial per imparare come codificare in alcune fantastiche transizioni: dissolvenze, diapositive, rotazioni e scalabilità. Le transizioni sono essenzialmente livelli di contenuto che sono stati mostrati o nascosti con una codifica specifica.
Creare un modello di progettazione Web reattivo
Di Harry Atkins - [Visualizza tutorial]
Questo è un breve tutorial per produrre un responsive modello web funziona sia sul desktop che sull'iPhone.
Layout orizzontale reattivo
Di Mary Lou - [Visualizza tutorial]
Questo tutorial ti insegna come creare un layout orizzontale con diversi pannelli di contenuto scorrevole. utilizzando L'origine della specie come testo di esempio, ogni capitolo del libro è separato in colonne poste l'una accanto all'altra in modalità browser completo, ma quando ridotte a dimensioni sufficientemente ridotte, il layout si trasforma in un "libro" a scorrimento completamente verticale.
Convertire un menu in un menu a discesa per schermi di piccole dimensioni
Di Chris Coyier - [Visualizza tutorial]
Questo tutorial ti mostrerà come convertire un menu in un elenco a discesa quando la finestra del browser è stretta o quando sei su un dispositivo mobile. La riga di link nell'angolo in alto a destra della pagina viene convertita in un menu a discesa per risparmiare spazio senza sacrificare le opzioni di navigazione.
Fisarmonica flessibile da diapositiva verso l'alto
Di Mary Lou - [Visualizza tutorial]
Scopri come creare un layout di fisarmonica semplice e flessibile, con transizioni di dissolvenza e larghezze regolabili in base alle dimensioni e alle risoluzioni dello schermo.
Come utilizzare le query dei supporti di orientamento CSS3
Di Ryan Seddon - [Visualizza tutorial]
In base alla semplice regola che definisce le modalità verticale (altezza maggiore della larghezza) e orizzontale (larghezza maggiore di altezza), puoi scrivere una query multimediale per scegliere come target stili specifici in base alla modalità in cui la visualizzi. Questo tutorial ci mostrerà come fare proprio questo ed è completo con un link a un camaleonte che cambia colore che usa il colore per dimostrare questo cambiamento mentre si riduce la finestra del browser.
Tabelle dati reattivi
Di Chris Coyier - [Visualizza tutorial]
Le tabelle sono una fonte di mal di testa quando si tratta di schermi di piccole dimensioni, ma ciò non significa che dobbiamo assolutamente evitare tabelle. Scopri come utilizzare le query multimediali per far sì che la tabella cambi formato completamente quando passi alle dimensioni dello schermo mobile. Guarda la demo per avere un'idea della magia che puoi fare basandoti su questo tutorial.
Presentazione fluidica CSS3 con effetto parallasse
Di Ring Wing - [Visualizza tutorial]
Crea una presentazione CSS3 in cui vengono utilizzate due immagini di sfondo e quando vengono modificate le posizioni degli sfondi, viene visualizzato un effetto di parallasse. A parte questo, la presentazione è flessibile e si ridimensiona man mano che la finestra del browser si chiude su di essa.
Come costruire una galleria di miniature reattive
Di Joshua Johnson - [Visualizza tutorial]
Questo è ottimo per i siti Web che dispongono di miniature in una galleria. Quando la finestra del browser viene ridimensionata, il layout viene modificato in modo da occupare tra due colonne (dimensioni dello schermo più piccole) e cinque (massime) colonne. Per presentazioni e slider più simili, consulta il nostro articolo sulle 10 migliori foto / immagini fotografiche reattive gratuite.
Ottimizzazione della tua email per dispositivi mobili
Di Ros Hodgekiss - [Visualizza tutorial]
Anche le e-mail possono essere ottimizzate per la visualizzazione su schermo ridotto come i siti Web. Il più delle volte il testo in una email HTML viene ridimensionato a un punto che non è fatto per una lettura confortevole; impara come gestire questo e altro da questo tutorial.
usando quadri
Crea un sito web responsivo per dispositivi mobili con Skeleton
Di Joshua Johnson - [Visualizza tutorial]
Skeleton è un fantastico framework per costruire siti Web reattivi con esso. Questo tutorial ti guida in una guida passo-passo su come utilizzare il framework Skeleton per creare fantastici modelli reattivi. Sarai sbalordito nel vedere quanto sia facile da implementare.
Responsive Web Design con HTML5 e meno Framework 3
Di Louis Simoneau - [Visualizza tutorial]
Se non sei stato presentato correttamente a Meno, controlla prima il nostro tutorial Less Less CSS per avere un assaggio di Less. In questo tutorial, è stato utilizzato il framework Less per consentire di vedere chiaramente gli effetti delle query multimediali.
Conclusione
E questo conclude il nostro Web design reattivo serie. Speriamo che i temi, gli strumenti e le altre risorse presenti in questa serie abbiano contribuito a far conoscere ai nostri lettori il concetto di responsive web design. Ma come potremmo sapere se non ce lo dici?
Fateci sapere il vostro feedback sulla serie e se hai suggerimenti per altre idee che vuoi vedere su hongkiat.com. Mandaci una riga o un commento qui sotto.
