Een willekeurige klant die mij aangeeft wat voor website hij of zij in gedachte heeft, heeft het vaak over kleur, lay-out, plaatjes en eventueel video. Dan is het voor mij (ik ben tenslotte ook docent) verleidelijk om uit te wijden over een goede opmaak van de pagina-inhoud in de onderliggende code. Maar code boeit niet en kleur en beeld spreken natuurlijk veel meer aan. Hier volgt een voorbeeld uit de praktijk dat ik vaak tegen kom.

Webbouwer

Een willekeurige webbouwer verzekert de klant dat hij een goede, moderne site krijgt. Dat is muziek in de oren van de klant en de periode die volgt gaat vooral over het ontwerp, beeld dus, over de gewenste pagina’s en over de te plaatsen teksten. De site wordt opgeleverd, er is een testperiode, er worden nog wat dingen hier en daar aangepast en opgelost en de site gaat live. Iedereen is vol lof over de nieuwe site, hij ziet er geweldig uit.

Zoekmachines

Maar dan blijkt dat de resultaten van de zoekmachines tegenvallen. Zo kan het gebeuren dat de klant bij mij komt met de vraag of ik eens wil kijken. Dan wordt vaak duidelijk dat er ook nog zoiets is als goed gevormde HTML code. Als die basis namelijk in orde is dan ben je de zoekmachines beste vriend. En wie wil dat nou niet?!

Optimalisatie

Vaak moet ik dan uitleggen dat een zoekmachineoptimalisatie om te beginnen neerkomt op een complete herbouw van de site. Een goede basis in HTML en CSS is het fundament voor een goede zoekmachine-indexering. Vergelijk het met de fundering van een huis (ik kom uit een familie van specialisten in funderingsherstel), daarop kan je bouwen. Als het mogelijk is om in de bestaande code te volstaan met een aantal aanpassingen, dan is dat natuurlijk mooi. Maar het komt ook voor dat dit meer werk is dan de hele boel opnieuw opmaken.

Aandachtspunten

Dus beter meteen vanaf het begin goed doen. Zoekmachines houden van goed gevormde, valide HTML code waarin de inhoud goed te indexeren is. Aandachtspunten zijn:

Schone code

Zoekmachines bekijken een site niet op het beeldscherm maar lezen alleen de code. Zorg daarom dat die code zo schoon mogelijk is, zodat de inhoud, je informatie dus, het verhaal dat je wilt vertellen, makkelijk te vinden is.

Onnodige code

Als een zoekmachine zich moet worstelen door een wirwar van code met onnodige vormgevingsaanwijzingen en scripts, dan wordt dat je niet in dank afgenomen. Plaats deze liever in een externe pagina.

Volgorde in de code

Zorg dat de belangrijkste inhoud bovenaan staat in de code van de pagina, dan is de zoekrobot nog fris, het zijn net mensen. Dat zal meestal de (hoofd)tekst zijn, daar staat de belangrijkste te indexeren inhoud. Het menu kan ergens onderaan in de code.

Valide code

Zorg voor de juiste paginastructuur volgens de heersende goede gewoontes in valide en moderne HTML.

Betekenisvolle code

Zorg dat tekst wordt opgedeeld in alinea’s met betekenisvolle koppen en subkoppen. Gebruik vette en cursieve tekst alleen maar heel selectief en doordacht. Gebruik lijsten als het een opsomming betreft.

Snelle code

Zorg dat de pagina’s snel laden. Ook zoekmachines houden niet van wachten, efficiëntie gaat voor. En een webpagina met schone, goed gevormde code laadt sneller.

Afbeeldingen

Voeg een korte beschrijving bij een afbeelding zodat zoekmachines de informatie ervan meekrijgen. Als een afbeelding illustratief is, plaats deze dan niet in de code van de pagina, maar in de externe stijlpagina.

Zoekwoorden

Verwerk de belangrijkste zoekwoorden per pagina in de bestandsnaam, de paginatitel, de koppen en de tekst zelf, maar overdrijf niet en gebruik alleen zoekwoorden die werkelijk ertoe doen voor de inhoud van de pagina.

Webbouw

Bij de bouw van een dergelijke website gaat de aandacht eerst naar de inhoud. Deze wordt als eerste volgens bovenstaande aanwijzingen opgemaakt. De lay-out voor op het beeldscherm wordt pas daarna gemaakt. Want met een goed gevormde code kan later ieder gewenst ontwerp worden gerealiseerd.

Voordelen

Met de hierboven beschreven werkwijze zorg je dat het verhaal dat je online wilt vertellen goed leesbaar is voor iedereen, dus ook voor de zoekmachines. Ik ken mijn plaats en waag me niet aan een opsomming van alle andere apparaten en programma’s die een site kunnen weergeven, voorlezen of hun informatie er op een andere wijze uithalen. Die hebben ook allemaal van de hierboven beschreven aanpak voordeel, nu, maar ook in de toekomst. Want een site die op bovenstaande wijze is gebouwd, is voorbereid op de toekomst.

Een bericht van Waalweb

Zoekmachinevriendelijke webbouw

No related posts.

• het gebruikt in z’n eentje de gehele beschikbare breedte van zijn parent
• het negeert alle elementen met een float
• laat z’n marges overlappen met die van aangrenzende elementen
• top- en bottom margins van ingesloten block-level elementen steken block-level parent uit en overlappen de marges ervan

Maar Blokje wil meer, Blokje wil:

• niet alle omliggende floated blocks negeren
• meerekken met zijn ingesloten floated blocks in plaats van dat deze buiten Blokje uitsteken

Float

De meest voor de hand liggende manier voor Blokje om mee te gaan met de floats van omliggende elementen is als het zelf ook een float krijgt. Op die manier komt Blokje (hier rood) er naast of tussen te staan in plaats van dat het eronder ligt. Maar wat nu als je wilt dat het element na Blokje, niet naast Blokje aansluit (1) of eronder komt te liggen (2), maar op de volgende regel komt te staan (3)? Dan geef je die laatste natuurlijk een clear, want daar is clear tenslotte voor bedoeld. Maar clear is niet de enige oplossing, hetzelfde effect kan ook met andere eigenschappen bereikt worden. En dat kan heel handig zijn.

Clear

Om een block te laten meerekken met zijn ingesloten floated blocks plaatsen we gewoon een extra element onderin (ja, inderdaad, doen we alleen als het niet anders kan), geven deze een clear… en klaar. Maar met die clear beëindig je ook de floats van de eerdere elementen in de HTML-code.

Zie het voorbeeld hieronder, waarbij het kleine ingesloten vierkant een float heeft en Blokje (zijn blocklevel parent, hier felgroen) hem simpelweg negeert (1). Geef Blokje onderin een element met clear en de float van de linkerkolom (die in de HTML-code eerder komt), wordt tegelijk ook gecleart (2). Dat laatste willen we niet, bedoeling is dat Blokje alleen meerekt met zijn ingesloten floated block, verder niets (3).

Hier red je het dus niet met clear, je hebt echt een andere oplossing nodig. En daar gaat dit artikel over.

CSS layouts

Inline en block-level

De eenvoudigste manier om het gedrag van de elementen in je CSS layouts te begrijpen, is om die elementen onder te verdelen in block-level en inline. Als je weet wat de specifieke eigenschappen zijn van beide, zal je veel van wat je ziet gebeuren op het beeldscherm kunnen verklaren. Vervolgens is de oplossing meestal gauw gevonden.

Block Formatting Context

Als aanvulling is er een andere benadering mogelijk. Misschien is deze uitleg iets complexer maar als je die eenmaal onder de knie hebt, verklaart het de vragen rondom CSS layouts die nog overbleven. Want waarom vallen margins de ene keer binnen een div en de andere keer erbuiten, wat is de oorzaak van de ruimte tussen bijvoorbeeld die H1 en de div eronder? En waarom treden die verschijnselen niet op in IE7 en ouder?

Het antwoord is Block Formatting Context (BFC). Misschien kan je Block Formatting Context het beste vertalen met ‘opmaak van een kader in samenhang met de omliggende kaders’; we hebben het hier over layouten dus. Ieder block-level element heeft zijn eigen BFC. Ik stel me daar het volgende bij voor.

Block Formatting Context – Theorie

Een block-level element is van zichzelf zo breed als de beschikbare breedte en het staat geen andere elementen naast zich toe op dezelfde regel. Met float voeg je nieuwe BFC toe aan een element. Hiermee doe je een (ingrijpende) aanpassing in de layout: het element gaat uit de flow van de pagina en zweeft daar nu zo’n beetje boven. Net zo ingrijpend is het als je het een position: absolute geeft, een andere display of een overflow, ook allemaal toegevoegde BFC. Je voegt met CSS eigenschappen met bepaalde waardes toe die betekenis hebben voor de opmaak van het element in relatie tot de de omliggende elementen. Dus het gaat hier niet om een kleur, een rand, de afmeting of een lettertype of iets dergelijks.

Alle CSS stijlen die BFC toevoegen hebben een aantal BFC eigenschappen gemeen. Waarmee je, als je eenmaal een layout op deze manier kunt benaderen, onverwacht gedrag kunt verklaren en over een aantal extra opties voor je layout beschikt.

Block Formatting Context – Eigenschappen

Je kunt twee vormen onderscheiden: het block-level element met zijn standaard BFC en een block-level element met toegevoegde BFC. Hier volgt een overzicht van de specifieke eigenschappen die een block-level element kan krijgen als er BFC is toegevoegd.

• parent met BFC sluit zichtbaar zijn (klein)kinderen met float in (rekt dus mee met de inhoud)
• overlappen niet, ook de margins overlappen niet maar sluiten naast elkaar aan
• top- en bottom margins van geneste elementen zijn ook zichtbaar ingesloten (dus binnen de parent met BFC)

Uiteraard gaat dit niet uitsluitend op voor divs maar voor alle block-level elementen. Ook zal het soms zoeken blijven naar de juiste oplossing omdat iedere CSS-stijl zijn eigen specialiteit heeft en die kunnen op de bewuste plaats juist weer ongewenst zijn. Een voorbeeld: stel je wilt een parent geen vaste breedte geven omdat hij zich moet voegen in de beschikbare breedte. Dan zal het toekennen van een float aan die parent ervoor zorgen dat de deze meerekt met zijn ingesloten floated blocks, doel bereikt zou je denken. Maar tegelijk zal de bewuste parent beneden zijn floated buurman springen:

1. omdat hij de volledige breedte van zijn parent gebruikt
2. want hij heeft geen breedte gekregen die past naast zijn buurman
3. en een block met toegevoegde BFC niet overlapt

Block Formatting Context – Toepassen

Omdat deze benadering in bepaalde layouts dus bepaalde CSS-stijlen uitsluit als oplossing is de beste aanpak om eerst de CSS-stijl te kiezen die het meest voor de hand ligt en dan te kijken welke de gezochte oplossing biedt. Als je het principe begrijpt dan vind je je weg en kan je onverwacht gedrag uiteindelijk verklaren. De volgende combinaties van eigenschap en waarde kennen nieuwe BFC toe aan een block-level element:

• float: left
• float: right
• position: absolute
• display: inline-block
• display: inline-table
• display: table-cell
• display: table
• overflow: auto
• overflow: scroll
• overflow: hidden

Iedere combinatie heeft zijn eigen specifieke eigenschappen. Welke je moet kiezen in welke omstandigheid is afhankelijk van wat er op een bepaalde plek nodig is. Je zult bijvoorbeeld kiezen voor overflow: auto bij een block met een vaste afmeting waar je een scrollbalk wilt zien als de inhoud niet meer erin past. En dan kunnen verklaren wat er nog meer verandert in je layout.

Block Formatting Context – Voorbeelden

In de voorbeelden aan het begin van dit artikel heeft het Blokje (rood) uiteindelijk een overflow: hidden gekregen. Door de toegevoegde BFC overlapt het niet met het bruine blokje met float en komt het ernaast te staan. Omdat het geen float heeft staat het rechts van zich nog steeds geen ander element toe, dus springt geel naar beneden.

Blokje (felgroen) in het andere voorbeeld kan zowel een float: left als een overflow: hidden krijgen. Door deze toegevoegde BFC rekt Blokje alleen mee met het ingesloten floated block. Omdat met de toegevoegde BFC Blokje niet meer overlapt met de linkerkolom, komt het deel dat eerst onder de linkerkolom viel er nu naast te staan. Om de layout dezelfde breedte te laten behouden, is ook de breedte verkleind van Blokje.

IE 7 en ouder

IE 7 en ouder ziet de toegevoegde width of een height aan een element ook als toegevoegde BFC. Dat levert grote verschillen op met de moderne browsers waar dat niet zo is. Want hierdoor zal een div met een width in IE7 en ouder meerekken met een ingesloten floated block en in de moderne browsers niet. En vallen bijvoorbeeld de marges van een ingesloten H1 in IE7 binnen de div en in de moderne browsers erbuiten. Bekijk een voorbeeld met toelichting van een layout waarin een div in IE6 en IE7 wel zonder clear meerekt met een ingesloten floated block en in de moderne browsers niet

Meer weten?

• Waarom marges bij float niet overlappen
• Een layout met overfow: hidden in plaats van clear
• Een layout met 3 kolommen met BFC in plaats van clear

Zie ook de artikelen van Zoe Gillenwater en Philippe Wittenbergh en Thierry Koblentz over dit onderwerp.

Een bericht van Waalweb

CSS-layouts met Block Formatting Context

No related posts.

Het belangrijkste verschil is dat een block-level element altijd de volledige breedte gebruikt en geen andere elementen naast zich duldt. Een inline element staat samen met andere inline elementen naast elkaar op een regel, zoals bijvoorbeeld tekst. Inline wordt ook wel text-level genoemd. Verder vormt een block-level element een (rechthoekig) blok.Dat doet een inline element niet, dat past zich aan de afmeting van de inhoud aan. Hier volgt een opsomming van de eigenschappen van inline en block-level elementen.

Block-level

• Gebruikt de volledige breedte van het parentelement
• Vormt een rechthoek
• De inhoud van een block-level element kan bestaan uit inline en block-level elementen en uit tekst.
• Tekstelementen zijn block-level elementen. Denk aan koppen en alinea’s, deze staan van zichzelf al onder elkaar. (let op dat deze geen andere block-level elementen kunnen insluiten!)
• Andere voorbeelden van block-level elementen zijn div, table, ul, ol en li.
• Door een block-level element een breedte te geven pas je de zichtbare breedte aan. Dit betekent echter niet dat andere elementen de vrij gekomen ruimte kunnen innemen. Het blijft het enige element op de regel.

Inline

• Inline elementen staan naast elkaar op een regel
• De afmeting en vorm van een inline element wordt bepaald door de inhoud.
• De inhoud van inline elementen kan bestaan uit tekst en uit andere inline elementen zoals img, span, strong, em en a.
• In een inline element kunnen geen block-level elementen staan.
• Er mogen nooit inline elementen los in de body staan, deze horen ingesloten in een block-level element.
• Je zult tevergeefs een width, height, margin-top en margin-bottom aan een inline element geven.

Inline-block

Er is ook nog een tussenvorm waarbij een element zowel inline als block-level eigenschappen heeft. Voorbeelden hiervan zijn afbeeldingen en block-level elementen waaraan Block Formatting Context is toegevoegd zoals bijvoorbeeld float.

Meer weten?

Visual Formatting Model W3C

Een bericht van Waalweb

Block-level en inline elementen

No related posts.

Mobiel Web

Bij de meeste bestaande websites is nog geen rekening gehouden met mobieltjes. Logisch want de vraag was er niet en de oplossingen moesten nog bedacht worden. Het afgelopen jaar is er op dat gebied veel gebeurd. Je zou kunnen zeggen dat wij webbouwers ons bevinden een fase van bewustwording.

Bijvoorbeeld: bijna alle websites die op dit moment een mobiele versie bieden gebruiken daar een aparte URL (internetadres) voor. Dat kan lastig ziijn als je die URL naar een collega mailt en die vervolgens de mobiele versie van de website op zijn computer te zien krijgt. Intussen weten we dat het helemaal niet nodig is om voor de mobiele versie van een website aparte pagina’s te maken. Het is bovendien beter als de URL op alle apparaten gelijk blijft. Het is namelijk de eenvoudigste manier om te voorkomen dat de zoekresultaten verdeeld worden over twee pagina’s. Al is er natuurlijk wel weer een manier bedacht om de zoekmachines duidelijk te maken wat de hoofdpagina is.

Ontwikkeling

Er is dus nog veel in ontwikkeling op dit gebied. Oplossingen van een paar jaar terug zijn inmiddels alweer achterhaald en er worden veel hogere eisen gesteld aan snelheid en gebruik van bandbreedte. Het is uitdagend om de knelpunten te signaleren en daar samen met mijn collega Alex oplossingen voor te vinden.

Knelpunten

Grootste knelpunt voor de webdesigner die een site wil maken die geschikt is voor zowel desktop computer als mobiel, is de breedte van het scherm. Dat vraagt om een afgeleid ontwerp voor mobieltjes. Dat betekent dubbel werk en is niet iets dat je er zomaar even bij doet. Lastig is ook dat allerlei vormgeving die wel wordt ondersteund op de computer niet werkt op mobieltjes. Daarnaast zijn er teksten die qua omvang wel geschikt zijn voor de computer maar waarvan een ingekorte versie van de website voor mobieltjes welkom is. En hoe optimaliseer je de snelheid van een site?

Kortom, de bouwer moet de nieuwste technieken in huis hebben die hiervoor nodig zijn en deze bijhouden. Plus de kennis die ervoor moet zorgen dat de juiste versie op de juiste plaats verschijnt. Want er zijn veel verschillende mobieltjes met veel verschillende browsers, die zich niet allemaal even makkelijk laten leiden naar de mobiele versie van een website.

Nieuwsgierig naar hoe het eruit kan zien? Deze site heeft een goed leesbare mobiele versie onder dezelfde URL als de desktop versie. Dus… mag ik je uitnodigen?

Een bericht van Waalweb

Goede Gewoontes voor Mobiel Web

No related posts.