XCondividi su Facebook
XCondividi su Twitter
XCondividi su Google Plus
XCondividi su Linkedin
7Condividi su Facebook
14Condividi su Twitter
3Condividi su Google Plus
10Condividi su Linkedin

Responsive debug tools per Web Designer

Ormai non credo ci sia dubbio, internet è sempre più mobile, in 12 mesi si sono viste passare le statistiche da un 5% a oltre 30% di accessi da smartphone e tablet. Il 2014 confermerà il trend facendo superare, in alcuni settori, oltre il 50%.

Il termine responsive è entrato, ormai stabilmente, nel vocabolario di web designer e web developer. È difficile immaginare un nuovo progetto senza prevederne un interfaccia adatta per mobile. Scuole di pensiero vogliono addirittura che in fase di progettazione si pensi prima alla User Interface vista da smartphone e tablet per poi passare ad una versione desktop. Pensiero non del tutto errato, visto che in un futuro non lontano la maggior parte della gente sfoglierà le pagine internet tra le proprie mani.

Esiste quindi un esigenza, da parte di chi fine deve mettere mano a codice. Ma non solo, anche in fase creativa è importante avere idee ben chiare su effetti, movimenti, proporzioni, variazione di margini, font… e tutte le altre modifiche che tramite o javascript o meglio ancora l’utilizzo di Media queries che ci aiutano a rendere un sito responsive.

Ci sono vari strumenti online che ci possono aiutare a renderci conto di come il nostro sito viene visualizzato da smartphone, e se il nostro sito risponde bene sotto l’aspetto responsive.

Alcune misure da tenere a mente

Non fosse stato chiaro ogni smartphone e device hanno la propria misura, e considerando la rotazione di 90° del device le misure si raddoppiano.

  • iPhone 3+4 verticale · width: 320px
  • iPhone 3+4 landscape · width: 480px
  • iPhone 5 verticale · width: 320px
  • iPhone 5 landscape · width: 568px
  • Android verticale · width: 240px
  • Android landscape · width: 320px
  • Android (Nexus 4) verticale · width: 384px
  • Android (Nexus 4) landscape · width: 600px
  • iPad verticale · width: 768px
  • iPad landscape · width: 1024px
  • Kindle verticale · width: 600px
  • Kindle landscape · width: 1024px

Ecco alcuni strumenti responsive che possono esserci d’aiuto

Per “debuggare” un sito responsive non è necessario arrivare ad installarsi xCode o particolari macchine virtuali, basta un Chrome, Firefox, Safari… e queste web application richiamabili dal browser.

Responsinator

Inserisci l’indirizzo del tuo sito e istantaneamente ti da un idea generale di come viene visto il tuo sito in diversi device.
Responsinator

Breakpoint

Con Breakpoint, puoi verificare tutti gli step richiamati dei Media queries.
Breakpoint

Screenfly

Forse la più completa web application di questa serie. Con anche la possibilità di nascondere scrollbar.
Screenfly

Dimension

Attualmente per testare la visibilità Responsive di un sito utilizzo soprattutto Dimension, che ha un applicazione dedicata su Chrome. La più intuitiva con opzione drag per il resize del frame.
dimension

ScreenQueries

ScreenQueries è ben curato, con uno stile che chiaramente richiama i prodotti Adobe. Si tratta di una web application ancora in Beta, ma già ben funzionate e carica di opzioni.
ScreenQueries

Responsive.is

Responsive.is creato da Typecast, limitato ma è semplice ed intuitivo.
responsiveis

Segui Desmm
+ Segnala un
progetto
DesMM © 2002 - 2017 Design by Massimo Mastromarino.

Editor html per Mac: Espresso