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

Demo effetto riflesso CSS3, ed animazione CSS3

Di giorno in giorno scopriamo con esempi pratici le potenzialità di CSS3. Una premessa, per una corretta visione è indispensabile l’utilizzo di browser che supportino le nuove proprietà introdotte con CSS3. Attualmente per una visione ottimale di questi demo css3 servirà Chrome o Safari.

Una semplice animazione con CSS3

il primo esempio che vi porgo più che un demo è una domanda esistenziale che attualmente tocca ne profondo chi lavora nel mio campo: “l’esperienza visiva da noi creata in un sito viene vissuta nello stesso modo in tutti i browser?”, la risposta è molto chiara e la trovata su questo sito. Vi invito fortemente a sbirciare il codice sorgente e scoprire con quante poche righe è stato creato questo piacevole effetto.

Effetto riflesso CSS3

Un’altro demo CSS3 molto interessante ci viene proposto da hardboiledwebdesign. Mette in pratica quanto in passato era solo una fantasia di noi web designer. Il riflesso dinamico perfetto! Un riflesso che non necessiti la creazione di un apposita immagine con creata Photoshop, e che non richieda l’uso di nessun tipo di javascript o Flash. Caricando una singola immagine potrete ruotarla e dissolverla con un gradiente in grado di regolare lo start e l’end dell’alpha del riflesso. Guardare per credere, commuovente!!
Per approfondire vi direziono verso blog.typekit.com.

Annuncio di lavoro: Sitonline cerca sviluppatore esperto codice HTML / XHTML / CSS

Non è la prima volta che uso queste pagine per informarvi su offerte di lavoro. Sitonline cerca uno sviluppatore codice HTML / XHTML / CSS esperto da affiancare al nostro team e naturalmente collaborerà anche con me. Spero davvero di trovare tra di voi la persona giusta.
Un primo contatto lo potete richiedere tramite commento a questo stesso post o tramite il mio form contatti, risponderò a coloro che richiederanno di avere informazioni e chiederò di farmi avere un curriculum aggiornato con qualche dimostrazione delle vostre esperienze.

Descrizione annuncio

Posizione ricercata Sitonline.it cerca per il proprio organico uno sviluppatore esperto codice HTML / XHTML / CSS per la realizzazione di pagine Web a partire da modelli PSD grafici.
Ruolo Modellista HTML / Grafico.
Requisiti ottima conoscenza dei linguaggi HTML / XHTML / CSS  e esperienza nel ruolo, conoscenza media di Photoshop.
Età massima 35 anni.
E’ gradita conoscenza di codice Javascript e PHP.
Si richiede motivazione al ruolo richiesto, capacità di lavorare in team, e molta precisione.
Sede di lavoro Milano.

Angoli arrotondati con CSS

Esistono diversi modi per ottenere una box html con angoli stondati (rounded corner) in CSS . Dall’utilizzo di immagini, che raffigurano gli angoli stondati, che poi vengono posizionate agli angoli dell’elemento desiderato, fino all’utilizzo del -moz-border-radius, purtroppo quest’ultimo visibile solo su browser Mozilla (Firefox). Leggi tutto

Hack CSS per tutti browser!

State impazzendo e non trovate una la soluzione per le vostre pagine HTML per fare in modo che funzionino correttamente su tutti browser? Il primo consiglio è quello di staccare alzarvi dal computer e riprendere in un secondo momento. Spesso la troppa concentrazione ci impedisce di vedere anche le soluzioni più semplici.
Ma se proprio non volete mollare ed Internet Explorer o Firefox o Opera o Chrome o Safari non rispondono alle vostre richieste: allora vi presento l’ Hack CSS dei vostri sogni (anche se non credo tutti la pensino così).css-codice Leggi tutto

Cross browsing con jQuery

Chi come me, malgrado le proprie opinioni è costretto a condividere ore della propria giornata con Internet Explorer, quando sente parlare di soluzioni che potrebbero semplificare il cross browsing con i vecchi IE, gli si “drizzano” le orecchie…

boxmodel.gif

Leggi tutto

Cercasi “HTMLlista” per Sitonline

Voglio informarvi che stiamo cercando una figura “HTMLlista” (uno che se ne intenda di HTML/CSS) interessata a lavorare in sede di Sitonline a Milano. Sitonline fa parte del gruppo Banzai, negli ultimi anni in forte crescita. Da qualche settimana stiamo tenendo colloqui in sede, mi è sembrato giusto avvertire anche i visitatori di DesMM di questa, a mio parere, interessante opportunità…

sitonline

Leggi tutto

Template CSS a colonne multiple

Dopo questo articolo, guai a chi mi chiede come si fanno a fare le colonne in CSS!! Il sito che vi propongo oggi credo sia la raccolta definitiva di casistiche di template CSS a colonne. Di varianti di template ce ne sono ben 42! Tutti col loro bel file Zip da scaricare ed adattare alle proprie esigenze.
Link:http://www.code-sucks.com/..

colonne css

Menù CSS a Discesa

I Menù CSS possono a semplificare il lavoro a chi crea pagine web. Perchè con poche operazioni sul foglio di stile ri riescono a fare interventi sull’intero sito senza dover operare sulle singole pagine. Poi se menù CSS sono ben adattati ai CMS ingrado di gestire sotto categorizzazioni danno la possibilità di creare menù a discesa utili per velocizzare la navigazione dei visitatori…

menu css a discesa

Leggi tutto

Il meglio del CSS Design 2006

Ecco un articolo fatto a posta per chi in crisi di idee su l design di un sito. Questa lista contiene quanto di meglio del CSS Design realizzato nel 2006. Di certo se non vi aiuterà a trovare l’ispirazione come minimo vi abbatterete ancora di più per la bellezza di alcuni di questi. Andate su smashingmagazine ma per avere una lista più completa ed in continua espansione vi rimando su Flickr. Ma non dimenticatevi di fare un salto su “qualche nuovo link“, un post di Pugia, sul forum di html.it, dei primi mesi del 2006 che ormai è stabilmente in rilievo vista l’ottima qualità grafica, dei siti proposti.

css design 2006

Dynamic 3D in CSS

FPS sono i videogame che offrono al videogiocatore la possibilità di vivere in prima persona le avventure di un personaggio virtuale. La caratteristica principale è che la visuale del gioco è la stessa del personaggio quindi come fossimo in possesso del suo corpo per muoverci dell’area di gioco.
Tramite CSS e JavaScript si è riusciti a ricreare una simulazione di movimento tra dei cunicoli. Questo lascia precedere la possibilità in un futuro prossimo, con anche l’ausilio di Ajax, della creazione di videogiochi online per di più multiplayer, senza installare nessun software o plugin.
E’ possibile subito provare quanto scritto con questo demo online (Opera or Firefox).

Fps css