Studija slučaja: osvježiti lynnandtonic.com 2017

U posljednjih deset godina napravio sam deset različitih verzija svoje web stranice. Ja to zovem svojim godišnjim portfeljem "osvježi", jer je sadržaj obično isti. Uvijek počinjem s praznom CSS datotekom.

neke dosadašnje iteracije lynnandtonic.com

To radim svake godine iz nekoliko razloga:

  • kako bih osigurao da ću dovršiti barem jedan neradni projekt
  • eksperimentirati i naučiti nove tehnike (nekoliko osvježenih izdvajanja bili su moji prvi pokušaji responzivnog dizajna, flexbox, a ove godine CSS mreže)
  • godina otprilike je pravo vrijeme da postoji verzija u kojoj se ne osjećam tužno kad sjednem da je promijenim

Također, uistinu sjajna stvar u vezi s prepravljanjem vlastite web stranice je da je ona u potpunosti moja i mogu raditi što god želim.

Vrlo mali postotak posjetitelja mog portfelja su entuzijasti na aerodromima, gledatelji vrhunskog kuhara i obitelj (bok, mama). Ali primarna publika je neodoljivo web dizajneri, programeri i tehnološki regrutori. To su ljudi koji znaju kako se grade web stranice i možda će im trebati dodatnih minuta vremena za uvid u stvari. Htio sam dizajnirati oko toga.

Koncept i inspiracija

Godinama govorimo svijetu da web stranica ne treba izgledati potpuno isto u svakom pregledniku za svakog korisnika. Korisnik će uz prilagodljiv dizajn i progresivno poboljšavanje stvari vidjeti drugačije. Ne moraju svi iskusiti cjelovitost web mjesta.

Ali mogu li natjerati ljude da sve to dožive? Mogu li ih iznenaditi uzimajući ove koncepte do apsurdne krajnosti?

Volim promijeniti veličinu preglednika i vidjeti kako reagira izgled i kako je dizajner odlučio kada se stvari promijene, a što padne ili doda. Znam da i mnogi drugi ljudi to rade. U početku sam mislio da mogu poništiti očekivanja stvarajući sveprisutne točke prekida za telefon, tablet i radnu površinu potpuno različite izglede s jedinstvenim stilovima, bojama i vrstama tretmana. Tri stranice u jednom.

Promjene, koliko god dramatične mogle biti, i dalje su se osjećale previše konvencionalnim. Već očekujete da će se nešto dogoditi u veličini tableta, a zatim opet za telefonima.

Nedavno sam gledao videozapis na YouTubeu o Kuleshovom efektu, terminu u uređivanju filmova koji opisuje „fenomen kojim gledatelji dobivaju više značenja iz interakcije dvaju uzastopnih kadrova, nego iz pojedinačnog snimka u izolaciji.“ Metaforično zvono zvučalo je u moja glava.

Postoji prethodno značenje da web lokacija ima tri (ili nekoliko više) različitih izgleda: podržavanje uobičajenih uređaja. Ali što bi značilo da postoji 10, 15 ili u konačnici 21 različit dizajn koji će vam „sjesti“ jedan pored drugog, kako biste otkrili jedan po jedan, jedan za drugim. Svaka od njih možda je sama po sebi neuobičajena, ali veze (i razlike) s onima s lijeve / desne strane i s 18 ostalih čine one koje svakoga vrijedi pogledati.

Pregled web stranice lynnandtonic.com

Izvršavanje ideje

Već sam znao da je moguće pomoću CSS-a pretvoriti osnovne oznake u nešto izvanredno. CSS Zen Garden to nam je više puta pokazao godinama. Drugi moj sporedni projekt, a.singlediv.com, dovodi ovaj koncept do smiješnih krajnosti (ovdje osjećam uzorak).

Dakle, izvršavanje ovog redizajna započelo je osnovnim HTML-om. Jedna stvar koju sam naučio tijekom godina eksperimentiranja s CSS-om je da možete postići puno bez da morate žrtvovati čistu markup. Evo što sam sletio. Unutar s

i

omogućilo bi mi da svaki redak drugačije stiliziram ako mi treba, a element omogućio bi da odazovem sliku plus pružio dodatno: prije i: nakon pseudo-elemenata (što ne dopušta).


  

Pretpostavljam da bih ovdje trebao dodati i izjavu o odricanju odgovornosti. Ja se jedini dotičem ovog koda, tako da sam stvari postavio onako kako je meni funkcioniralo. Naravno, postoje različiti i sigurno bolji načini da se sve to napravi.

Koristim Stylus za CSS predradnju (i to će biti u sljedećim primjerima). Prvo sam stvorio home.styl gdje bi se uvezli resetiranje i varijable, deklarirali bi se osnovni stilovi stranice i gdje bi se postavili medijski upiti. To bi, zajedno s ostalim stranicama, uvelo u jedan main.styl koji se sastavlja i minimizira. Struktura izgleda ovako:

 _styl
   komponente
   globalni
   stranica
     o.styl
     home.styl
     misli.styl
     rad.styl
   glavni.styl

Planirao sam koristiti CSS rešetku za ovaj redizajn, tako da sam stvorio super osnovni rezervni izgled koji će se prema zadanom prikazivati ​​(odvojen u vlastitu datoteku u kućnom direktoriju), a sve ostalo sam smjestio unutar deklaracije @supports.

 _styl
   stranica
     kući
       nadoknada.styl
     home.styl
   glavni.styl
/ * home.styl * /
@import 'home / backback'
@supports (prikaz: mreža)
  body.home
    [osnovni stilovi ovdje]

Ako preglednik ne podržava zaslon: rešetka će prikazati povratnu mogućnost, koja izgleda ovako:

Sa rezervnim dijelom sada bih se mogao usredotočiti na mnogo različitih izgleda. Da bih stvari održao upravljivo, podijelio sam svaki izgled u svoju datoteku, uz pomoć backback.styl u kućnom direktoriju (ne smeta mi moje smiješno imenovanje).

 _styl
   stranica
     kući
       b-i-w-i-gold-all-over.styl
       big-nav.style
       veliki.styl
       blok.styl
       bolt.style
       izrez.styl
       dijagonalno.styl
       prerušiti se.styl
       nadoknada.styl
       pedeset-pedeset.styl
       pola.styl
       L-Y-N-N.stil
       krajolik.styl
       film.styl
       pop-out.styl
       zakretanje.styl
       stranac.styl
       treće.styl
       trokut.styl
       bijele šipke.styl
       bijela kutija.styl
       x.styl
     home.styl
   glavni.styl

Tada sam uspio uvesti svaki izgled u svoj medijski upit:

/ * home.styl * /
@supports (prikaz: mreža)
  body.home
    [osnovni stilovi ovdje]
  @media zaslon i (max. širina: 400px)
    @import 'dom / dijagonala'
  @media zaslon i (minimalna širina: 401px) i (max. širina: 500px)
    @import 'dom / L-Y-N-N'
  @media zaslon i (minimalna širina: 501px) i (max. širina: 600px)
    @import 'dom / blokada glave'
  + Još 18 (2300px najširi medijski upit)

To uklanja eventualne sudare koji se mogu dogoditi i eliminira potrebu masovnog zaobilaženja. Ponavljaju se različiti stilovi u različitim izgledima, ali smatrao sam prihvatljivim da stvari budu jasne i organizirane. Svaka točka prekida koristi samo CSS koji mu je potreban za svoj specifični izgled.

Daljnje učenje

Ako vas zanima još malo ukopati u CSS ili pregledati pojedine izglede, objavio sam svoj repo na GitHubu.

Neću ulaziti u to kako koristiti mrežu ovdje kako su Rachel Andrew i Jen Simmons napisali i opširno govorili o toj temi. Pogledajte Rachelinu Grid by Example i Jenin eksperimentalni izgled kao dobar mjesto za početak.

Patrick Brosset iz Mozille stvorio je videozapis kojim je razgrabio upotrebu rešetke za jedan od mojih web lokacija, što je prilično cool:

Planirao sam ovdje razraditi neke od mojih najdražih dijelova redizajna, ali mislim da bih želio da ljudi budu iznenađeni dok istražuju. Dakle, ako to još niste provjerili, učinite to na lynnandtonic.com.

Odgovor

Uvijek se nadam da će moj rad potaknuti ljude da drugačije razmišljaju o svom mediju i alatima i potaknuti ih da eksperimentiraju sa onim što je moguće.

Odaziv je bio neodoljiv i zaista je divno vidjeti ljude koji otkrivaju i uživaju na web mjestu. Tako sam zahvalna na svima ljubaznim i ohrabrujućim riječima.

Primio sam povratnu informaciju da puno ljudi uopće ne mijenja veličinu preglednika. To je istina! I sasvim je u redu. Web-lokacija je i dalje funkcionalna čak i ako ne znate nijedan drugi izgled. Pa, da budem fer, postoji jedan izgled koji bi stvorio super zbunjujuće iskustvo (fanovi Stranger Things možda znaju o kome govorim). Ali imajući na umu svoju publiku, zaključio sam da je rizik nizak.

U većini mojih poslova postoje ljudi koji pitaju "Zašto to učiniti?" Imam još jedan post u radovima koji izranja iz mnogih razloga, ali za sada: ponekad je zabavno raditi čudne stvari.

Hvala što ste provjerili web mjesto. Znači svijet.

Do sljedećeg redizajna
❤ Lynn

Izvorno objavljeno na blog.andyet.com 9. siječnja 2018. godine.