Responsive Design Risorse Utili a cura di Mirko D'Isidoro www.blographik.it
by Mirko Disidoro
1. Ispirazioni grafiche per spunti utili
1.1. http://mediaqueri.es/ galleria fantastica da prendere come spunto d bellissimi i siti e magazine online in responsive
2. tools responsive
2.1. http://www.browserstack.com/responsive servizio web based che mostra gli screenshot dei vari dispositivi per controllare la risoluzione del sito
2.2. http://mattkersley.com/responsive/ Questo servizio ti aiuta a testare i tuoi siti web responsive mentre li stai realizzando. Puoi inserire l'URL del tuo sito web nella barra degli indirizzi in alto, per testare una pagina specifica. Non puoi però navigare nel sito attraverso i fotogrammi che vedi come risultato del test.
2.3. http://www.juliusdesign.net/18019/responsive-web-design-5-strumenti-utili-per-simulare-un-layout/
2.4. http://lab.maltewassermann.com/viewport-resizer/ Viewport Resizer. Utilissimo per simulare le diverse risoluzioni per layout Responsive ed in tempo reale!
2.5. http://www.studiopress.com/responsive/ Inserendo l’indirizzo web, appariranno affiancati i diversi tipi di visualizzazione
2.6. http://responsive.is/ servizio web based per testare un sito responsive che simula il ridimensionamento della finestra del browser
2.7. http://www.opera.com/it/developer/mobile-emulator programma installabile su pc, mac o linux
3. strumenti per creare mockup
3.1. http://www.juliusdesign.net/9746/progettare-un-layout-grafico-che-funzioni-sul-web/
3.2. http://slodive.com/web-development/wireframe-tools/ una lista di 30 tools gratuiti e a pagamento, per creare delle bozze di layout di pagina per capire come disporre il contenuto di un sito web, prima della creazione del layout definitivo
3.3. https://gomockingbird.com/ Strumento on line utile ai web designer per creare wireframe di pagine web. Mockingbird ti permette gratuitamente di avere 2 progetti salvati oppure puoi scegliere la versione premium che ti permette di caricare un numero infinito di progetti. Una caratteristica utile è che puoi condividere al volo il tuo wireframe e modificarlo in tempo reale, mentre lo fai vedere al cliente a distanza. Risorse correlate: Video tutorial sui benefici nell'usare un wireframe: http://www.youtube.com/watch?v=NWO2vlBHPvI Dal minuto 4:20, inizia la parte dedicata all'uso di Mockingbird.
3.4. https://moqups.com/ applicazione on line gratuita realizzata in html5, semplice da utilizzare, per creare wireframe/mochup/interfacce utente
3.5. http://www.1stwebdesigner.com/design/paper-prototyping-analog-tools-web-mobile-designers/ Usare carta e penna può velocizzare il processo di realizzazione di un sito. Il post presenta idee, link e download di template per creare dei mockup su carta.
3.6. http://sneakpeekit.com/ Utile risorsa per avere a portata di mano layout cartacei per wireframes
4. download temi e pagine html responsive
4.1. http://bit.ly/temi-wp-responsive temi wordpress a pagamento responsive da themeforest
4.2. http://minimable.fedeweb.net/ tema wordpress free responsive
4.3. http://www.tripwiremagazine.com/2012/12/best-free-wordpress-themes.html esempi di temi in wp in responsive web design
4.4. http://www.fedeweb.net/30-temi-wordpress-gratis-responsive/ esempi temi wordpress responsive gratis
4.5. http://www.smashingapps.com/2013/07/01/responsive-free-html-css-website-templates.html alcuni esempi di pagine html fatte in responsive da prendere come spunto o a scopo didattico
5. guide
5.1. http://www.html.it/guide/responsive-web-design-la-guida/
5.2. http://www.juliusdesign.net/12988/responsive-web-design-i-migliori-tutorial-risorse/
5.3. http://searchenginewatch.com/article/2184616/Responsive-Web-Design-Introduction-Impact introduzione al responsive web design e alcuni vantaggi nel suo utilizzo (in inglese)
5.4. http://designinstruct.com/web-design/what-is-responsive-web-design/ esempi di siti responsive e tutorial per iniziare (in inglese)
5.5. http://searchenginewatch.com/article/2253965/3-Reasons-Why-Responsive-Web-Design-is-the-Best-Option-For-Your-Mobile-SEO-Strategy perché scegliere di creare siti responsive per una strategia SEO?
5.6. http://www.yourinspirationweb.com/2012/10/11/responsive-design-come-e-perche-progettare-siti-responsive/
5.7. http://www.yourinspirationweb.com/2012/10/17/twitter-bootstrap-come-utilizzare-le-griglie/
5.8. gestione immagini fluide per siti responsive
5.8.1. http://www.html.it/articoli/responsive-images-di-filament-group/ altro esempio di come creare immagini fluide per siti responsive usando javascript
5.8.2. http://www.html.it/articoli/progettare-lesperienza-utente-con-un-design-responsivo-adattare-i-contenuti-da-uno-smartphone-di-4-a-una-tv-di-44/ come creare un design responsive anche per dispositivi molto grandi, come le tv ad alata risoluzione
5.8.3. http://www.yourinspirationweb.com/2012/11/29/responsive-design-come-gestire-layout-tipografia-ed-elementi-multimediali/
5.8.4. http://www.sencha.com/learn/how-to-use-src-sencha-io/