Il Digital Marketing ha convinto ormai tutti della propria efficacia, ma la sua evoluzione ha portato ad una conseguente diversificazione dei canali digitali che obbliga le imprese ad operare delle scelte di investimento.
Dal 21 aprile Google favorirà i siti ottimizzati per la navigazione da smartphone e tablet. Il nuovo algoritmo di ricerca “mobile-friendly” colpirà negativamente tutti gli altri.
Il Responsive Design è una delle ultime tendenze del web design. Ma cosa si intende per Responsive Design?
Il Responsive Design nasce come risposta naturale alla crescente quantità di persone che quotidianamente, utilizzano smartphone e tablet per navigare sul web.
Templatemonster.com ha rilasciato una guida interattiva sul Responsive Design.
Si inizia dal Glossario dove vengono definiti i termini Responsive Design, Fluid Grids, Flexible Images, CSS Media Queries e Screen Resolutions e si finisce con templates, tutorial e risorse.
MightySlider è un plugin jQuery che consente di creare gallerie fotografiche, video, rotazione banner e altri elementi completamente responsive, adatto, quindi, a smartphone e tablet con risoluzioni più piccole e ideale per siti di alto impatto grafico.
Semplice applicazione web , che sfruttando iframe e le trasformazioni CSS3, consente di visualizzare la pagina web su Iphone, Ipad, Macbook e IMac con la possibilità di fare drag e drop sui device.
Deviceponsive consente di testare i siti su più devices (Galaxy, iPhone, Kindle, iPad and Macbook) in un solo click.
Tool che permette preview dei siti in diverse risoluzioni: basta inserire l’url del sito e cliccare sulle icone dei vari device.
Tool che consente di selezionare, con un semplice click, il dispositivo che intendiamo testare e l’orientamento: portrait o landscape.
Permette di verificare il layout di un sito web in tutte le risoluzioni possibili.
Media Queries è la risposta di CSS3 al relativo problema dell’adattabilità degli stili grafici a tutti i device e alle diverse risoluzioni.
Media Queries permette di utilizzare un solo foglio di stile per il layout di molteplici dispositivi, andando a sovrascrivere le classi lato css al verificarsi di determinate condizioni preimpostate.
/* iPhone e altri smartphones (portrait) */
@media screen and (max-device-width: 320px) {
}
/* iPhone e altri smartphones (landscape) */
@media screen and (max-device-width: 480px) {
}/* iPhone e altri smartphones (portrait) */
@media screen and (max-device-width: 320px) {
}
/* iPhone e altri smartphones (landscape) */
@media screen and (max-device-width: 480px) {
}
/* iPad e altri tablets (portrait) */
@media screen and (max-device-width: 768px) {
}
/* iPad e altri tablets (landscape) */
@media screen and (max-device-width: 1024px) {
}
/* iPhone 5 (portrait) */
@media screen and (max-device-width: 568px) and (orientation: portrait) {
}
/* iPhone 5 (landscape) */
@media screen and (max-device-width: 568px) and (orientation: landscape) {
}/* Samsung Galaxy (portrait) */
@media screen and (max-width: 385px) {
}
/* Samsung Galaxy (landscape) */
@media screen and (max-width: 690px) {
}
/* iPhone e altri smartphones (portrait) */
@media screen and (max-device-width: 320px) {
}
/* iPhone e altri smartphones (landscape) */
@media screen and (max-device-width: 480px) {
}
/* iPad e altri tablets (portrait) */
@media screen and (max-device-width: 768px) {
}
/* iPad e altri tablets (landscape) */
@media screen and (max-device-width: 1024px) {
}
/* iPhone 5 (portrait) */
@media screen and (max-device-width: 568px) and (orientation: portrait) {
}
/* iPhone 5 (landscape) */
@media screen and (max-device-width: 568px) and (orientation: landscape) {
}/* iPad (portrait) */
@media screen and (max-width: 760px) {
}
/* Smartphones (landscape) */
@media screen and (max-width: 480px) {
}
/* Smartphones (portrait) */
@media screen and (max-width: 320px) {
}