Fotografia jest moją drugą nogą obok doradztwa IT od 2006 roku. Przez lata tematy ewoluowały — od cichych portretów przez prace „ludzie w krajobrazie" aż po inscenizacje studyjne. Sposób, w jaki te zdjęcia były prezentowane w sieci, nie nadążał jednak za rzemiosłem obróbki stojącym za nimi. Relaunch strony był dobrym momentem, by sekcji fotografii poświęcić wyraźną uwagę.
Slider, który pozwala zdjęciom oddychać
Na stronie Photography galeria świadomie wyrywa się ze zwykłego kontenera treści i zajmuje pełną szerokość ekranu. Edge-to-edge — jedyne miejsce na stronie, w którym to się dzieje. Zdjęcia nie powinny być wciskane w kolumnę; one są treścią.
Mechanika za tym stojąca:
- 42 slajdy w pełnej rozdzielczości (1920×1280), lazy-loading po pierwszym,
- klawisze strzałek i przyciski strzałek dla wstecz/dalej,
- kropki przy dolnej krawędzi jako widoczny spis treści,
- autoplay, który pauzuje przy otwarciu lightboxa,
- miękkie przejścia cross-fade za pomocą CSS keyframes.
Kliknij, powiększ, kliknij dalej
Każdy slajd ma widoczną nakładkę z podpisem (wielojęzyczną — o tym za chwilę) i niewidoczną otoczkę przycisku. Kliknięcie otwiera lightbox jako dialog pełnoekranowy na ciemnym tle: zdjęcie wyśrodkowane i duże, strzałki po lewej i prawej, symbol zamknięcia w prawym górnym rogu. Klawiatura działa tak samo — strzałki przewracają, Escape zamyka. Niewielka logika sceny utrzymuje wychodzący i wchodzący slajd nałożone na siebie przez moment przejścia, by zmiana wyglądała miękko, a nie nagle.
Tę samą sztuczkę z lightboxem mają też zdjęcia osadzone bezpośrednio w wpisach na blogu. 50-liniowy plik JS deleguje kliknięcia w <img class="blog-img">, instancjonuje natywny węzeł <dialog>, wyśrodkowuje obraz — gotowe. Wypróbuj: kliknięcie w którekolwiek ze zdjęć tutaj otwiera je w dużym formacie.
Podpisy w pięciu językach
Slajdy fotograficzne mają każdy alt-text i widoczny podpis — oba jako typowo bezpieczny rekord językowy z pięcioma wariantami: niemiecki, angielski, fiński, polski, japoński. Kto trafi na japońską wersję strony, widzi japońskie podpisy, a czytnik ekranowy wymawia alt-text po japońsku. Lokalizacja do najmniejszego detalu.
(Jak strona w ogóle dostała japoński, opowiada wpis o Japantag.)
Własna kategoria bloga
Świeża nowość: przegląd bloga Photography. Przefiltrowany widok wszystkich wpisów, które wpadają do kategorii Photography — na razie dość krótki, ale to się zmieni. Trzy małe kolorowe chipy (consulting, distribution, photography) grupują wpisy już w widoku głównym; a wpis, który właśnie czytasz, jest poniekąd pierwszym we własnym pasie kategorii.
Co dalej
Kilka tematów jest już w głowie na kolejne wpisy fotograficzne — o kształtowaniu światła w sytuacji mobilnego studia, o retuszu beauty i kiedy on pomaga (a kiedy wręcz szkodzi), o świadomym wyborze looku zdjęcia. Jeśli najdzie Cię ochota na coaching lub wspólne shootingi: cieszę się na Twój pierwszy krok.