• User

    Ottimizzare il sito per iPhone

    Salve a tutti! 🙂

    mi chiedevo se ci fosse nessuno che potesse aiutarmi o mi indicasse come fare per ottimizzare il mio sito per iPhone?

    so che esiste una funzione css3 chiamata media queries. 🙂

    Grazie mille


  • ModSenior

    Ciao Daniela, si nelle specifiche css3 c'è la possibilità di usare la funzione media query per conoscere le dimensioni dello schermo (non solo dei dispostivi mobile) e in base a questa associare un file css al file xhtml piuttosto che un altro.
    Ovvero puoi avere un css per la versione desktop ed uno diverso per la versione mobile/Iphone.

    E' solo uno dei modi.
    Hai il vantaggio che il file xhtml, cioè il contenuto è uno solo, e hai solo un indirizzo url per ogni pagina quindi meno preoccupazioni dal punto di vista seo.
    Lo svantaggio è che spesso alcuni contenuti che mostri nella versione desktop non interessano all'utente mobile (li puoi nascondere, è vero, ma sempre banda ti portano via) inoltre non puoi spingerti e sfruttare tutte le opportunità che la piattaforma mobile ti può offrire.

    Tu hai già valutato tutto e vorresti sviluppare il tuo progetto usando i media query?

    Valerio Notarfrancesco


  • User

    Ciao Valerio, ti ringrazio per la risposta!

    Comunque siii preferirei svilupparlo con le media querie piu che altro perche non ho molto tempo, anche se facendo una ricerca ho visto che esiste JQTouch che ti permette di fare il tuo sito come fosse un' applicazione per iPhone e sarebbe meglio credo....maaaa quindi basta solo che io faccia un foglio di stili apposito per iPhone e poi metta il link che lo carichi quando il sito viene caricato sul dispositivo....

    se vuoi vedere il sito e questo se vuoi darmi qualche indicazione su cosa posso tenere e no

    crestanalex.com

    Grazie 🙂


  • User

    perche il layout deve essere flessibile vero?


  • ModSenior

    Se hai fretta allora i css sono sicuramente il modo più veloce.
    Queste sono le modifiche che devi fare.
    Nella sezione head delle pagine xhtml, dove dichiari il css, sostituiscilo con queste istruzioni:

    <link href="desktop.css" rel="stylesheet" type="text/css" media='screen and (min-width: 481px)'/>
    <link href="mobile.css" rel="stylesheet" type="text/css" media='screen and (max-width: 480px)'/>

    Ecco come funziona.
    La prima riga carica e associa alla pagina il file chiamato desktop.css (il tuo attuale file css) solo se è visualizzata su uno schermo la cui larghezza minima è 481px. Quindi per tutti gli schermi più grandi di 480px applica il css per i desktop.

    La secondo riga invece carica e associa il file chiamato mobile.css solo se la pagina è visulizzata su schermi con larghezza inferiore.

    Per provare creati un file css vuoto chiamato mobile.css e fai la prova. Funziona anche provando a ridimensionare la finestra del browser senza che tu debba testare tutto sull'Iphone.
    Usa per un browser moderno, Chrome, Safari o Firefox.

    Non ho capito invece la tua seconda domanda, questa:
    @DanielaM said:

    perche il layout deve essere flessibile vero?

    Valerio Notarfrancesco


  • User

    Grazie grazie mille valerio mi sei stato di grandissimo aiuto! 😄 😄

    no la mia seconda domanda si riferifa al fatto che in giro vedo spesso che parlando di media queries, parlano di layout flessibili e quindi mi chiedevo se dovessi cambiare il mio con un layout flessibile.


  • ModSenior

    Intanto il tuo attuale layout non lo tocchi per niente, quindi il tuo lavoro è preservato.
    Devi crearti un nuovo css per l'Iphone, e dato le dimensioni dello schermo proprie di uno smartphone alcune tecniche che vanno bene per i desktopo non sono applicabili, o risulterebbero poco pratiche per l'utente.
    Io partirei con un layout flessibile per il css mobile.

    Valerio Notarfrancesco


  • User

    Ciao Valerio scusami il ritardo 🙂 ......comunque grazie mille davvero gentile!

    quindi per renderlo flessiblile potrei usare misure in percentuali?


  • ModSenior

    Si, esatto in percentuale perché in questo modo si può adattare quando l'Iphone viene usato in orizzontale senza dover predisporre un altro css solo per questo caso.
    Per completezza, nel caso tu volessi invece usare un css solo quando lo schermo è girato, puoi usare sempre con i media query usando la proprietà orientation:landscape.

    Un altro vantaggio è che il sito si può adattare anche a tutta la miriade di altri smartphone con schermi e risoluzioni differenti.

    Valerio Notarfrancesco


  • User

    Ciao Valerio ti ringrazio davvero!!! 🙂 sono riuscita a farlo e mi e riuscito perfettamente, ne ho fatto uno con le media queries e un altro con JQTouch, solo un ultima cosa quello con le media queries non c' è nessun problema di visualizzazzione proprio perché prende un altro css, il mio problema è per l'altro sito in JQTouch come faccio a far si che si colleghi a quello quando sono con un iPhone?


  • ModSenior

    Prego davvero.
    Allora devi rilevare il dispositivo che visualizza il tuo sito, cioè se è un computer desktop oppure un dispositivo mobile e in base a questo dirottare la visita sulla versione normale del sito oppure sulla versione mobile.

    Per farlo devi usare un linguaggio lato server. Tu sul tuo server cosa hai a disposizione tra php, asp, ruby, ecc. ecc?

    Valerio Notarfrancesco


  • User

    Nel mio server ho linguaggio php!
    Poi mi avevano parlato anche di uno script php che fa il redirect....e quello che serve?


  • ModSenior

    Hai il php? Perfetto.
    Usa allora lo script php "Detect Mobile User Agents & Browsers” che trovi qui detectmobilebrowsers.mobi

    Valerio Notarfrancesco


  • User

    Ciao Valerio di grande aiuto ancora una volta, Grazie!
    un ultima cosa, mi chiedevo se esistesse il modo per fare una galleria per un sito fatto con il framework JQTouch senza usare php?

    Grazie


  • ModSenior

    Prego Daniela.
    Non conosco JQTouch, preferisco fare le cose a mano. Adesso non so consigliarti uno script in particolare per una galleria, ma se dovessi realizzarne uno partirei dagli esempi messi a disposizione dalla mamma: http://developer.apple.com/safaridemos/

    Il problema maggiore nell'usare javascript sugli smartphone, perfino sul potente Iphone4, è che basta davvero pochissimo per rendere il sito lento e scattoso rovinando così l'esperienza utente e facendo crollare il rendimento del sito.

    Valuta anche l'uso di un video Quicktime, so che non è la stessa cosa, ma a te o al cliente potrebbe piacere ugualmente.

    Valerio Notarfrancesco