La maggior parte dei web designer sa bene quanto sia im­por­tan­te avere un sito re­spon­si­ve (reattivo) e quali vantaggi comporti. Se si opta per un sito dal design re­spon­si­ve, è ne­ces­sa­rio ve­ri­fi­car­ne la vi­sua­liz­za­zio­ne su diversi di­spo­si­ti­vi (computer desktop, notebook, tablet, smart­pho­ne) già in fase di sviluppo o al limite prevedere una fase di test, nella quale si verifichi ac­cu­ra­ta­men­te l’assenza di errori e in­con­gruen­ze. Uti­liz­zan­do dei tool appositi, si può con­trol­la­re come il layout si adatti ai diversi di­spo­si­ti­vi e a dif­fe­ren­ti ri­so­lu­zio­ni dello schermo. In questo articolo vi pre­sen­tia­mo 7 tra i migliori strumenti gratuiti per la verifica del re­spon­si­ve design.

Registra il tuo dominio
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

Testare la fles­si­bi­li­tà del design di­ret­ta­men­te dal browser

I tool il­lu­stra­ti di seguito possono essere aperti dal browser e fun­zio­na­no gra­tui­ta­men­te senza bisogno di re­gi­strar­si. Lo strumento per la verifica del design re­spon­si­ve simula la ri­pro­du­zio­ne di una pagina in una specifica ri­so­lu­zio­ne ed è possibile cliccarvi ed esplo­rar­la come se si stesse navigando di­ret­ta­men­te dal browser di un altro di­spo­si­ti­vo. Questi strumenti con­sen­to­no quindi non solo la vi­sua­liz­za­zio­ne di singole pagine, ma anche la na­vi­ga­zio­ne all’interno dell’intero sito, così da poterlo testare per ri­so­lu­zio­ni diverse.

Mozilla Firefox Tool

Con Firefox è facile testare la fles­si­bi­li­tà di un sito: cliccate sul menu del browser “Sviluppo” e poi “Vi­sua­liz­za­zio­ne fles­si­bi­le”, così vi apparirà la pagina aperta in una finestra scalabile su uno sfondo nero. Potete cambiare a vostro pia­ci­men­to le di­men­sio­ni mostrate, al­lar­gan­do o riducendo il riquadro con il mouse. Ci sono però delle ri­so­lu­zio­ni già pre­im­po­sta­te tra cui poter scegliere (sia nei formati oriz­zon­ta­li che in quelli verticali).

Screenfly

Con questa web app potete scegliere tra le ri­so­lu­zio­ni più comuni (come quelle per i portatili, per i computer desktop o anche per smart­pho­ne e tablet). Ciò che rende Screenfly par­ti­co­lar­men­te versatile è la pos­si­bi­li­tà di poter applicare delle im­po­sta­zio­ni per­so­na­liz­za­te.

re­spon­si­ve­px

Questo strumento ha in comune con Screenfly la fles­si­bi­li­tà e la pos­si­bi­li­tà di scegliere tra diverse ri­so­lu­zio­ni. Grazie a re­spon­si­ve­px potete impostare l’altezza e la larghezza dello schermo virtuale fino ad un massimo di 3.000 pixel.

Screen­check di Cyber Crab

Screen­check di Cyber Crab è un’altra web app molto utile, uti­liz­za­bi­le di­ret­ta­men­te dalla pagina degli svi­lup­pa­to­ri, per ve­ri­fi­ca­re se usate un sito con un design re­spon­si­ve.

De­mon­stra­ting Re­spon­si­ve Design

Anche su De­mon­stra­ting Re­spon­si­ve Design sono a vostra di­spo­si­zio­ne solo tre ri­so­lu­zio­ni comuni dello schermo (le varianti per lo smart­pho­ne e il tablet, anche in formato oriz­zon­ta­le). È comunque possibile passare fa­cil­men­te e in poco tempo da una ri­so­lu­zio­ne ad un’altra.

Re­spon­si­na­tor

Con Re­spon­si­na­tor viene simulata la vi­sua­liz­za­zio­ne di un sito su sei diversi di­spo­si­ti­vi mobili, nei due casi possibili: schermo posto ver­ti­cal­men­te e schermo ruotato di 180 gradi. Tra queste ci sono diverse varianti dell’iPhone, degli smart­pho­ne Android e dell’iPad.

Am I Re­spon­si­ve?

Il sito di Am I Re­spon­si­ve? vi mette a di­spo­si­zio­ne quattro diversi di­spo­si­ti­vi Apple per ve­ri­fi­ca­re il vostro sito: desktop (ri­so­lu­zio­ne: 1.600 x 992 pixel), notebook (1.280 x 802 pixel), tablet (768 x 1.024 pixel) e smart­pho­ne (320 x 480 pixel). Inoltre, l’ap­pli­ca­zio­ne consente di mettere di­ret­ta­men­te a confronto le diverse di­men­sio­ni.

Con­clu­sio­ne
Se volete ve­ri­fi­ca­re che il vostro sito sia re­spon­si­ve, i tool pre­sen­ta­ti si di­mo­stra­no un valido supporto, anche se non dovete fare esclu­si­va­men­te af­fi­da­men­to su questi strumenti. Infatti dovreste testare realmente il vostro sito sul maggior numero di di­spo­si­ti­vi possibili, visto che nel caso di questi tool si tratta pur sempre di una si­mu­la­zio­ne della vi­sua­liz­za­zio­ne del sito su diversi schermi. Alcuni fattori non vengono presi in con­si­de­ra­zio­ne durante la si­mu­la­zio­ne, come ad esempio gli effetti sull’usabilità dei diversi di­spo­si­ti­vi ad elevate pre­sta­zio­ni, di browser dif­fe­ren­ti o dell’uso del touch screen. Inoltre la vi­sua­liz­za­zio­ne di un sito tramite questi tool può essere alterata perché spesso compare una barra di scor­ri­men­to sulla pagina, non presente sui di­spo­si­ti­vi mobili che uti­liz­za­no il touch screen. No­no­stan­te questo, si consiglia di uti­liz­za­re degli strumenti online per ve­ri­fi­ca­re che un sito sia re­spon­si­ve. Sono so­prat­tut­to i web designer a trarre vantaggio da questi test, visto che il processo si velocizza grazie ad una facile e veloce modifica della ri­so­lu­zio­ne.
Vai al menu prin­ci­pa­le