Web development: τι να ζητήσετε πριν χτιστεί το site σας

Ένα νέο site κρίνεται συνήθως από την εμφάνισή του την ημέρα που βγαίνει στον αέρα. Στην πράξη όμως, το αν θα δουλέψει για την επιχείρηση εξαρτάται από πράγματα που δεν φαίνονται με την πρώτη ματιά: πόσο γρήγορα φορτώνει, πώς συμπεριφέρεται στο κινητό, αν μπορούν να το χρησιμοποιήσουν όλοι οι επισκέπτες. Αυτά είναι μετρήσιμα και υπάρχουν δημόσιες οδηγίες που τα περιγράφουν. Αξίζει να τα γνωρίζετε πριν υπογράψετε για την κατασκευή μιας ιστοσελίδας ή ενός e-shop, ώστε να ξέρετε τι να ζητήσετε.

Ταχύτητα που μετριέται με τρεις δείκτες

Η Google περιγράφει την εμπειρία φόρτωσης μιας σελίδας με τρεις δείκτες, τα Core Web Vitals. Σύμφωνα με το web.dev, καθένας μετρά κάτι διαφορετικό:

• LCP (Largest Contentful Paint): μετρά την ταχύτητα φόρτωσης. Για καλή εμπειρία, πρέπει να συμβαίνει μέσα σε 2,5 δευτερόλεπτα.
• INP (Interaction to Next Paint): μετρά την απόκριση στις ενέργειες του χρήστη. Η καλή τιμή είναι 200 χιλιοστά του δευτερολέπτου ή λιγότερο.
• CLS (Cumulative Layout Shift): μετρά την οπτική σταθερότητα, δηλαδή το αν μετακινούνται στοιχεία ενώ φορτώνει η σελίδα. Η καλή τιμή είναι 0,1 ή λιγότερο.

Η ίδια πηγή συνιστά οι τιμές αυτές να αξιολογούνται στο 75ο εκατοστημόριο των φορτώσεων, χωριστά για κινητά και για υπολογιστές. Με απλά λόγια, δεν αρκεί να φορτώνει γρήγορα το site στον υπολογιστή του γραφείου σας. Ζητήστε οι στόχοι αυτοί να γραφτούν στις προδιαγραφές του έργου και να ελεγχθούν πριν από την παράδοση.

Πρώτα το κινητό

Η Google χρησιμοποιεί κυρίως την έκδοση για κινητά ενός site για την ευρετηρίαση και την κατάταξη, κάτι που ονομάζει mobile-first indexing. Στις οδηγίες της για τους ιδιοκτήτες sites προτείνει το responsive design, επειδή είναι ο πιο εύκολος τρόπος υλοποίησης και συντήρησης: η ίδια σελίδα προσαρμόζεται στο μέγεθος κάθε οθόνης.

Από τις ίδιες οδηγίες προκύπτουν μερικά σημεία που αξίζει να ελέγξετε στο δικό σας έργο:

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

Αν στο κινητό κρύβονται κείμενα ή ενότητες «για να χωρέσει» ο σχεδιασμός, αυτό έχει κόστος στην αναζήτηση και όχι μόνο στην αισθητική.

Προσβασιμότητα: ένα site για όλους

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

Τρία απλά παραδείγματα που δίνει το W3C και μπορείτε να ελέγξετε μόνοι σας:

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

Ρεαλιστικός χρόνος και σωστή ομάδα

Ένα έργο που καλύπτει όλα τα παραπάνω δεν στήνεται σε λίγες ημέρες. Η ZonePage, digital agency με έδρα την Αθήνα, αναφέρει στη σελίδα της για το web development ότι η υλοποίηση μπορεί να χρειαστεί από 2 έως 8 μήνες, ανάλογα με την πολυπλοκότητα. Στην ίδια σελίδα περιγράφει την κατασκευή ιστοσελίδων και e-shop, με custom σχεδιασμό ή με έτοιμα templates, και αναφέρει ως συνηθισμένα προβλήματα τα δύσχρηστα websites και την απουσία βελτιστοποίησης για τις μηχανές αναζήτησης.

Το εύρος αυτό βοηθά να προγραμματίσετε σωστά: αν το νέο site πρέπει να είναι έτοιμο για μια συγκεκριμένη περίοδο, η συζήτηση πρέπει να ξεκινήσει αρκετούς μήνες νωρίτερα.

Ερωτήσεις για την πρώτη συνάντηση

• Ποιοι στόχοι LCP, INP και CLS θα ισχύουν και πώς θα μετρηθούν στο κινητό;
• Το site θα είναι responsive, με το ίδιο περιεχόμενο σε κινητό και υπολογιστή;
• Ποιος γράφει τα εναλλακτικά κείμενα των εικόνων και ποιος ελέγχει τη χρήση με πληκτρολόγιο;
• Θα είναι custom σχεδιασμός ή έτοιμο template, και τι σημαίνει αυτό για τον χρόνο;
• Ποια είναι τα στάδια του έργου και τι παραδίδεται σε καθένα;

Τι να κρατήσετε

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

Πηγές

• web.dev, Web Vitals. https://web.dev/articles/vitals
• Google Search Central, Mobile site and mobile-first indexing best practices. https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• W3C Web Accessibility Initiative, Introduction to Web Accessibility. https://www.w3.org/WAI/fundamentals/accessibility-intro/

Σχετικοί οδηγοί

Βιβλιοδεσία και πλαστικοποίηση στο γραφείο: τι να προσέξετεΣε ένα γραφείο τα περισσότερα έγγραφα τυπώνονται, διαβάζονται και μπαίνουν στο αρχείο. Υπάρχουν όμως και εκείνα...Συγκομιδή ελιάς: ασφάλεια και οργάνωση στο κτήμαΗ συγκομιδή της ελιάς κρατάει λίγες εβδομάδες τον χρόνο, αλλά είναι από τις πιο απαιτητικές δουλειές...Εικονική περιήγηση 360: τι να προσέξετε πριν παραγγείλετεΗ φράση «εικονική περιήγηση 360» καλύπτει σήμερα πολύ διαφορετικά πράγματα, από μια σειρά πανοραμικών φωτογραφιών μέχρι...