7 tips for bedre responsive fotogallerier
Vi alle vet og forstår viktigheten av å designe nettsteder på en responsiv plattform, ikke sant? Det gjelder også bilder og fotogallerier.
Det er ingenting som er verre enn å navigere til et vakkert nettsted og se bilder som bare ikke "låses" på plass eller størrelse. Det får deg nesten til å tenke at designeren glemte noe, eller savnet et skritt.
I dag skal vi se på syv ting du kan gjøre i designprosessen for å lage bedre responsive fotogallerier. (Vi snakker ikke kode her; dette er designprosesser som kan hjelpe deg og utvikleren, enten de er de samme eller ikke.)
Utforsk Envato Elements
1. Vurder bildeforhold
Skriveopplevelsen på skrivebordet kan være ganske forskjellig fra den på en mobil enhet. Men for de fleste nettsteder er bildeplasseringene de samme. Jobben din er å sørge for at den samme meldingen blir kommunisert i begge miljøer og at bildet ikke går seg vill på forskjellige skjermstørrelser.
Det er her du tenker på aspektforholdet - forholdet mellom de horisontale og vertikale planene i bildet - kommer inn.
Tilbake til det stasjonære nettstedet kan et kult supertynt horisontalt bilde se fantastisk ut på toppen av nettsteddesignet ditt. Men hva skjer med det bildet på den mindre skjermen i et mer firkantet miljø? Krymper bildet til en størrelse som er vanskelig å se? Eller forsvinner halvparten av bildet?
Det er der sideforholdet kommer inn. Ved å velge et horisontalt-vertikalt forhold for fotostørrelser som er like, vil mindre bildeinnhold gå tapt når du bytter enhet. Det vil også gjøre det enklere for deg å jobbe med bildeplasseringer, og du trenger ikke å bekymre deg så mye for å laste opp flere størrelser for forskjellige bruddpunkter.
2. Størrelse og skala konsekvent
Omsorgen du tar i å beskjære, størrelse og laste opp bilder kan påvirke arbeidsflyten din ganske dramatisk.
Hvor mange av dere laster bare opp bilder i CMS og håper på det beste? Ja, er feil svar.
Hvert bilde skal beskjæres og dimensjoneres for plasseringen i nettsteddesignen. Dette sikrer at bilder ser ut som de er ment, og at du ikke ender med manglende hoder i toppen av bilder eller elementer som blir liggende på en (eller begge sider).
Det tar litt mer tid på baksiden av prosjektet, men er vel verdt innsatsen. (Spesielt hvis du jobber med glidebrytere eller gallerier.)
3. Bruk en glidebryter eller galleri
Hvis du bruker en beholder for bilder som glidebryter eller galleri, kan du bedre håndtere responsive bilder i webdesignen din. Spesielt hvis du bruker et kjent og etablert tredjepartsverktøy, blir det meste av tunge løftinger gjort for deg for å sikre at disse elementene vil fungere som tiltenkt.
To av de foregående tipsene er fortsatt avgjørende også når du bruker glidebryteren eller galleri-elementene. aspektforhold og dimensjonering og skaleringskonsepter gjelder fortsatt.
Er du usikker på hvilket alternativ du vil bruke? Velg en glidebryter når du har en håndfull flotte bilder som fungerer i større størrelser. Det er et populært alternativ for toppen eller "helten" -delen av en webside. Velg et galleri når du har mange bilder som kan gjengis lite uten problemer med lesbarhet. Dette fungerer bra for porteføljer eller nettsteder med mange bilder å vise frem.
4. Hold deg unna billedtekstene når det er mulig
Bildetekster kan være et flott verktøy for å tilføre informasjonen i et bilde verdi, men kan virkelig komme i veien for hvordan nettstedet fungerer. Unngå dem hvis du kan eller komme med en alternativ løsning som ikke er i form av en tradisjonell bildetekst.
Store tekstblokker, for eksempel bildetekster, kan gjengis vakkert på store skjermer, men presentere store problemer i mindre miljøer. Den resulterende effekten kan være skurrende og potensielt føre til at brukere forlater nettstedet ditt. (Og med så mye trafikk som kommer fra mobil for de fleste nettsteder, kan det være katastrofalt.)
5. Vær forsiktig når du mikser video og bilder
La oss være tydelige: Det er helt akseptabelt å ha video- og bildeelementer på nettstedet ditt. Det er sannsynligvis noe du bør gjøre.
Men ikke bland video og bilder i de samme elementene i designen, for eksempel å plassere video- og bildeelementer i den samme glidebryteren. Noen ganger vil du være heldig, og det vil fungere som en sjarm. Andre ganger vil du sitte igjen med tomme bokser på visse enheter som bare ser rart ut.
Det beste alternativet er å gi hver enkelt type element sin egen plass i designen. Dette gjelder stort sett ethvert designelement, men spesielt bilder og video.
6. Klipp unødvendige elementer
Et av de største problemene med glidebrytere og gallerier er at designeren for ofte legger for mye søppel inne i beholderen. Det er navigasjonspiler, navigasjonsknapper, tekst, oppfordringer til handling, og listen fortsetter.
Generelt forstår brukere hvordan de skal samhandle med en glidebryter. Med mindre du gjør noe helt utenfor veggen, trenger du ikke to lag med navigering som viser brukerne hva de skal gjøre. En enkelt rad med knapper eller piler er rikelig (hvis du i det hele tatt trenger dem).
Inkluder bare elementer som brukerne trenger å samhandle med. Hvis formålet med et bildegalleri eller glidebryter er å få brukeren til å klikke / trykke på en oppfordring til handling, bør det være det eneste alternativet på bildet. Hold det enkelt. Ikke gi for mange alternativer. Det kan faktisk hjelpe konverteringsfrekvensene dine.
7. Bruk bare bilder av høy kvalitet
Det sier seg selv selvfølgelig, men det skjer fremdeles altfor ofte. Hvis du ikke har et stjernebilde, bruker du ikke et bilde i det hele tatt. Bilder av høy kvalitet i høy oppløsning er viktigere enn noen gang. Brukere har ikke tenkt å kaste bort tid på å se på et nettsted med pixelerte eller dårlige bilder (og de vil sannsynligvis ikke stole på deg hvis kvaliteten er underdel).
Et stort antall brukere ser på designen av nettstedet ditt ved hjelp av enheter med høyoppløselige skjermer; de forventer topp lyd. Du må levere.
Noen bildeformater endres for å imøtekomme disse høye oppløsningsbehovene mens de leverer mer komprimerte bilder. Vers deg i formater - Google Developers er et flott sted å starte - vet hvilke skjermoppløsninger som vanligvis brukes og få til vane å lagre filer på en måte som kan leveres best til brukerne.
Konklusjon
Vi ønsker alle å lage nettsteder som brukere føler behov for å samhandle med. Sterke bilder er en sentral del av den ligningen. Like viktig er det å ha dem gjengitt godt uavhengig av enhet.
Planlegg for bilderom som vil fungere på en rekke enhetsstørrelser når du er i wireframing-stadiene av et prosjekt for nettsteddesign. Det kan hende du finner ut at det er noe å gi og ta, spesielt med tanke på bildeform, men på sikt å ta disse beslutningene tidlig og skape at konsistens vil være til nytte for nettsteddesignet i det lange løp.
