HTML: 10 supergoede tips voor de echte slicer

Heb je toevallig van de video waarin hij dat aangeeft?

Ik kan hem zo 123 niet vinden. Maar het is ook vriendelijker voor blinden mensen. Die kunnen de tekst gewoon voorgelezen horen doordat het in de broncode staat.

Ik heb even zitten leven op zijn blog, het zou inderdaad geen probleem mogen zijn.

If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.”

Je kan ook een onclick gebruiken op de div waarin de achtergrondafbeelding is opgenomen.

Nee dat is lekker voor SEO, scheelt je dus 1 backlink naar je home page op elke pagina.

Het is beter voor de SEO dat de paginakop op H3 staat, en de subkop(pen) op H4. Dat is mijn eigen ervaring, en dat heb ik bevestigd gekregen van een SEO expert.

Gaat echt nergens over. Zullen we met publieke bronnen werken, trouwens?

@Erik G: 11 + 12 + 13 yes indeed

9. Sla al je gemaakte psd bestanden met slices erin op en stuur deze mee naar je opdrachtgever. Scheelt veel fustratie als er in de toekomst nog iets aangepast moet worden.

Dank! Waarom doen veel slicers dit nooit???

Iemand die voor mij een ontwerp slicet met het logo in H1, mag het alsnog aanpassen. Het logo komt op iedere pagina terug, en daarmee zou ook de H1 op iedere pagina gelijk zijn. De H1 is bedoeld om het primaire onderwerp van de pagina aan te geven. Headings gebruiken voor het logo, of in de navigatie, is een no-no.

Voor SEO is het een lastig verhaal, aangezien tests hebben aangetoond dat het hebben van keywords in je H1 tag nauwelijks invloed heeft op je ranking (zie SEOmoz.org, whiteboard friday over grootste SEO vergissingen). Een nette headingstructuur is dus netjes, maar niet per se beter voor SEO.

Iemand die voor mij een ontwerp slicet met het logo in H1, mag het alsnog aanpassen. Het logo komt op iedere pagina terug, en daarmee zou ook de H1 op iedere pagina gelijk zijn. De H1 is bedoeld om het primaire onderwerp van de pagina aan te geven. Headings gebruiken voor het logo, of in de navigatie, is een no-no.

Helemaal mee eens. Op je sitenaam word je wel gevonden, kopjes moeten juist de structuur van je tekst benadrukken.

Voor SEO is het een lastig verhaal, aangezien tests hebben aangetoond dat het hebben van keywords in je H1 tag nauwelijks invloed heeft op je ranking (zie SEOmoz.org, whiteboard friday over grootste SEO vergissingen). Een nette headingstructuur is dus netjes, maar niet per se beter voor SEO.

Interessant, kun je een link naar dit artikel plaatsen?

De discussie over het gebruik van de h1-tag als logo is al behoorlijk veel gevoerd.

Dit zijn enkele interessante links hierover:
- (Log in om link te zien!)
- (Log in om link te zien!)

1. Maak juist gebruik van de verschillende afbeeldingssoorten. In grote lijnen kun je aanhouden dat jpg voor foto's is, gif voor animaties en png voor de overige afbeeldingen en afbeeldingen met een transparant gedeelte.

Dit is wel in hele grote lijnen uitgelegd. Animted GIF's is al vrij outdated, dit zou ik eerder met Flash, Javascript of CSS3 doen.

2. Plaats de afbeeldingen niet in de map afbeeldingen maar in de map images, standaard scripts doen dit ook en anders krijg je twee verschillende mappen met afbeeldingen of extra werk.

Verklaar je nader. Wat voor scripts? Ik zet ze altijd in een map "img" omdat ik altijd zo min mogelijk characters gebruik om alle code minimaal te houden.

3. Afhankelijk van het ontwerp het logo klikbaar maken. Dit gaat niet als het een achtergrondafbeelding is.

Zoals eerder al aangegeven, dit is onzin. <a href="#" class="logo" title="Home">Bedrijfsnaam</logo>. Dit is alles wat je nodig hebt. Ook nog eens gebruiksvriendelijker en beter voor je SEO dan een simpele <img /> tag.

4. Bespeek van te voren met de opdrachtgever in welke browser de website moet werken. Ik houd meestal aan dat elke website er foutloos moet uitzien in IE7, IE8, en een recente versie van FireFox, Apple Safari en Chrome. De website moet er ok netjes uit zien in IE6 maar kleine uiterlijke verschillen is niet erg.

Grotendeels mee eens. Alhoewel je 95% van de websites nog wel kunt optimaliseren voor IE6. Als je netjes code heb je bijna geen work-arouds nodig. Definieer trouwens wel "kleine verschillen". Tevens get gebruik van stylesheets voor alleen IE proberen te vermijden. Dit is ook niet nodig als je netjes te werk gaat.

5. Het psd bestand is "heilig" maak geen afwijkingen zonder overleg.

Helemaal mee eens.

6. Geef alle afbeeldingen, classes en id's duidelijke namen.

"Duidelijk namen". Definieer duidelijk namen, ik vind het niet echt duidelijk. ".button-blue" is bijvoorbeeld wel een duidelijke naam maar niet handig als je in de toekomst alle buttons rood wilt hebben. Dan is de naam ineens niet meer duidelijk.

7. Gebruik de juiste tags op de juiste plaats en denk mee aan de zoekmachineoptimalisatie. H1 is de paginakop en H2 de subkopjes.

Zoals eerder al aangegeven is dit niet het geval. H1 geeft de content van de pagina aan. Net zoals dat je <title> tag per pagina verandert, verandert je <h1> ook per pagina.

8. De margin en padding geef je niet overal standaard 0 met * { margin: 0; padding: 0; }, doe je dit wel geef dan in het content gedeelte alles weer terug een juiste afstand. Het is vervelend dat er geen juist gebruik gemaakt kan worden van de <p> tag. Hetzelfde voor de opsomming, zorg dat list-style-type niet op none staat in het content gedeelte.

Dit kan je niet als vast uitgangspunt gebruiken. De reset die je gebruikt verschilt per website, afhankelijk van de grootte (hoeveelheid HTML & CSS) en de lay-out. Ik gebruik vaak mijn eigen reset wat een hoop CSS scheelt.

10. Teksten met effecten of afwijkende lettertypen los je zo veel mogelijk op met Cufon of anders Sifr.

Gebruik van wel sIFR 3.0. Deze heeft vele malen meer opties dan eerdere versies. Ook het gebruik van @font-face (CSS3) zal steeds meer draagvlak krijgen. Hoewel het nu nog niet ondersteund wordt door IE is het wel een simpele, light-weight oplossing waarbij geen Javascript en/of Flash nodig is.

Je kan ook een onclick gebruiken op de div waarin de achtergrondafbeelding is opgenomen. Nee dat is lekker voor SEO, scheelt je dus 1 backlink naar je home page op elke pagina.

Dan ga je ervan uit dat het de enige link terug is. In mijn primaire navigatie structuur staat ook al een link naar de homepage en trouwens ook in de footer. Met een onclick maak ik de hele achtergrond van de header of alleen het logo klikbaar naar de homepage. Dit is voor mij een usability toevoeging.

Ter aanvulling op punt 10:

(Log in om link te zien!)

Verklaar je nader. Wat voor scripts? Ik zet ze altijd in een map "img" omdat ik altijd zo min mogelijk characters gebruik om alle code minimaal te houden.

Als je gebruik maakt van bestaande scripts zoals lightbox dan heet de map waar de afbeeldingen instaan standaard images. Als je ook jouw afbeeldingen in dezelfde map plaatst scheelt het weer aanpassen van de lightbox code.

Zoals eerder al aangegeven is dit niet het geval. H1 geeft de content van de pagina aan. Net zoals dat je <title> tag per pagina verandert, verandert je <h1> ook per pagina.

Dit is ook wat ik bedoel. H1 en H2 niet gebruiken voor je logo of iets dergelijks maar voor de paginatitel en subtitels die op elke pagina anders zijn.