HTML e-mails και πως πρέπει να σχεδιάζονται

Αν και έχουν γίνει αρκετά βήματα μπροστά στο θέμα HTML e-mails/newsletters, όπως το Email Standards Project (όπως έχω αναφέρει και σε παλιότερο post), τα πράγματα για τους developers παραμένουν άσχημα, μιας και οι mail clients εκτός από από πολλοί, έχουν μείνει και αρκετά πίσω στο θέμα rendering HTML περιεχομένου. Οι περισσότεροι, για λόγους ασφαλείας κυρίως, κόβουν πολλά χαρακτηριστικά όπως Javascript, CSS και πολλές φορές ακόμα και εικόνες, οπότε η κατάσταση είναι δύσκολο να ελεγχθεί από τον developer/designer που έχει αναλάβει την δημιουργία του περιεχομένου! Επιπλέον πρόβλημα είναι και η ύπαρξη on-line αλλά και off-line (desktop) mail clients, όπου ο καθένας ακολουθεί τους δικούς του κανόνες στο τι θα κάνει render και με ποιον τρόπο! Το παρακάτω άρθρο θα προσπαθήσει να δώσει συμβουλές αλλά και να προβάλει τεχνικές έτσι ώστε να σχεδιάζετε καλύτερα και πιο συμβατά HTML mails.

Το πρώτο πράγμα που πρέπει να ασπαστείται είναι η inline CSS! Αν και στο web design η inline CSS θεωρείτε τόσο κακή πρακτική όσο και τα παλιομοδίτικα font tags, στην περίπτωση των HTML mails η inline CSS είναι το μόνο είδος CSS που λειτουργεί στους περισσότερους clients! Έτσι εάν θέλετε να χρησιμοποιήσετε σε κάποιο span element Arial font, σε γκρι χρώμα και bold, ο κανόνας που πρέπει να γράψετε (inline) είναι ο εξής :


Span element με Arial font, γκρι χρώμα και bold!

Από εκεί και πέρα προσπαθήστε να χρησιμοποιήσετε τις βασικές CSS properties οι οποίες υποστηρίζονται στους περισσότερους clients, και αποφύγετε τις πιο σπάνιες (όπως πχ list-style-image). Παρακάτω συγκέντρωσα μία λίστα η οποία εξηγεί τι εννοώ γράφοντας βασικές properties. Την λίστα την έφτιαξα μετά από μελέτη ενός καταπληκτικού άρθρου πάνω στο θέμα το οποίο έχει κάνει ολόκληρη μελέτη για το ποιες CSS properties υποστηρίζονται και ποιες όχι (γράφτηκε το 2006, αλλά υπάρχει και το 2007 review).

  • color
  • background-color
  • border
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • margin
  • padding
  • text-align
  • text-decoration
  • text-transform

Κάποιοι παρατηρητικοί θα είδαν πως στις παραπάνω CSS properties δεν αναφέρω πουθενά positioning properties. Ο λόγος είναι πολύ απλός, για HTML e-mail (και μόνο για τον συγκεκριμένο λόγο) η καλύτερη λύση είναι να χρησιμοποιήσετε tables! Το ξέρω πως σε αυτό το blog γράφω πάντα κατά των tables και υποστηρίζω τις μοντέρνες web design τεχνικές, αλλά στην συγκεκριμένη περίπτωση όλα αυτά απλά δεν ισχύουν! Χρησιμοποιήστε tables λοιπόν και μάλιστα αποφύγετε τα πολλά tables μέσα σε tables (γνωστά και ως nested tables). Ένα απλό table-based layout, με λίγα rows και columns είναι το ιδανικότερο, μετά με την εισαγωγή κάποιων βασικών styles στο περιεχόμενο (content) του πίνακα και ακολουθώντας τις παραπάνω συμβουλές, μπορείτε εύκολα να δημιουργήσετε ένα πολύ ευανάγνωστο και εντυπωσιακό HTML e-mail/newsletter.

Άλλο ένα σημαντικό λάθος, που το κάνουν ακόμα και μεγάλες εταιρείες, είναι η αλόγιστη χρήση γραφικών (images) και το ακόμα χειρότερο, η χρήση γραφικών για την προβολή περιεχομένου (content). Ο λόγος που δεν πρέπει να χρησιμοποιούμε πολλά γραφικά, είναι πως πολλοί mail clients (on-line και off-line) δεν αφήνουν τα γραφικά να “περάσουν”, με αποτέλεσμα να μην εμφανίζονται! Όπως καταλαβαίνεται τα πράγματα γίνονται ακόμα χειρότερα εάν τα γραφικά περιέχουν και μέρος του περιεχόμενου μας, όπως για παράδειγμα κείμενο, γραφήματα κτλ. Καλό θα είναι το κείμενο (τίτλοι, παράγραφοι, κτλ.) να είναι κείμενο, και όχι γραφικά με περίεργα Photoshop fonts, γιατί εκτός από το κίνδυνο να μην τα δουν ποτέ οι παραλήπτες, υπάρχει και μεγάλο accessibility πρόβλημα όταν κάποιος θέλει να κάνει copy κάποιο κομμάτι του κειμένου σας!

Τέλος κάντε όσα πιο πολλά τεστ μπορείτε! Και για να γίνω πιο συγκεκριμένος εξετάστε τα HTML mails τουλάχιστον σε :

Αυτά τα βασικά και πιο τεχνικά πράγματα για τα HTML e-mails (προς το παρόν). Ελπίζω να με διαβάζουν και κάποιοι που δημιουργούν τέτοια mails, γιατί όπως πάντα η κατάσταση στην Ελλάδα είναι πάλι αρκετά πίσω από τον μέσο όρο, οπότε όσοι πιστοί νοιάζεστε, διορθώστε όσο μπορείτε την κατάσταση!

HTML 5 και XHTML 2: ο νέος πόλεμος στο web

Έτσι όπως εξελίσσεται η κατάσταση, ο νέος πόλεμος στο web δεν θα γίνει ανάμεσα σε browsers αλλά σε τεχνολογίες (υπάρχει και η πιθανότητα να συνεχιστεί και στους browsers, αλλά το πρόβλημα θα προκύψει από τις τεχνολογίες που θα αποφασίσουν να υποστηρίξουν)! Αυτήν την στιγμή λοιπόν, οι αντικαταστάτες της κλασικής μας (X)HTML markup είναι δύο, και μάλιστα με αρκετές διαφορές τόσο στον κώδικα (elements, attributes, κτλ.) όσο και στην φιλοσοφία τους. Φυσικά κάνω λόγο για την HTML 5 και την XHTML 2 οι οποίες βρίσκονται αυτήν την στιγμή σε κατάσταση working drafts, πράγμα που σημαίνει ότι θα καθυστερήσουν αρκετά να ολοκληρωθούν και ακόμα πιο πολύ να τις υποστηρίξουν οι διάφοροι browsers, αλλά όπως και να έχει η ερώτηση είναι εξής : Πως προέκυψαν δύο web standards για την ίδια δουλεία?!?!

Καλύτερα να τα πάρουμε τα πράγματα από την αρχή. Στην αρχή λοιπόν τα πράγματα ήταν πολύ απλά με την HTML 1 να είναι η μοναδική markup στον internet, απόγονος της πολύ παλιάς αλλά και δοκιμασμένης SGML. Επειδή σιγά-σιγά το internet άρχισε να γίνεται πιο διάσημο και mainstream λοιπόν, κάποιοι, κατασκευαστές browser κυρίως, άρχισαν να προσθέτουν επιπλέον presentational (παρουσιαστικά) tags και ιδιότητες στην λιτή HTML και να χαλάνε την δομή της (structure) με αυτά, όπως font tags, nested tables, και πολλά άλλα, ενώ η κατάσταση είχε ξεφύγει τελείως από το W3C που δρούσε σαν απλός παρατηρητής. Μετά λοιπόν από τις HTML version 2 και 3, και τον πόλεμο τον browsers που υπήρχε μέχρι και εκείνη την στιγμή, κάποιοι developers όπως ο Jeffrey Zeldman, ο Eric Meyer, και πολλοί άλλοι, αποφάσισαν να πείσουν όλους τους υπόλοιπους, developers και κατασκευαστές browser να χρησιμοποιούν τα επίσημα standards του W3C για την δημιουργία web sites! Είναι η περίοδος που η HTML 4.01 είναι η νεότερη έκδοση της markup για το internet, ενώ έχει ήδη αρχίσει να χρησιμοποιείται από τους πιο σκληροπυρηνικούς και ψαγμένους η νέα XHTML όπου είναι στην ουσία η κλασική HTML 4 αναδιατυπωμένη σαν XML (δεν ήξερα πως αλλιώς να μεταφράσω το reformulation!). Η μεγάλη διαφορά της XHTML με την HTML είναι πως προσπαθεί να συμμαζέψει το περιεχόμενο (content) σε μια ακόμα καθαρότερη δομή (structure), άλλοτε με πιο αυστηρούς κανόνες και άλλοτε όχι – ανάλογα με το doctype – και να αφήσει το παρουσιαστικό (presentation) κομμάτι σε άλλη τεχνολογία, την CSS. Με αυτόν τον τρόπο η markup θα ξαναχρησιμοποιηθεί για τον λόγο που είχε εφευρεθεί, την σωστή δομή του περιεχομένου δηλαδή!

Στην συνέχεια έρχεται μια μεταβατική περίοδος στο web, όπου τα μεγάλα site έχουν φτάσει τις συγκεκριμένες τεχνολογίες στα όρια τους και χρειάζονται κάτι πιο δυνατό για το Web 2.0 το οποίο έχει ήδη αρχίσει να δημιουργείται. Κάπου εδώ ξεκινάει και το μπέρδεμα. Το επίσημο W3C ξεκινάει λοιπόν το draft της XHTML 2, όμως κάποιοι ανεξάρτητοι – κατασκευαστές browser, web developers, ανεξάρτητοι οργανισμοί κτλ. – δημιουργούν την WHATWG community και ξεκινάνε το draft της HTML 5 (και των Web Forms 2.0), το οποίο μετά από κάποιο καιρό το παραδίδουν στο W3C και γίνεται και αυτό επίσημο standard! Έτσι αυτήν την στιγμή έχουμε δύο επίσημους διαδόχους τις (X)HTML οι οποίοι μάλιστα έχουν πάρει και αρκετά διαφορετικές κατευθύνσεις σε θέματα αρχιτεκτονικής και σχεδιασμού!

Αυτήν την στιγμή κανένα από τα δύο recomendations δεν είναι επίσημο ή έχει περισσότερη υποστήριξη, αλλά το μπέρδεμα έχει ήδη γίνει και μάλιστα είναι πολύ μεγάλο! Καταρχάς, τι θα γίνει εάν κάποιοι browsers επιλέξουν να υποστηρίξουν ένα από τα δύο standards (extreme σενάριο, αλλά ας μην ξεχνάμε πως ακόμα κάποιοι browsers προσπαθούν να υποστηρίξουν standards 7 χρόνων παλιά!). Επίσης τι θα γίνει σε development επίπεδο, όπου κάποια site θα υποστηρίξουν την μία markup και κάποια την άλλη? Όπως ανέφερα οι markup είναι πολύ διαφορετικές μεταξύ τους, ενώ η HTML 5 έρχεται και με διάφορα Javascript APIs για ευκολότερο development σε αυτήν, το οποίο όμως μπορεί να μπερδέψει πολλούς developers (ιδιαίτερα νέους), αλλά και κατασκευαστές browsers, οι οποίοι θα πρέπει να ενσωματώσουν στους καινούργιους browsers πολλά νέα APIs. Και σαν να μην έφταναν τα παραπάνω μπερδέματα, το θέμα μπορεί να γίνει και ακόμα πιο περίπλοκο μιας και η HTML 5 για παράδειγμα (στην οποία έχω ρίξει μια καλύτερη ματιά), έχει ήδη δύο parsing modes, ένα σαν HTML και ένα σαν XML, με το πρώτο να είναι πιο συμβατό με παλιότερους browsers ενώ το δεύτερο η αυστηρότερη έκδοση του και χρήση του σαν XML εφαρμογή! Υποθέτω πως και η XHTML 2 θα έχει ανάλογες επιλογές για parsing.

Όπως εύκολα μπορεί να καταλάβει ο μέσος web developer/designer, η κατάσταση είναι αρκετά μπερδεμένη, ενώ εντύπωση μου κάνει πως κανένας επίσημος φορέας, όπως το W3C ή άλλοι μεγάλοι οργανισμοί και guru, δεν έχουν κάνει κανένα σχόλιο πάνω σε αυτό το σημαντικότατο θέμα. Για την ακρίβεια δεν το έχουν θίξει καν! Ξέρω πως και οι δύο τεχνολογίες έχουν πολύ δρόμο ακόμα να διανύσουν, ο Lachlan Hunt στο άρθρο του A Preview of HTML 5 υπολογίζει πως η HTML 5 θα χρειαστεί περίπου άλλα 10 με 15 χρόνια (άρα άλλα τόσα θα χρειαστεί και η XHTML 2), αλλά γιατί να μην γινόντουσαν τα πράγματα πιο απλά για όλους μας ?!?! Ελπίζω η κατάσταση να αλλάξει σύντομα και το τοπίο να ξεκαθαρίσει στο συγκεκριμένο θέμα έτσι ώστε να βοηθηθούν όλοι και να παρθούν γρηγορότερα κάποιες αποφάσεις, γιατί η αλήθεια είναι πως όλοι μας χρειαζόμαστε μια νέα markup! Πολλές ενδιαφέρουσες απόψεις πάνω στο θέμα μπορεί κάποιος να βρει στο άρθρο της IBM, HTML V5 and XHTML V2, ενώ το καινούργιο άρθρο του A List Apart έχει ένα αναλυτικό preview στην HTML 5, και φυσικά για τους πιο σκληροπυρηνικούς υπάρχουν και τα επίσημα drafts.

Η απόλυτη λίστα ελέγχου ενός site

Έστω ότι μόλις παραλάβατε κάποιο site από κάποια εταιρεία και θέλετε να ελέγξετε την ποιότητα του site που μόλις παραλάβατε ή απλά πως είστε ένας web designer / developer και θέλετε να ελέγξετε εάν το τελικό προϊόν σας (site) καλύπτει κάποια standards. Έχετε ήδη ρίξει λοιπόν μια καλή ματιά στο site με τον default browser σας, αλλά θα θέλατε να έχετε στην διάθεση σας και κάτι παραπάνω, κάτι πιο χειροπιαστό! Όποιος βρίσκεστε λοιπόν σε αυτήν την θέση καλό θα είναι να ρίξει μια ματιά στην παρακάτω λίστα και τις σημειώσεις της, μιας και θα μάθει να ελέγχει σχολαστικά οποιοδήποτε site και μάλιστα χρησιμοποιώντας δωρεάν εργαλεία και υπηρεσίες! Η παρακάτω λίστα είναι ένας πολύ καλός οδηγός για οποιονδήποτε θέλει να ελέγξει και να βελτιώσει το site του. Ας αρχίσουμε λοιπόν :

  • W3C Markup Validator : Σαφέστατα πρώτη κίνηση που πρέπει να γίνεται σε οποιοδήποτε site! Εάν η markup δεν είναι σωστή δεν έχει νόημα να προβούμε σε περαιτέρω tests και ελέγχους (όπως πχ. CSS validation). Εάν το site περάσει αυτό το τεστ, θα λειτουργεί στους περισσότερους υπάρχον browsers και συσκευές, αλλά και στις μελλοντικές υλοποιήσεις τους, χωρίς ιδιαίτερα προβλήματα.
  • W3C CSS Validator : Φυσικά μετά τον έλεγχο της markup ο δεύτερος πιο σημαντικός έλεγχος είναι αυτός της CSS. Και τα stylesheets μας πρέπει να είναι όσο πιο καθαρά και web standard γίνεται, ενώ εάν θα πρέπει να χρησιμοποιήσουμε hacks και μη standard τεχνικές, καλό θα είναι να τα κρατάμε σε κάποιο ξεχωριστό αρχείο και να τα φορτώνουμε μέσω του @import  κανόνα έτσι ώστε το βασικό stylesheet να παραμένει web standard valid! Μόλις περάσουμε και αυτό το τεστ είμαστε σε πάρα μα πάρα πολύ καλό δρόμο! Πολλοί designers χρησιμοποιούν πριν το τελικό CSS validation το Clean CSS το οποίο αναλαμβάνει να σας βοηθήσει στην επίλυση των CSS προβλημάτων, να σας δημιουργήσει ευκολοδιάβαστο κώδικα και γενικότερα να βελτιστοποιήσει (optimize) τον CSS κώδικα μειώνοντας ταυτόχρονα και το file size του. Προσωπικά δεν το χρησιμοποιώ απλά σε κάποιους μπορεί να λύσει τα χέρια.
  • WebXACT : Άλλη μία φανταστική υπηρεσία η οποία προσφέρει πληθώρα πληροφοριών για το site, από το file size και τον χρόνο που θα χρειαστεί κάποιος με 56αρι modem για να κατεβάσει την σελίδα σας μέχρι σε τι accessibility priority level έχει φτάσει το site και πόσα broken links έχει. Ρίχνοντας μια ματιά έχετε μια συγκεντρωτική ιδέα για το που κινείται το site και τι πρέπει να βελτιωθεί σε διάφορα σημεία.
  • Truwex Online 2.0 : Η καλύτερη επιλογή για εύκολο και γρήγορο accessibility test! Η υπηρεσία παρέχει πολλά εργαλεία και πληροφορίες για να λύσετε τα accessibility προβλήματα του site σας, ενώ η επιλογή “map” πραγματικά σας λύνει τα χέρια, δείχνοντας πάνω στο site που βρίσκονται τα accessibility προβλήματα με αναλυτική επεξήγηση του κάθε προβλήματος και φυσικά της λύσης του! Η υπηρεσία κάνει accessibility test σε όλα τα WCAG 1.0 levels αλλά και στον αμερικάνικο accessibility νόμο Section 508.
  • TAW Web Accessibility Test : Κάνει ότι λέει το όνομα του και είναι η δεύτερη υπηρεσία που επισκέπτομαι για accessibility tests! Πολύ καλό είναι και το feedback που δίνει, αφού σας ενημερώνει που βρίσκεται η κάθε παράληψη, σας εξηγεί τι είδους παράληψη είναι (priority level κτλ.) και φυσικά σας δίνει πληροφορίες για το πως μπορείτε να την διορθώσετε. Το μόνο tip που μπορώ να δώσω σε αυτό το σημείο είναι να προσπαθήσετε να καλύψετε το priority 1 αρχικά, και να μην απογοητευθείτε από τα πολλά accessibility warnings που θα δείτε, γιατί το TAW παραείναι αυστηρό!
  • WAVE 3.0 Accessibility Tool : Και αυτή η υπηρεσία έχει να κάνει με accessibility test παρουσιάζοντας κάπως διαφορετικά τα αποτελέσματα της. Η συγκεκριμένη υπηρεσία είναι λίγο πιο δυνατή στο να εντοπίζει και να παρουσιάζει τα κομμάτια του κώδικα σας όπως headers, divs, footers, Javascript, κτλ. και να προτείνει λύσεις στα διάφορα προβλήματα που πιθανόν έχουν. Έτσι με αυτόν τον τρόπο μπορεί πολύ γρήγορα κάποιος να διορθώσει τα accessibility προβλήματα σε themes και templates!
  • Browsershots : Αν και η καλύτερη λύση είναι να τεστάρετε το site σε όλα τα desktop λειτουργικά συστήματα, δηλαδή σε Windows, OSX και Linux, και σε όλους τους γνωστούς browsers γι αυτά (IE, Firefox, Opera, Safari, Konqueror κτλ.), η συγκεκριμένη λύση πολλές φορές δεν είναι και τόσο εφικτή. Έτσι καλό θα είναι να έχετε υπόψη σας την συγκεκριμένη υπηρεσία, η οποία αν και αργεί αρκετά (όπως οι περισσότερες αντίστοιχες άλλωστε) σας επιτρέπει να δείτε το site σε όλους του γνωστούς browsers αλλά και να επιλέξετε και συγκεκριμένες screen resolutions!
  • Ready.Mobi : H καλύτερη υπηρεσία που έχω ανακαλύψει για το τεστ ενός site σε κινητά τηλέφωνα! Η συγκεκριμένη υπηρεσία προσφέρει μια πολύ αναλυτική αναφορά για το πως φαίνεται το site σε κινητά τηλέφωνα, με λεπτομέρειες όπως πόση ώρα χρειάζεται το site για να κατέβει μέσω Wifi, 3G και GPRS, εάν έχετε κάνει σωστή χρήση των images για mobile συσκευές, πως φαίνονται τα stylesheets κτλ. Το κερασάκι στην τούρτα είναι και οι 4 (προς το παρόν) emulators κινητών τηλεφώνων που διαθέτει (Nokia N70, Samsung z105, Sony Ericsson k750i, Motorola v3i και Sharp GX-10)!
  • Website Grader : Τέλος θα ήθελα να κλείσω με την αγαπημένη μου SEO υπηρεσία. Εδώ μπορείτε να βρείτε πως τα πάει το site σας στις μηχανές αναζήτησης και στα περισσότερα ranking sites (όπως Technorati, Alexa, κτλ.) καθώς και πολλές άλλες χρήσιμες πληροφορίες όπως εάν έχει γίνει σωστή χρήση των τίλων/headings (h1, h2, ktl.). Εάν το site είναι ολοκαίνουργιο η χρήση της  συγκεκριμένης υπηρεσίας δεν έχει και πολύ νόημα, εάν όμως το site υπήρχε και έχει γίνει κάποιο redesign, καλό θα είναι να του ρίξετε μια ματιά.

Ελπίζω η παραπάνω λίστα να βοηθήσει όσους ενδιαφέρονται να κάνουν τα site τους ακόμα καλύτερα, πιο επαγγελματικά και τηρώντας κάποιες διεθνής προδιαγραφές! Οι εν λόγω υπηρεσίες και εργαλεία παρέχονται εντελώς δωρεάν και μπορούν να χρησιμοποιηθούν πανεύκολα, ενώ οι πληροφορίες που συλλέγουν θα ικανοποιήσουν και τους πιο απαιτητικούς! Φυσικά δεν είναι ανάγκη το κάθε site να περνάει με επιτυχία όλα τα παραπάνω test (ειδικά τα accessibility test είναι αρκετά δύσκολο να επιτευχθούν ενώ όπως είναι λογικό διαφορετικού τύπου site χρειάζονται και άλλου επίπεδου accessibility), αλλά καλό θα είναι να ρίχνουμε μια καλύτερη ματιά σε αυτά που είτε φτιάχνουμε είτε παραλαμβάνουμε, γιατί στην Ελλάδα το έχουμε παρακάνει το θέμα με τα μη valid και unaccessible sites!

Πως να κάνετε το blog σας να ξεχωρίσει από την μάζα. (Μέρος δεύτερο – Interaction και Navigation)

Σε προηγούμενο post ανάλυσα πως μπορούμε να κάνουμε το blog μας καλύτερο προσέχοντας και υλοποιώντας κάποια πράγματα στο design και το theme του. Σε αυτό το δεύτερο μέρος πηγαίνω το θέμα λίγο παραπέρα και ασχολούμαι με το πως μπορούμε να βελτιώσουμε το interaction (ή αλληλεπίδραση για όσους προτιμάνε τους ελληνικούς όρους) του blog μας, βοηθώντας με αυτόν τον τρόπο τους χρήστες μας να βρίσκουν εύκολα και γρήγορα αυτό που ψάχνουν. Όπως τόνισα και στο πρώτο post το περιεχόμενο είναι ο βασιλιάς, αλλά εάν δεν μπορεί να το εντοπίσει κάποιος εύκολα και γρήγορα, τότε ο περιεχόμενο μας δεν έχει και πολύ νόημα.

Σαν χρήστης του internet εδώ και τουλάχιστον 12 χρόνια, έχω συνειδητοποιήσει πως το navigation και γενικότερα interaction του χρήστη με κάποιο site ή blog είναι ένα από τα πιο παρεξηγημένα και παραμελημένα θέματα. Κανείς δεν του δίνει ιδιαίτερη σημασία, ενώ ο εκάστοτε designer/developer έχει την νοοτροπία πως εφόσον υπάρχει κάποια navigation bar που να δουλεύει, τότε ο καθένας θα ξέρει να την χρησιμοποιήσει και φυσικά θα βρει αυτό που αναζητάει. Όπως καταλαβαίνεται τα πράγματα δεν λειτουργούν έτσι ακριβώς και φυσικά δεν πρέπει να σκεφτόμαστε με αυτήν την λογική, είτε είμαστε επαγγελματίες του χώρου, είτε bloggers. Το να συνειδητοποιήσουμε και να καταλάβουμε το πρόβλημα είναι και το πρώτο βήμα της επίλυσης του! Στη συνέχεια, το όλο θέμα γίνεται ακόμα πιο απλό εάν ρωτήσουμε τον εαυτό μας τι είδους interaction θα θέλαμε να υπήρχε στο site/blog μας έτσι ώστε και ο πιο άπειρος χρήστης να μπορούσε και να το καταλάβει αλλά και να το χρησιμοποιήσει έτσι ώστε να βρει αυτό που ψάχνει.

Ας ξεκινήσουμε με τα βασικά λοιπόν και πιο συγκεκριμένα με το κεντρικό μενού ή navigation, όπως το προτιμώ! Ο παλιός (web 1.0), κλασικός τρόπος κατηγοριοποίησης των άρθρων, post κτλ. είναι η χρήση κατηγοριών! Οι περισσότεροι χρήστες είναι ήδη μαθημένοι σε αυτόν τον τρόπο αλληλεπίδρασης μιας και είναι πολύ εύκολα κατανοητός, απλά κατηγοριοποιείς τα post ανάλογα με το θέμα τους! Οι περισσότεροι χρήστες ακόμα και εάν δεν έχουν καθόλου εμπειρία στο internet μπορούν πολύ εύκολα να καταλάβουν τι είναι οι κατηγορίες σε ένα navigation menu, μιας και είναι πολύ συνηθισμένος τρόπος αλληλεπίδρασης και στις off-line ασχολίες τους (όλο και κάποιον φάκελο με συγκεκριμένα έγγραφα θα έχουν κατηγοριοποιήσει, όλο και κάποια συλλογή με κατηγοριοποιημένους δίσκους ή γραμματόσημα θα έχουν φτιάξει, κοκ.). Καλό θα είναι λοιπόν να προσφέρουμε όλες τις κατηγορίες μας στον τελικό χρήστη στην προσπάθεια αναζήτησης κάποιας πληροφορίας. Στο blog μου πχ. οι κατηγορίες των post μου βρίσκονται στο κεντρικό μενού, κάτω στην επιλογή Categories. Καλό θα είναι το συγκεκριμένο μενού να είναι απλό στην χρήση (να μην λειτουργεί με περίπλοκα drug ‘n drop κτλ.), να περιέχει ξεκάθαρες επιλογές και να είναι άμεσα διαθέσιμο σε όλες τις σελίδες του blog! Με αυτόν τον τρόπο δίνουμε την δυνατότητα σε όλους τους χρήστες (και ιδιαίτερα τους πιο άπειρους) οπουδήποτε και να βρεθούν στο blog μας, να μπορέσουν να αλληλεπιδράσουν μαζί του, και να φτάσουν στην πληροφορία/post που αναζητούν.

Ο νέος και πιο μοντέρνος (web 2.0) τρόπος κατηγοριοποίησης είναι τα tags τα οποία κάνουν ότι και οι κατηγορίες περίπου, αλλά είναι πολύ πιο ευέλικτα και ακριβή. Με τα tags λοιπόν δεν χρειάζεται να καταχωρείς το post σε μία κατηγορία (ή περισσότερες), απλά τους κολλάς πολλές ετικέτες (tags) έτσι ώστε να το ξεχωρίζεις. Με τον καιρό αυτές τις ετικέτες θα αυξάνονται, αλλά και θα ξεχωρίσουν αυτές που χρησιμοποιήτε πιο πολύ στα post σας. Από εκεί και πέρα ένα tag cloud παρουσιάζει πολύ όμορφα αυτές τις ετικέτες, ενώ προσφέρει στον χρήστη και ένα πιο όμορφο αλλά και ακριβή τρόπο αλληλεπίδρασης. Έτσι εάν κάποιος χρήστης για παράδειγμα επιλέξει ένα tag με το όνομα wordpress, αποκλείεται να μεταφερθεί σε κάποιο post που να μην αναφέρει κάτι για το wordpress (εκτός και εάν το έχουμε κάνει εσκεμμένα, αλλά μιλάμε για normal καταστάσεις!). Και το tag cloud θα πρέπει να είναι διαθέσιμο παντού (σε όλες τις σελίδες) και μάλιστα σε ευδιάκριτο σημείο – δεν μ’ αρέσει να το βρίσκω σε footers ή σε άλλα περίεργα σημεία κάποιου blog.

Τέλος, το τελευταίο βασικό στοιχείο αλληλεπίδρασης που μαζί με τα δύο προηγούμενα θα ολοκληρώσουν τον κεντρικό interaction πυρήνα ενός blog, δεν είναι άλλο από την αναζήτηση/search! Και η αναζήτηση πρέπει να είναι διαθέσιμη σε όλες τις σελίδες σε εμφανές σημείο, ενώ καλό είναι να μην το παρακάνουμε μαζί της (όπως με πολλές advance δυνατότητες, επιλογές, κουμπιά, κτλ.) γιατί πιο πιθανό είναι να μπερδέψουμε τους χρήστες μας, παρά να τους βοηθήσουμε. Επίσης μία εγγενής μηχανή αναζήτησης (αυτή δηλαδή που ψάχνει κατευθείαν το περιεχόμενο του blog μας) είναι πολύ καλύτερη από την χρήση μιας τρίτης που να ψάχνει το blog μας (όπως πχ. Google), αφού έχει πολύ καλύτερα αποτελέσματα, μιας και η πρώτη έχει πάντα το πιο up-to-date υλικό, ενώ στην δεύτερη περίπτωση εξαρτώμαστε από τα bots της μηχανής στην ανανέωση των καταχωρίσεων, αλλά και εύρεση του υλικού μας.

Από εκεί και πέρα και εφόσον έχουμε λύσει το πρόβλημα του βασικού interaction, ο εκάστοτε blogger έχει την ελευθερία να δημιουργήσει όσους άλλους τρόπους αλληλεπίδρασης θέλει (αρκεί να μην το παρακάνει κι’ όλας και καταντήσει το blog του μία μάζα από links!). Προσωπικά χρησιμοποιώ δύο επιπλέον λίστες, τα δημοφιλέστερα post τα οποία είναι πάντα διαθέσιμα σε οποιαδήποτε σελίδα, και τα σχετικά posts τα οποία είναι διαθέσιμα μόνο στις σελίδες των post (λογικό νομίζω). Αυτοί είναι δύο πολύ εύκολοι αλλά και χρήσιμοι τρόποι διαφήμισης του περιεχομένου του blog μας, αφού όποιος βρεθεί σε αυτό (είτε από κάποια μηχανή αναζήτησης, είτε από κάποιο link στο blog μας, κτλ.) είναι πολύ πιθανό να μείνει στο blog μας βρίσκοντας γρήγορα κάποιο από δημοφιλέστερα posts μας ή απλά επιλέγοντας κάποιο σχετικό με αυτό που μόλις διάβασε/βρήκε. Επίσης καλό θα είναι τα post σας να δημοσιεύουν τα tags στα οποία ανήκουν, μιας και αυτά δίνουν την επιλογή στον χρήστη να συνεχίσει εύκολα το ψάξιμο κάποιας ταμπέλας/tag (μιας και τα σχετικά άρθρα δεν είναι πολλές φορές και τόσο σχετικά).

Φυσικά υπάρχουν και άλλοι δημοφιλής τρόποι interaction σε blog τους οποίους προσωπικά δεν χρησιμοποιώ, γιατί πολύ απλά δεν τους θεωρώ πολύ χρήσιμους ή ότι κρύβουν κάποια σοβαρή λογική από πίσω. Μερικοί είναι το calendar/ημερολόγιο όπου εμφανίζει τις μέρες που δημοσιεύσατε κάποιο post (ανούσιο), τα archives/αρχεία όπου εμφανίζουν σε χρονολογικά αρχεία (πχ. μήνες) το τι έχετε γράψει (επίσης ανούσιο), τα most commented post (έχει κάποια λογική αλλά, δεν το βρίσκω και εξαιρετικά ενδιαφέρον), κτλ. Τους παραπάνω τρόπους αλληλεπίδρασης τους βρίσκω πολύ άσκοπους και προσωπικά πιστεύω πως η χρήση τους υπερφορτώνει τις σελίδες μας με links χωρίς τελικά να προσφέρουν κάτι ουσιαστικό στο blog μας.

Τα παραπάνω tips εκτός του ότι θα διευκολύνουν τους χρήστες σας να εντοπίσουν τα posts που ψάχνουν, αλλά και να μείνουν επιπλέον ώρα στο blog σας διαβάζοντας αυτά που εντόπισαν στην πορεία, είναι και εύκολοι τρόποι έξυπνου SEO! Με έναν σμπάρο δυο τριγώνια, δηλαδή… Μείνετε συντονισμένοι και για επιπλέον blogging tips!

Πως να κάνετε το blog σας να ξεχωρίσει από την μάζα. (Μέρος πρώτο – Design και Theme)

Πολλοί φίλοι και γνωστοί με ρωτάνε να τους πω την άποψη μου για το design του blog τους, καθώς και συμβουλές για το πως μπορούν να το βελτιώσουν αισθητικά. Καταρχάς και πριν συνεχίσω με τις συμβουλές που τους δίνω, πρέπει να ξεκαθαρίσω πως αυτό που κάνει πραγματικά την διαφορά σε ένα blog, είναι το περιεχόμενο του, και τίποτα άλλο! Το design υπάρχει περίπτωση να μην το βλέπει και κανείς, όπως οι χρήστες που χρησιμοποιούν feed readers -λίγο ακραίο βέβαια το να μην το βλέπει κανείς, απλά θέλω πραγματικά να τονίσω πως το περιεχόμενο και η ποιότητα των post σας είναι αυτό που μετράει περισσότερο από όλα! Σαφέστατα όλα τα παρελκόμενα του blog, όπως το design για παράδειγμα, μπορούν να βοηθήσουν ένα ήδη καλό σε περιεχόμενο blog να πάει ακόμα καλύτερα, απλά ο γενικός κανόνας είναι ο εξής : Content is the king! Μετά από αυτήν την σημαντικότατη εισαγωγή για να αποφευχθούν οι παρεξηγήσεις, περνάμε λοιπόν και στο κυρίως θέμα του post.

Το πρώτο πράγμα που πρέπει να κάνει κάποιος είναι να επιλέξει το κατάλληλο theme για το blog του, το οποίο δυστυχώς δεν είναι εύκολη υπόθεση. Παρά την πληθώρα επιλογών που υπάρχει στο internet, ο blogger πρέπει να σκεφτεί καλά τι εκφράζει αυτόν αλλά και το blog του ως προς το ύφος, το θέμα του και την γλώσσα που θα χρησιμοποιήσει στο blog. Για παράδειγμα εάν το blog θα ασχοληθεί με κάποιο σοβαρό θέμα, θα πρέπει να πάμε σε πιο ουδέτερα χρώματα και συμβατικά σχέδια, ενώ εάν το στυλ γραφής και το θέμα είναι πιο ελεύθερο, μπορούμε να πάμε σε πιο artistic themes. Μόλις αποφασιστούν όλες αυτές οι πολύ σημαντικές λεπτομέρειες, μπορούμε να αρχίσουμε το ψάξιμο του κατάλληλου theme. Η συμβουλή μου πάντα σε αυτό το σημείο είναι απλή και σύντομη : Απλά διαλέξτε ένα όμορφο, απλό και ευκολο-προσάρμοστο (easy to cusomize) theme, και αποφύγετε εκείνα με τα πολλά γραφικά που “πνίγουν” το περιεχόμενο (εκτός και εάν έχετε σκοπό να δημιουργήσετε κάτι πολύ εξεζητημένο ή αρτίστικο). Αποφύγετε επίσης, και μην εντυπωσιάζεστε εύκολα με με τα fancy και trendy themes, τα οποία φορτώνουν το blog σας με πολλά γραφικά και χίλια-δυο άχρηστα πράγματα, που πολλές φορές δεν τα χρειάζεστε ή απλά δεν έχετε ιδέα τι κάνουν! Γενικότερα κοιτάξτε την ουσία και αγνοείστε τα υπόλοιπα!

Μιλώντας για ουσία, τα πράγματα που πρέπει να κοιτάξει κάποιος είναι τα εξής :

  • να είναι web standard valid
  • να αφήνει το περιεχόμενο να “αναπνέει”
  • να είναι γρήγορο στο downloading (είναι αρκετά σημαντικό, ιδιαίτερα για τα blog που στοχεύουν το ελληνικό κοινό)
  • να είναι ευανάγνωστο και να έχει όμορφο typography και ταιριαστές γραμματοσειρές
  • να έχει σωστά επιλεγμένα χρώματα και συνδυασμούς (έχω στραβωθεί άπειρες φορές από απαίσιους συνδυασμούς χρωμάτων!)
  • να είναι εύκολο στην χρήση (δεν χρειάζονται περίεργα navigation menus και επιλογές)
  • να μην χρησιμοποιεί ήχους, flash και άλλα αντίστοιχα ενοχλητικά plug in
  • να είναι καλογραμμένο (στον κώδικα εννοώ), τεσταρισμένο και εύκολο στο customize
  • να δουλεύει σε όλους τους mainstream browsers, αναλύσεις και λειτουργικά συστήματα
  • να είναι όσο πιο accessible γίνεται (σε screen readers, text browsers και κατ’ επέκταση σε search engine bots κτλ.)

Από εκεί και πέρα οι πιο έμπειροι χρήστες που θα πειράξουν και περαιτέρω το design τους έτσι ώστε να το φέρουν ακόμα πιο πολύ στα μέτρα τους (το customization που λέγαμε), καλό θα είναι να προσέξουν να μείνει web standard valid και να μην το παρακάνουν με τα plug-ins, banners, κουμπάκια, κτλ. γιατί τις περισσότερες φορές όλα αυτά περισσότερο μπερδεύουν παρά βοηθάνε τους τελικούς χρήστες. Τέλος προσπαθήστε να κρατήσετε κάποια ομοιογένεια σε όλο το blog (δεν χρειάζεται να αλλάζουν πολλά χρώματα, navigation bars, κτλ. από σελίδα σε σελίδα χωρίς ιδιαίτερο λόγο). Αυτά τα λίγα για το design και το theme του blog σας. Όποιος έχει να προσθέσει κάτι ας αφήσει ένα comment.

Το συγκεκριμένο post είναι μέρος ενός μεγαλύτερου άρθρου το οποίο σκοπεύω να τελειώσω σε πολλά μέρη (προς το παρόν έχω σκεφτεί 3, αλλά μπορεί να βγουν και περισσότερα). Σε κάθε post θα αναλύω-περιγράφω και μια διαφορετική πτυχή ενός blog και θα προτείνω συμβουλές για το πως αυτή μπορεί να βελτιωθεί έτσι ώστε το blog σας να ξεχωρίσει από την μάζα!

Διαφημίστε το blog σας χωρίς να ξοδέψετε ούτε ένα euro!

  1. Ενημερώστε τις δημοφιλείς μηχανές αναζήτησης Google, Yahoo! και MSN (Live Search) πως το blog σας υπάρχει!
  2. Δώστε το/τα feed σας σε όσους πιο πολλούς RSS agreegators μπορείτε. Προτιμήστε αυτούς που είναι διαθέσιμοι στην γλώσσα που γράφεται το blog σας (πχ. για ελληνικά – Mpouligator, Buzz, blogz, GreekBloggers, Blogspace) αλλά και τους ειδικευμένους στο θέμα του blog σας aggregators (στα ελληνικά δεν υπάρχουν πολλοί, αλλά εάν γράφεται στα αγγλικά τότε θα βρείτε αρκετούς τέτοιους).
  3. Δημιουργείστε οπωσδήποτε ένα λογαριασμό στο Technorati και δηλώστε το/τα blog σας!
  4. Δηλώστε το blog σας σε όσα περισσότερα blog directories μπορείτε (οι κανόνες γλώσσας/ειδίκευσης βlog ισχύουν και εδώ).
  5. Μάθετε να γράφεται σωστούς τίτλους. Επίσης προσέξτε τα permalinks σας να είναι σωστά κατηγοριοποιήμενα και πάντα στα αγγλικά (όχι greeklish). Εάν έχετε προβλήματα με οποιοδήποτε από τα παραπάνω, κυκλοφορούν και πολλά plug in σε όλες τις blogging πλατφόρμες και υπηρεσίες που θα κάνουν την ζωή σας ευκολότερη (απλά ψάξτε για SEO plug ins, permalinks plug ins, κτλ.).
  6. Αφήστε σχόλια σε άλλα blogs. Προτιμήστε blogs με ανάλογα θέματα με το δικό σας.
  7. Φτιάξτε ένα blogroll με τα blog που διαβάζετε ή εάν είναι πάρα πολλά με blog ανάλογου περιεχομένου. Πολλοί θα προσθέσουν και εσάς στο blogroll τους αργά ή γρήγορα.
  8. Διαφημίστε το blog σας σε όλες τις on-line δραστηριότητες σας (πχ. signature σε e-mails και forums, ΙΜ, κτλ.)
  9. Προσθέστε μερικά άρθρα σας σε user-voting aggregators (όπως πχ. Digg ή το ελληνικό Cull) και προσπαθήστε να πείσετε τους χρήστες σας (και τους φίλους σας φυσικά), να ψηφίσουν το άρθρο σας. Επίσης προσθέστε links που να διευκολύνουν την όλη διαδικασία κάτω από κάθε post.
  10. Διαφημίστε το περιεχόμενο του blog σας! Μερικοί πολύ εύκολοι τρόποι που μου έρχονται αυτήν την στιγμή είναι η προσθήκη links με σχετικά παλιότερα άρθρα σας στο τέλος κάθε post σας, προσθήκη των tags στα οποία ανήκει το κάθε post, εύκολη πρόσβαση σε navigation (categories, archives, top posts) κτλ. Ο χρήστης μπορεί να μην βρήκε αυτό που έψαχνε στο post σας, οπότε εάν έχει πρόσβαση σε κάτι που μπορεί να τον βοηθήσει να βρει αυτό που ψάχνει (όπως πχ. ένα συγκεκριμένο tag, ένα link σε προγούμενο post ή παραπομπή σε κάποια ανάλογη κατηγορία/archive) είναι πολύ πιθανό να το χρησιμοποιήσει και να παραμείνει στο site σας!
  11. Γίνεται expert σε κάποιο θέμα και φυσικά μην σταματάτε να blogaρετε!