css3.gr

Το Sitemap είναι εκείνη η σελίδα ενός website που περιέχει μια σειρά από links προς όλες τις άλλες σελίδες του. Το link για το Sitemap συνήθως βρίσκεται στο footer κάθε σελίδας. Γενικά είναι μία από τα πιο “αόρατες”, αλλά όχι και πιο ασήμαντες σελίδες ενός website.

Γιατί είναι σημαντική;

• Γιατί δείχνει με μια ματιά τα περιεχόμενα όλου του site. Όσο πιο πολύπλοκη η δομή, τόσο πιο χρήσιμο είναι το Sitemap.
• Γιατί βοηθάει το SEO.
• Γιατί είναι μια σελίδα στην οποία αντρέχουν συχνά οι επισκέπτες με ειδικές ανάγκες προκειμένου να χρησιμοποιήσουν ένα website.

Αυτό που μ’ ενοχλεί με τα Sitemaps είναι ότι βαριέμαι να τα βλέπω. Χρήσιμα μεν, αφόρητα βαρετά δε. Επειδή κατασκευάζονται στο τέλος, δεν έχει μείνει στους designers/developers ούτε ενέργεια ούτε δημιουργικότητα για να κάνουν κάτι καλύτερο με αυτά. Παράδειγμα; Το WIRED είναι ένα τεράστιο network με απίστευτο υλικό κι ένα φτωχότατο sitemap, που δε δίνει κανένα έναυσμα στο να κάνει κάποιος ένα κλικ.

Όμως, το να έχει ένα website ένα πραγματικά όμορφο Sitemap αξίζει τον κόπο γιατί:

• Δείχνει στον επισκέπτη ότι έχει προσεχθεί κάθε λεπτομέρεια σε αυτό.
• Βοηθάει σε αυτό που λέμε emotional engagement (συναισθηματική σύνδεση του επισκέπτη με το site).
• Κάποιος που θα βρεθεί απευθείας στο Sitemap, χωρίς να έχει δει κάτι άλλο (π.χ. μετά από μια αναζήτηση στο Google) είναι πολύ πιθανό να συνεχίσει κάνοντας τουλάχιστον ένα ακόμα κλικ.

Ας φτιάξουμε ένα καλύτερο Sitemap

Όλες αυτές οι σκέψεις με απασχολούν εδώ και καιρό και δε θα μπορούσα να βρω καλύτερο παράδειγμα να τις εφαρμόσω, παρά το δικό μου website (στο οποίο το Sitemap είναι ακόμα under construction).

Το πρώτο πράγμα που έκανα ήταν να γράψω στο χαρτί τις επιμέρους ενότητες του site και να τις μελετήσω από εκεί. Αυτές είναι:

• Η “Αρχική” σελίδα - (1)
• Οι σελίδες “Σχετικά με Εμάς”, “Υπηρεσίες” και “Δραστηριότητες στο Web” - (3)
• Τα “Έργα” - (1)
• Το “Blog” και το “Εργαστήριο” - (2)
• Το “Σημειωματάριο” και το “Lifestream” - (2)
• Η σελίδα της “Επικοινωνίας” - (1)
• Τα “Testimonials”, η σελίδα “Προσβασιμότητας”, η σελίδα της “Εμπιστευτικότητας” και το “Sitemap”  - (4)

Στις παρενθέσεις έχω γράψει από πόσες σελίδες αποτελείται η κάθε ενότητα. (Η δομή που περιέγραψα δεν είναι απόλυτα ακριβής. Υπάρχει ακόμα μεγαλύτερο βάθος, που θα φανεί στην πορεία. Όμως προς το παρόν μας καλύπτει.) Συνολικά λοιπόν μιλάμε για 7 ενότητες με διαφορετικό αριθμό σελίδων η καθεμία.

Το επόμενο βήμα, πάντα στο χαρτί, είναι να σχεδιάσω κάποιες ιδέες σχετικά με τη διάταξη αυτών των 7 ενοτήτων. Παράλληλα, βρήκα κάποιες εικόνες που θα κάνουν πιο ενδιαφέρον το Sitemap. Μετά από διάφορα mockups άρχισα να περνάω τις καλύτερες ιδέες στο Photoshop.

Ο στόχος πίσω απ’ όλα ήταν να προσεγγίσω το θέμα “Sitemap” από το 0, με καθαρό μυαλό και καινούρια διάθεση.

Οριζόντιo layout

Η προφανέστερη διάταξη. Οι ενότητες είναι διατεταγμένες οριζόντια η μία κάτω από την άλλη.

(Κλικ στην εικόνα για μεγέθυνση)

Το grid εξασφαλίζει την απαραίτητη ισορροπία για κάθε design element. Χρησιμοποιώντας διάφορες αποχρώσεις του γκρι μπορώ εύκολα να ξεχωρίζω σελίδα από σελίδα πριν ακόμα μπουν χρώματα, αληθινά κείμενα και οι τελικές εικόνες.
Όσες ενότητες περιέχουν παραπάνω από μία σελίδες χωρίζονται μεταξύ τους. Τα εικονίδια στο “Work” είναι links προς τα επιμέρους έργα.

Κάθετο layout

Η επόμενη εναλλακτική λύση ήταν το κάθετο layout.

Η λογική είναι παρόμοια με την προηγούμενη περίπτωση όσον αφορά τα χρώματα, τα εικονίδια κλπ.

Το layout αυτό ισορροπεί καλύτερα στο μάτι, αλλά γρήγορα το απέρριψα γιατί το υπόλοιπο website οδηγεί το μάτι να κινηθεί οριζόντια κι όχι κάθετα. Όμως δεν το πέταξα. Το στήσιμο αυτό με βοήθησε να πάρω ακόμα περισσότερες ιδέες τις οποίες εφάρμοσα στο...

Mixed layout

Η διάταξη αυτή κάνει τα πράγματα κάπως πιο ...περιπετειώδη.

Η μεγάλη διαφορά σε σχέση με τα προηγούμενα είναι ότι σε αυτό το layout η κάθε σελίδα δεν έχει την ίδια βαρύτητα με τις υπόλοιπες. Στην ουσία δηλαδή αφήνει το δημιουργικό κομμάτι πιο ελεύθερο. Παράλληλα, ο σεβασμός στο grid κάνει τα πράγματα να ξεχωρίζουν μεταξύ τους.

Γρήγορα κατέληξα ότι προτιμούσα να κινηθώ προς αυτή την κατεύθυνση. Οπότε, το επόμενο βήμα ήταν να το κάνω αυτό πιο πραγματικό, βγάζοντας τα γκρι, γράφοντας αληθινά κείμενα και κάνοντας το design λίγο πιο “αόρατο”. Το αποτέλεσμα είναι η παρακάτω πρόταση:

Πολύ γρήγορα προέκυψε μία ακόμα παραλλαγή με αριθμούς.

Συμπεράσματα

Όλο αυτό ξεκίνησε ως πείραμα, συνεχίστηκε ως άσκηση και κατέληξε σε κάτι που είναι ενδιαφέρον και που λύνει το θέμα των βαρετών Sitemaps, χωρίς να θυσιάζει τη λειτουργικότητα. Στην ουσία πρόκειται για μια νέα προσέγγιση στο όλο θέμα που αλλάζει ανάλογα με το χαρακτήρα και την πολυπλοκότητα του εκάστοτε website. Και, ναι, έχει επιπλέον βάρος, ειδικά αν σκεφτούμε και τον κώδικα που απαιτείται για να ολοκληρωθεί. Όμως αξίζει τον κόπο...