• Moderatore

    come creare una versione mobile di sito in HTML e CSS

    Buongiorno a tutti,
    vista la caccia di google ai siti non mobile friendly sto cominciando a pensare di dover creare o integrare una versione mobile di un paio di siti, di cui almeno due sopra le 100 pagine, in html.

    Sono siti che solitamente modifico in modo molto attento visto che rappresentano una fetta importante di business. C'è un modo indolore per creare una versione mobile, che piaccia a Google, senza rischiare di duplicare contenuti, perdere posizionamento, fare disastri... etc.. Che risorse mi potete consigliare?

    Tenete presente che ho fatto la prova con il tool di google, il sito attualmente si visualizza su tutti i contenuti ma con molti errori per le versioni mobile.

    Consigli benvenuti, grazie in anticipo 🙂


  • User Attivo

    Ciao Lukros,
    per creare una versione mobile del tuo sito bisogna lavorare di CSS, in modo che, il browser mobile riceva delle regole CSS diverse rispetto a quelle del CSS base.
    Non devi ricreare il tuo sito, altrimenti andresti sicuramente incontro al problema dei contenuti duplicati, come già detto. :wink3:
    Solitamente si utilizzano le media queries, con le quali vai a regolarizzare lo stile in caso di dispositivi mobili, prova a dare un occhiata a questi links:

    http://www.html.it/pag/19466/css-media-queries-le-basi/
    http://www.html.it/pag/33421/stili-per-il-mobile-layout-dimensioni-font/

    Ciao!


  • Moderatore

    Grazie per la risposta Jacko's, il gioco si fa difficile. Mi metto a studiare ma la vedo complessa; già vedo all'orizzonte il primo problema un contenitore ha delle tabelle inserite, quindi come si ridimensiona... calcola che il layout del sito è del 2005 e pur avendo subito aggiustamenti è rimasto quello, una via di mezzo tra CSS e tabelle che ancora ben funziona. Google e le sue manie con il mobile 🙂

    Comunque è colpa mia, per paura di perdere posizionamento non ho mai toccato nulla, ora mi ritrovo che se non lo faccio nel breve perderò posizionamento. Grazie ancora.


  • User Attivo

    @lukros said:

    Grazie per la risposta Jacko's, il gioco si fa difficile. Mi metto a studiare ma la vedo complessa; già vedo all'orizzonte il primo problema un contenitore ha delle tabelle inserite, quindi come si ridimensiona... calcola che il layout del sito è del 2005 e pur avendo subito aggiustamenti è rimasto quello, una via di mezzo tra CSS e tabelle che ancora ben funziona. Google e le sue manie con il mobile 🙂

    Comunque è colpa mia, per paura di perdere posizionamento non ho mai toccato nulla, ora mi ritrovo che se non lo faccio nel breve perderò posizionamento. Grazie ancora.

    Pensa che io manco mi preoccupo del badge "mobile-friendly", a me importa che i siti si visualizzino correttamente anche da mobile. Okay ci sarà da zoommare un po, ma se stile, caratteri e grafica si presentano bene e come da pc a me va bene così 😄

    Il layout è stato creato con le tabelle?

    ps: hai paura di perdere posizionamento perchè non mobile-friendly?


  • Moderatore

    [QUOTE=Il layout è stato creato con le tabelle?
    ps: hai paura di perdere posizionamento perchè non mobile-friendly?[/QUOTE]

    Si, ho paura che non vengano più visualizzati sui mobile, per un altro sito ho ricevuto una mail da google che mi diceva che mi diceva che nel caso non avessi migliorato la visualizzazione sarebbe potuto sparire dalle serp mobile. In quel caso non si visualizzava proprio, ma ho modificato il layout di word press e ho risolto.

    Per questi altri siti invece ho delle tabelle all'interno del contenitore centrale del CSS. Il layout è creato con CSS.
    Un problema...


  • User Attivo

    Addirittura sparire dalle SERP????
    Sicuro te la abbia mandata Google?


  • Moderatore

    Ciao, si abbastanza, da webmaster tool:

    "I sistemi Google hanno testato 105 pagine del tuo sito e riscontrato che il100% delle pagine presenta errori critici di usabilità sui dispositivi mobili.Gli errori in queste 105 pagine incidono notevolmente sulla modalità diutilizzo del tuo sito web da parte degli utenti di dispositivi mobili. Talipagine non verranno considerate ottimizzate per i dispositivi mobili dallaRicerca Google e verranno quindi mostrate e posizionate adeguatamente per gliutenti di smartphone."

    comunque su quel sito ho risolto (non era visualizzato del tutto sui mobile), cambiando layout di wordpress e adeguando.
    Ora il problema si pone sui CSS...


  • User Attivo

    Rifare tutto per me non è la soluzione..come ti dissi pochi giorni fa, nemmeno la stessa google proprio così mobile friendly :wink3:


  • Moderatore

    Ma le mail minatorie arrivano, sarà che matt cutts ha deciso di impaurirci e diciamoci anche che appena decidono di diventare più friendly lo faranno senza problemi....
    Comunque si pone un problema per il futuro. I nostri bellissimi siti statici dovranno diventare almeno più dinamici rispetto al dispositivo, e io sulla dinamica SEO non mi fido molto, o meglio i miei mezzi sono più limitati. L'html per il SEO è bellissimo, è come stare in cucina, togli questo aggiungi quello.
    Be proactive 🙂 facile è!


  • User Attivo

    @lukros said:

    I nostri bellissimi siti statici dovranno diventare almeno più dinamici rispetto al dispositivo, e io sulla dinamica SEO non mi fido molto, o meglio i miei mezzi sono più limitati. L'html per il SEO è bellissimo, è come stare in cucina, togli questo aggiungi quello. Be proactive 🙂 facile è!

    Mi accodo :smile5:


  • User

    Se hai un sito fatto con tabelle è difficile tramite media query trasformarlo "responsive" ti consiglio di creare un sito ad hoc utilizzando il redirect tramite script js dalle tue pagine in una cartella "mobile" (che conterrà il sito sviluppato in div per mobile tramite media query), credo sia la soluzione ottimale e per Google sarai Mobile Frinedly 🙂


  • User Newbie

    la questione non è essere "mobile friendly" per google, la questione è che ogni mese la percentuali di utenti mobile aumentano in maniera considerevole....fornire una versione responsive del sito diventa quasi obbligatorio per poter garantire che i tuoi contenuti siano visibili in modo chiaro e veloce senza dover "impegnarsi" nel zoommare l'area del testo che l'utente deve leggere...

    Se non hai esperienza comincia dalle piccole cose, leggiti qualche esempio/tutorial e con calma comincia a sperimentare. Studia molto bene le soluzioni usate dai siti più famosi per essere sicuro di seguire quel minimo di standard che nel tempo si è andato a creare


  • User Attivo

    anche io avevo un sito tutto fatto con tabelle e quindi non ottimizzato per mobile.
    Sto facendo tutto da capo piano piano perchè avevo già perso traffico ad aprile scorso... non so se era quello il motivo ma non ho trovato altre spiegazioni...


  • Moderatore

    @sissa said:

    anche io avevo un sito tutto fatto con tabelle e quindi non ottimizzato per mobile.
    Sto facendo tutto da capo piano piano perchè avevo già perso traffico ad aprile scorso... non so se era quello il motivo ma non ho trovato altre spiegazioni...

    anche io alla fine ho preso questa strada. Già rifatto la parte in italiano, lavoro lungo complesso e alla fine ben riuscito. Sono partito da un template responsive, rifacendolo da capo praticamente 🙂 Sul traffico devo dirti che secondo me non incidono molto le paventate penalizzazioni di google ma la tendenza: i dati di una ricerca di McKinsey commissionata da GG dicono che il 46% delle persone accede più spesso viasmartphone che con computer/tablet. (vedi fonte thinkwithgoogle).

    :ciauz:


  • User Attivo

    @lukros said:

    Grazie per la risposta Jacko's, il gioco si fa difficile. Mi metto a studiare ma la vedo complessa; già vedo all'orizzonte il primo problema un contenitore ha delle tabelle inserite, quindi come si ridimensiona... calcola che il layout del sito è del 2005 e pur avendo subito aggiustamenti è rimasto quello, una via di mezzo tra CSS e tabelle che ancora ben funziona. Google e le sue manie con il mobile 🙂

    Comunque è colpa mia, per paura di perdere posizionamento non ho mai toccato nulla, ora mi ritrovo che se non lo faccio nel breve perderò posizionamento. Grazie ancora.

    ... quoto tutto quello che hai scritto, sembra quasi lo abbia scritto io ...
    stessa identica situazione, nel mio caso, il sito fù creato da autodidatta scopiazzando idee e codici a destra e manca e correggendo con diversi sistemi, ora però con il mobile mi trovo spaesato e impreparato oltre che in calo nella serp ... 😢
    PS: ho sempre voluto evitare di dare in mano il sito agli espertoni che promettono la prima posizione in 2gg (magari per la durata di 3gg ...), per i costi, per l'affidabilità e durata dei metodi e sopratutto perchè ho sempre pensato che con il tempo investito nello spiegare quello che volevo fare ho sempre fatto in tempo a farmelo +/- da solo ...
    ora invece inizio ad avere qualche dubbio e molto meno tempo da dedicare ... ma prima di arrendermi voglio cercare di capire qlc di più ...

    vi seguo!