Hoe wij het probleem van afbeeldingen in schaalbare websites oplosten

Hoe wij het probleem van afbeeldingen in schaalbare websites oplosten

Door Ewoud Budding (oprichter Apollo) | 29 - 09 - 17 | 0 reacties


The future belongs to those who believe in the beauty of their dreams.

Eleanor Roosevelt


Één van de belangrijke processen binnen een bedrijf is het onderhoud van de website. Afbeeldingen uploaden op websites is echter altijd lastig geweest.  Aangezien wij bedrijfsprocessen sneller en efficiënter willen maken, hebben wij voor het uploaden van afbeelding op schaalbare websites een oplossing gebouwd.

Traditioneel was een afbeelding aan je website toevoegen lastig. Je moest kennis hebben van Photoshop, vervolgens je afbeelding op het juiste formaat uitsnijden, niet te groot opslaan en vervolgens via je CMS op je website plaatsen. Voor de gemiddelde gebruiker een lastige klus.

Met de komst van schaalbare websites(de website past zich aan op het apparaat waarop je het bekijkt) werd deze uitdaging nog groter voor onze gebruikers. Van die mooie brede sfeerfoto op je PC blijft niks over als je die op mobiel laat zien in hetzelfde formaat.

Wij wilden deze uitdaging oplossen voor onze gebruikers. En dit leverde een aardige uitdaging op voor onszelf.

Om te bepalen wat we wilden bereiken, hebben we eerst bepaald aan welke eisen onze oplossing moest voldoen. Dit werd een kort maar uitdagend lijstje:

  1. Geen kennis van fotobewerkingssoftware nodig voor gebruikers.
  2. Wij stellen in welk formaat de foto er op de website uitkomt, dan hoeft een gebruiker zich hier niet druk om te maken.
  3. Slechts 1 afbeelding uploaden in Apollo die op maat gemaakt wordt voor meerdere resoluties. Niet losse afbeeldingen voor PC en mobiel uploaden.
  4. Gebruikers moeten zelf visueel kunnen bepalen hoe de afbeelding op de website en mobiele website komt te staan, waar moet de focus op komen te liggen.
  5. Bezoekers van de website moeten de geoptimaliseerde versie van de afbeelding te zien krijgen(zowel op mobiel als op pc)

De basis

De basis van de oplossing moest gebruiksvriendelijkheid zijn. Hoe eenvoudiger te bedienen, hoe beter. Dit betekende dat de gebruiker maar 1 handeling hoeft te doen om zijn afbeelding te uploaden. Een eenvoudige upload functionaliteit gecombineerd met een drag 'n drop functionaliteit bood hier de ideale start voor

Achter deze upload functionaliteit definieerden wij de afmetingen van de uiteindelijke afbeelding en werden eisen 1, 2 en 3 afgevinkt.

Afbeeldingen op maat maken

Eis 2 verlangde dat dit visueel zou gebeuren en aangezien we al wisten in welk formaat de afbeelding uiteindelijk op de website moest komen, zijn we begonnen met het inkaderen van de afbeelding in dit formaat.

De focus

Soms zit de essentie van een foto in een detail, of in een bepaalde plek in de foto. Om onze gebruiker de mogelijkheid te geven dat deel van de foto uit te lichten dat voor hem belangrijk is, moest eis 4 opgelost worden.

Hier kwam een out-of-the-box enorm van pas. Waar veel responsive-afbeelding oplossingen een soort van kader binnen de foto definieren waar je je aan moet houden, hebben wij het denken omgedraaid en logisch gemaakt. Omdat wij al wisten wat het formaat moest zijn, kunnen we de afbeelding achter dat formaat plakken en de gebruiker de mogelijkheid geven de afbeelding heen en weer slepen. Inzoomen werd toen ook eenvoudig, met de zoomfunctie onderaan de image editor kan de afbeelding in- en uitgezoomd worden.

De combinatie van slepen en zoomen levert de ultieme vrijheid op voor de gebruiker. Nu kan de gebruiker voor het eerst echt zelf bepalen wat hij wil laten zien in zijn afbeeldingen zonder kennis te hebben van Photoshop of andere fotobewerkingssoftware.

Optimalisatie voor mobiel

Om te bepalen wat er getoond gaat worden op mobiel, stellen wij ook daar het formaat van in. Daar hoeft de gebruiker er niet meer overna te denken en er vormt zich bovenop de afbeelding een wit gestippeld vierkant. Het deel van de afbeelding dat zich binnen het vierkant bevind, wordt uitgesneden voor op mobiel.

De voorkant van de website

De laatste horde die genomen moest worden, was het correct tonen van de afbeelding aan de voorkant van de website. Zowel op mobiel als op de PC moesten de afbeelding geoptimaliseerd getoond worden. Met behulp van een geavanceerde responsive techniek lukte het ons om de afbeelding die de gebruiker had uit te snijden, te zoomen en geoptimaliseerd weer te geven.

De afbeelding op de PC:

De afbeelding op mobiel:

Deze oplossing draait nu op verschillende websites en sinds we deze tool hebben ingezet, hebben we geen vragen meer gehad van onze gebruikers over hoe ze met hun afbeeldingen om moeten gaan. Uploaden, slepen, zoomen en publiceren en klaar is de gebruiker!

Iedere maand versturen wij een nieuwsbrief met ideëen om uw website te verbeteren. Geef u op en maak een succes van uw website.

Reacties


Laat je reactie achter