7 savjeta za bolje odzivne fotogalerije
Svi znamo i razumijemo važnost dizajniranja web stranica na responzivnoj platformi, zar ne? To se odnosi i na slike i fotogalerije.
Ništa je gore od navigacije do prekrasne web stranice i gledanja slika koje se jednostavno ne "zaključaju" na mjesto ili veličinu kako treba. Skoro vam pada na pamet da dizajner nešto zaboravi ili da propusti korak.
Danas ćemo razmotriti sedam stvari koje možete učiniti u procesu dizajniranja kako biste stvorili bolje responzivne fotogalerije. (Ovdje ne govorimo o kodu; to su procesi dizajna koji mogu pomoći vama i programeru, bili oni isti i ne.)
Istražite elemente Envatoa
1. Razmotrite omjere odnosa
Iskustvo gledanja na radnu površinu može se prilično razlikovati od iskustva na mobilnom uređaju. Ali za većinu web lokacija položaji slika su isti. Vaš je zadatak osigurati da se ista poruka komunicira u oba okruženja i da se slika ne izgubi na različitim veličinama zaslona.
Tu dolazi do razmišljanja o omjeru slike - odnosu horizontalne i vertikalne ravnine slike.
Natrag na web mjesto radne površine, cool super tanka horizontalna fotografija mogla bi izgledati nevjerojatno na vrhu dizajna vaše web stranice. Ali što se događa s tom slikom na manjem ekranu u kvadraturnijem okruženju? Smanjuje li se fotografija do veličine koju je teško vidjeti? Ili pola fotografije nestaje?
Tu dolazi do omjera slike. Odabirom horizontalno-vertikalnog odnosa za slične veličine fotografije gubit će se manje slike prilikom prebacivanja uređaja. Također će vam olakšati rad s položajima slika i nećete se morati brinuti toliko o prijenosu više veličina za različite točke prijeloma.
2. Veličina i mjerilo dosljedno
Pažnja koju obradite u obrezivanju, određivanju veličine i učitavanja fotografija može prilično utjecati na vaš radni tijek.
Koliko vas samo učita fotografije u CMS i nadaju se najboljem? Da, pogrešan je odgovor.
Svaka fotografija treba biti obrezana i veličine za smještaj u dizajn web stranice. To osigurava da će fotografije izgledati onako kako su namijenjene i nećete imati glave s nedostajućim dijelovima na vrhovima fotografija ili elementima koji su ostavljeni s jedne (ili obje) strane.
Potrebno je malo više vremena na zadnjem kraju projekta, ali vrijedi uložiti napor. (Osobito ako radite s klizačima ili galerijama.)
3. Koristite klizač ili galeriju
Korištenje spremnika za slike, poput klizača ili galerije, može vam pomoći u boljem upravljanju reaktivnim slikama u dizajnu vaše web stranice. Osobito ako koristite dobro poznati i etablirani alat treće strane, većina dizanja teških tereta napravljena je za vas u osiguravanju da ovi elementi rade kako je predviđeno.
Dva prethodna savjeta ostaju od vitalne važnosti čak i kada koristite klizače ili elemente galerije; omjeri stranica i pojmovi veličine i skaliranja još uvijek vrijede.
Niste sigurni koju opciju koristiti? Odlučite se za klizač ako imate pregršt sjajnih slika koje će raditi na većim dimenzijama. Popularna je opcija za vrh ili odjeljak „heroj“ web stranice. Odlučite se za galeriju kada imate puno slika koje mogu biti sitne bez problema s čitljivošću. Ovo dobro uspijeva za portfelje ili web stranice s puno slika za izlaganje.
4. Klonite se naslova kad je to moguće
Naslovi mogu biti izvrstan alat za dodavanje vrijednosti informacijama na slici, ali stvarno mogu ometati način na koji web stranica funkcionira. Izbjegavajte ih ako možete ili smislite neko drugo rješenje koje nije u obliku tradicionalnog opisa.
Veliki blokovi teksta, poput naslova, mogu se lijepo prikazati na velikim ekranima, ali predstavljaju veće probleme u manjim sredinama. Rezultirajući učinak može rezultirati bez problema i potencijalnim korisnicima napustiti web mjesto. (A s toliko prometa koji dolazi s mobilnih uređaja za većinu web stranica to bi moglo biti katastrofalno.)
5. Budite oprezni pri miješanju videa i slika
Budimo jasni: Potpuno je prihvatljivo imati video i slikovne elemente na svojoj web stranici. To je vjerojatno nešto što biste trebali učiniti.
No, nemojte miješati videozapise i slike u iste elemente dizajna, poput stavljanja video i slikovnih elemenata u isti klizač. Ponekad ćete imati sreće i to će djelovati poput šarma. Inače će vam na određenim uređajima ostati prazni okviri koji samo izgledaju čudno.
Najbolja opcija je svakom različitom tipu elemenata dati svoj prostor u dizajnu. To se odnosi na gotovo svaki dizajnerski element, a posebno na slike i video zapise.
6. Izrežite nepotrebne elemente
Jedan od najvećih problema s klizačima i galerijama je taj što dizajner prečesto stavlja previše smeća unutar spremnika. Postoje strelice za navigaciju, gumbi za navigaciju, tekst, pozivi na akciju i popis se nastavlja.
Korisnici općenito razumiju kako komunicirati s klizačem. Ako ne radite nešto potpuno izvan zida, ne trebaju vam dva sloja navigacije koja korisnicima pokazuje što treba raditi. Dosta je jedan red gumba ili strelica (ako su vam uopće potrebni).
Uključite samo elemente s kojima će korisnici morati komunicirati. Ako je svrha galerije slika ili klizača navesti korisnika da klikne / dodirne poziv na akciju, to bi trebala biti jedina opcija na fotografiji. Neka bude jednostavno. Ne pružajte previše mogućnosti. Zapravo vam može pomoći stopama konverzije.
7. Koristite samo slike visoke kvalitete
To gotovo ne treba reći, ali to se i dalje događa prečesto. Ako nemate zvjezdanu sliku, onda je uopće ne koristite. Kvalitetne slike visoke razlučivosti važnije su nego ikad. Korisnici neće gubiti vrijeme gledajući web mjesto s pikseliranim ili lošim slikama (i vjerovatno vam neće vjerovati ako je kvaliteta lošija).
Veliki broj korisnika gleda dizajn vaše web stranice pomoću uređaja s ekranima visoke rezolucije; očekuju vrhunski vizual. Morate isporučiti.
Neki se formati slika mijenjaju kako bi udovoljili tim potrebama visoke razlučivosti dok isporučuju komprimirane slike. Spoznajte se u formatima - Google Developers odlično je mjesto za početak - znati koje se rezolucije zaslona najčešće koriste i naviknite spremati datoteke na način koji će ih najbolje isporučiti korisnicima.
Zaključak
Svi želimo stvoriti web stranice s kojima korisnici osjećaju potrebu za interakcijom. Jake slike su ključni dio te jednadžbe. Jednako je važno da se oni dobro odražavaju bez obzira na uređaj.
Planirajte mjesta za slike koja će raditi na različitim veličinama uređaja kada ste u fazama postavljanja žičara u projekt dizajniranja web stranice. Možda ćete primijetiti nešto, osobito u pogledu slike, ali dugoročno donošenje tih odluka rano i stvaranje te dosljednosti dugoročno će koristiti vaše web mjesto.
