Vi vet alla och förstår vikten av att designa webbplatser på en lyhörd plattform, eller hur? Det gäller också bilder och fotogallerier.
Det finns inget värre än att navigera till en vacker webbplats och se bilder som bara inte låser? på plats eller storlek korrekt. Det låter dig nästan tänka att konstruktören har glömt något, eller missat ett steg.
Idag ska vi titta på sju saker du kan göra i designprocessen för att skapa bättre lyhörda fotogallerier. (Vi pratar inte här, det här är designprocesser som kan hjälpa dig och utvecklaren, oavsett om de är samma eller inte.)
1. Tänk på bildförhållandena
Desktop-upplevelsen kan vara ganska annorlunda än den på en mobilenhet. Men för de flesta webbplatser är bildplaceringarna desamma. Ditt jobb är att se till att samma meddelande kommuniceras i båda miljöerna och att bilden inte går vilse i olika skärmstorlekar.
Det är där man tänker på bildförhållandet - förhållandet mellan bildens horisontella och vertikala plan - kommer in.
Tillbaka till den skrivbordswebbplatsen kan ett coolt, supertunt horisontellt foto se fantastiskt ut på toppen av din webbdesign. Men vad händer med den bilden på den mindre skärmen i en mer kvadratisk miljö? Krympas fotot till en storlek som är svårt att se? Eller försvinner hälften av fotot?
Det är där bildförhållandet kommer in. Genom att välja ett horisontellt vertikalt förhållande för bildstorlekar som är likartade, kommer mindre bildinnehåll att gå vilse vid byte av enheter. Det kommer också att göra det enklare för dig att arbeta med bildplaceringar och du behöver inte oroa dig lika mycket om att ladda upp flera storlekar för olika brytpunkter.
2. Storlek och skala konsekvent
Den vård du tar i beskärning, storlek och uppladdning av bilder kan påverka ditt arbetsflöde ganska dramatiskt.
Hur många av er bara ladda upp foton till CMS och hoppas på det bästa? Ja är fel svar.
Varje foto ska beskäras och dimensioneras för placeringen i webbdesignen. Detta säkerställer att bilderna kommer att se ut som de är avsedda och du kommer inte att sluta med saknade huvuden i toppen av foton eller element som lämnas av en (eller båda) sidorna.
Det tar lite mer tid på projektets baksida men det är väl värt ansträngningen. (Särskilt om du arbetar med skjutreglage eller gallerier.)
3. Använd en Skjutreglage eller Galleri
Att använda en behållare för bilder som en skjutreglage eller ett galleri kan hjälpa dig att hantera responsiva bilder i din webbdesign. Särskilt om du använder ett välkänt och etablerat verktyg från tredje part, görs det mesta av den tunga lyftningen för dig för att säkerställa att dessa element fungerar som de ska.
Två av de tidigare tipsen är fortfarande viktiga, även om man använder glid- eller gallerelement. aspektförhållanden och dimensionerings- och skalningskoncept gäller fortfarande.
Är du osäker på vilket alternativ att använda? Välj en skjutreglage när du har en handfull bra bilder som kommer att fungera i större storlekar. Det är ett populärt alternativ för toppen eller hjälten? avsnitt av en webbsida. Välj ett galleri när du har gott om bilder som kan göra små utan problem med läsbarhet. Det fungerar bra för portföljer eller webbplatser med många bilder att visa upp.
4. Håll dig borta från bildtexten när det är möjligt
Bildtext kan vara ett bra verktyg för att mäta informationen i en bild, men kan verkligen komma i vägen för hur webbplatsen fungerar. Undvik dem om du kan eller kommer med en alternativ lösning som inte är i form av en traditionell bildtext.
Stora textblock, som texter, kan göra vackert på stora skärmar men presentera stora problem i mindre miljöer. Den resulterande effekten kan krossa och potentiellt leda till att användarna överge din webbplats. (Och med så mycket trafik som kommer från mobilen för de flesta webbplatser kan det vara katastrofalt.)
5. Var försiktig när du mixar video och bilder
Låt oss vara tydliga: Det är helt acceptabelt att ha video- och bildelement på din webbplats. Det är nog något du borde göra.
Men blanda inte video och bilder i samma delar av konstruktionen, till exempel sätta video och bildelement i samma reglage. Ibland får du tur och det kommer att fungera som en charm. Andra gånger kommer du att vara kvar med tomma rutor på vissa enheter som bara ser konstigt ut.
Det bästa alternativet är att ge varje enskild typ av element sitt eget utrymme i designen. Detta gäller nästan alla designelement, men särskilt bilder och video.
6. Skär onödiga element
Ett av de största problemen med skjutreglage och gallerier är att för ofta sätter designern för mycket skräp inne i behållaren. Det finns navigationspilar, navigeringsknappar, text, samtal till handling och listan fortsätter.
Vanligtvis förstår användarna hur man ska interagera med en reglage. Om du inte gör något helt ur väggen behöver du inte två lager av navigering som visar användarna vad man ska göra. En enda rad knappar eller pilar är mycket (om du behöver dem alls).
Inkludera endast element som användare behöver interagera med. Om syftet med ett bildgalleri eller skjutreglage är att få användaren att klicka / peka på ett samtal till handling, bör det vara det enda alternativet på fotot. Håll det enkelt. Lämna inte för många alternativ. Det kan faktiskt hjälpa dina konverteringsfrekvenser.
7. Använd endast högkvalitativa bilder
Det står nästan självklart, men det händer fortfarande alltför ofta. Om du inte har en stjärnbild, använd inte en bild alls. Högkvalitativa bilder med hög upplösning är viktigare än någonsin. Användare kommer inte att slösa tid på att titta på en webbplats med pixelerade eller dåliga bilder (och de kommer förmodligen inte att lita på dig om kvaliteten är subpar).
Ett stort antal användare tittar på din webbdesign med hjälp av enheter med högupplösta skärmar; de förväntar sig högkvalitativa bilder. Du måste leverera.
Vissa bildformat ändras för att möta dessa högupplösningsbehov samtidigt som de levererar mer komprimerade bilder. Vers dig själv i format - Google Developers är ett bra ställe att börja - vet vilka skärmupplösningar som används mest och brukar vana att spara filer på ett sätt som bäst kan levereras till användarna.
Slutsats
Vi vill alla skapa webbplatser som användare känner ett behov av att interagera med. Starka bilder är en viktig del av den ekvationen. Lika viktigt är att få dem att fungera bra oavsett enhet.
Planera för bilder utrymmen som kommer att fungera på olika enheter storlekar när du är i wireframing stadier av ett webbdesign projekt. Du kanske tycker att det finns en del ge och ta, särskilt när det gäller bildform, men i längden gör besluten tidigt och skapar den konsekvensen kommer att gynna din webbplatsdesign på lång sikt.