26 februari 2015

Techie Tip: truncaten & responsive

development

Met de komst van responsive websites is truncaten geen oplossing meer om verschillende onderwerpen te tonen op een pagina. Wat nu?! Jeffrey, frontend developer bij W3S, schreef zijn eigen JQuery plug-in en legt uit hoe jij die kunt gebruiken!

Wat is truncaten?

Het Engelse woord ‘truncate’ staat voor ‘afknotten’. In meerdere programmeertalen kun je met een truncate functie een tekst afkappen, gebaseerd op een x aantal karakters.

Het truncaten, of afkappen,  van teksten binnen een website is lange tijd een goede oplossing geweest in veel websites. De belangrijkste reden om truncaten te gebruiken, was om meerdere onderwerpen netjes op de pagina te tonen, zonder enorme lappen tekst het ontwerp te laten ruïneren.

Een design is ontwikkeld op basis van bepaalde richtlijnen. ‘Als Front-end developer zoek je de grenzen op van de design beperkingen op en maak je een zo flexibel mogelijk ontwerp. Bijvoorbeeld door het tekstblok groter te maken, zodat er meerdere regels inpassen’, aldus Jeffrey. Helaas is dit niet altijd een mooie oplossing. Vaak geeft een tekstblok met een vast aantal regels van een bepaalde lengte het mooiste resultaat.

Voorbeeld: je hebt ruimte voor max. 4 regels tekst. Er is een tekst van 180 karakters. Op een desktop weergave van een website passen 50 karakters per regel. Een klein rekensommetje leert ons dat dit nét past. (50 karakters x 4 regels = ruimte voor 200 karakters)

Responsive.. Wat nu?!

Met de komst van responsive websites is truncaten technisch helaas geen goede oplossing meer voor deze design uitdaging. Waarom niet? Zie hieronder een voorbeeld.

Voorbeeld: op een tabletweergave passen 40 karakters op een regel in plaats van 50 karakters. Hierdoor loopt de tekst buiten het blok. Bij 4 regels, is er ruimte voor 160 karakters. (40 karakters x 4 regels = 160 karakters). Bij een tekst  van 180 karakters – je begrijpt het al – zijn er 20 karakters teveel. Deze karakters wil je niet tonen.

Het afkappen van tekst wordt normaliter toegepast via een backend taal. Dat zijn programmeertalen die op de websiteserver draaien – zoals Ruby, PHP of C#. Het probleem is dat deze talen niet weten:

  • hoe groot de letters in jouw browser zijn;
  • hoe breed je scherm is;
  • hoeveel karakters er op een regels passen in dat ene blokje. 

De oplossing: Javascript!

Jeffrey heeft zich erover gebogen en een oplossing bedacht. ‘Om deze informatie wél te weten te komen, heb je de programmeertaal nodig die in de browser draait; Javascript. Laatst heb ik mijn geschreven javascript functie omgebouwd tot een jQuery plug-in die dit mogelijk maakt’.

Het afkappen van de tekst wordt real-time bijgesteld in de website. Handig in het geval van diverse weergaven, zoals bij responsive. 

De voordelen

Voor je klant is het eenvoudiger om teksten en titels te schrijven. Hij hoeft geen rekening te houden met de regellengte. Voor de developer is er ook een voordeel, want er zijn geen gebroken ontwerpen.

Deze plug-in ook gebruiken?

Download de plug-in door op onderstaande button te klikken. Wanneer je de plug-in downloadt, ontvang je ook nog eens de uitleg hoe je deze het beste in je website kunt plaatsen!

Zijn er vragen over de implementatie of de functionaliteit? Neem contact op,  zodat onze front-end developers je kunnen helpen met het vinden van een oplossing.

Geschreven door: Jeffrey Arts
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.