FOX Models — sajt modelske agencije bez ijedne 3D linije

Za FOX Models postoje dva sajta, ne jedan. Ovaj je svetao, klasičan i u njemu nema nijedne 3D linije. Drugi je taman, sa 3D prstenom fotografija koji se okreće dok skrolujete, i o njemu piše zasebna studija — FOX Models, tamna 3D verzija. Isti sadržaj, ista agencija, dva potpuno različita utiska.

Razlog za dve izvedbe je prost. Kod modne agencije ukus vlasnika odlučuje više nego bilo koja lista funkcija, pa smo umesto nagađanja napravili dva pola: maksimum atmosfere i maksimum tišine. Kada je agencija pogledala obe, odgovor je bio da je bogatija verzija previše i da naslovna treba da bude znatno jednostavnija, sa referencom na skandinavske agencijske sajtove na kojima nema ničega osim lica.

Tu se prelama cela ova studija. 3D nije loš izbor zato što je 3D, nego zato što na ovom sajtu troši ono što je jedini sadržaj — fotografiju. Kada naručilac dođe da pregleda bord, svaki efekat između njegovog oka i lica je trošak koji neko plaća. Klasična verzija je zbog toga dobila sav dalji rad i sve krugove izmena, a 3D je ostao kao odgovor na pitanje gde je gornja granica atmosfere.

Odluka je povukla i tipografiju. Prvobitni spoj serifnog naslova i drugog pisma za tekst zamenjen je jednim groteskom svuda — istim pismom za naslov, meru i navigaciju. Modni sajtovi retko mešaju dva pisma, a kada mešaju, to im obično bude jedini ukras koji se pamti.

Prvi ekran je visok tačno koliko i ekran uređaja i podeljen je na dva panela: leva polovina vodi u ženski, desna u muški bord. Preko svakog panela stoji jedno ogromno slovo — W levo i M desno — a ispod njega sitan potpis sa strelicom. Naziv agencije je na vrhu, preko mekog zatamnjenja koje ga drži čitljivim i kada je fotografija ispod svetla.

Detalj koji niko ne primeti, a bio je izričito tražen: slovo M nije slovo M. To je isto slovo W okrenuto naopako, pa su dva panela simetrični blizanci umesto dva različita znaka. Podizanje slova pri prelasku mišem moralo je zato da se piše tako da okretanje ostane, jer bi ga obična animacija pomeranja tiho poništila i M bi se usred pokreta vratio u W.

Izbor fotografija za panele nije estetika nego provera na širokom ekranu. Slika se na panelu skalira po širini, bez horizontalnog sečenja, pa se na monitoru od 1920 piksela vidi ceo kadar. Prva slika za muški panel imala je pun logo brenda na odeći, koji se na tri manje širine uopšte nije video, i zamenjena je drugom. Iz istog razloga u izbor ispod nisu ušle magazinske naslovnice sa ispisanim imenom magazina ni fotografija sa reklamnim tekstom preko pola kadra — sajt agencije ne sme da izgleda kao da reklamira tuđi brend.

Ispod prvog ekrana stoji sekcija Izdvojeni: osam lica, četiri iz ženskog i četiri iz muškog borda, balansirano i sa Main Board-om napred. Tu je bio i jedan tih bug. Redosled bordova se čita iz tabele u kojoj Main nosi nulu, a nula je u JavaScript-u lažna vrednost, pa je rezervni broj pregazio pravi i Main Board bi ispao poslednji umesto prvi. Popravka je provera da li ključ uopšte postoji, umesto oslanjanja na to da nije prazan.

Profil je podeljen na galeriju sa jedne i podatke sa druge strane: oznaka borda, ime, grad, pa uredan spisak mera — visina, grudi, struk, bokovi ili odelo, obuća, kosa, oči. Ispod njih su dva poteza: Booking upit i Instagram nalog agencije.

Booking je namerno ostao mejl. Klik otvara poštanski program sa popunjenim primaocem, naslovom u kome piše ime modela i telom poruke u kome već stoje ime, grad i link na profil, sa praznim redovima za projekat, termin i kontakt. Naručilac koji bookira model to radi iz svog sandučeta, jer mu upit mora da ostane u prepisci i da se prosledi kolegi. Forma na sajtu bi ga izbacila iz alata u kome zaista radi, a agenciji dala poruku bez istorije.

Ispod svakog profila stoji četvoro lica iz istog borda i link na ceo bord. To je jedina navigacija koja na ovakvom sajtu stvarno radi: čovek koji je otvorio jedan profil retko traži baš to lice, nego lice tog tipa.

Dugmad na profilu su prošla kroz krug izmena. Prva verzija su bile pilule sa ivicom, koje su na svetloj strani izgledale jeftino, i zamenjene su tankim tekstualnim linkovima sa podvlakom i strelicom. Na modnom sajtu dugme koje viče je jedini element koji se pamti umesto fotografije. Isti je razlog zbog kog je i mobilni meni sveden na dve ravne crte koje se pri otvaranju ukrste.

Sajt je pisan u čistom HTML-u, CSS-u i JavaScript-u. Nema build koraka, nema frameworka, nema nijedne biblioteke. Ceo sopstveni kod su tri fajla — stilovi, ponašanje i podaci — ukupno oko sedamdeset kilobajta pre kompresije, a server ih šalje spakovane. Jedina spoljna stvar koju strana povlači je font.

Sadržaj stoji u jednom fajlu sa podacima: sedamnaest modela, dvanaest u ženskom i pet u muškom bordu, i deset stavki u editorijalima. Polja u tom fajlu su namerno napisana tako da odgovaraju kolonama koje na pravom domenu treba da vrati PHP iz agencijske baze — jedan model je jedan red u tabeli, editorijali su druga tabela. Prelazak sa demo podataka na bazu je zato zamena izvora, a ne prepisivanje sajta.

Tu je i glavna praktična razlika u odnosu na 3D verziju. Ona je Next.js projekat koji se pri svakoj izmeni sadržaja mora ponovo izgraditi na serveru, sa instalacijom zavisnosti i sklapanjem svih statičkih strana. Ovde se izmenjeni fajl prekopira na server i to je ceo posao. Deploy ide direktno, uz rezervnu kopiju svakog fajla pre izmene, bez posrednika i bez koraka koji jednog dana može da padne zbog tuđe izmene u nekom paketu.

Postoji i osigurač za slučaj da JavaScript zakaže. U zaglavlju se dokumentu odmah upisuje oznaka da skripte rade, i od te oznake zavisi pojavljivanje sadržaja pri skrolu. Ako se posle učitavanja ispostavi da zaglavlje sajta nije iscrtano, oznaka se skida i sve što je čekalo pojavljivanje postaje odmah vidljivo. Sajt bez skripti nije lep, ali je čitljiv — a sajt koji ćutke ostane prazan je izgubljen posetilac.

Prilagođavanje ekranu je provereno od uskih telefona do vrlo širokih monitora. Vodoravno prelivanje je isečeno na nivou dokumenta, pa se strana ne klati levo-desno ni na 320 piksela, a duge adrese i mejlovi u podnožju prelamaju se umesto da guraju raspored van ivice. Sadržaj ima gornju granicu širine, jer mreža lica razvučena preko celog vrlo širokog ekrana više nije mreža nego traka.

Sve što pretraga traži je već na mestu. Svaka strana ima svoj naslov, opis i kanonsku adresu; naslovna nosi podatke o agenciji i o sajtu, bordovi nose listu modela kao kolekciju, profili nose podatke o osobi i putanju kroz sajt, editorijali nose galeriju. Adrese su čiste — /women, /men, /editorials, /contact — a stare adrese sa nastavkom trajno se preusmeravaju na njih.

Uz to ide potez koji izgleda kao propust dok se ne objasni: sajt je zatvoren za indeksiranje, a kanonska adresa pokazuje na domen agencije. Na našem poddomenu on ne treba da bude u pretrazi, jer bi se pojavljivao kao još jedan rezultat za ime agencije i cepao signale na dve adrese. To je jedan red koji se skida na dan prelaska na pravi domen, i tada sve gore navedeno počne da radi za agenciju umesto da samo stoji.

Na strani Kontakt i prijava stoji i deo koji nije tehnika nego zaštita branše: skauting je uvek besplatan, agencija nikada ne traži uplatu za upis u bord i ne javlja se preko nezvaničnih naloga. Lažni skauti na društvenim mrežama su realan problem ovog posla i jedino što sajt tu može da uradi jeste da jasno kaže kako prava komunikacija izgleda. Otvoreno o granici ove izvedbe: prijava proverava polja, prihvata dve do četiri fotografije prevlačenjem i prikaže potvrdu, a stvarno slanje i prijem fotografija vezuju se pri prelasku na pravi domen, na isti serverski sloj koji tada služi i podatke o modelima.

Šta agencija na kraju dobija. Sajt koji se otvara odmah jer nema šta da se izvršava; profil za svakog modela sa adresom koja se šalje naručiocu; bord koji se filtrira i pretražuje umesto da se skroluje do dna; jedan fajl na koji se kači njena baza, tako da dodavanje modela ne znači zvati nas; i izgled koji ne konkuriše fotografijama. Bez pretplate, bez zavisnosti koje zastarevaju i bez koraka izgradnje koji jednom prestane da radi.

I onaj deo zbog kog ova studija uopšte postoji. 3D verzija je jača na prvom ekranu, ova je bolja za posao koji se radi svakog dana. Kada je sadržaj sajta tuđe lice, najbolja tehnička odluka je obično ona koja se ne primeti.