site menu με ιδιαίτερη γραμματοσειρά

Θέματα web + mobile design, development & cyberculture.

site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό genik » 09.07.12, 12:13 am

Θέλω το menu ενός site να χρησιμοποιεί γραμματοσειρά δικής μου επιλογής κ όχι μια από τις γνωστές που δίνονται σαν default (Tahoma, Verdana κλπ.). Πως μπορεί να γίνει αυτό εκτός από το να είναι το όνομα της κάθε σελίδας αρχείο εικόνας;
genik
Junior Member
 
Posts: 474
Εγγραφή: 30.12.05, 3:42 pm

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό lollypop » 09.07.12, 12:52 am

Ρίξε μια ματιά εδώ -> http://www.entheosweb.com/tutorials/css/any_font.asp#.T_n5BPXhfKg

Αν δεν έχεις κάποιο συγκεκριμένο font καλύτερα να πας με κάποια υπηρεσία όπως Typekit, Google Fonts κ.α.

Ριξε μια καλή ανάγνωση επίσης σε αυτό -> http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/. Ειναι ένα πολύ συμπαγές άρθρο με τα περισσότερα Web Font Services και θα σου γλιτώσει αρκετό χρόνο ψαξίματος.

Καλή επιτυχία.
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό lollypop » 09.07.12, 1:04 am

Προσωπικά προτιμώ το http://fontdeck.com, που περιλαμβάνει και γραμματοσειρές του Πάνου Βασιλείου και έχει μια ιδιαίτερη εμμονή με το kerning των γραμματοσειρών.
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό genik » 09.07.12, 1:07 am

Τhanx, αλλά να ρωτήσω... εάν βάλω εικόνες αντί κάποιας γραμματοσειράς κατά πόσο χάνει σε SEO το site; Και τι μπορώ να κάνω για να βελτιώσω αυτά που χάνω χρησιμοποιόντας εικόνες για το menu και όχι γραμματοσειρά;
genik
Junior Member
 
Posts: 474
Εγγραφή: 30.12.05, 3:42 pm

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό lollypop » 09.07.12, 10:20 pm

Θα έλεγα να αποφύγεις να χρησιμοποιείς εικόνες αντί για γραμματοσειρές και όχι τόσο για το SEO ( που σαφώς το κατακρεουργείς ειδικότερα αν πρόκειται για Η1,Η2,UL, LI tags) όσο για το ότι δεν ειναι καθόλου "responsive" τακτική. Επίσης αν επιμείνεις και τελικά χρησιμοποιήσεις εικόνες αντί για Fonts, δώσε απαραίτητα περιγραφικό Alias αν θες να έχουν μια εικόνα τα Α.Μ.Ε.Α (και οι μηχανές) για το site σου.

Σε γενικές γραμμές αυτό που σκέφτεσαι θα ήταν μια χαρά λύση, αν είχαμε 2003.
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό genik » 09.07.12, 10:49 pm

Καλά για H1 δεν το συζητώ καν οκ έχεις δίκιο lollypop, αλλά λέω για το menu στο οποίο θέλω να χρησιμοποιήσω εκεί μια ιδιαίτερη γραμματοσειρά!
genik
Junior Member
 
Posts: 474
Εγγραφή: 30.12.05, 3:42 pm

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό christosvcdc » 09.07.12, 11:41 pm

Αν θες ρίχνεις μια ματιά σε αυτό:
http://davidwalsh.name/cufon
Πιστεύω να σε βοηθήσει.
...vidi vici...
christosvcdc
Senior Member
 
Posts: 842
Εγγραφή: 21.05.07, 10:16 am
Τοποθεσία: Αθήνα

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό apsuhos » 06.08.12, 5:31 am

lollypop έγραψε:Θα έλεγα να αποφύγεις να χρησιμοποιείς εικόνες αντί για γραμματοσειρές και όχι τόσο για το SEO ( που σαφώς το κατακρεουργείς ειδικότερα αν πρόκειται για Η1,Η2,UL, LI tags) όσο για το ότι δεν ειναι καθόλου "responsive" τακτική. Επίσης αν επιμείνεις και τελικά χρησιμοποιήσεις εικόνες αντί για Fonts, δώσε απαραίτητα περιγραφικό Alias αν θες να έχουν μια εικόνα τα Α.Μ.Ε.Α (και οι μηχανές) για το site σου.

Σε γενικές γραμμές αυτό που σκέφτεσαι θα ήταν μια χαρά λύση, αν είχαμε 2003.


lollypop δεν σε κατάλαβα..

1) Γιατί κατακρεουργείται το SEO; Εφόσον χρησιμοποιήσεις με σύνεση κάποια από τις image replacement τεχνικές και αναπαριστάς αυτό που όντως γράφει το markup προσωπικά θεωρώ πως δεν υπάρχει απολύτως κανένα πρόβλημα. Αυτό το αναφέρω διότι ακούω από δω και από κει αβίαστα και χωρίς καμμία τεκμηρίωση πως οποιαδήποτε μεθοδολογία ακολουθείται όσον αφορά τα image replacements αυτομάτως σε "ρίχνει" στο SEO. Εμένα μου ήρθε να ζωγραφίσω τα list items στο χαρτί και να τα περάσω. Οφείλω να περιοριστώ και να χρησιμοποιήσω web fonts;

2) Γιατί δεν είναι responsive; Μια χαρά responsive είναι.

3) Αυτό που αναφέρεις σχετικά με τα AMEA και τις μηχανές αναζήτησης δεν ισχύει. Δεν θα τα περάσει ως image tags μέσα στο markup. Θα τα περάσει κανονικά ως list items και μετά μέσω css θα τα αντικαταστήσει. Οι μηχανές και οι ΑΜΕΑ, το markup θα βλέπουν και συνεπώς δεν θα υπάρχει κανένα πρόβλημα.

4) Γιατί είναι οπισθοδρομικό ("..αν είχαμε 2003"). Παρατηρώ πως χρησιμοποιείται ακόμα και σήμερα από καταξιωμένους στο χώρο επαγγελματιές.

Ο genik είχε μια λάθος προσέγγιση ως προς το πως να εφαρμόσει αυτό που σκεφτόταν. Φυσικά δεν θα καλεί images μέσω του markup για να αντικαταστήσει με custom fonts το μενού. Ωστόσο η απάντηση σου με προβλημάτισε.
Άβαταρ μέλους
apsuhos
Member
 
Posts: 5
Εγγραφή: 18.11.10, 3:34 pm

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό notis » 06.08.12, 3:11 pm

Η γενική φόρμα:
<h1><img src="special text graphic" title="brief desciption of page topic" alt="insert text from graphic" /></h1>

Παράδειγμα:
<h1><img src="sound_products_heading.png" title="Γνωρίστε τα προϊόντα μας στην κατηγορία ΗΧΗΤΙΚΑ ΣΥΣΤΗΜΑΤΑ" alt="ΗΧΗΤΙΚΑ ΣΥΣΤΗΜΑΤΑ" /></h1>

Το image περιέχει με κάποια γραμματοσειρά την φράση ΗΧΗΤΙΚΑ ΣΥΣΤΗΜΑΤΑ

Το ανωτέρω είναι ίσης βαρύτητας με το

<h1>ΗΧΗΤΙΚΑ ΣΥΣΤΗΜΑΤΑ</h1>
Άβαταρ μέλους
notis
Master Admin
 
Posts: 3697
Εγγραφή: 23.02.04, 1:36 pm
Τοποθεσία: Corinth

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό apsuhos » 06.08.12, 5:39 pm

Νότη πολύ σωστά. Εδώ όμως περιγράφεις κάτι το διαφορετικό. Θα δανειστώ νομικούς όρους και θα αναφέρω πως τα πάντα είναι θέμα ερμηνείας. Αν ο σχεδιαστής ερμηνεύσει πως η image αποτελεί πληροφορία του document τότε οφείλει να πράξει με βάση το παράδειγμα που έδωσες.

Πάρε για παράδειγμα το παρών site. Από τη μία κάποιος θα μπορούσε να υποστηρίξει πως το logo αποτελεί αναπόσπαστο κομμάτι από τις πληροφορίες οι οποίες θα δωθούν στο τελικό χρήστη. Από την άλλη, ένας δεύτερος σχεδιαστής δεν το θεωρεί ουσιώδες και αποφασίζει να κρύψει το περιεχόμενο του h1 tag ή καλύτερα να το παραμερίσει και μέσω css να τοποθετήσει το logo. Στην πρώτη περίπτωση οφείλει να το κάνει accessible με ότι αυτό συνεπάγεται.

Εκεί πήγαινε το "με σύνεση" που ανέφερα στο προηγούμενο post μου. Δεν μπορείς να τα ερμηνεύσεις όλα ως πληροφορίες. Κάποια αφορούν αποκλειστικά κομμάτι του styling και ως κομμάτι του styling οφείλουν να αντιμετωπίζονται. Με βάση αυτό το σκεπτικό δεν μπορώ να φανταστώ κάποιος να αντιμετωπίζει ένα ul με img tags.

Για να επεκτείνω τη σκέψη μου, έχω δει γραμμένο αυτό για μενού:

Κώδικας: Επιλογή όλων
<div>
<a href="#"><img src="#" alt="" title="list item 1" /></a>
<a href="#"><img src="#" alt="" title="list item 2" /></a>
<a href="#"><img src="#" alt="" title="list item 3" /></a>
<a href="#"><img src="#" alt="" title="list item 4" /></a>
<a href="#"><img src="#" alt="" title="list item 5" /></a>
</div>



Μέγα λάθος για πολλούς και διάφορους λόγους. Ωστόσο κανείς δεν μπορεί να αρνηθεί πως το παραπάνω μπορεί να μαγειρευτεί με τρόπους ώστε στο τελικό αποτέλεσμα να μοιάζει με κλασσικό menu. Αυτό είναι ανεπίτρεπτο.

Μπορεί κάλλιστα να το γράψει έτσι:

Κώδικας: Επιλογή όλων
<ul>
<li><a href="#" class="ir">list item 1</a></li> <!-- όπου ir = image replacement -->
<li><a href="#" class="ir">list item 2</a></li>
<li><a href="#" class="ir">list item 3</a></li>
<li><a href="#" class="ir">list item 4</a></li>
<li><a href="#" class="ir">list item 5</a></li>
</ul>


και μετά χωρίς κανένα πρόβλημα να δώσει κάτι τέτοιο:

Κώδικας: Επιλογή όλων
.ir { display :block; text-indent : -999em; overflow : hidden; background-repeat : no-repeat; text-align : left; direction : ltr; }
li:first-child a { background: url(../sprites/mobile-sprite.png) 10px 10px no-repeat; width: 30px; height: 30px; }
/* κλπ.. */


Με αυτόν τον τρόπο θεωρώ δεν έχει κανένα πρόβλημα. Ούτε με τo SEO, ούτε με accessibility, ούτε οπισθοδρομικό, ούτε unresponsive, βάλαμε και το sprite μας σεβόμενοι τα requests, το περιβάλλον, τον συνάνθρωπο :superman: και εν τέλει πετύχαμε αυτό που θέλαμε εξαρχής, οτι δηλαδή χρησιμοποιούμε custom images/fonts για τα list items.

Συμπερασματικά, αυτό που πρέπει να κάνουμε είναι να κατανοούμε το περιεχόμενο το οποίο προσπαθούμε να αναδείξουμε και να το αντιμετωπίζουμε με τα κατάλληλα εργαλεία.
...So there you go! You're the retarded offspring of five monkeys having butt sex with a fish-squirrel! Congratulations!
Άβαταρ μέλους
apsuhos
Member
 
Posts: 5
Εγγραφή: 18.11.10, 3:34 pm

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό notis » 06.08.12, 7:43 pm

Κατάλαβες τώρα γιατί μ' αρέσεις? :wink:
Άβαταρ μέλους
notis
Master Admin
 
Posts: 3697
Εγγραφή: 23.02.04, 1:36 pm
Τοποθεσία: Corinth

Re: site menu με ιδιαίτερη γραμματοσειρά

Δημοσίευσηαπό lollypop » 27.12.12, 3:09 pm

apsuhos έγραψε:
lollypop έγραψε:Θα έλεγα να αποφύγεις να χρησιμοποιείς εικόνες αντί για γραμματοσειρές και όχι τόσο για το SEO ( που σαφώς το κατακρεουργείς ειδικότερα αν πρόκειται για Η1,Η2,UL, LI tags) όσο για το ότι δεν ειναι καθόλου "responsive" τακτική. Επίσης αν επιμείνεις και τελικά χρησιμοποιήσεις εικόνες αντί για Fonts, δώσε απαραίτητα περιγραφικό Alias αν θες να έχουν μια εικόνα τα Α.Μ.Ε.Α (και οι μηχανές) για το site σου.

Σε γενικές γραμμές αυτό που σκέφτεσαι θα ήταν μια χαρά λύση, αν είχαμε 2003.


lollypop δεν σε κατάλαβα..

1) Γιατί κατακρεουργείται το SEO; Εφόσον χρησιμοποιήσεις με σύνεση κάποια από τις image replacement τεχνικές και αναπαριστάς αυτό που όντως γράφει το markup προσωπικά θεωρώ πως δεν υπάρχει απολύτως κανένα πρόβλημα. Αυτό το αναφέρω διότι ακούω από δω και από κει αβίαστα και χωρίς καμμία τεκμηρίωση πως οποιαδήποτε μεθοδολογία ακολουθείται όσον αφορά τα image replacements αυτομάτως σε "ρίχνει" στο SEO. Εμένα μου ήρθε να ζωγραφίσω τα list items στο χαρτί και να τα περάσω. Οφείλω να περιοριστώ και να χρησιμοποιήσω web fonts;

2) Γιατί δεν είναι responsive; Μια χαρά responsive είναι.

3) Αυτό που αναφέρεις σχετικά με τα AMEA και τις μηχανές αναζήτησης δεν ισχύει. Δεν θα τα περάσει ως image tags μέσα στο markup. Θα τα περάσει κανονικά ως list items και μετά μέσω css θα τα αντικαταστήσει. Οι μηχανές και οι ΑΜΕΑ, το markup θα βλέπουν και συνεπώς δεν θα υπάρχει κανένα πρόβλημα.

4) Γιατί είναι οπισθοδρομικό ("..αν είχαμε 2003"). Παρατηρώ πως χρησιμοποιείται ακόμα και σήμερα από καταξιωμένους στο χώρο επαγγελματιές.

Ο genik είχε μια λάθος προσέγγιση ως προς το πως να εφαρμόσει αυτό που σκεφτόταν. Φυσικά δεν θα καλεί images μέσω του markup για να αντικαταστήσει με custom fonts το μενού. Ωστόσο η απάντηση σου με προβλημάτισε.


Sorry, αλλά τώρα το είδα :-) Ξεκινάς απο μια υπόθεση "Φυσικά δεν θα καλεί images μέσω του markup" που ειναι υπόθεση. Εγώ αυτό ακριβώς κατάλαβα και γι' αυτό έγραψα ότι έγραψα.

Κατάλαβα ότι θέλει να έχει κάτι σαν <h1><img></h1>. Αν το replacement γίνει μέσω CSS τότε σαφώς δεν υπάρχει το ίδιο πρόβλημα. ( δείτε εδώ τους τρόπους -> http://css-tricks.com/examples/ImageReplacement/)

Η εικόνα δεν μπορεί να ειναι responsive πραγματικά. Το ότι κάνει "adapt" με ένα width:100% δεν την κάνει και αυτόματα responsive την υλοποίηση. Και μου μην μου πεις ότι θα κάνεις scaling down την εικόνα σε κάθε mediaquery γιατί πολύ απλά έχω δει ε-λα-χι-στους να το κάνουν αυτό. Και ενώ δεν υπάρχει θέμα με τις εικόνες, το να κάνεις κάτι τέτοιο σε μενού και τίτλους μου φαίνεται παράλογο.

Αν παρόλα αυτά επιμένεις, γράψε σωστά markup και σκέψου τι θα γίνει με τους mobile χρήστες ( Πολλά ανοιχτά ζητήματα, δεν είναι καλύτερα να βάλεις ένα font?).Σκέψου τι θα βλέπουν οι iphone 5 χρήστες που έχουν το διπλάσιο density. Όλα αυτά αποφεύγονται αν χρησιμοποιήσεις custom fonts!

Όσο αφορά το SEO είχα διαβάσει παλιότερα ειδικά γι' αυτό και δεν είχε βγει άκρη αφού δυο πασίγνωστοι SEO marketeers ( ο ένας θυμάμαι ότι ήταν απο το seomoz.com) υποστήριζαν τα άκρως αντίθετα.Ο ένας έλεγε ότι δεν δημιουργεί κανένα θέμα, ο άλλος έλεγε ότι δημιουργεί. Πάντως άν χρησιμοποιήσεις custom Font δεν χρειάζεται ΚΑΝ να αναρωτιεσαι.

Δεν συζητάω ούτε για το ότι ο χρήστης μπορεί να μη βλέπει καλά και να έχει κάνει zoom τον browser του (πολύ γλέντι).

Το ότι το χρησιμοποιούν ακόμα και σήμερα πολλοί επαγγελματίες, δεν μου λέει τίποτα. Μπορεί να ειναι άψογοι Designers και χάλια developers. Οι γραφίστες πρέπει να διαβάσουν πάρα πολύ για να φτιάχνουν σωστές ιστοσελίδες και φυσικά γίνεται σπάνια αυτό.

Καλές γιορτες!
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς


Επιστροφή στο II.I Ιστοσχεδίαση + Mobile + Διαδίκτυο

Μέλη σε σύνδεση

Μέλη σε αυτή την Δ. Συζήτηση : Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης

Visual Communication Designers Club

Το Visual Communication Designers Club, το μεγαλύτερο Ελληνικό online design forum, αποτελεί μια Ελληνική κοινότητα σχεδιαστών οπτικής επικοινωνίας, υπό την ευρύτερη έννοια του όρου, θέλοντας να συμπεριλάβει στα μέλη της κάθε ειδικότητα και βαθμίδα όσων σπουδάζουν ή εργάζονται στον χώρο της επικοινωνίας, έντυπης, διαδικτυακής, τρισδιάστατης ή εφαρμογών πολυμέσων