Archief - Afbeeldingen vs lettertype

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
w

wocypke

Legacy Member
Hallo,

Jullie herinneren me misschien van deze thread:
https://www.beyondgaming.be/archive/web-design-programming.237/achter-de-tabel.804708

Hier ben ik weer, met mijn lijpe website.
Hij is in ieder geval al verbeterd (ik gebruik nu DIV tags ipv een tabel :p)

Mijn volgende zorg is deze: ik gebruik nu afbeeldingen voor de navigatie (eigenlijk achtergrondafbeeldingen, en de tekst staat op transparant). Ik heb deze techniek ergens op een tutorial geleerd. Ze gebruikten sprites omdat er 3 verschillende statussen waren: gewoon, onderstreept en doorstreept. Ik heb gewoon een lichte en een donkere status.
Is het niet beter dat ik gewoon het lettertype integreer ipv de sprites? Zo beperk ik de downloadtijd misschien.
Of hebben jullie redenen om het lettertype NIET te integrerern?
Het letterype heet trouwens 'Sketch Block'.

Bij voorbaat dank
s

scipicore

Legacy Member
Wat regelmatig gebruikt wordt is text-indent.

Code: 
<ul>
    <li><a href="">Tekst</a></li>
    <li><a href="">Tekst</a></li>
</ul>

met

ul li a {
    text-indent: -9999px;
}

Dan zit je niet meer met het 'probleem' dat je de onzichtbare tekst kan selecteren.

Ik zou sowieso afbeeldingen gebruiken, met dat lettertype ga je het toch nooit goed krijgen, tenzij je de webfont versie hebt en dan met veel gepruts.
G

GregoryCo

Legacy Member
De techniek die je nu gebruikt is image replacement, alleen niet helemaal op de correcte manier. Uw tekst mag je niet transparant zetten, omdat zoekmachines je daarvoor kunnen afstraffen. Je gebruikt beter position:absolute en margin-top:-10000px op je tekst, maar wat nog beter is, is inderdaad gebruik maken van font-embedding.

Maar daarover zijn hier al discussies geweest, zoek eens @font-face
D

Drone

Legacy Member
GregoryCo zei:
De techniek die je nu gebruikt is image replacement, alleen niet helemaal op de correcte manier. Uw tekst mag je niet transparant zetten, omdat zoekmachines je daarvoor kunnen afstraffen. Je gebruikt beter position:absolute en margin-top:-10000px op je tekst, maar wat nog beter is, is inderdaad gebruik maken van font-embedding.

Maar daarover zijn hier al discussies geweest, zoek eens @font-face
Klik om te vergroten...

Ik dacht dat ik een video had gezien waar Matt Cutts zei dat het <img src='whatevs' alt='Hier komt je tekst' /> de enige 'correcte' manier was.

Edit:
Ik heb het over image replacement. Tekst omzetten naar een afbeelding zou ik enkel gebruiken als het echt niet anders kan.
G

GregoryCo

Legacy Member
[drone]-[1.05];15247682 zei:
Ik dacht dat ik een video had gezien waar Matt Cutts zei dat het <img src='whatevs' alt='Hier komt je tekst' /> de enige 'correcte' manier was.

Edit:
Ik heb het over image replacement. Tekst omzetten naar een afbeelding zou ik enkel gebruiken als het echt niet anders kan.
Klik om te vergroten...

Ahzo wist ik niet, kheb het zo geleerd in school en kreeg die uitleg van docent.
c

coldvinc

Legacy Member
^ Er is daar nog al wat rond te doen eigenlijk, google zelf zegt dat het niet meteen fout is je tekst buiten het beeld schuiven maar het is mogelijk dat als dit te veel word gedaan of er dubieuze tekst achterzit dat google het gaat zien als spam.

Dus opzich is er niet meteen iets mis mee.
Z

Zero Grav

Legacy Member
[drone]-[1.05];15247682 zei:
Ik dacht dat ik een video had gezien waar Matt Cutts zei dat het <img src='whatevs' alt='Hier komt je tekst' /> de enige 'correcte' manier was.

Edit:
Ik heb het over image replacement. Tekst omzetten naar een afbeelding zou ik enkel gebruiken als het echt niet anders kan.
Klik om te vergroten...

Ik heb die uitspraak toch even opgezocht omdat ik het maar vreemd zou vinden en kwam alleszins op veel discussie uit als gevolg ervan. :)

Via Google Webmaster Central dan uitgekomen op een reply van een andere Google werknemer waar ge wel uit moogt afleiden dat ge het wel moogt doen, zolang ge u aan de regels houdt. Tekst gebruiken die de afbeelding effectief beschrijft, of de tekst op de afbeelding volledig overnemen. Geen extra keywordstuffing gaan doen natuurlijk.

Susan Moskwa zei:
Hi folks--
Just wanted to let you know that I asked Matt about this at SMX last
week (I'm a big fan of accessibility and image replacement, so I was
curious about some of the same things you've brought up in this
thread). Craig is correct in saying that your intent (in hiding text,
or in using any technique that has the potential to be abused) is
important. If your intent in hiding text is to deceive the search
engines, we frown on that; if your intent is purely to improve the
visual user experience (e.g. by replacing some text with a fancier
image of that same text), you don't need to worry.

Of course, as with many techniques, there are shades of gray between
"this is clearly deceptive and wrong" and "this is perfectly
acceptable". Matt did say that hiding text moves you a step further
towards the gray area. But if you're running a perfectly legitimate
site, you don't need to worry about it. If, on the other hand, your
site already exhibits a bunch of other semi-shady techniques, hidden
text starts to look like one more item on that list. It's like how 1
grain of sand isn't noticeable, but many grains together start to look
like a beach.

As the Guidelines say, focus on intent. If you're using CSS techniques
purely to improve your users' experience and/or accessibility, you
shouldn't need to worry. One good way to keep it on the up-and-up (if
you're replacing text w/ images) is to make sure the text you're
hiding is being replaced by an image with the exact same text.
Klik om te vergroten...

Using CSS to hide text - Crawling, indexing, and ranking | Google Groups

Ook nog interessant: mezzoblue § Image Replacement + Google

Ge moet altijd rekening houden met het verschil tussen inline images en background images waarbij image replacement gewoon onvermijdelijk is.

Het grote probleem is dat ge op Google vaak oudere artikels vindt, soms ook zonder datum, en dus niet weet wie wat eerst beweerd heeft en wat de current situation is.

--

En GregoryCo, het op "display: none;" zetten van tekst dat wordt afgeraden is niet alleen omwille van zoekmachines, maar vooral voor screenreaders. Die negeren doorgaans elementen die in css verborgen worden waardoor de accessibility van een site volledig teniet wordt gedaan.

--

Soit, om dan ook even ontopic te reageren.

Image replacement techniques om het beperkt aantal webfonts te gebruiken worden al jaar en dag toegepast. Maar na enkele jaren alternatieve technieken te hebben gebruikt is @font-face nu toch wel klaar voor prime time en zou ik het sowieso gebruiken.
Maar sowieso altijd controleren op crossbrowser support.
w

wocypke

Legacy Member
Dit is mijn code:
HTML: 
font-family: 'SketchBlockBold';
    src: url('sketch_block-webfont.eot');
    src: url('sketch_block-webfont.eot?#iefix') format('embedded-opentype'),
         url('sketch_block-webfont.woff') format('woff'),
         url('sketch_block-webfont.ttf') format('truetype'),
         url('sketch_block-webfont.svg#SketchBlockBold') format('svg');

Het werkt overal goed, behalve:
  • Google Chrome weergeeft niets.
  • Safari weergeeft het lettertype in een slechte kwaliteit.

Die code heb ik gegenereerd op deze website: Font Squirrel | Create Your Own @font-face Kits

Misschien is de kwaliteit van de font-bestanden niet goed?
G

GregoryCo

Legacy Member
Kan wel eens gebeuren dan het font er een beetje anders uitziet in andere browsers.
c

coldvinc

Legacy Member
Sommige fonts zijn niet specifiek gemaakt voor het web waardoor het er soms niet optimaal uit ziet. Heb dit zelf ook voor gehad met een website.

Er zijn genoeg topics op het internet hierover, chrome (en safari) hebben AA maar passen het anders toe waardoor het er ruwer uitziet, terwijl het er bij Fx en IE9 beter uitziet.

't Is gewoon een kwestie van font rendering. Sommige fonts hebben hier last van en sommige niet.
w

wocypke

Legacy Member
Uiteindelijk bleek het te maken hebben met de rotatie van de tekst.
Ik heb dit stukje aan de code toegevoegd:
-webkit-transform-style: preserve-3d;
Enkel in IE is de tekst niet geroteerd, maar dat geeft niet. Zo lang de tekst maar weergeven word.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan