Studiu de caz: reîmprospătare lynnandtonic.com 2017

În ultimii zece ani, am realizat zece versiuni diferite ale site-ului meu. Îl numesc portofoliul meu anual „reîmprospătare”, deoarece conținutul rămâne de obicei același. Încep întotdeauna cu un fișier CSS gol.

unele iterații anterioare ale lynnandtonic.com

Fac acest lucru în fiecare an din câteva motive:

  • pentru a mă asigura că voi finaliza cel puțin un proiect care nu lucrează
  • să experimentez și să învăț tehnici noi (câteva actualizări de standout au fost primele mele încercări de proiectare receptivă, flexbox, iar anul acesta, grilă CSS)
  • un an este aproximativ timpul potrivit pentru ca să existe o versiune în care nu mă simt trist odată ce mă așez să o schimb

De asemenea, un lucru cu adevărat grozav în ceea ce privește refacerea propriului meu site este că este pe deplin al meu și pot face orice doresc.

Un procent foarte mic de vizitatori ai portofoliului meu sunt pasionații aeroportului, telespectatorii de top Chef și familia (salut, mamă). Dar publicul principal este copleșitor de web designeri, dezvoltatori și recrutori de tehnologie. Este vorba despre oameni care știu cum sunt construite site-urile web și ar putea dura un minut în plus pentru a inspecta lucrurile. Am vrut să proiectez în jurul acestui lucru.

Concept și inspirație

De ani buni, spunem lumii că un site web nu trebuie să arate exact în fiecare browser pentru fiecare utilizator. Cu un design receptiv și îmbunătățirea progresivă, utilizatorii vor vedea lucrurile diferit. Nu toată lumea trebuie să experimenteze întregul site.

Dar aș putea face ca oamenii să dorească să experimenteze toate acestea? Aș putea să îi surprind ducând aceste concepte într-o extremă absurdă?

Îmi place să redimensionați browser-ul și să văd cum reacționează aspectul și cum a decis designerul când lucrurile se schimbă și ce se adaugă sau se adaugă. Știu că și alte persoane fac asta. Inițial am crezut că pot subverta așteptările făcând punctele de întrerupere omniprezente ale telefonului, tabletei și desktopului să declanșeze machete complet diferite, cu stiluri, culori și tratamente tip unice. Trei site-uri într-unul singur.

Schimbările, oricât de dramatice ar fi fost, se simțeau încă prea convenționale. Deja te aștepți să se întâmple ceva la dimensiunea tabletei și apoi din nou pentru telefoane.

Am vizionat recent un videoclip YouTube despre Efectul Kuleshov, un termen în editarea de film care descrie „un fenomen prin care telespectatorii obțin mai mult sens din interacțiunea a două fotografii secvențiale decât dintr-o singură lovitură izolat”. capul meu.

Există o semnificație preexistentă pentru ca un site să aibă trei (sau câteva alte) machete distincte: suport pentru dispozitive comune. Dar ce ar însemna să existe 10, 15 sau, în cele din urmă, 21 de modele distincte, care „stau” cot la cot pentru ca tu să descoperi unul câteodată, unul după altul. Fiecare poate fi de nerecuperat de la sine, dar relațiile (și diferențele) cu cele din stânga / dreapta și ale celorlalți 18 fac ca fiecare să merite privit.

O previzualizare a lynnandtonic.com

Executarea ideii

Știam deja că este posibil să folosesc CSS pentru a transforma marcajul de bază în ceva extraordinar. CSS Zen Garden ne-a arătat acest lucru de mai mulți ani. Un alt proiect lateral al meu, a.singlediv.com, duce acest concept la extreme ridicole (simt un model aici).

Așadar, executarea acestui reproiectare a început cu HTML de bază. Un lucru pe care l-am învățat de-a lungul anilor experimentând CSS este că poți realiza multe fără a fi nevoie să sacrifici o marcare curată. Iată ce am debarcat. s în interiorul

și

mi-ar permite să stilez fiecare linie în mod diferit dacă aș avea nevoie, iar elementul ar permite o imagine receptivă plus să furnizeze suplimentar: înainte și: după pseudo-elemente (pe care nu le permite).


  

De asemenea, cred că ar trebui să adăugăm o exonerare aici. Sunt singurul care atinge acest cod, așa că am configurat lucrurile așa cum au funcționat pentru mine. Desigur, există modalități diferite și cu siguranță mai bune de a face toate acestea.

Folosesc Stylus pentru preprocesarea CSS (și în exemplele următoare). Mai întâi am creat un home.styl unde o resetare și variabile ar fi importate, vor fi declarate stiluri de pagină de bază și unde vor fi configurate interogările media. Acesta, plus celelalte pagini, ar importa într-un main.styl care este compilat și minimizat. Structura arată astfel:

 _stil
   componente
   globale
   pagini
     despre.stil
     acasă.stil
     gânduri.stil
     lucru.stil
   principal.stil

Mi-am propus să folosesc grila CSS pentru această reproiectare, așa că am creat un aspect de bază de bază superbașal, care să se afișeze în mod implicit (separat în fișierul propriu într-un director de acasă) și am plasat orice altceva în interiorul unei declarații @supports.

 _stil
   pagini
     acasă
       fallback.styl
     acasă.stil
   principal.stil
/ * home.styl * /
@import „acasă / fallback”
@supports (afișare: grilă)
  body.home
    [stiluri de bază aici]

În cazul în care un browser nu acceptă afișarea: grilă va genera efectul de retragere, care arată astfel:

Cu un fallback în vigoare, aș putea acum să mă concentrez asupra multor machete diferite. Pentru a menține lucrurile ușor de gestionat, am împărțit fiecare aspect în propriul fișier alături de fallback.styl din directorul de acasă (nu mă deranjează numirea mea ridicolă).

 _stil
   pagini
     acasă
       b-și-w-și-aur-all-over.styl
       mare-nav.style
       mare.stil
       blockhead.styl
       bolț.stil
       decupaj.stil
       diagonală.stil
       deghizare.styl
       fallback.styl
       cincizeci și cincizeci.stil
       jumătate.stil
       L-Y-N-N.stil
       peisaj.stil
       film.styl
       pop-out.styl
       rotiți.stil
       străin.stil
       al treilea.stil
       triunghi.stil
       baruri albe.stil
       alb-cutie.stil
       x.stil
     acasă.stil
   principal.stil

Apoi am putut importa fiecare aspect în interogarea media proprie:

/ * home.styl * /
@supports (afișare: grilă)
  body.home
    [stiluri de bază aici]
  Ecran @media și (lățime maximă: 400px)
    @import „acasă / diagonală”
  Ecran @media și (lățime min: 401px) și (lățime maximă: 500px)
    @import 'acasă / L-Y-N-N'
  Ecranul @media și (lățimea min: 501px) și (lățimea maximă: 600px)
    @import „acasă / blocaj”
  + Încă 18 (2300px fiind cea mai largă interogare media)

Acest lucru elimină orice coliziune care s-ar putea întâmpla și elimină nevoia de a depăși masive. Există unele modele repetate pe diverse planuri, dar am considerat că este acceptabil să păstrezi lucrurile clare și organizate. Fiecare punct de pauză folosește doar CSS de care are nevoie pentru aspectul său specific.

Învățare ulterioară

Dacă sunteți interesat să săpați în CSS un pic mai mult sau să inspectați machete individuale, mi-am făcut publicitatea pe GitHub.

Nu voi intra în modul de utilizare a grilei aici, deoarece Rachel Andrew și Jen Simmons au scris și au vorbit pe larg despre acest subiect. Consultați Grila lui Rachel după exemplu și Laboratorul de dispunere experimentală a lui Jen ca locuri bune pentru a începe.

Patrick Brosset din Mozilla a creat un videoclip prin care a fost descrisă utilizarea grilei pentru una dintre aspectele site-ului meu, care este destul de mișto:

Am plănuit să elaborez pe unele dintre părțile mele preferate ale reproiectării de aici, dar cred că vreau ca oamenii să fie surprinși în timp ce explorează. Așadar, dacă nu l-ați verificat încă, vă rugăm să faceți la lynnandtonic.com.

Raspuns

Sper întotdeauna că munca mea îi va inspira pe oameni să se gândească la mijloacele și instrumentele lor în mod diferit și să îi încurajeze să experimenteze cu ce este posibil.

Răspunsul a fost copleșitor și este cu adevărat minunat să vezi oamenii descoperind și bucurându-se de site. Sunt atât de recunoscător pentru cuvintele amabile și încurajatoare ale tuturor.

Un feedback am primit este faptul că o mulțime de oameni nu își redimensionează browserele deloc. Este adevărat! Și este în regulă. Site-ul este încă funcțional, chiar dacă nu știți că există niciunul dintre celelalte machete. Ei bine, pentru a fi corect, există un aspect care ar face o experiență super confuză (fanii Stranger Things ar putea ști despre care vorbesc). Dar, cu publicul în minte, m-am gândit că riscul este scăzut.

Cu cea mai mare parte a activității mele, există oameni care întreabă „De ce face asta?” Am o altă postare în lucrările care se bazează în multe motive, dar deocamdată: uneori este distractiv să faci lucruri ciudate.

Vă mulțumim pentru verificarea site-ului. Înseamnă lumea.

Până la următoarea reproiectare,
❤ Lynn

Publicat inițial pe blog.andyet.com pe 9 ianuarie 2018.