Witam Cię serdecznie. Wszyscy znamy i rozumiemy znaczenie projektowania witryn internetowych na elastycznej platformie, prawda? Dotyczy to również zdjęć i galerii zdjęć.
Responsywność galerii zdjęć
Nie ma nic gorszego niż nawigacja po pięknej stronie internetowej i oglądanie obrazów, które po prostu nie „blokują się” na właściwym miejscu lub rozmiarze. To zostawia Cię z myślą, że projektant o czymś zapomniał, albo przegapił jakiś krok.
Dzisiaj przyjrzymy się siedmiu rzeczom, które możesz zrobić w procesie projektowania, by stworzyć lepsze responsywne galerie zdjęć.
1. Rozważ współczynniki proporcji
Wygląd ekranu na komputerze może się znacznie różnić od tego na urządzeniu mobilnym. Jednak w przypadku większości witryn miejsca docelowe obrazu są takie same. Twoim zadaniem jest upewnić się, że ta sama wiadomość jest przekazywana w obu środowiskach i że obraz nie gubi się na różnych rozmiarach ekranu.
W tym miejscu pojawia się myślenie o proporcji – relacji pomiędzy poziomymi i pionowymi płaszczyznami obrazu.
Proporcje obrazu
Wracając do tej witryny na komputery stacjonarne, super cienkie poziome zdjęcie może wyglądać niesamowicie u góry strony internetowej. Ale co dzieje się z tym obrazem na mniejszym ekranie w bardziej kwadratowym otoczeniu? Czy zdjęcie kurczy się do rozmiaru, który jest trudny do zobaczenia? A może połowa zdjęcia zniknie?
Właśnie tam pojawia się współczynnik proporcji. Wybierając relację poziomo-pionową dla podobnych rozmiarów zdjęć, mniej obrazów zostanie utraconych podczas przełączania urządzeń. Ułatwi Ci to również pracę z miejscami docelowymi obrazu i nie będziesz musiał martwić się tak bardzo o przesyłanie wielu rozmiarów dla różnych punktów przerwania.
2. Konsekwentny rozmiar i skalowanie
Dbałość o przycinanie, sortowanie i przesyłanie zdjęć może znacznie wpłynąć na przebieg pracy.
Ilu z was po prostu wgrywa zdjęcia do CMS i ma nadzieję na najlepsze? Tak, to zła odpowiedź.
Każde zdjęcie powinno zostać przycięte i dostosowane do umieszczenia w projekcie strony internetowej. Sprawia to, że zdjęcia będą wyglądały tak, jak powinny. Ty dzięki temu nie skończysz z brakującymi głowami na szczytach zdjęć lub elementów pozostających poza jedną lub drugą stroną.
To zajmuje trochę więcej czasu do końca projektu, ale jest warte wysiłku. (Zwłaszcza jeśli pracujesz z suwakami lub galeriami.)
3. Użyj suwaka lub galerii
Używanie kontenera do obrazów, takich jak suwak lub galeria, może pomóc w lepszym zarządzaniu responsywnymi obrazami w projekcie witryny. Szczególnie, jeśli używasz dobrze znanego i przyjętego narzędzia innej firmy, większość „podnoszenia ciężarów” została wykonana za Ciebie. Dzięki temu możesz być pewien, że te elementy będą działały zgodnie z przeznaczeniem.
Dwie z poprzednich wskazówek pozostają niezwykle ważne nawet przy użyciu suwaków lub elementów galerii; Współczynniki proporcji, wielkości i skalowania nadal mają zastosowanie.
Jakie rozwiązanie będzie dla mnie odpowiednie?
Nie wiesz, której opcji użyć? Wybierz suwak, gdy masz kilka świetnych obrazów, które będą działać w większych rozmiarach. Jest to popularna opcja dla górnej lub „głównej” („contentowej”) sekcji strony internetowej. Zdecyduj się na galerię, gdy masz dużo zdjęć, które mogą być małe i z którymi nie będzie problemów z czytelnością. Działa to dobrze w przypadku portfolio lub witryn z dużą ilością zdjęć do zaprezentowania.
4. Zachowaj ostrożność podczas miksowania wideo i obrazów
Pozwól, że wyjaśnię: całkowicie dopuszczalne jest posiadanie elementów graficznych jak i wideo na swojej stronie internetowej. To prawdopodobnie coś, co powinieneś zrobić.
Ale nie mieszaj wideo i obrazów w tych samych elementach projektu, takich jak umieszczanie elementów wideo i obrazów w tym samym suwaku. Czasami będziesz mieć szczęście i będzie działać jak urok. Innym razem będziesz mieć puste pola na niektórych urządzeniach, które wyglądają dziwnie.
Najlepszym rozwiązaniem jest nadanie każdemu innemu typowi elementu własnej przestrzeni w projekcie. Dotyczy to niemal każdego elementu projektu, ale szczególnie obrazów i wideo.
5. Wytnij niepotrzebne elementy
Jednym z największych problemów z suwakami i galeriami jest to, że zbyt często projektant umieszcza za dużo śmieci wewnątrz kontenera. Są strzałki nawigacyjne, przyciski nawigacyjne, tekst, wezwania do działania i lista jest długa.
Ogólnie rzecz biorąc, użytkownicy rozumieją, jak korzystać z suwaka. Jeśli nie robisz czegoś całkowicie poza ścianą, nie potrzebujesz dwóch warstw nawigacji, które pokazują użytkownikom, co mają robić. Pojedynczy rząd przycisków lub strzałek jest wystarczający (jeśli ich potrzebujesz).
Nie rób tego przesadnie
Uwzględnij tylko te elementy, z którymi użytkownicy będą musieli się kontaktować. Jeśli celem galerii obrazów lub suwaka jest nakłonienie użytkownika do kliknięcia / stuknięcia wezwania do działania, powinna to być jedyna opcja na zdjęciu. Nie komplikuj. Nie podawaj zbyt wielu opcji. Może to rzeczywiście pomóc w sprawie konwersji.
