Il web design reattivo è di gran moda in questo momento, ma come designer a tempo pieno è difficile trovare il tempo per raccogliere le nuove tendenze, non importa quanto siano utili e forse anche necessarie.
Temi e modelli predefiniti offrono un modo semplice e veloce per iniziare con il responsive web design. Molti di loro fanno tutto il lavoro per te e forniscono un semplice flusso di lavoro plug and play, altri si occupano solo del sollevamento pesante occupandosi delle richieste dei media e dandoti il controllo completo sul design. Questo post contiene 20 modelli gratuiti e premium, tutti pienamente reattivi fin dal primo momento.
Layout reattivo: Fad o Necessità?
Ultimamente c'è stato un sacco di discussioni sul web design reattivo. Molti lo considerano il futuro del web design e arrivano addirittura a dire che semplicemente non stai facendo il web design nel modo giusto se i tuoi siti non sono conformi alla loro formula specifica per la massima compatibilità. Altri sostengono che questo è solo un altro giocattolo in una lunga serie di mode che vanno e vengono.
La risposta è probabilmente da qualche parte tra i due. La verità è che il web design ha effettivamente incontrato un grosso ostacolo con la ricchezza di diverse dimensioni dello schermo che ora accedono regolarmente al web. Molti siti non possono permettersi di lasciare fuori grandi porzioni di utenti mobili né possono creare siti personalizzati perfettamente su misura per ogni smartphone, tablet, laptop e desktop sul mercato.
Il design reattivo, che si tratti di tendenza o no, è attualmente la migliore risposta a questo problema. Se le domande dei media cadono in disgrazia, sarà semplicemente perché è arrivata una soluzione migliore, non perché il problema cessi di essere importante.
Non posso dire come potremo sviluppare i siti tra dieci anni, ma puoi scommettere che le dimensioni dello schermo continueranno a essere sempre più frammentate dato che tutto con una batteria o una presa sta rapidamente diventando in grado di accedere al web. Se definiamo? Reattivo? il web design come una serie di tecniche utilizzate per garantire la massima compatibilità su quanti più dispositivi possibile, quindi non stiamo sicuramente guardando una moda passeggera ma lo standard attuale e futuro per i professionisti nel nostro settore.
Alcuni si lamentano dello sforzo aggiuntivo e dei tempi di sviluppo, ma in realtà non è così brutto come si potrebbe pensare e una volta che l'hai tolto un paio di volte l'impatto sul tuo flusso di lavoro può essere piuttosto limitato. Gli strumenti in questo post lo rendono ancora più veloce, eliminando la maggior parte della pressione quando si tratta di elementi reattivi.
20 modelli e temi reattivi
Yoko - Tema gratuito per HTML5 / CSS3 WordPress 3.1+
? Yoko è un tema WordPress moderno e flessibile. Con il layout reattivo basato su query multimediali CSS3, il tema si adatta alle diverse dimensioni dello schermo. Il design è ottimizzato per grandi schermi desktop, tablet e piccoli schermi per smartphone. Per rendere il tuo blog più individuale, puoi utilizzare i nuovi formati di post (come galleria, a parte o quotazioni), scegliere il tuo logo e l'immagine di intestazione, personalizzare lo sfondo e il colore del link.
Prezzo: Gratuito
Scheletro
Skeleton è uno standard che rende con successo lo sviluppo di siti Web reattivi. Ne abbiamo scritto alcune volte su Design Shack e amiamo davvero la sua semplicità. Insieme al download, otterrai un file demo, che può essere facilmente utilizzato come modello di partenza per creare il tuo lavoro.
Prezzo: Gratuito
Super Skeleton: reattivo, minimale, bello
? SuperSkeleton è più di un modello, è un framework HTML5 completo; Una raccolta di diversi script incredibilmente potenti e strutture CSS che sono stati uniti insieme in un kit perfetto come punto di partenza del tuo prossimo progetto.
Si tratta di un pacchetto super premium con 20 modelli HTML, un kit UI PSD, skin multiple, tipi di carattere e altro ancora. È un furto per meno di $ 20 ed è il modo perfetto per lanciare le tue iniziative in un layout reattivo.
Prezzo: $17.00
Responsive Twenty Ten (WP Theme)
Responsive Twenty Ten è un tema secondario del tema WordPress predefinito con molte funzioni straordinarie come le immagini flessibili. Gli autori ti danno il permesso di scaricare, prendere, utilizzare, modificare e fare tutto ciò che vuoi con esso.
Prezzo: Gratuito
Modello di progettazione Web reattivo Onextrapixel
Un modello / tutorial molto semplice ma solido per il responsive web design. Questo è perfetto se vuoi solo scavare intorno e vedere come funziona un semplice modello reattivo senza tutti i lanugine.
Prezzo: Gratuito
The Novelist: Responsive WP Theme for Writers
Un tema dall'aspetto davvero unico con un'interfaccia a libro aperto simulata che si adatta bene quando ridimensiona il browser. Perfetto per i portafogli degli scrittori personali.
Prezzo: $35
Ari WordPress Theme
Ari è un tema blog minimale che è estremamente attraente nella sua semplicità. È costruito per WordPress 3 e versioni successive e presenta sia un tema chiaro che uno scuro. Sicuramente vorresti dare a questo uno sguardo.
Prezzo: Gratuito
Griglia d'oro
Come Skeleton, Golden Grid è più di un modello, è un framework per costruire siti reattivi. Auto-etichettato come una griglia pieghevole per un design reattivo, le 16 colonne possono essere combinate, o piegate, in 8 colonne per schermi di dimensioni tablet e in 4 colonne per quelle di dimensioni mobili.
Prezzo: Gratuito
Eroe: un modello di pagina singola reattiva
? Un modello di singola pagina reattivo, pulito e minimale per tipo personale e di business. Ha un menu fisso nella parte superiore del documento per facilitare la navigazione. Ha anche un bordo di 10 pixel nel corpo.
Hero ha un tema sia chiaro che scuro, entrambi sembrano grandi ma il buio è particolarmente brillante.
Prezzo: $14
Buono minimo: un modello HTML5 reattivo
"Good Minimal è un modello di stile pulito e minimalista adatto a portfolio, blog e aziende. Molto simile al modello precedente per molti aspetti, ma con un design più audace e unico. Mi piace molto l'aspetto della tipografia in questo.
Prezzo: $14
iTheme2 (WordPress)
iTheme2 è uno splendido modello di blog gratuito che ha un layout reattivo e un sacco di fantastiche funzioni come un cursore di funzionalità personalizzabile, un widget di social media, due skin a tema e altro ancora.
Prezzo: Gratuito
Folio Due
Folio Two è un portfolio avanzato, un modello pratico e utilizzabile progettato con HTML5 + CSS3 e che utilizza jQuery per migliorare un'esperienza utente straordinaria.?
Questo modello presenta una grande griglia di immagini davvero bella che si trasforma senza intoppi mentre la finestra del browser viene ridimensionata. La griglia sembra grande, sia piccola che grande!
Prezzo: $12
Tema di Grido WP
Grido è una prodezza impressionante e impressionante di trucchi per il layout del web. È dotato sia di un layout in muratura che di un sistema reattivo che riadatta il layout per diverse dimensioni dello schermo. Viene fornito con più combinazioni di colori, una galleria lightbox, sette skin e altro.
Prezzo: $39
Tema WordPress flessibile
"Flessibile è un tema WordPress che aiuta a presentare i tuoi contenuti e a visualizzarli per adattarsi a schermi di dimensioni diverse, con un tuo design personale. Fornisce inoltre un'integrazione davvero semplice con l'opzione Facebook e Fan Gate, un must se si sta eseguendo un sito Web.?
Prezzo: Gratuito
Modello di profilo grigio di Deresan
Un modello dall'aspetto sofisticato con una bella combinazione di colori neutri, un cursore per le immagini e tanti piccoli tocchi di design. Il ridimensionamento reattivo non è il mio preferito ma è funzionale.
Prezzo: $14
Constellation WordPress Theme
Questo tema ha tutto. Non solo è reattivo, è costruito sulla piastra della caldaia HTML5 e contiene sia una griglia orizzontale che un ritmo verticale perfetto per i pixel che si adatta perfettamente ai dispositivi. Questo è il punto di partenza perfetto per il tuo prossimo progetto WordPress.
Prezzo: Gratuito
Griglia reattiva per foto
Un piccolo esperimento di Chris Coyier che puoi scaricare e utilizzare. In pratica è solo una grande griglia di foto che si adatta immediatamente alle diverse dimensioni della finestra del browser.
Prezzo: Gratuito
Tema WP di Tisa
Un altro tema di Themify, molto bello e reattivo, con molte immagini grandi, una bellissima combinazione di colori e sei skin a tema.
Prezzo: $39
Tema WordPress reattivo di Meerkats
? Il tema Meerkats è costruito per rispondere a diverse piattaforme e dispositivi. È un tema WordPress semplice e di base costruito da Gregor McKelvie. ?
Prezzo: Gratuito
Quadro di lavagna
Il framework Whiteboard per WordPress è stato sviluppato per accelerare il processo di sviluppo di un tema WordPress. La lavagna elimina il tempo dedicato al codice comune a tutti i temi WordPress e include codice non intrusivo che migliora il tema generale di WordPress in molti modi, tra cui SEO, velocità, usabilità e supporto mobile.
Costruito su Popular Less Framework, la lavagna utilizza sia HTML5 che CSS3 e offre un punto di partenza quasi imbattibile per lo sviluppo di temi WP perfettamente reattivi.
Prezzo: Gratuito
Conclusione
Con queste venti straordinarie risorse, dovresti essere completamente armato per iniziare a creare responsive web design sia in HTML puro / CSS che in WordPress. Non importa quale sia il tuo budget, ci sono diversi temi e modelli qui che sono perfetti per te.
Lascia un commento qui sotto e facci sapere se ne abbiamo perso qualcuno. Ti sei imbattuto in fantastici modelli e temi reattivi? Vogliamo vederli!