9 Essentiële regels voor responsieve afbeeldingsgalerieën
Responsief ontwerp is een essentieel en noodzakelijk onderdeel van webontwikkeling. Een van de grootste problemen met responsief webontwerp sinds eind zijn afbeeldingen. Velen discussiëren over de beste manier om afbeeldingen weer te geven op een responsive site. En dan, hoe zit het met beeldgalerijen?
Afbeeldingengalerijen zijn veel complexer dan afzonderlijke afbeeldingen; er zijn nog meer variabelen en dingen om over na te denken bij het implementeren van volledige responsieve afbeeldingen op uw website. Laten we een paar handige tips bekijken voor het implementeren van responsieve afbeeldingen op de juiste manier.
1) Diavoorstellingen: verberg navigatie indien mogelijk
Mogelijk beschikt u niet over navigatie-elementen op een tablet of mobiel apparaat, maar op een desktopcomputer is het een goed idee om die elementen te verbergen totdat ze nodig zijn. Items zoals pijlen vooruit en achteruit en navigatieknoppen moeten zo worden ingesteld dat ze alleen worden weergegeven als iemand de bewegende galerij met afbeeldingen doorkruist. Dit voorkomt afleidingen en voorkomt conflicten tussen inhoud en navigatie-elementen. De hele ervaring voelt minder verward.
2) Vermijd te veel portretfoto's
Als u een galerij implementeert die een raster van afbeeldingen is, kiest u afbeeldingen die op het landschap zijn georiënteerd, of vierkant als dat mogelijk is. Dit maakt het gemakkelijker om ze op een klein scherm te bekijken. Portretfoto's zouden prima zijn op een smartphone in portretmodus, maar door het brede weergavegebied van een landschapsgerichte telefoon is het moeilijk om portretfoto's te bekijken. Landschap is het beste, maar u kunt genoegen nemen met een vierkant als landschap geen optie is. Alle afbeeldingen kunnen zo worden ingesteld dat ze binnen een weergavegebied passen, maar portretfoto's op een landschapsscherm zullen erg klein lijken. Uw afbeeldingen worden niet zo aandachtig bekeken als vierkante of liggende afbeeldingen, die meer gebied van het scherm vullen en groter lijken. Houd bij het selecteren van afbeeldingen de persoon in het oog die deze bekijkt.
3) Gebruik gebaren op tablets & mobiel
Mensen houden ervan om gebaren te gebruiken op hun touchscreens. Ze voelen zich meer bekrachtigd als het voelt alsof ze een afbeelding verschuiven, omdat de ervaring meeslepender is. Tikken op kleine pijlen of navigatiepunten op een mobiel apparaat is te vervelend. Het is veel natuurlijker om uw vinger te kunnen nemen en een afbeelding naar boven, beneden, links of rechts te vegen.
4) Vermijd lightboxes: schakel ze uit op een mobiel apparaat
Als je afbeeldingen van producten hebt, zoals machines of items die gedetailleerder bekeken moeten worden (stoffen, juwelen, enz.), Dan is een lightbox met grotere afbeeldingen logisch. Zelfs dan zouden ze alleen op de desktop moeten worden gebruikt. Wanneer u het afbreekt naar de scherm- en tabletformaten, moeten lightboxes worden uitgeschakeld. Ze kunnen een aantal problemen met de gebruikerservaring veroorzaken. Als er iets gebeurt en de lightbox niet correct wordt aangepast, hebben ze mogelijk geen toegang tot de exit-knop of worden de afbeeldingen mogelijk niet correct weergegeven.
5) Wanneer u nav-elementen gebruikt, maakt u ze onopvallend
Als u een glijdende afbeeldingengalerij heeft met een aanzienlijk aantal dia's, is navigatie zinvol. U wilt niet dat gebruikers wachten om alles te doorlopen. Ze kunnen eenvoudig op hun eigen snelheid doorklikken, instappen, krijgen wat ze nodig hebben en uitstappen. Zorg er bij het gebruik van deze elementen voor dat ze worden weggestopt op plaatsen die niet in de weg liggen. Laat geen navigatiepunten over tekst of andere links gaan. Vermijd ook overdreven complexe bedieningselementen. Deze nemen veel ruimte in beslag, leiden gebruikers af van de inhoud en creëren een rommelige indruk. Met stippen waarop gebruikers kunnen klikken om door te bladeren of naar bepaalde afbeeldingen te springen, en met pijlen vooruit en achteruit is er genoeg. Overdrijf het niet!
6) Meng geen afbeeldingen en video's
Het mengen van verschillende media is meestal goed, maar het mengen van video's waar ze niet worden verwacht, kan problemen veroorzaken. U wilt niet dat een gebruiker per ongeluk een video start, die geluid afspeelt dat iedereen kan horen. Aparte video's en afbeeldingen, zodat ze weten wat ze kunnen verwachten. Niemand houdt van dit soort verrassingen.
7) Zorg ervoor dat afbeeldingen niet verder reiken dan hun maximale breedte
Dit is belangrijk, omdat u pixelschaling van afbeeldingen die te klein zijn voor een spatie kunt voorkomen. Afbeeldingen moeten groot genoeg zijn om 100% van een mobiel apparaat te vullen (in de meeste gevallen), maar voor desktop-pc's moet alleen de maximale breedte tot 100% worden ingesteld. Ik heb een aantal gevallen gezien waarin iemand een van die grote 27-inch displays heeft en wanneer ze de breedte van de browser slepen, schaalt de afbeelding mee, voorbij de beoogde grootte.
8) Schalen van afbeeldingen
Als je afbeeldingen op schaal hebt, zorg dan dat ze verkleinen, niet omhoog. Het is het beste om exacte afmetingen voor uw afbeeldingen in te stellen. Vaak wordt een percentage gebruikt voor één dimensie, terwijl de andere dimensie is ingesteld op automatisch. Als u bijvoorbeeld wilt dat een afbeelding 50% van de breedte van de browser beslaat, stelt u de breedte van de afbeelding in op 50% en de hoogte op automatisch .
9) Gebruik geen bijschriften voor afbeeldingen
Bijschriften van afbeeldingen of andere begeleidende tekst kunnen allerlei problemen voor u en uw gebruikers veroorzaken. Het eerste probleem is dat het moeilijk is om de tekst op een mobiel apparaat te passen. Met smartphones heb je beperkte ruimte zoals het is, maar als je probeert tekst toe te voegen, kan de hele ervaring rommelig en opeengepakt kloppen. Een ander probleem is dat je beperkt bent in de hoeveelheid tekst die je kunt gebruiken. Door een bijschrift of een extra tekst toe te voegen, wordt de variabele van de responsieve tekst aan de mix toegevoegd. U moet rekening houden met woordonderbrekingen en hoe meerdere tekstregels samen met uw afbeelding eruitzien. Als de tekst als overlay wordt gebruikt, moet u zich ook zorgen maken waar deze over de afbeelding valt. Lichte tekst over het lichte gedeelte van de afbeelding maakt de tekst onleesbaar. Contrast is de sleutel, en elke afbeelding is anders.
Conclusie
Waar het bij webdesign om draait, is dat het goed moet werken en rekening moet houden met de gebruiker. Als niemand uw website kan gebruiken, komen ze niet terug. Door deze eenvoudige taken en don'ts van responsieve afbeeldingsgalerieën te volgen, wordt het zo dat gebruikers geen algemene problemen tegenkomen bij het bekijken van uw afbeeldingen.