due chiacchiere

Miglioramenti mobili al tema

Da un po’ non mettevo mano al tema di questo blog, probabilmente perché da quando ho lanciato questa terza generazione della veste grafica, la considero alquanto stabile da non essere più toccata 🙂 Ma essendo stato recentemente dotato di iPhone, non potevo non sfruttare l’occasione per dare una limatina ai dettagli estetici visti dal piccolo schermo del telefono tuttofare. Come forse saprai, questo sito non cambia più aspetto a seconda che il dispositivo con cui è acceduto sia fisso o mobile (a meno che non sia un vecchio telefonino con wap, in quel caso si, vedrai una cosa diversa e semplificata). Però ho deciso di eliminare la barra qui a destra, quando il browser è Safari Mobile, per dare più spazio a quello che conta. Che ne pensi?

Commenti

  1. Andrea Pinti ha detto:

    Hai fatto bene 🙂
    E sto lasciando io commento dal mio iPhone

  2. CyberAngel ha detto:

    Decisamente meglio. Confermo.

  3. camu ha detto:

    Grazie cari, siete i miei “mobile testers” di fiducia 🙂 Voi che avete esperienza con l’iTelefono, pensate ci siano altre cose che si potrebbero migliorare? Stavo pensando di rimuovere lo sfondo (giusto per risparmiare qualche kb) e qualche altra immagine qua e la…

  4. Davide Salerno ha detto:

    Anche io concordo nell’apprezzare la miglioria.

    Che tecnica hai utilizzato per farlo? Da CSS o PHP?

  5. kakarothx ha detto:

    Ottimo! adesso dall’interfono i caratteri si vedono + grandi senza la necessità di zoomare. Grande idea Camu. Sono curioso anche io, hai modificato il CSS?

  6. camu ha detto:

    Beh, ho usato un approccio “misto”: con PHP vedo che tipo di browser sta accedendo la pagina, e se è un iPhone “inietto” un po’ di CSS in linea che sovrascrive alcune delle proprietà definite in quello di default che vedono gli altri browser. In pratica un paio di punturine di “iBotox” qua e la nei tag per renderli più confacenti al dispositivo mobile 🙂

    1. Andrea Pinti ha detto:

      @camu: se vai di display:none e simile, non conviene fare un controllo per iPhone e poi sparare solo le classi dove necessario?

      1. camu ha detto:

        Hmmm spiegati meglio 🙂 sono aperto a tutte le migliorie… Una cosa che devo capire e’ se il contenuto di un div con display none viene comunque caricato dal browser (immagini ecc!) Perche’ se cosi’ fosse, non avrei risolto il problema di ridurre I tempi di caricamento e la banda “mobile” consumata

        1. Andrea Pinti ha detto:

          @camu: Ho spizzato ora il sito con l’user agent “iPhone” su Safari per Mac (ma si puo’ fare anche su Windows). Ho visto che in pratica hai spruzzato il classico display:none; su div#sidebar.

          Gia’ che carica lo stesso tutta la sidebar e la nasconde, non ti converrebbe iniettare un class=”hide” e poi andare di ‘#sidebar.hide {display:none;} nello stylesheet? Almeno non usi codice inline.

          O ancora meglio, potresti mettere la chiamata alla sidebar sotto if (vai a scrivere una variabile quando si rileva l’iPhone) e non caricare proprio tutta la parte, dovendo sempre comunque inserire la classe su div#content per aumentare il font. E comunque l’iphone dispone di una roba che auto-modifica la grandezza del font in caso tu sia su dispositivi mobili (webkit). http://css-infos.net/property/-webkit-text-size-adjust

        2. camu ha detto:

          @Andrea Pinti: esatto, ottimo suggerimento 🙂 Farò così…

Lascia un commento