Fidem.gr

Ανακατασκευή της ιστοσελίδας μας fidem.gr

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

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

Ο σχεδιασμός.

Οι προβλεπόμενες αλλαγές αφορούσαν τρία σημεία.

Α. Το design.
Β. Το περιεχόμενο της ιστοσελίδας, που περιελάμβανε και μια αναπροσαρμογή στο SEO της.
Γ. Και τέλος το τεχνικό κομμάτι, που αφορούσε από το θέμα της μέχρι τον ίδιο το κώδικα που θα χρησιμοποιηθεί για τη κατασκευή.

Όλες οι παραπάνω αλλαγές δεν αφορούσαν καθόλου “διαίσθηση” πάνω στο τι θα μπορούσε να αρέσει στο κοινό που ενδιαφέρεται για τη κατασκευή της ιστοσελίδας του. Επίσης δεν ήταν (μόνο) αποτέλεσμα έρευνας. Κυρίως ήταν η επιβεβαίωση των παραπάνω, την οποία έδιναν διαρκώς οι μετρήσεις που αφορούσαν τη συμπεριφορά των επισκεπτών στη σελίδα. Η μελέτη των στατιστικών που προσφέρουν τα Google Analytics γίνονται τακτικά και σε καθορισμένους χρόνους για όλους τους πελάτες μας, ήρθε η ώρα τα αποτελέσματα των δικών μας αναλύσεων να εφαρμοστούν και σε εμάς.

Α. Design: επιστροφή στην απλότητα

“Το περιεχόμενο είναι βασιλιάς!”, βροντοφωνάζουν οι ιθύνοντες της Google. Τέλος στο “εικόνα, τίτλος, metakeywords και πάλι τίτλος”, αξία πια έχει το ίδιο το περιεχόμενο του site. Αυτή είναι μια αρχή που ισχύει τα τελευταία χρόνια, για τους σχεδιαστές όμως σημαίνει κάτι παραπάνω.

Το περιεχόμενο δεν είναι πια τα κείμενα που γεμίζουν τους προκαθορισμένους χώρους που έχει δημιουργήσει ο designer. Αντιθέτως:

Το design της σελίδας, θα καθοριστεί από το ίδιο το περιεχόμενο.

Όπως θα δούμε στη παράγραφο που αφορά το περιεχόμενο της σελίδας, οι νέες τάσεις απαιτούν αυτό να είναι απλό. Κατ΄ επέκταση και το ίδιο το design γίνεται απλό. Τα οπτικά εφέ, η φαντασμαγορική σχεδίαση και η πολύ κίνηση κάποτε τραβούσαν τη προσοχή, σήμερα πια είναι μόνο βάρος για τη σελίδα. Ο χρήστης του ίντερνετ βλέπει κάτι τέτοιο παντού και τείνει να το αγνοεί. Σε μια ιστοσελίδα μπαίνει για να πάρει πληροφορίες, το design πρέπει να είναι προσαρμοσμένο σε αυτές.

Ο όλος σχεδιασμός στη νέα ιστοσελίδα βασίστηκε στη πληροφορία. Το menu της ιστοσελίδας παραμένει ο πίνακας περιεχομένων της, και η Αρχική της σελίδα παραμένει η περίληψη του menu. Απαλλάχθηκε-  ως όφειλε – από το μεγάλο μάκρος και τα πολλά κείμενα. Σε αυτήν, δίνονται οι βασικές πληροφορίες που αφορούν τον επισκέπτη, ενώ οι μέσα σελίδες είναι αυτές που θα δώσουν τα περισσότερα που πιθανόν να αναζητήσει.

Τι άλλο: το slider της Αρχικής σελίδας δεν φαινόταν να εξυπηρετεί πια το σκοπό του, έτσι εγκαταλείφθηκε και αντικαταστάθηκε με μια στατική εικόνα. Οι σελίδες των βασικών υπηρεσιών δεν περιέχουν πλέον μόνο κείμενα με πληροφορίες: Σχεδιάστηκαν εξ΄ αρχής με το design να ακολουθεί και πάλι τη δομή των κειμένων. Και, επιτέλους, η ιστοσελίδα απέκτησε portfolio στο οποίο ενσωματώθηκαν όσα από τα πρόσφατα έργα μας περιλαμβάνουν την υπογραφή μας.

Β. Περιεχόμενο: θέλω να δω τα πάντα γρήγορα!

Όπως δείχνουν όλες οι μετρήσεις, ο επισκέπτης που αναζητά κάτι θα το αναζητήσει σε πολλές και διαφορετικές σελίδες. Δεν έχει χρόνο να δει τα πάντα, θέλει να δει αν η συγκεκριμένη σελίδα έχει αυτό που τον αφορά. Σε κάθε μια από τις σελίδες που θα επισκεφθεί θα διαθέσει λίγα μόνο δευτερόλεπτα. Στο χρόνο αυτό, η σελίδα πρέπει να τον έχει κερδίσει.

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

Θυμηθείτε τι λέγαμε για την αρθρογραφία στο blog: στην αρχή γράφουμε πάντα με λίγα λόγια τι θα περιέχει το άρθρο, και μόνο στις επόμενες ενότητες το αναλύουμε. Το ίδιο συμβαίνει πια συνολικά στην ιστοσελίδα: η τάση είναι αρχικά να γράφεται μόνο επιγραμματικά η βασική πληροφορία, έπειτα στις μέσα σελίδες και με τα κατάλληλα button που θα προσγειώνουν σε αυτές, θα υπάρχουν οι επιπλέον πληροφορίες. Και εδώ όμως θα ακολουθούν την ίδια δομή: αρχικά θα είναι περιεκτικές, και στη συνέχεια θα αναλύονται για τον επισκέπτη που ζητά το κάτι επιπλέον.

Αυτή η νέα δομή ακολουθήθηκε κατά το νέο σχεδιασμό του περιεχομένου της ιστοσελίδας. Δόθηκε επιπλέον προσοχή στο SEO της. Εγκαταλείφθηκαν σελίδες που το περιεχόμενό τους ενσωματώθηκε αλλού, έγιναν οι κατάλληλες ανακατευθύνσεις για την αποφυγή σφαλμάτων 404. Και το τελικό αποτέλεσμα είναι το όλο περιεχόμενο να είναι συγκριτικά πιο λιτό και ταυτόχρονα εξ΄ίσου πλήρες.

Γ. Τεχνικό μέρος: λίγο από builder, πολύ από κώδικα

Όλη η σπαζοκεφαλιά του εγχειρήματος ήταν εδώ.

 Σκέψη νο 1.

Η σκέψη να κατασκευαστεί η ιστοσελίδα εξ΄ ολοκλήρου από κώδικα ήταν πολύ δελεαστική. Μπορεί να μη χρειαζόμαστε ένα CMS (δείτε εδώ τι είναι CMS) για να μπορούμε να διαχειριστούμε το περιεχόμενό της, παρ΄ όλα αυτά δεν έχουμε επιλέξει να χτίζουμε με WordPress μόνο για το σύστημα διαχείρισής του. Για την ασφάλεια του WordPress εργάζονται συνεχώς ομάδες από τους καλύτερους προγραμματιστές παγκοσμίως, μπορεί λοιπόν να είμαστε υπέροχοι, φανταστικοί, μοναδικοί και ανεπανάληπτοι web developer, δεν είμαστε όμως τόσο φαντασμένοι ώστε να πιστέψουμε ότι θα πλησιάσουμε στο ελάχιστο τα επίπεδα ασφαλείας που προσφέρει το WP.

Γι΄ αυτό και μόνο το λόγο, η αρχική σκέψη εγκαταλείφθηκε. Η νέα ιστοσελίδα θα χτιζόταν και πάλι με WordPress.

Επόμενο ζήτημα, η επιλογή θέματος. Όπως όλοι (ίσως) γνωρίζουμε, το WP έρχεται με προ-εγκατεστημένο κάποιο θέμα, το οποίο ο κατασκευαστής το αλλάζει με κάποιο άλλο που επιθυμεί. Το θέμα που θα επιλέξει συνοδεύεται συνήθως και από κάποιον builder, ο οποίος αποτελεί το βασικό εργαλείο χτισίματος της σελίδας. Επιπλέον, το θέμα περιέχει συνήθως περισσότερα από ένα templates, τα οποία δίνουν τη βασική μορφή, το βασικό design στη κάθε ιστοσελίδα. Το template που θα επιλέξει  ο κατασκευαστής είτε το ακολουθεί ατόφιο, είτε το διαμορφώνει ανάλογα με τις ανάγκες της ιστοσελίδας που δημιουργεί.

Η ιστοσελίδα είναι ένα γεύμα

Και αυτός, είναι σίγουρα ο πιο αλλόκοτος τίτλος που έχετε δει σε σελίδα κατασκευής ιστοσελίδων.

Αλλά από βίτσιο και μόνο, θα συνεχίσω τη παρομοίωση.

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

Δεν το έχεις φτιάξει όμως εσύ. Ακόμη κι αν είναι υπέροχο, δεν είναι όπως ακριβώς το θέλεις εσύ.

Από την άλλη μεριά, η ιστοσελίδα που τη φτιάχνεις εσύ είναι σαν το φαγητό που μαγειρεύεις σπίτι σου. Δεν είναι έτοιμο, δεν γίνεται εύκολα. Το φτιάχνεις μεν όπως ακριβώς εσύ θέλεις, αλλά δεν είναι μόνο αυτό. Αν δεν είσαι ειδικός δεν θα πλησιάσει καν το επίπεδο του επαγγελματία. Θα είναι στη καλύτερη περίπτωση μέτριο, θα το απολαύσεις εσύ αφού είναι δικό σου, αλλά μόνο εσύ. Ο επισκέπτης σου θα στο εκθειάσει όταν θα είσαι μπροστά, αυτό είναι σίγουρο. Αλλά μπορείς επίσης να είσαι σίγουρος και για κάτι άλλο: για το ποιο πιάτο θα επιλέξει, αν το ένα μόνο από τα δύο που έχει μπροστά του έχει φτιαχτεί από επαγγελματία.

Όταν όμως αυτή ακριβώς είναι η δουλειά σου, τότε δεν υπάρχει θέμα επιλογής. Μαγειρεύεις σπίτι σου – συγνώμη, ήθελα να πω φτιάχνεις ιστοσελίδα από την αρχή. Το template δεν είναι καν επιλογή. Η σελίδα έχει ήδη σχεδιαστεί, θα χτιστεί εξ΄αρχής ακολουθώντας το προκαθορισμένο σχέδιο.

 Σκέψη νο 2.

Έχοντας στη διάθεσή σου έναν builder τα πράγματα γίνονται σχετικά εύκολα, όχι όμως χωρίς κόστος. Μη ξεχνάμε ότι ο builder, που οπτικά είναι το εργαλείο που θα χτίσει την ιστοσελίδα, δεν είναι παρά ένα πρόγραμμα. Ένα σύνολο εντολών και αρχείων, που αυτό που θα κάνουν είναι να επιβαρύνουν την ιστοσελίδα με επιπλέον αρχεία, κώδικα και χώρο, επιβραδύνοντας τη ταχύτητα φόρτωσής της. Ποια είναι η επόμενη σκέψη λοιπόν;

Να επιλεγεί ένα θέμα απλό. Λιτό, με μικρά αρχεία, “καθαρό” κώδικα, και η ιστοσελίδα να χτιστεί χωρίς builder και μόνο με κώδικα. Ήδη σε κάποια από τα τελευταία έργα που έχουμε κάνει (βλέπε πχ εδώ ή εδώ) ακολουθήσαμε ακριβώς αυτή τη μέθοδο, παίρνοντας μάλιστα κάποια καταπληκτικά αποτελέσματα σε όσον αφορά τη ταχύτητα απόκρισης της σελίδας.

Ωραία σκέψη, αλλά υπήρχε ένα πρόβλημα. Σχεδόν το σύνολο των άρθρων της σελίδας έχει μορφοποιηθεί μέσω του προϋπάρχοντος builder. Αν μεταφερθούν σε σελίδα που δεν τον περιέχει θα εμφανίζονται προβληματικά. Η σκέψη και μόνο ότι το καθένα από αυτά θα πρέπει να αναδιαμορφωθεί, ήταν εφιάλτης.

Οπότε;

 Σκέψη νο 3. Bingo!

Οπότε, ας δοκιμάσουμε το εξής.

Να μείνουμε στο θέμα που είμαστε. Στο template που είμαστε, διατηρώντας εγκατεστημένο τον υπάρχων builder. Και να σχεδιάσουμε τη κάθε σελίδα από την αρχή. Το εργαλείο χτισίματος θα χρησιμοποιηθεί καθόλου ή ελάχιστα, η σελίδα θα χτιστεί μόνο με κώδικα.

Θα ξεκινήσουμε μόνο με την Αρχική σελίδα. Θα μετρήσουμε τα αποτελέσματα, και θα δούμε πως θα συνεχίσουμε.

Δεν θα μπω σε περισσότερες τεχνικές λεπτομέρειες. Δεν θα αναλύσω για τη δραματική μείωση των dom της σελίδας που έφερε η μη χρήση του builder, τα ελάχιστα request που απαιτήθηκαν για την επικοινωνία browser κ΄ server ή τις διαφοροποιήσεις σε ταχύτητα που έφερε η μείωση στο ελάχιστο της javascript. Για τα περισσότερα οπτικά εφέ υπεύθυνη είναι η CSS. Κάποια scripts για οπτικά εφέ τελικά κρατήθηκαν, κάποια άλλα επιβάρυναν τη σελίδα κι εγκαταλείφθηκαν. Το τελικό αποτέλεσμα έδωσε την αισθητική και τη λειτουργία που επιζητούσαμε, και το ζητούμενο τώρα ήταν η ταχύτητα.

Η σελίδα αφ΄ ενός ήταν “καθαρή”, αφού δεν χρησιμοποιήθηκε παρά μόνο κώδικας για τη δημιουργία της. Αφ΄ ετέρου, εξακολουθούσε να ήταν χτισμένη σε ένα σχετικά “βαρύ” θέμα, το οποίο εξακολουθούσε να έχει ενεργοποιημένο τον builder – λόγω των άρθρων που λέγαμε πριν. Τι θα λέγαν τελικά οι μετρήσεις;

Λοιπόν, τα πράγματα πήγαν αρκετά καλύτερα απ΄ όσο περίμενα. Οι πρώτες μετρήσεις ήταν ήδη πολύ καλές. Μετά από περαιτέρω επεξεργασία, δοκιμές και βελτιώσεις, η  βαθμολογία της  άγγιξε τελικά το τέλειο σκορ.

Υπάρχουν ακόμη κάποια ζητήματα που θα μπορούσαν να διορθωθούν, αλλά αυτά μπορούν να γίνουν εν καιρό.

Το χτίσιμο συνεχίστηκε με τον ίδιο τρόπο και στις υπόλοιπες σελίδες. Η κάθε μια απαιτούσε τη δική της δομή κειμένου, άρα δημιουργήθηκε ξεχωριστός σχεδιασμός, με τρόπο που να υπάρχει συνολικά αρμονία στο συνολικό design της ιστοσελίδας.

Και το site μας, στο μεγαλύτερο κομμάτι του, είναι πια έτοιμο. Ελπίζω να σας αρέσει.