Ricreare l’Horizontal scroll layout del NewMyspace

By Andrea Marchetti
@marchetti_design

Ricreare l’Horizontal scroll layout del NewMyspace

La settimana scorsa è stato lanciato il nuovo Myspace, il layout del rinnovato social è veramente Cool. Sotto vari aspetti il sito è innovativo. La gestione della musica integrata e l’accattivante sistema di navigazione sono un passo avanti rispetto agli altri social, primo fra tutti Facebook.

Per questo non ho resistito e ho provato a ricostruire la struttura del sito a navigazione orizzontale. Questo è il risultato.

A differenza del MySpace vero questa struttura è anche Responsive, cioè si adatta ai vari dispositivi mobile.

Nella struttura abbiamo 3 diverse tipologie di pagine:

La Copertina

Questa è la prima pagina del layout. L’immagine Copertina si ridimensiona in altezza e nel box sovrapposto abbiamo il messaggio di benvenuto.

Le News

Alla destra dell’immagine di copertina troviamo le news. Queste sono disposte (grazie a jquery e isotope) in una griglia Responsive che allinea le news una sotto l’altra ottimizzando lo spazio utilizzato.

La Pagina interna

Cliccando sulle voci del menu a sinistra o utilizzando lo scroll del mouse, la struttura scrolla orizzontalmente. Le pagine interne possono essere con o senza immagine. L’immagine si ridimensiona in altezza come quella di copertina.

Responsive

La struttura è Responsive: si ridimesiona in base al device con la quale viene visualizzata. Su tablet le news vengono disposte su due colonne mentre su Smartphone vengono impilate una sopra l’altra.

Il file per il download è disponibile qui di seguito, per qualsiasi domanda/riflessione utilizzate i commenti… A voi piace il nuovo Myspace?

Stay tuned!

Commenti

  1. Avatar velvert ha detto:

    ciao il tuo lavoro è meraviglioso, volevo chiederti una cosa. Si potrebbe inserire un blog in questo layout? Tipo come il tuo, con post e commenti. Grazie mille

  2. Avatar carmelo ha detto:

    complimenti.. per la grafica del blog troppo cool :), bello anche l’articolo cmq

  3. Avatar klaus ha detto:

    Ciao il tuo lavoro è fantastico, complimenti.

  4. Avatar Martina ha detto:

    ciao,

    volevo ringraziarti con un “like” ma su chrome dà problemi. 🙂 ho condiviso comunque il tuo articolo

    In sostanza, mille grazie per questi tutorial!

    • Avatar Martina ha detto:

      ah, una domanda, il fatto che le pagine layout1, layout2, e contatti non compaiono tramite scroll continuo (partendo dalla home), è voluto?

      • Andrea Marchetti ha detto:

        Ciao Martina,
        ho testato il layout su Chrome, Firefox e Safari (Mac). Per mancanza di tempo non ho testato la struttura su tutti i browser, ci possono essere dei bug.. su che browser ti da problemi?

        • Avatar Martina ha detto:

          Ciao, ho letto ora la risposta… non mi ricordo più 🙂

          Volevo chiederti, ho visto che myspace ha un fantastico menu a piè pagina. Secondo te come posso realizzarlo?

  5. Avatar David ha detto:

    Ciao e complimenti per il layout. Solo una cosa. Vorrei ricreare l’effetto di myspace nel far il resize e modificando il layout dei singoli div al ridimensionare della finestra. Bisogna sicuramente lavorare su isotope ma non saprei come. Hai la soluzione? Grazie e ancora complimenti.

  6. Avatar Alessio ha detto:

    Ciao Andrea, complimenti!
    Molto bello il tuo template! Ma ho notato che su chrome mi da gli stessi errori riportati precedentemente da Martina! (pagine layout1, layout2, e contatti non compaiono tramite scroll continuo,partendo dalla home)
    Mentre se utilizzo Mozilla il problema non si presenta.
    Come si può risolvere l’errore?
    Anticipatamente Grazie.

Rispondi a Martina Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Share