9 Viktiga regler för responsiva bildgallerier
Responsiv design är en nödvändig och nödvändig del av webbutveckling. En av de största problemen med responsiv webbdesign i sen tid har varit bilder. Många debatterar det bästa sättet att visa bilder på en mottaglig webbplats. Och hur är det med bildgallerier?
Bildgallerier har mycket mer komplexitet än enstaka bilder; Det finns ännu fler variabler och saker att tänka på när du genomför hela lyhörda bildgallerier på din webbplats. Låt oss ta en titt på några användbara tips för att implementera lyhörda bildgallerier på rätt sätt.
1) Bildspel: Dölj nav när det är möjligt
Du kanske inte har navigeringselement på en surfplatta eller mobilenhet, men på ett skrivbord är det en bra idé att gömma dessa element tills de behövs. Objekt som fram- och bakpilar och navigeringspunkter bör vara inställda för att endast visas när någon musar över det glidande bildgalleriet. Detta undviker distraheringar, och du undviker konflikter mellan innehåll och navelement. Hela upplevelsen känns mindre jumbled.
2) Undvik för många porträttbilder
Om du implementerar ett galleri som är ett galler av bilder, vill du välja bilder som är landskapsorienterade eller kvadratiska om möjligt. Detta gör det enklare att visa dem på en liten skärm. Porträttbilder skulle vara bra på en smart telefon i porträttläge, men det breda visningsområdet för en landskapsinriktad telefon gör det svårt att visa porträttbilder. Landskap är bäst, men du kan bosätta sig för torget om landskapet inte är ett alternativ. Alla bilder kan ställas in för att passa inom ett visningsområde, men porträttbilder på en landskapsskärm visas mycket små. Dina bilder kommer inte att ses så noggrant som kvadratiska eller liggande bilder, vilket fyller mer område på skärmen och visas större. När du väljer bilder, var noga med att hålla den person som tittar på dem.
3) Använd gester på tabletter och mobil
Folk älskar att använda gester på sina pekskärmar. De känner sig mer empowered när det känns som om de glider en bild, eftersom upplevelsen är mer nedsänkt. Att försöka knacka på små pilar eller navigeringspunkter på en mobil enhet är för tråkigt. Det är mycket mer naturligt att kunna ta fingret och dra en bild upp, ner, vänster eller höger.
4) Undvik ljuslådor: inaktivera dem på mobilen
Om du har bilder av produkter, som maskiner eller föremål som ska ses mer detaljerat (tyg, juveler etc.), så är en ljuskälla med större bilder meningsfull. Även då borde de bara användas på skrivbordet. När du bryter ner till tablett och mobila skärmstorlekar bör ljuslådor inaktiveras. De kan orsaka ett antal problem med användarupplevelsen. Om något händer och ljusboxen inte stämmer korrekt, kan de kanske inte komma åt avslutningsknappen, eller bilderna visas kanske inte korrekt.
5) När du använder navelement, gör dem diskreta
Om du har ett glidande bildgalleri med ett betydande antal bilder, så är det lätt att navigera. Du vill inte få användarna att vänta att cykla genom allt. De kan enkelt klicka igenom i sin egen hastighet, komma in, få vad de behöver och gå ut. När du använder dessa element, se till att du klämmer fast dem på platser som är ute av vägen. Har inte navigeringspunkter som går över text eller andra länkar. Undvik också alltför komplicerade kontroller. Dessa tar upp mycket utrymme, distraherar användarna från innehållet och skapar ett rörigt utseende. Att ha prickar som användare kan klicka för att cykla genom eller hoppa över till vissa bilder, och att ha fram och tillbaka pilar är mycket. Överdriv inte det!
6) Blanda inte bilder och videoklipp
Att blanda olika media är vanligtvis okej, men att blanda videor där de inte förväntas kan orsaka problem. Du vill inte att en användare av misstag ska starta en video, som spelar ljud för att alla ska höra. Separata videor och bilder, så de vet vad de kan förvänta sig. Ingen gillar sådana typer av överraskningar.
7) Se till att bilderna inte skala över deras maximala bredd
Detta är viktigt, eftersom du kan undvika pixelerad skalning av bilder som är för små för ett utrymme. Bilderna ska vara stora nog att fylla 100% av en mobilenhet (för de flesta fall), men stationära storlekar bör bara ställa in maximal bredd till 100%. Jag har sett några fall där någon har en av de stora 27-tumsskärmarna, och när de drar ut webbläsarens bredd, skalar bilden med den, förbi den avsedda storleken.
8) Bildskalning
Om du har bildskala, se till att de skalar ner, inte uppåt. Det är bäst att ställa in exakta dimensioner för dina bilder. Många gånger används en procentandel för en dimension, medan den andra dimensionen är inställd på auto. Om du till exempel vill ha en bild som spänner över 50% av webbläsarens bredd, ställer du in bildens bredd till 50% och höjden till auto .
9) Undvik att använda bildtexter
Bildtexter eller någon annan medföljande text kan orsaka alla slags problem för dig och dina användare. Det första problemet är att det är svårt att passa texten på en mobilenhet. Med smarta telefoner har du begränsat utrymme som det är, men försöker lägga till text kan göra hela upplevelsen känslig och hopkramad tillsammans. Ett annat problem är att du är begränsad i den mängd text du kan använda. Om du lägger till en bildtext eller någon extra text lägger du till variabeln av responsiv text i mixen. Du måste överväga ordbrott, och hur flera textrader kommer att se ut tillsammans med din bild. Om texten används som en överlay, måste du också ta ställning till var den faller över bilden. Lätt text över ljusområdet på bilden kommer att göra texten oläslig. Kontrast är nyckeln, och varje bild är annorlunda.
Slutsats
Grunden när det gäller någon aspekt av webbdesign är att den måste fungera bra och ha användaren i åtanke. Om ingen kan använda din webbplats kommer de inte att komma tillbaka. Genom att följa dessa enkla doser och inte ger responsiva bildgallerier det så att användarna inte kommer att stöta på vanliga problem när de tittar på dina bilder.