9 Viktige regler for responsive bildegallerier
Responsive design er en viktig og nødvendig del av webutviklingen. Et av de største problemene med responsivt webdesign som for sent har vært bilder. Mange diskuterer den beste måten å vise bilder på et responsivt nettsted. Og så, hva med bildegallerier?
Bildegallerier har langt mer kompleksitet enn enkeltbilder; Det er enda flere variabler og ting å tenke på når du implementerer hele responsive bildegallerier på nettstedet ditt. La oss ta en titt på noen nyttige tips for å implementere responsive bildegallerier på riktig måte.
1) Lysbildefremvisninger: Skjul nav når det er mulig
Du har kanskje ikke navigasjonselementer på en nettbrett eller mobilenhet, men på skrivebordet er det en god ide å skjule disse elementene til de trengs. Elementer som for- og bakpiler og navigasjonspotter bør settes til å bare vises når noen murer over det glidende bildegalleriet. Dette unngår distraksjoner, og du unngår konflikter mellom innhold og nav-elementer. Hele opplevelsen føles mindre jumbled.
2) Unngå for mange portrettbilder
Hvis du implementerer et galleri som er et rutenett med bilder, vil du velge bilder som er landskapsorienterte, eller firkantede hvis det er mulig. Dette gjør det enklere å se dem på en liten skjerm. Portrettbilder vil være bra på en smart telefon i portrettmodus, men det brede visningsområdet til en landskapsrettet telefon gjør det vanskelig å se portrettbilder. Landskap er best, men du kan bosette seg på torget hvis landskapet ikke er et alternativ. Alle bilder kan settes inn slik at de passer i et visningsområde, men portrettbilder på et landskapsskjermbilde vises svært lite. Bildene dine vil ikke bli vist så forsiktig som firkantede eller liggende bilder, som fyller mer område på skjermen og vises større. Når du velger bilder, må du sørge for at personen ikke ser dem.
3) Bruk bevegelser på tabletter og mobil
Folk elsker å bruke bevegelser på deres berøringsskjerm. De føler seg mer empowered når det føles som de skyver et bilde, fordi opplevelsen er mer nedsenkende. Å prøve å trykke på små piler eller navigasjonspunkter på en mobil enhet er for kjedelig. Det er mye mer naturlig å kunne ta fingeren og sveipe et bilde opp, ned, til venstre eller høyre.
4) Unngå lysbokser: deaktiver dem på mobilen
Hvis du har bilder av produkter, som maskiner eller gjenstander som bør sees nærmere (stoff, juveler, etc.), så er en lysbok med større bilder fornuftig. Selv da bør de bare brukes på skrivebordet. Når du bryter ned til nettbrett og mobile skjermstørrelser, bør lysboksene deaktiveres. De kan forårsake en rekke problemer med brukeropplevelsen. Hvis noe skjer og lysboksen ikke er riktig, kan de kanskje ikke få tilgang til utgangsknappen, eller bildene vises kanskje ikke riktig.
5) Når du bruker navelementer, gjør dem ikke påtrengende
Hvis du har et glidende bildegalleri med et betydelig antall lysbilder, er navigasjonen fornuftig. Du vil ikke la brukerne vente å sykle gjennom alt. De kan enkelt klikke gjennom i sin egen fart, komme inn, få det de trenger, og gå ut. Når du bruker disse elementene, sørg for å kaste dem på steder som er ute av veien. Har ikke navigeringspunkter som går over tekst eller andre lenker. Også unngå altfor komplekse kontroller. Disse tar opp mye plass, distraherer brukere fra innholdet, og lager et rotete utseende. Å ha prikker som brukere kan klikke for å bla gjennom eller hoppe over til bestemte bilder, og å ha frem og tilbake piler er nok. Ikke overdriv det!
6) Bland ikke bilder og videoer
Det er vanligvis greit å blande forskjellige medier, men det kan føre til problemer ved å blande videoer der de ikke er forventet. Du vil ikke at en bruker ved et uhell skal starte en video, som spiller lyd for at alle skal høre. Separate videoer og bilder, slik at de vet hva de kan forvente. Ingen liker slike overraskelser.
7) Kontroller at bildene ikke skalere enn deres maksimale bredde
Dette er viktig, fordi du kan unngå pixelert skalering av bilder som er for små for et mellomrom. Bildene skal være store nok til å fylle 100% av en mobilenhet (i de fleste tilfeller), men desktopstørrelsessider må bare sette maksimal bredde til 100%. Jeg har sett noen tilfeller hvor noen har en av de store 27-tommers skjermene, og når de drar ut nettleserbredden, skaleres bildet med den, forbi den tilsiktede størrelsen.
8) Bilde skalering
Hvis du har bildeskala, må du sørge for at de skaler ned, ikke opp. Det er best å angi nøyaktige dimensjoner for bildene dine. Mange ganger brukes en prosentandel for en dimensjon, mens den andre dimensjonen er satt til automatisk. Hvis du for eksempel vil ha et bilde som spenner over 50% av bredden på nettleseren, vil du sette bildens bredde til 50% og høyden til automatisk .
9) Unngå å bruke bildetekster
Bildetekster eller annen medfølgende tekst kan forårsake alle slags problemer for deg og dine brukere. Det første problemet er at det er vanskelig å passe på teksten på en mobil enhet. Med smarttelefoner har du begrenset plass som det er, men å prøve å legge til tekst kan få hele opplevelsen til å bli rotete og sammenkramte sammen. Et annet problem er at du er begrenset i mengden tekst du kan bruke. Hvis du legger til en bildetekst, eller en ekstra tekst, legger du til variabelen av lydhør tekst i blandingen. Du må vurdere ordbrudd, og hvordan flere linjer med tekst vil ende med å se sammen med bildet ditt. Hvis teksten brukes som et overlegg, må du også bekymre deg for hvor det faller over bildet. Lys tekst over lysområdet av bildet vil gjøre teksten ulæselig. Kontrast er nøkkel, og hvert bilde er annerledes.
Konklusjon
Bunnlinjen når det kommer til et hvilket som helst aspekt av webdesign er at den må fungere godt og ha brukeren i tankene. Hvis ingen kan bruke nettstedet ditt, kommer de ikke tilbake. Etter å ha fulgt disse enkle doser og ikke-responsive bildegallerier, blir det slik at brukerne ikke kommer til å løse vanlige problemer når de ser på bildene dine.