1. #1

    Registered
    30/04/11
    Location
    Alken
    Posts
    55
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Question Afbeeldingen vs lettertype

    Hallo,

    Jullie herinneren me misschien van deze thread:
    http://www.9lives.be/forum/webdesign...-de-tabel.html

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

    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
    no votes  

  2. #2
    scipicore's Avatar
    Registered
    10/10/03
    Location
    Gent
    Posts
    5,535
    iTrader
    25 (96%)
    Mentioned
    0 Post(s)
    Reputation
    7/20
    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.
    Als ik dit niet heb ben ik geen approved 9-lifer.
    no votes  

  3. #3
    GregoryCo's Avatar
    Registered
    29/10/03
    Location
    Izegem
    Posts
    4,748
    iTrader
    25 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/9
    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
    no votes  

  4. #4
    Drone's Avatar
    Registered
    28/05/03
    Location
    bmb
    Posts
    744
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    15/15
    Quote Originally Posted by GregoryCo View Post
    This quote is hidden because you are ignoring this member. Show
    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
    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.
    no votes  

  5. #5
    GregoryCo's Avatar
    Registered
    29/10/03
    Location
    Izegem
    Posts
    4,748
    iTrader
    25 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/9
    Quote Originally Posted by [drone]-[1.05] View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    Ahzo wist ik niet, kheb het zo geleerd in school en kreeg die uitleg van docent.
    no votes  

  6. #6
    coldvinc's Avatar
    Registered
    25/06/05
    Location
    9000feet dwn
    Posts
    3,611
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    ^ 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.
    My fight towards financial independence: Fight to FI/RE
    no votes  

  7. #7
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Quote Originally Posted by [drone]-[1.05] View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    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.

    Quote Originally Posted by Susan Moskwa
    This quote is hidden because you are ignoring this member. Show
    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.
    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.
    no votes  

  8. #8

    Registered
    30/04/11
    Location
    Alken
    Posts
    55
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Dit is mijn code:
    HTML Code:
    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?
    no votes  

  9. #9
    GregoryCo's Avatar
    Registered
    29/10/03
    Location
    Izegem
    Posts
    4,748
    iTrader
    25 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/9
    Kan wel eens gebeuren dan het font er een beetje anders uitziet in andere browsers.
    no votes  

  10. #10
    coldvinc's Avatar
    Registered
    25/06/05
    Location
    9000feet dwn
    Posts
    3,611
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    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.
    Last edited by coldvinc; 16-08-2011 at 21:47.
    My fight towards financial independence: Fight to FI/RE
    no votes  

  11. #11

    Registered
    30/04/11
    Location
    Alken
    Posts
    55
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in