50 fantastici strumenti per il responsive web design

Autore: Monica Porter
Data Della Creazione: 17 Marzo 2021
Data Di Aggiornamento: 17 Maggio 2024
Anonim
Responsive Overview - Google Web Designer
Video: Responsive Overview - Google Web Designer

Contenuto

Come introdotto / coniato da Ethan Marcotte sia nel suo articolo "Responsive Web Design" che nel suo libro best seller, sono necessari tre elementi per rendere un sito reattivo:

  1. Una griglia flessibile / fluida
  2. Immagini reattive
  3. Query multimediali

Ci sono molti altri fantastici articoli che trattano motivazioni, concetti e tecniche riguardanti il ​​responsive web design, quindi manterremo il focus di questo articolo su alcuni strumenti importanti che ti aiuteranno a diventare responsabilmente reattivo.

Strumenti per iniziare

Prima di iniziare a costruire il tuo sito, è meglio abbozzare come gli elementi sulla pagina si adatteranno per adattarsi alle diverse dimensioni del browser dei vari dispositivi su cui verranno visualizzati e per evitare la disconnessione che spesso deriva dal pensare principalmente a il design del desktop e il resto delle iterazioni reattive come un ripensamento (vedere in particolare il commento di Stephanie (Sullivan) Rewis).

01. Fogli di schizzi di responsive web design

Questo set di fogli per schizzi reattivi, di Jeremy P Alford, è un ottimo punto di partenza per iniziare a mappare come le sezioni della pagina si sposteranno con risoluzioni diverse.


02. Sketchbook di design reattivo

Se preferisci tenere tutti i tuoi schizzi in un unico posto, allora potresti prendere in considerazione questo libro rilegato a spirale di 50 fogli di schizzi reattivi dell'azienda App Sketchbook.

03. Wireframe reattivo

Una delle difficoltà nella creazione di siti Web reattivi è l'utilizzo di wireframe per mostrare come funzionerà il design reattivo. James Mellers di Adobe ha messo insieme questo strumento sperimentale per mostrare come può funzionare il wireframing reattivo di layout complessi.


04. Modelli di layout multi-dispositivo

Quando si pianifica un design reattivo è utile vedere come altre persone si sono avvicinate prima di te, quindi Multi-Device Layout Patterns di Luke Wroblewski, che elenca modelli popolari con collegamenti ad esempi, è un ottimo punto di partenza.

05. Piastrelle stile

Le Style Tiles di Samanatha Warren propongono una nuova tecnica per il design nell'era responsive; piuttosto che modelli di progettazione a larghezza fissa, questi sono come campioni o moodboard che mostrano l'approccio progettuale generale senza entrare nei dettagli granulari.

Strumenti per una griglia flessibile / fluida

Come affermato in precedenza, il primo componente necessario per il responsive design è una griglia flessibile / fluida.I seguenti sono già preconfigurati: devi solo scaricarli e sarai rapidamente sulla strada per un sito più reattivo.


06. Golden Grid System

Joni Korpi, che ha anche sviluppato Less Framework, ha recentemente rilasciato questa nuova versione di un sistema a griglia affidabile per un design reattivo. Considerato "pieghevole" in quanto si adatta facilmente da 16, a otto, a quattro colonne, il sistema Golden Grid dispone anche di un piccolo overlay del browser che espone la griglia sulle tue pagine per il test.

07. Foldy960

I talentuosi signori di Paravel, Inc. hanno rilasciato la griglia 960.gs modificata che usano come base per i loro progetti reattivi.

08. SimpleGrid

SimpleGrid, di Conor Muirhead, è stato costruito con reattività incorporata, quindi è facile iniziare a lavorare con il tuo progetto di sito web reattivo.

09. La griglia CSS di 1140px

Un altro ottimo sistema di griglia reattivo è il CSS Grid da 1140px del designer di Melbourne Andy Taylor, che va da un'ampia risoluzione desktop fino ai dispositivi mobili.

10. Sistema a griglia CSS a colonne

Il sistema di griglie Columnal, creato da Pulp + Pixels aka direttore creativo Nick Gorsline, si basa sul sistema di griglie da 1140px, ma con alcune chicche extra come un kit di progettazione con fogli di schizzi e modelli di wireframing, oltre a stili di debug CSS.

11. Sistema di griglia semantica

Le estensioni CSS preelaborate come Sass e LESS stanno diventando sempre più popolari e il sistema di griglia semantica di Tyler Tate le utilizza per ottenere il massimo effetto in questo sistema di griglia che afferma di non utilizzare classi o elementi non necessari. Maggiori informazioni su coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Come il sistema a griglia semantica, SUSY di Oddbird ha creato un sistema a griglia che non utilizza markup extra o classi speciali, ma SUSY è rivolto solo agli utenti di Sass (e della sua estensione, Compass).

13. Gridpak

Gridpak, di Erskine Design, è uno dei più recenti generatori di griglia reattivi in ​​circolazione. Ti consente di impostare le colonne e i margini interni su un numero di punti di interruzione, quindi genera file CSS, JavaScript e PNG in modo che tutto il tuo team lavori dallo stesso punto di partenza.

14. Gridset

C'è ancora una leggera aria di mistero su Gridset poiché, al momento in cui scrivo, non è ancora stato rilasciato. Ma lo strumento di Mark Boulton Design promette sistemi di griglie su misura, non prescrittivi e un modo per salvare e gestire le griglie online.

15. Una migliore griglia di Photoshop per RWD

Elliot Jay Stocks propone di abbandonare il vecchio standard di griglia di fatto da 960 px e di lavorare invece da una base di 1000 px, rendendo più facile lavorare con tutti i calcoli percentuali. Se sei d'accordo, ha creato un PSD con cui iniziare a lavorare.

16. Griglie fluide

Se il tuo progetto è altamente specializzato e hai bisogno di creare la tua griglia personalizzata, puoi farlo con il brillante calcolatore della griglia fluida di Harry Roberts, brillante nuovo arrivato nominato dai .net Awards.

17. Calcolatrice reattiva

Un altro calcolatore di pixel per percentuali, ma questo di Stu Robson fa un ulteriore passo avanti rispetto ad altri generando tutte le regole CSS per te, il che significa che puoi semplicemente copiarle e incollarle nei tuoi fogli di stile.

Strumenti per immagini (e testo) reattivi

Un altro componente cruciale del responsive web design sono le immagini fluide. Sebbene la tecnica per ottenere immagini fluide sia semplice, l'ottimizzazione delle prestazioni e del caricamento della pagina per diversi dispositivi sembra essere una delle maggiori sfide nel responsive web design. Ecco alcune risorse per affrontare il problema.

18. Immagini reattive

Il Filament Group ha ideato un modo per inviare un'immagine di dimensioni adeguate in base alla risoluzione dello schermo. Questo esperimento con immagini mobile first che si ridimensionano in modo reattivo e responsabile richiede due immagini di dimensioni diverse a cui fare riferimento.

19. Immagini adattive

Matt Wilcox si è ispirato allo strumento Responsive Images per creare Adaptive Images, che utilizza PHP e un po 'di JavaScript per fornire immagini appropriate al dispositivo dell'utente senza richiedere alcun markup aggiuntivo.

20. Sencha.io Src (precedentemente Tinysrc)

Sencha fornisce un servizio cloud che invia versioni ottimizzate di immagini ospitate per le dimensioni del dispositivo che le richiede. Per scoprire come usarlo, vedere docs.sencha.com/io/src/.

21. FitText

Ancora un altro gioiello di Paravel, Inc è FitText.js, un plug-in jQuery per rendere il tipo di titolo web reattivo al design e al dispositivo. Per i dettagli, vedere trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Ispirato da FitText e dall'algoritmo SlabType, slabText di Brian McAllister è un plug-in jQuery che crea blocchi di testo in grassetto che si ridimensionano in modo reattivo mantenendo una larghezza definita.

Strumenti per media query

Ora che hai un'idea di come cambierà il tuo layout per dispositivi diversi, una griglia fluida e immagini fluide, hai bisogno di query multimediali per spostare gli elementi della pagina in uno stato di reattività.

23. Respond.js

L'unico problema con il responsive design è che i browser che non sono in grado di leggere le media query rimangono indietro. Questo potrebbe non essere un problema con il tuo pubblico di destinazione, ma è comunque una buona pratica soddisfare gli utenti sui browser meno recenti. Respond.js, di Scott Jehl, supporta solo le proprietà min-width e max-width.

Per ulteriori informazioni, vedere filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, di Wouter van der Graaf, consente alle versioni precedenti di IE e altri browser di testare e applicare efficacemente tutti i tipi di media query.

25. Adapt.js

Nathan Smith, autore del sistema di griglia 960.gs originale, ha scritto Adapt.js, uno script che rileva le dimensioni del browser e serve solo i fogli di stile richiesti, come le media query ma senza media query, il che significa che funziona anche nei browser meno recenti.

26. Categorizr

Questo è il rilevamento del dispositivo affrontato dall'angolo opposto: lo script Categorizr di Brett Jankord presume che i dispositivi siano mobili a meno che non vengano rilevati diversamente come desktop o tablet, consentendo di fornire risorse ai browser in modo comprensivo.

Caldaie dal design reattivo (e mobile)

Nello spirito di un flusso di lavoro reattivo efficiente, i boilerplates facilitano il processo di spostamento dei progetti nel browser il prima possibile. La maggior parte di questi boilerplate combina il meglio degli strumenti sopra menzionati in un unico pacchetto pulito: una griglia flessibile migliorata con gli script, mentre implementa le filosofie mobile first, content-out.

27. 320 e versioni successive

Andy Clarke's 320 and Up è un mobile-first boilerplate che si integra con molti altri moderni strumenti di web design, come LESS e Bootstrap (vedi # 30). È un modo leggero e agile per rendere rapidamente operativo un sito. Dai un'occhiata anche alla nostra intervista ad Andy, in cui ci racconta di più sulla nuova versione.

28. Gridless

Gridless è un boilerplate HTML5 e CSS3 che può servire come base per i tuoi progetti reattivi, con particolare attenzione alla tipografia e alla compatibilità cross-browser integrata.

29. Scheletro

A differenza dei due boilerplate precedenti, il cui punto di partenza è con la risoluzione più piccola, il kit di sviluppo Skeleton, creato da Dave Gamache, si basa sul sistema a griglia 960.gs ed è ridimensionabile per i dispositivi mobili. Skeleton vanta anche un ottimo framework di stile su cui gli sviluppatori possono creare stili.

30. Bootstrap

Creato da Twitter e ora open-source, Bootstrap è un framework e una serie di componenti per mettere rapidamente online un sito e, dalla versione due, tutte le sue parti principali funzionano in modo reattivo.

Plugin, shim e polyfill

Sebbene i browser e il software moderni tendano ad essere predisposti per la reattività, a volte dobbiamo utilizzare strumenti aggiuntivi per fornire un'esperienza coerente.

31. Plugin reattivo

Marios Lublinski ha scritto un plug-in per WordPress che promette di trasformare qualsiasi tema WP corrente in uno reattivo. Non lo so ancora perché non è stato pubblicato al momento della stesura di questo articolo, ma se mantiene le sue promesse dovrebbe essere molto utile.

32. Rovesciamento

La gestione dell'overflow dei contenuti funziona bene sui browser desktop, ma i browser mobili meno recenti la gestiscono in modo incoerente. Il polyfill Overthrow del industrioso Filament Group aggiunge un degrado grazioso e coerente su tutti i dispositivi, assicurando che tutti gli utenti mobili ottengano la migliore esperienza possibile.

33. MediaTable

Il plug-in jQuery di Marco Pegoraro, MediaTable, funziona con Respond.js per aiutarti a risolvere il problema di come visualizzare tabelle di dati di grandi dimensioni su dispositivi a schermo piccolo, creando colonne reattive e aggiungendo un interruttore mostra / nascondi dove adatto.

"Testing, testing: 1-2-3 ..."

Un altro aspetto del flusso di lavoro reattivo è conoscere i dispositivi e le risoluzioni di destinazione e quindi testarli.

34. resizeMyBrowser

resizeMyBrowser, dello sviluppatore frontend Chen Luo, ha diverse dimensioni preimpostate per la finestra del browser per testare pagine progettate in modo reattivo o creare una nuova preimpostazione se non riesci a trovare quella adatta alle tue esigenze.

35. responsivepx

Proprio come resizeMyBrowser, responsivepx, costruito da Remy Sharp, carica le tue pagine in una finestra in cui puoi testare la larghezza e l'altezza per determinare quanto bene stanno sparando le tue media query e dove sono i punti di interruzione nel design.

36. Test di progettazione reattiva

Uno strumento incredibilmente utile del designer e sviluppatore Matt Kersley: inserisci semplicemente l'URL del tuo sito reattivo in Responsive Design Testing per vedere come viene visualizzato nelle varie dimensioni del browser.

37. Il Responsinator

Inserisci un URL e The Responsinator ti mostrerà come viene visualizzato in molti dispositivi di dimensioni comuni, con una spietata efficienza robotica. Tama Pugsley e Andy Hovey sono i responsabili di questo.

38. Responsive.is

Un altro emulatore di dispositivo in-page, Responsive.is ti consente di digitare un URL e di ridimensionarlo rapidamente tra una gamma di preimpostazioni diverse. È realizzato dal team dietro la prossima app Typecast.

39. Screenqueri.es

Un altro strumento per le dimensioni del browser, ma Screenqueri.es di Mandar Shirke si differenzia per avere un ampio set di preimpostazioni per dispositivi mobili e tablet, nonché una griglia e righelli che rendono la misurazione fine molto più semplice.

40. Aptus

Un'altra app per testare siti in più dimensioni definite, ma Aptus è nativo per Mac. È disponibile tramite il Mac App Store e l'essere nativo offre funzionalità extra come screenshot facili e supporto offline.

41. Segnalibro Responsive Design

Victor Coulon ha realizzato un bookmarklet molto semplice ma efficace; quando lo attivi su qualsiasi pagina web, aggiunge una barra degli strumenti che ti consente di alternare tra quattro dimensioni comuni dello schermo in modo da poter vedere come viene visualizzato il tuo sito in dimensioni diverse.

42. Segnalibro per il test di responsive design

Questo bookmarklet di Benjamin Keen consente una maggiore personalizzazione permettendoti di definire le dimensioni del tuo dispositivo e quante ne desideri. Quando attivato mostra il sito in tutte le dimensioni selezionate, affiancati per un facile confronto.

43. Screenfly

Screenfly, di QuirkTools, ti consente di testare un sito a diverse risoluzioni su desktop, tablet, cellulare e televisione. Il test desktop è attualmente limitato a Safari, mentre il tablet e il cellulare hanno più opzioni per dispositivi e browser. La televisione è limitata a Opera.

44. Indicatore di media query

Johan Brook offre un metodo CSS puro per testare quando una media query è stata attivata dal browser. Media Query Indicator è un altro ottimo strumento per testare e giocare con i punti di rottura del design.

45. Shim

Uno degli strumenti utilizzati nella riprogettazione del Boston Globe, il poster boy del movimento RWD, Shim è un'app Node.js che gestisce una pagina web su più dispositivi sulla stessa rete Wifi, rendendo molto più semplici i test cross-device .

46. ​​Drive-In

Se non disponi di un server Node.js per eseguire Shim, Scott Jehl ha creato una versione più semplice chiamata Drive-In che funziona fondamentalmente allo stesso modo, ma utilizzando PHP, Apache e un file .htaccess.

47. Adobe Shadow

Adobe continua a spingere verso le tecnologie web con questo strumento di debug remoto. Installa Shadow e l'estensione Chrome su Mac o Windows, oltre al client Shadow su Android o iPhone, e potrai condividere pagine web tra molti dispositivi diversi.

48. Opera Mobile Emulator + Remote Debug

Un modo più semplice per eseguire il debug delle pagine mobili è installare Opera e Opera Mobile Emulator e connettere i due con la loro opzione Debug remoto. Semplice e veloce da configurare e ha l'ulteriore vantaggio di eseguire test su più di WebKit.

Ulteriore ispirazione

Vuoi avere un'idea di come gli altri stanno rendendo i loro progetti reattivi?

49. MediaQueri.es

Se non l'hai già visto, il sito Mediaqueri.es ha un numero sempre crescente di siti che sono passati al lato responsive.

50. @RWD

Ethan Marcotte gestisce un account Twitter che porta le ultime notizie, strumenti e vetrine dal mondo di RWD.

Denise Jacobs adora essere una relatrice, autrice, formatrice di web design ed evangelista della creatività, mentre Peter Gasston è l'autore di The Book of CSS3 e uno sviluppatore web veterano che scrive su Broken Links.

Questo mi piaceva? Leggi questo!

  • Suggerimenti professionali per la creazione di un sito Web mobile
  • Le migliori tecniche CSS e JavaScript
  • Come costruire un'app
  • I migliori font web gratuiti per i designer
  • Scopri le prospettive per la realtà aumentata
  • Scarica texture gratuite: ad alta risoluzione e subito pronte per l'uso
Articolo Precedente

I segreti dello speciale natalizio di Doctor Who
Articolo Successivo

La guida per principianti alla stampa artistica
Ti Consigliamo
Come cambiare la password del gruppo home in Windows 10/8/7
Per Saperne Di Più

Come cambiare la password del gruppo home in Windows 10/8/7

Maggio 2024
"Paword pera per il gruppo home, è neceario reimpotarla o cambiarla." Il gruppo home è fondamentalmente un gruppo di computer o dipoitivi in ​​eecuzione ul itema operativo Window e...
Le 6 migliori opzioni per visualizzare il codice Product Key di Windows 10
Per Saperne Di Più

Le 6 migliori opzioni per visualizzare il codice Product Key di Windows 10

Maggio 2024
È un fatto innegabile che non i poa attivare Window 10 ul proprio PC enza avere la licenza digitale o il codice Product Key di 25 cifre. Quindi, la domanda è "Come viualizzare il codice...
Come faccio a creare un nuovo account Microsoft
Per Saperne Di Più

Come faccio a creare un nuovo account Microsoft

Maggio 2024
"Venderò il mio computer. Come poo rimuovere il mio account microoft o otituirlo con l'account del nuovo account Microoft del proprietario?" Neun problema, iamo qui per aiutarti a r...