To tylko zwierzęta

Pomagałem w przygotowaniu strony dla filmu To tylko zwierzęta. Dziś premiera, zatem zapraszam w imieniu twórców. Samego filmu nie widziałem, więc też się wybieram.

Od strony technicznej było to dosyć ciekawe przedsięwzięcie i właściwie o tym chciałem napisać.

Draft

Początkowy draft przypominał z grubsza ostateczny efekt. Klimat streetartowy - obskurna ściana i litery nasprajowane od szablonów.

Tło

Dostałem grafikę z dużym zdjęciem takiej ściany:

Od razu pomyślałem, że warto by było sprawić, by to tło dobrze funkcjonowało w dowolnej wielkości okna przeglądarki. No ale jak to zrobić? - albo skalowanie całości, które może wyglądać trochę dziwnie, albo arbitralny duży rozmiar grafiki, przy którym jednak, w wypadku jeszcze większego rozmiaru okna przeglądarki, mogą ujawnić się łączenia krawędzi tła. Postąpiłem inaczej - w Gimpie znalazłem filtr 'make seamless', dzięki któremu uzyskałem coś takiego:

Tło idealnie powtarzalne w pionie i poziomie, i to uzyskane bez żadnego wysiłku włożonego w edycję grafiki. Rozdzielczość pliku tak czy inaczej jest duża - 1549x1037 pixeli, więc ustawiłem kompresję JPEG tak, by znaleźć kompromis między rozmiarem a jakością. Taka monotonna ściana w miarę dobrze wygląda nawet z dużymi artefaktami kompresji. Z początkowych kilku mega wyszedł plik ~200KB. Nieźle.

Nagłówek

Tytuł dostałem jako wektory. Poprosiłem o materiały w formacie SVG i dzięki temu mogłem skorzystać z genialnego Inkscape'a do przerobienia ich na pliki PNG z przezroczystością na kanale alfa.

Jest jedna rzecz w związku z nagłówkiem, z której jestem niezadowolony - w miejscu nagłówka, w źródle strony, znajduje się tekst: 'To tylko zwierzęta', który ostatecznie w stylach zostaje ukryty, by wyświetlić zamiast niego powyższą grafikę. Mam wrażenie iż zabieg ten sprawił, że Google nie indeksuje tego tekstu. Innymi słowy content który w istocie znajduje się w nagłówku, a jest tytułem filmu, traktowany jest tak, jakby nie istniał. Tym gorzej, że tytuł filmu nie pojawia się potem w ogóle w tekstach na stronie. Czy ktoś ma pomysł jak to zrobić lepiej?

Nawigacja

Do nawigacji zastosowałem czcionkę Baumans z Google Web Fonts. Wydawała mi się w miarę podobna do tej z pierwotnego draftu, a przy tym nadaje się ona na czcionkę do szablonu graffiti.

By uzyskać efekt nieregularności zastosowałem ciekawą cechę CSS3 - możliwość określenia selektora dla n-tego elementu. W ten sposób wprowadzam wariacje rozmiarów:

#navigation li:nth-child(2n+1) {
  font-size: 95%;
}

#navigation li:nth-child(3n) {
  font-size: 110%;
}

Ramka na content

Początkowo dostałem zupełnie inną plamę mającą stanowić tło dla contentu - przynajmniej pod trailerem filmu:

Potem koncepcja się zmieniła i dostałem takie dwie plamy:

Przypatrzyłem się tej po prawej stronie i mnie olśniło. Od samego początku chciałem uzyskać coś w rodzaju ramki rozciągającej się w pionie do dowolnej ilości contentu. Normalnie efekt taki można uzyskać tylko przy idealnie regularnych, prostokątnych elementach. Postanowiłem zaryzykować z tymi postrzępieniami. Wyciąłem górę:

środek:

i dół:

i wyszło super - środek jest powtarzalny wertykalnie i zawsze dopasowuje się do góry i dołu ramki. Gdy się przyjrzeć, to jednak przeskoki są, lecz w tej konwencji postrzępionej nierówności stają się przezroczystym elementem paradygmatu - bardzo fajnie.

Jako czcionkę dla tekstu wybraliśmy pogrubiony Open Sans. To zadziwiające jak bardzo różnie wyglądają niby tak podobne do siebie, proste, bezszeryfowe czcionki. Open Sans akurat najlepiej harmonizowała z gotowym layoutem.

Postaci

Najważniejsze elementy graficzne na tej stronie - na każdej podstronie grafika z postacią Pan sapiens przebranego za zwierzę innego gatunku. Grafiki są zapisane jako pliki PNG z kanałem alfa - prezentowane jako warstwa zawsze na samym wierzchu i zawsze przyklejona do prawego dolnego rogu okna przeglądarki - tak było w pierwotnym projekcie i tę cechę chciałem zachować. Przy takich założeniach wyzwanie stanowi problem skalowania okna przeglądarki. Przy małych jego rozmiarach grafika może nakładać się na content. Zastosowałem trik podpatrzony na stronie Programming, Motherfucker. Grafika postaci zawsze zajmuje pewien procent szerokości ekranu - powiedzmy 20%, bo przy różnych postaciach to są różne wartości dobierane indywidualnie. Okazuje się że niewyspecyfikowaną wysokość grafiki przeglądarka oblicza proporcjonalnie do wyliczonej aktualnej szerokości. Bardzo ciekawy efekt pozwalający na dostosowanie strony do wielkości monitora.

Przy okazji włączyłem algorytm Adam7 w opcjach plików PNG. Dzięki temu grafika w niższej rozdzielczości widoczna jest już w trakcie ładowania.

Entropia rulez

Podsumowując, streetartowa konwencja okazała się świetnie funkcjonować na webie. Im więcej entropii - murszejącej ściany, postrzępionych graffiti, etc. tym łatwiej w "naturalny" sposób zatuszować niedokładności, asymetrię, artefakty, etc.