{"id":307,"date":"2013-05-07T13:42:02","date_gmt":"2013-05-07T11:42:02","guid":{"rendered":"http:\/\/www.neamesa.it\/blog\/?p=307"},"modified":"2015-06-22T16:00:16","modified_gmt":"2015-06-22T14:00:16","slug":"perche-avere-un-sito-mobile","status":"publish","type":"post","link":"http:\/\/www.neamesa.it\/blog\/perche-avere-un-sito-mobile\/","title":{"rendered":"Perch\u00e8 avere un sito mobile?"},"content":{"rendered":"<p><a href=\"http:\/\/www.neamesa.it\/blog\/perche-avere-un-sito-mobile\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-341\" title=\"Perch\u00e8 conviene avere un sito mobile\" src=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/copertina_sito_mobile_neamesa1.jpg\" alt=\"Perch\u00e8 conviene avere un sito mobile\" width=\"300\" height=\"397\" srcset=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/copertina_sito_mobile_neamesa1.jpg 300w, http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/copertina_sito_mobile_neamesa1-226x300.jpg 226w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Poche cifre, ma significative:<br \/>\nI possessori di smartphone in Europa sono <strong>aumentati in un anno del 35%:<\/strong> da 97,7 milioni a Ottobre 2011 a 131,5 milioni a Ottobre 2012.<br \/>\nLa met\u00e0 degli utenti italiani di telefonia mobile possiede uno smartphone: il <strong>28% della popolazione<\/strong>.<\/p>\n<p>Sempre in cifre, anche se approssimative:<\/p>\n<ul>\n<li>circa <strong>20 milioni<\/strong> gli utilizzatori di smartphone in Italia;<\/li>\n<li>il <strong>75%<\/strong> usa lo smartphone per navigare su internet;<\/li>\n<\/ul>\n<p>Di fronte a questi dati la domanda che intitola il post si rivela per quello che \u00e8, solo un espediente retorico utile ad introdurre &#8211; finalmente &#8211; la vera domanda:<!--more--><\/p>\n<h2>Ma quando un sito \u00e8 mobile?<\/h2>\n<p>Risposta spontanea e immediata: quando \u00e8 visibile su smartphone.<br \/>\nNo. Il web \u00e8 pieno di siti che si &#8220;vedono&#8221; su smartphone. Si vedono a patto che usiate una lente di ingrandimento.<\/p>\n<p>E si navigano pi\u00f9 o meno agevolmente solo se avete le mani molto, molto piccole&#8230;<br \/>\nUna pagina anche perfettamente disegnata per schermi desktop pu\u00f2 essere <strong>solo fonte di stress se si cerca di navigarla sui pochi pollici di uno smartphone<\/strong>: scorrimenti orizzontali, zoom per la lettura dei testi, difficolt\u00e0 di accessibilit\u00e0 ai link renderanno l&#8217;esperienza del visitatore negativa. Con conseguenze che potrebbero risultare dannose anche oltre le aspettative, come confermano alcuni dati raccolti da Google nell&#8217;iniziativa GoMo (<a href=\"http:\/\/www.movemobile.it\" target=\"_blank\">http:\/\/www.movemobile.it<\/a>):<\/p>\n<ul>\n<li>il 57% degli utenti evita di raccomandare un\u2019attivit\u00e0 con un brutto sito mobile<\/li>\n<li>il 40% ammette di essere passato ad un competitor a causa di una brutta mobile experience<\/li>\n<li>il 23% dice di \u201caver lanciato maledizioni\u201d allo smartphone trovandosi davanti un sito non funzionante<\/li>\n<\/ul>\n<p><strong>Un sito \u00e8 mobile solo se le pagine, gli elementi che le compongono, la posizione dei menu e l&#8217;articolazione dei contenuti sono ottimizzati ed adattati alla fruizione su smartphone (e tablet)<\/strong>.<\/p>\n<div id=\"attachment_309\" style=\"width: 380px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/sito_mobile_esempio1g.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-309\" class=\"size-full wp-image-370\" title=\"Sito mobile esempio 1\" src=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/sito_mobile_esempio1p.jpg\" alt=\"\" width=\"370\" height=\"261\" \/><\/a><p id=\"caption-attachment-309\" class=\"wp-caption-text\">www.ristorantelacredenza.it &#8211; sito ottimizzato per desktop e mobile<\/p><\/div>\n<div id=\"attachment_310\" style=\"width: 380px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/sito_mobile_esempio2g.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-310\" class=\"size-full wp-image-370\" title=\"Sito mobile esempio 2\" src=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/05\/sito_mobile_esempio2p.jpg\" alt=\"\" width=\"370\" height=\"253\" \/><\/a><p id=\"caption-attachment-310\" class=\"wp-caption-text\">www.igormacchia.com &#8211; sito ottimizzato per desktop e mobile<\/p><\/div>\n<p><br clear=\"all\" \/><br \/>\nIl solito Google fornisce indicazioni puntuali sulle caratteristiche di una buona progettazione mobile. Eccone alcune:<\/p>\n<ul>\n<li>Metti in primo piano i contenuti e le funzioni di cui gli utenti hanno pi\u00f9 bisogno.<\/li>\n<li>Evita i grandi blocchi di testo e utilizza gli elenchi puntati per semplificare la lettura.<\/li>\n<li>Riduci al minimo la necessit\u00e0 di scorrere la pagina ma, se non puoi farne a meno, utilizza esclusivamente lo scorrimento verticale.<\/li>\n<li>Organizza i menu in una chiara struttura gerarchica ed evita i rollover.<\/li>\n<li>Semplifica la navigazione da un livello all\u2019altro del sito con pulsanti \u201cIndietro\u201d e \u201cHome\u201d ben visibili.<\/li>\n<li>Se il sito \u00e8 complesso, inserisci una casella di ricerca ben visibile.<\/li>\n<li>Usa pulsanti centrati di grandi dimensioni e lascia molto spazio intorno per ridurre i click accidentali.<\/li>\n<li>Ingrandisci i pulsanti pi\u00f9 piccoli per estendere l\u2019area selezionabile.<\/li>\n<li>Rendi selezionabile il testo delle caselle di controllo.<\/li>\n<li>Crea un contrasto tra sfondo e testo.<\/li>\n<li>Adatta i contenuti allo schermo facendo in modo che siano leggibili senza che sia necessario utilizzare lo zoom con i movimenti delle dita.<\/li>\n<li>Evidenzia link e pulsanti con formati e colori distinti.<\/li>\n<li>Utilizza effetti 3D e ombreggiatura per i pulsanti<\/li>\n<li>Cerca delle alternative a Flash, dal momento che non \u00e8 supportato da alcuni dispositivi.<\/li>\n<li>Usa HTML5 per l\u2019interattivit\u00e0 e l\u2019animazione.<\/li>\n<li>Adatta il sito per gli schermi orientati sia verticalmente sia orizzontalmente. La variazione di orientamento dello schermo non deve costringere gli utenti a cambiare posizione.<\/li>\n<\/ul>\n<p>Ma questo significa dovere sviluppare un sito per i desktop e uno per i dispositivi mobili?<\/p>\n<h2>E chi ha parlato di due siti?<\/h2>\n<p>Niente panico: non stiamo parlando di due siti. Stiamo parlando di <strong>un solo sito che riconosce i dispositivi sui quali viene caricato e si adatta naturalmente ad essi<\/strong>. I linguaggi disponibili,\u00a0 html5 e css3, librerie javascript e soluzioni lato server, i concetti di <em>adaptive<\/em> e <em>reponsive design<\/em> parallelamente alla evoluzione dei browser consentono di creare agevolmente e in economia <strong>siti che rispondono ai diversi dispositivi con eleganza ed efficacia<\/strong>.<\/p>\n<p>Come sempre la fase cruciale \u00e8 la <strong>progettazione del sito <\/strong>[<a title=\"Sito internet: l\u2019importanza di una buona progettazione\" href=\"http:\/\/www.neamesa.it\/blog\/sito-internet-limportanza-di-una-buona-progettazione\/\" target=\"_blank\">Sito internet: l\u2019importanza di una buona progettazione<\/a>], che deve essere pensato e costruito tanto nell&#8217;insieme come in ogni singolo componente in funzione della sua adattabilit\u00e0 alle diverse condizioni di fruizione. La <strong>professionalit\u00e0 degli sviluppatori<\/strong>, attenti alla qualit\u00e0 del codice html, far\u00e0 il resto.<\/p>\n<blockquote><p>Troppe informazioni? Serve uno schema riepilogativo? Guarda l&#8217;infografica <a title=\"Permalink a Perch\u00e9 non potete fare a meno di un sito mobile \u2013 Infografica\" href=\"http:\/\/www.neamesa.it\/blog\/perche-non-potete-fare-a-meno-di-un-sito-mobile-infografica\/\" rel=\"bookmark\">Perch\u00e9 non potete fare a meno di un sito mobile<\/a>.<\/p><\/blockquote>\n<p style=\"text-align: right;\"><em>Fabio Bosso<\/em><br \/>\n<em><a href=\"http:\/\/www.neamesa.it\">Nea Mesa Comunicazione<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Poche cifre, ma significative: I possessori di smartphone in Europa sono aumentati in un anno del 35%: da 97,7 milioni a Ottobre 2011 a 131,5 milioni a Ottobre 2012. La met\u00e0 degli utenti italiani di telefonia mobile possiede uno smartphone: &hellip; <a href=\"http:\/\/www.neamesa.it\/blog\/perche-avere-un-sito-mobile\/\">Continua a leggere<span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,9],"tags":[36,19,37,15,12,16,46,24,47,48,13,20],"class_list":["post-307","post","type-post","status-publish","format-standard","hentry","category-internet","category-mobile","tag-codice-html","tag-comunicazione-2","tag-css","tag-grafica-2","tag-internet-2","tag-mobile-2","tag-portabilita","tag-progettazione","tag-smartphone","tag-tablet","tag-web","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":0,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}