Case Study: aggiornamento di lynnandtonic.com 2017

Negli ultimi dieci anni ho realizzato dieci versioni diverse del mio sito web. Lo chiamo il mio portafoglio annuale "aggiorna" poiché il contenuto di solito rimane lo stesso. Comincio sempre con un file CSS vuoto.

alcune iterazioni precedenti di lynnandtonic.com

Lo faccio ogni anno per alcuni motivi:

  • per assicurarmi di completare almeno un progetto non lavorativo
  • sperimentare e apprendere nuove tecniche (alcuni aggiornamenti straordinari sono stati i miei primi tentativi di responsive design, flexbox e quest'anno, griglia CSS)
  • un anno è il periodo di tempo giusto perché esista una versione in cui non mi sento triste quando mi siedo per cambiarla

Inoltre, una cosa davvero fantastica nel rifare il mio sito è che è completamente mio e posso fare tutto quello che voglio.

Una percentuale molto piccola di visitatori del mio portafoglio sono appassionati di aeroporti, spettatori di Top Chef e famiglia (ciao mamma). Ma il pubblico principale è in gran parte web designer, sviluppatori e recruiter di tecnologia. Queste sono persone che sanno come sono costruiti i siti Web e potrebbero richiedere un minuto in più per ispezionare le cose. Volevo progettare attorno a quello.

Concetto e ispirazione

Da anni diciamo al mondo che un sito web non ha bisogno di apparire identico in ogni browser per ogni utente. Con un design reattivo e un miglioramento progressivo, gli utenti vedranno le cose in modo diverso. Non tutti hanno bisogno di provare l'intero sito.

Ma potrei far desiderare alle persone di sperimentarlo tutto? Potrei sorprenderli portando questi concetti ad un estremo assurdo?

Adoro ridimensionare il mio browser e vedere come risponde il layout e come il designer ha deciso quando le cose cambiano e cosa viene eliminato o aggiunto. So che anche molte altre persone lo fanno. Inizialmente pensavo di poter sovvertire le aspettative facendo in modo che i punti di interruzione onnipresenti di telefoni, tablet e desktop attivassero layout completamente diversi con stili, colori e trattamenti di tipo unici. Tre siti in uno.

I cambiamenti, per quanto drammatici possano essere, erano ancora troppo convenzionali. Ti aspetti già che accada qualcosa sulle dimensioni del tablet e poi di nuovo per i telefoni.

Di recente avevo visto un video di YouTube sull'effetto Kuleshov, un termine nel montaggio cinematografico che descrive "un fenomeno in base al quale gli spettatori ottengono più significato dall'interazione di due scatti in sequenza che da un singolo colpo in isolamento". la mia testa.

Esiste un significato preesistente per un sito di avere tre (o qualche altro) layout distinto: supporto di dispositivi comuni. Ma cosa significherebbe che ci siano 10, 15 o, in definitiva, 21 disegni distinti che “siedono” fianco a fianco per farti scoprire uno alla volta, uno dopo l'altro. Ognuno può essere irrilevante da solo, ma sono le relazioni (e le differenze) con quelle a sinistra / destra e alle 18 altre che rendono ognuna degna di essere vista.

Un'anteprima di lynnandtonic.com

Esecuzione dell'idea

Sapevo già che era possibile utilizzare i CSS per trasformare il markup di base in qualcosa di straordinario. CSS Zen Garden ce lo ha mostrato ripetutamente per anni. Un altro mio progetto collaterale, a.singlediv.com, porta questo concetto ad estremi ridicoli (intuisco uno schema qui).

Quindi l'esecuzione di questa riprogettazione è iniziata con HTML di base. Una cosa che ho imparato negli anni di sperimentazione con i CSS è che puoi ottenere molto senza sacrificare il markup pulito. Ecco cosa sono atterrato. s all'interno di

e

mi permetterebbe di modellare ogni riga in modo diverso se ne avessi bisogno e l'elemento consentirebbe un'immagine reattiva più fornire ulteriori: prima e: dopo pseudo-elementi (che non consente).


  

Suppongo che dovrei aggiungere un disclaimer qui. Sono l'unico a toccare questo codice, quindi ho impostato le cose nel modo in cui ha funzionato per me. Naturalmente ci sono modi diversi e sicuramente migliori per fare tutto questo.

Uso Stylus per la preelaborazione CSS (e lo farò nei seguenti esempi). Ho prima creato un home.styl in cui verrebbero importati un reset e variabili, sarebbero stati dichiarati gli stili di pagina di base e dove sarebbero state impostate le media query. Oltre alle altre pagine, verrebbe importato in un file main.styl che verrà compilato e ridotto al minimo. La struttura si presenta così:

St _styl
   componenti
   globali
   pagine
     about.styl
     home.styl
     thoughts.styl
     work.styl
   main.styl

Ho pianificato di utilizzare la griglia CSS per questa riprogettazione, quindi ho creato un layout di fallback super-base da mostrare per impostazione predefinita (separato nel suo file in una directory home) e ho inserito tutto il resto in una dichiarazione @supports.

St _styl
   pagine
     casa
       fallback.styl
     home.styl
   main.styl
/ * home.styl * /
@import 'home / fallback'
@supports (display: grid)
  body.home
    [stili di base qui]

Se un browser non supporta la visualizzazione: griglia renderà il fallback, che assomiglia a questo:

Con un fallback in atto, ora potrei concentrarmi su molti layout diversi. Per mantenere le cose gestibili, ho diviso ogni layout in un suo file insieme a fallback.styl nella directory home (non importa il mio ridicolo nome).

St _styl
   pagine
     casa
       b-and-w-and-gold-all-over.styl
       big-nav.style
       big.styl
       blockhead.styl
       bolt.style
       cutout.styl
       diagonal.styl
       disguise.styl
       fallback.styl
       cinquanta-cinquanta.styl
       half.styl
       L-Y-N-N.stile
       landscape.styl
       movie.styl
       pop-out.styl
       rotate.styl
       stranger.styl
       terzo. Stile
       triangle.styl
       white-bars.styl
       white-box.styl
       x.styl
     home.styl
   main.styl

Quindi sono stato in grado di importare ogni layout nella sua media query:

/ * home.styl * /
@supports (display: grid)
  body.home
    [stili di base qui]
  schermo @media e (larghezza massima: 400px)
    @import 'home / diagonal'
  schermo @media e (larghezza minima: 401px) e (larghezza massima: 500px)
    @import 'home / L-Y-N-N'
  schermo @media e (larghezza minima: 501px) e (larghezza massima: 600px)
    @import 'home / blockhead'
  + 18 in più (2300px è la media query più ampia)

Ciò rimuove eventuali collisioni che potrebbero verificarsi ed elimina la necessità di eseguire sostituzioni di massa. C'è uno stile ripetuto in vari layout, ma ho trovato accettabile mantenere le cose chiare e organizzate. Ogni punto di interruzione utilizza solo il CSS necessario per il suo layout specifico.

Apprendimento ulteriore

Se sei interessato a scavare un po 'di più nel CSS o ad ispezionare singoli layout, ho reso pubblico il mio repository su GitHub.

Non approfondirò qui come usare la griglia poiché Rachel Andrew e Jen Simmons hanno scritto e parlato ampiamente sull'argomento. Vedi la griglia di Rachel per esempio e il laboratorio di layout sperimentale di Jen come buoni punti di partenza.

Patrick Brosset di Mozilla ha creato un video che suddivide l'uso della griglia per uno dei layout del mio sito, il che è piuttosto interessante:

Ho programmato di elaborare alcune delle mie parti preferite della riprogettazione qui, ma penso di voler sorprendere le persone mentre esplorano. Quindi, se non l'hai ancora verificato, ti preghiamo di farlo su lynnandtonic.com.

Risposta

Spero sempre che il mio lavoro ispiri le persone a pensare diversamente al loro mezzo e ai loro strumenti e a incoraggiarli a sperimentare ciò che è possibile.

La risposta è stata travolgente ed è davvero meraviglioso vedere persone scoprire e apprezzare il sito. Sono così grato per le parole gentili e incoraggianti di tutti.

Un feedback che ho ricevuto è che molte persone non ridimensionano affatto il proprio browser. È vero! Ed è del tutto ok. Il sito è ancora funzionante anche se non conosci nessuno degli altri layout esistenti. Beh, per essere onesti, esiste un layout che renderebbe un'esperienza super confusa (i fan di Stranger Things potrebbero sapere di quale sto parlando). Ma pensando al mio pubblico, ho pensato che il rischio fosse basso.

Con la maggior parte del mio lavoro, ci sono persone che chiedono "Perché farlo?" Ho un altro post nelle opere che si tuffa nelle molte ragioni, ma per ora: a volte è divertente fare cose strane.

Grazie per aver visitato il sito. Significa il mondo.

Fino alla prossima riprogettazione,
❤ Lynn

Originariamente pubblicato su blog.andyet.com il 9 gennaio 2018.