9 Nødvendige regler for responsive billedgallerier
Responsive design er en vigtig og nødvendig del af webudviklingen. Et af de største problemer med lydhurtigt webdesign i sen tid har været billeder. Mange debatterer den bedste måde at vise billeder på et lydhørt websted på. Og så hvad med billedgallerier?
Billedgallerier har langt mere kompleksitet end enkeltbilleder; Der er endnu flere variabler og ting at tænke på, når du implementerer hele lydhøreste billedgallerier på dit websted. Lad os tage et kig på nogle nyttige tips til at implementere lydhøre billedgallerier på den rigtige måde.
1) Lysbilledshow: Skjul nav, når det er muligt
Du har måske ikke navigeringselementer på en tablet eller en mobilenhed, men på et skrivebord er det en god idé at skjule disse elementer, indtil de er nødvendige. Genstande som for- og bagpile og navigationspunkter skal indstilles til kun at blive vist, når nogen musker over det glidende billedgalleri. Dette undgår distraktion, og du undgår konflikter mellem indhold og nav elementer. Hele oplevelsen føles mindre jumbled.
2) Undgå for mange portrætbilleder
Hvis du implementerer et galleri, der er et galler af billeder, vil du gerne vælge billeder, der er landskabsorienterede eller firkantede hvis det er muligt. Dette gør det nemmere at se dem på en lille skærm. Portrætbilleder ville være fint på en smart telefon i portrættilstand, men det brede betragtningsområde på en landskabsorienteret telefon gør det svært at se portrætbilleder. Landskab er bedst, men du kan slå sig til firkantet, hvis landskab ikke er en mulighed. Alle billeder kan indstilles til at passe inden for et visningsområde, men portrætbilleder på en landskabsskærm vises meget små. Dine billeder vises ikke så intensivt som kvadratiske eller landskabsbilleder, som vil fylde mere område på skærmen og blive større. Når du vælger billeder, skal du sørge for at holde den person, der kigger på dem.
3) Brug gestus på tabletter og mobil
Folk elsker at bruge gestus på deres berøringsskærme. De føler sig mere bemyndiget, når det føles, at de glider et billede, fordi oplevelsen er mere fordybende. At forsøge at trykke på små pile eller navigationspunkter på en mobil enhed er for kedelig. Det er meget mere naturligt at være i stand til at tage fingeren og trække et billede op, ned, til venstre eller højre.
4) Undgå lysbokse: deaktiver dem på mobilen
Hvis du har billeder af produkter, som maskiner eller genstande, der skal læses mere detaljeret (stof, juveler osv.), Så giver en lightbox med større billeder mening. Selv da bør de kun bruges på skrivebordet. Når du nedbryder til tablet og mobile skærmstørrelser, skal lysbokse være deaktiveret. De kan forårsage en række problemer med brugeroplevelsen. Hvis der sker noget, og lysboksen ikke er korrekt, kan de muligvis ikke få adgang til udgangsknappen, eller billederne vises muligvis ikke korrekt.
5) Når du bruger nav elementer, gør dem diskret
Hvis du har et glidende billedgalleri med et betydeligt antal dias, er navigationen fornuftig. Du ønsker ikke at få brugerne til at vente med at cykle gennem alt. De kan nemt klikke gennem deres egen hastighed, komme ind, få det, de har brug for, og komme ud. Når du bruger disse elementer, skal du sørge for at gemme dem på steder, der er ude af vejen. Har ikke navigeringspunkter, der går over tekst eller andre links. Undgå også alt for komplekse kontroller. Disse optager en masse plads, distraherer brugere fra indholdet og skaber et rodet look. At have prikker, som brugerne kan klikke for at cykle gennem eller springe over til bestemte billeder, og at have frem og tilbage pilene er rigeligt. Overdrive det ikke!
6) Bland ikke billeder og videoer
Blanding af forskellige medier er normalt okay, men at blande videoer i, hvor de ikke forventes, kan forårsage problemer. Du ønsker ikke, at en bruger ved et uheld indleder en video, som afspiller lyd for alle at høre. Separate videoer og billeder, så de ved hvad de kan forvente. Ingen kan lide disse typer overraskelser.
7) Sørg for, at billederne ikke skalere ud over deres maksimale bredde
Dette er vigtigt, fordi du kan undgå pixeleret skalering af billeder, der er for små til et mellemrum. Billeder skal være store nok til at fylde 100% af en mobilenhed (i de fleste tilfælde), men stationære mellemstore websteder bør kun indstille den maksimale bredde til 100%. Jeg har set nogle tilfælde, hvor nogen har en af de store 27 "skærmbilleder, og når de trækker browserbredden, skaleres billedet med det, forbi den tilsigtede størrelse.
8) Billedskalering
Hvis du har billedskala, skal du sørge for, at de skaler ned, ikke op. Det er bedst at indstille nøjagtige dimensioner for dine billeder. Mange gange anvendes en procentdel for en dimension, mens den anden dimension er sat til auto. Hvis du f.eks. Vil have et billede til at spænde over 50% af browserens bredde, skal du indstille billedets bredde til 50% og højden til automatisk .
9) Undgå at bruge billedtekster
Billedtekster eller en anden ledsagende tekst kan forårsage alle slags problemer for dig og dine brugere. Det første problem er, at det er svært at passe teksten på en mobil enhed. Med smartphones har du begrænset plads som det er, men forsøger at tilføje tekst kan få hele oplevelsen til at føle rodet og sammenkrammet sammen. Et andet problem er, at du er begrænset i mængden af tekst, du kan bruge. Tilføjelse af en billedtekst eller en ekstra tekst tilføjer variablen af lydhør tekst i mixen. Du skal overveje ordbrud, og hvordan flere linjer med tekst vil ende med at se sammen med dit billede. Hvis teksten bruges som overlejring, skal du også bekymre dig om, hvor den falder over billedet. Lys tekst over lysområdet af billedet vil gøre teksten ulæselig. Kontrast er nøglen, og hvert billede er anderledes.
Konklusion
Bundlinjen når det kommer til ethvert aspekt af webdesign er, at det skal fungere godt og have brugeren i tankerne. Hvis ingen kan bruge dit websted, vil de ikke komme tilbage. Ved at følge disse enkle doser og ikke-responsive billedgallerier, gøres det således, at brugerne ikke løber ind i almindelige problemer, når de ser på dine billeder.