HEY

Neem deel aan de volgende Webflow uitdaging

Hoe bereken je de Hn-afstand?

Ik heb een geautomatiseerde oplossing gevonden die uw leven makkelijker maakt: u kunt de Hn-spacingberekening automatisch uitvoeren.

Bijgewerkt op

20/7/2020

Hn afstand
Foto door Jessica Ruscello op Unsplash

Alle ontwerpers streven ernaar om elke webpagina die ze maken aantrekkelijk te maken. Ik durf te wedden dat dat ook een deel van je doelen is! Zorg dus eerst voor de afstand tussen uw titels en ondertitels (ook wel Heading genoemd). Ik heb een geautomatiseerde oplossing gevonden die uw leven makkelijker maakt: u kunt de Hn-afstand automatisch berekenen. Maar eerst, weet je echt wat de voordelen zijn van het gebruik van Hn op een website?

Met behulp van Hn: goed of slecht idee?

Door gebruik te maken van Hn kunt u er zeker van zijn dat de webpagina's die u maakt duidelijker en begrijpelijker zijn. Je slaat twee vliegen in een klap: de pagina's zullen niet alleen de internetgebruikers aanspreken, maar ook de zoekmachines.

Vertel me eens: heb je ooit een pagina met alleen een lang tekstblok onder ogen moeten zien? Hoe voelde je je erdoor? Ik ontmoet ze de hele tijd. Ik moet bekennen dat ze me meteen laten weglopen, voordat ik zelfs maar tijd heb gehad om te begrijpen waar ze het over had.

Hn afstand
Foto door Pine Watt op Unsplash

Dus, als een mens moeite heeft om een tekst zonder Hn te begrijpen, wat zou een machine of een robot dan doen? Zeker, ze zijn intelligent, maar niet intelligent genoeg om dergelijke informatie te ontcijferen. Vandaar het belang van het prioriteren van argumenten, ideeën... Dit is precies waar rubrieken (verschillende Hn) in het spel komen. Ze vergemakkelijken de structurering van een webpagina. En als de berekening van de Hn-afstand goed gedaan is, is het resultaat nog beter.

Ook houden internetgebruikers van goed gestructureerde pagina's. Het geeft hen een goede gebruikerservaring.

De Hn zijn veel belangrijker aan de SEO-kant.

Ook vanuit SEO-oogpunt zijn de implementatie van verschillende Hn en de berekening van de Hn-afstand van het grootste belang. Ik heb dit al eerder aangeroerd, dat het voor zoekmachines makkelijker zou zijn om te begrijpen waar de website over gaat.

Google zal geen moeite hebben om uw site te indexeren. Heb je ooit de tijd genomen om mijn andere artikel over SEO-tips te lezen om je site in de beste zoekresultaten te krijgen, dan herinner je je misschien een van mijn tips: voeg trefwoorden toe aan de rubrieken. Zo laat u Google begrijpen waar uw pagina, uw site, nog steeds over gaat.

Hn afstand
Foto door Jonny Caspari op Unsplash

Hoe plaats je de Hn en bereken je de Hn-afstand?

Als je wilt dat alles goed gaat, moet je nog steeds een bepaalde regel volgen. Bij het plaatsen van de verschillende Hn, moet je het in volgorde doen. Nooit, je moet nooit levels springen; wetende dat de Hn uit zijn samengesteld: H1, H2, H3, H4, H5 en H6. De meest gebruikte is H1 tot H3.

Hier is een meer concreet voorbeeld:

Een pagina moet zo gestructureerd zijn: H1 > H2 > H3 > H4..., en niet zo: H2 (bovenaan de pagina) > H4 (direct na deze H2) > H1 > H3... Kortom, het is een kwestie van eenvoudige logica.

Daarnaast is het belangrijk om het aantal Hn in evenwicht te brengen. Het zou niet gepast zijn om meerdere H1 of meerdere H2, of zelfs meerdere H3 in te voegen. Bovendien is voor een pagina slechts één H1 toegestaan. De H2's fungeren als onderverdelingen, en de H3's als onderverdelingen.

Bijvoorbeeld:

  • H1
  • Inleiding
  • H2
  • Paragraaf
  • H3
  • Paragraaf
  • H3
  • Paragraaf
  • H2
  • Paragraaf
  • Conclusie

De H1 wordt over het algemeen gebruikt om de gehele inhoud te beschrijven (een soort samenvatting in 4 of 5 woorden); het is de algemene titel van de tekst. Zorg ervoor dat het niet te veel woorden bevat, en het belangrijkste sleutelwoord bevat.

Hn afstand
Foto door Rolands Zilvinskis op Unsplash

Hoe werkt de opmaak van de rubrieken?

De H1 heeft de grootste omvang van allemaal; het is ook de dikste. Dit wordt gevolgd door H2, dan H3 en zo verder. U moet echter weten dat we het hier niet over vormgeving hebben, maar over "structuur". Deze maten en vetgehaltes laten alleen het belang van de rubrieken zien.

Het is echter heel goed mogelijk om hun vormen te veranderen, zodat ze visueel aantrekkelijk zijn, en zo de hele pagina een lust voor het oog te maken. In het algemeen zijn deze typografieën afhankelijk van de thema's en CSS die voor de site zijn aangenomen.

Nu, hier is hoe je het kan doen met deze Hn opmaak en afstand.

Gebruikt een stijlgids

Weet je nog die stijlgids waar ik het vaak over heb? Ik geef het aan degenen die mijn training volgen (en het is gratis).

Voor elke rubriek heb ik een specifieke grootte en typografie gekozen. Bij elke nieuwe pagina die u op Webflow aanmaakt, neemt de Hn automatisch deze maten en typefouten over. Alleen, je zult de stijl die ik heb verfijnd niet per se leuk vinden. Dat is geen probleem, je kunt je eigen stijlgids maken.

Krijg hulp van typeschaal.com

Het probleem bij het maken van een eigen stijlgids is dat je misschien geen idee hebt hoeveel Hn ruimte je tussen de rubrieken moet nemen. Dat is wanneer je type-schaal.com gebruikt. Neem nu afscheid van de handmatige afstandsberekeningen. Op het platform heeft u direct toegang tot een aantal pixels die automatisch worden voorgesteld, een verhouding die het mogelijk maakt om een goede afstand te krijgen.

Er is een YouTube-video waarin ik dit beschrijven aan de onderkant van het artikel. Steun me door subscting aan het kanaal van YouTube "Happy Desk design"

Hn afstand
Foto door Clark Street op Unsplash

Conclusie
De details maken het verschil! Ja, de Hn-afstand is een van die details. Daarom is hun berekening erg belangrijk. Gelukkig voor u is er nu een tool waarmee u het automatisch en vooral gratis kunt doen!

YouTube: Koersafstand (H1, H2, H3...) voor u berekend! (2020)

Kom terug naar deze pagina wanneer je maar wilt. Heb je nog ideeën bedacht die ik misschien vergeten ben? Zo ja, wat zijn dat dan? Laat hieronder een reactie achter of stuur een e-mail naar hello@happydesk.be.
Kevin Palombo, manager van Happydesk.

VRIJE TRAINING

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Begin gratis

Koffiepauze

4 items die je misschien leuk vindt

VRIJE TRAINING

Registreer hier voor toegang tot
de gratis training

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Start de gratis training