Κατασκευή ιστοσελίδων για smart phones και tablets

Πρακτικές και τεχνολογίες για την υλοποίηση mobile optimized websites 

Ο επανασχεδιασμός ενός website και η κατασκευή εξειδικευμένων ιστοσελίδων για την αποτελεσματική προβολή τους  σε συσκευές smartphone και tablet έχει σαν στόχο τη εξυπηρέτηση όλων των αναγκαίων στοιχείων που θα πρέπει να ικανοποιεί ένα βελτιστοποιημένο website για κινητά (mobile optimized website). Οι διαφορετικές τεχνολογικές πλατφόρμες (android, iOS, blackberry,…),  οι διαφορετικές δυνατότητες, το διαφορετικό μέγεθος και ανάλυση οθόνης, είναι ορισμένες από τις βασικότερες παραμέτρους που επηρεάζουν το σχεδιασμό των ιστοσελίδων μας για έξυπνα κινητά και tablets.

Γιατί χρειάζονται βελτιστοποίηση οι ιστοσελίδες μας;

Ο βασικότερος λόγος για την απόκτηση ενός smartphone είναι η περιήγηση στο διαδίκτυο.  Η πλειοψηφία των χρηστών smartphone χρησιμοποιούν τη συσκευή τους σε καθημερινή βάση περισσότερο από 2 ώρες. Κατά την περίοδο αυτή οι χρήστες ξοδεύουν κατά μέσο όρο 25 λεπτά για να περιηγηθούν στο web, 17 λεπτά για την κοινωνική δικτύωση, 13 λεπτά παίζοντας παιχνίδια και 16 λεπτά ακούγοντας μουσική.  ακούγοντας μουσική.

Δεδομένης της ραγδαίας εξάπλωσης των έξυπνων κινητών και των tablets  είναι πλέον βέβαιο πως τα επόμενα 2 με 3 χρόνια (2014 - 2015) η πλειοψηφία των επισκεπτών του εταιρικού ή προσωπικούς σας web site – blog θα χρησιμοποιούν android, iOS, blackberry ή windows phone.  Το πρόβλημα στην προκειμένη περίπτωση είναι ότι οι συσκευές smart phone δεν μπορούν να αποδώσουν τη χρηστική εμπειρία που έχουμε όταν χρησιμοποιούμε PC ή laptop συσκευές. Ο αργός χρόνος απόκρισης, ο περιορισμένος χώρος παρουσίασης των περιεχομένων και η χρήση οθόνης αφής για πλοήγηση είναι ορισμένα μόνο από τα προβλήματα που αντιμετωπίζει το κοινό σας όταν επισκέπτεται το διαδικτυακό σας τόπο. 

Κατασκευή ιστοσελίδων για smart phones και tablets

Το ζητούμενο είναι να προβάλλονται σωστά η ιστοσελίδες σας και να εκμεταλλεύονται αποτελεσματικά τις προηγμένες λειτουργίες και τις δυνατότητες των smartphones και των tablets  (click to call, add to contacts, geolocation κλπ). Ο βασικός στόχος θα πρέπει να είναι η ομοιόμορφη διαδικτυακή παρουσία σας ανεξάρτητα από το μέσο που χρησιμοποιεί το κοινό σας (PC, smartphone ή tablet). 

Ποιες επιλογές έχουμε;

Οι πλέον αποτελεσματικές και δημοφιλείς μέθοδοι για το σχεδιασμό και την  κατασκευή ιστοσελίδων για έξυπνα κινητά και tablet (mobile optimized website)  είναι οι ακόλουθες:

1. Responsive web design για τη δημιουργία websites που εξυπηρετούν όλους τους τύπους συσκευών από την ίδια διεύθυνση (URL) με τις ίδιες HTML σελίδες προσαρμόζοντας όμως το layout με χρήση CSS προκειμένου οι ιστοσελίδες να προβάλλονται ανάλογα με το είδος της συσκευής. Ο χρήστης έχει πρόσβαση στην ίδια ιστοσελίδα ανεξάρτητα από το είδος της συσκευής που χρησιμοποιεί.

2. Multichannel websites τα οποία χρησιμοποιούν αυτόματη ανίχνευση  της συσκευής (WURFL device detection) για δυναμική προβολή των ιστοσελίδων με διαφορετική HTML σελίδα ανάλογα με τον τύπο της συσκευής. 

Στις προτεινόμενες λύσεις δεν αναφέρουμε την περίπτωση δημιουργίας διαφορετικών ιστοσελίδων με διαφορετικό περιεχόμενο και διευθύνσεις (URLs) για κάθε συσκευή μιας και αποτελεί την πλέον αναποτελεσματική και  ιδιαίτερα δαπανηρή λύση τόσο από πλευράς υλοποίησης όσο και από πλευράς  διαχείρισης. 

Responsive web design

Σύμφωνα με τις οδηγίες της Google είναι η πλέον ενδεδειγμένη μέθοδος σχεδιασμού website προκειμένου  οι ιστοσελίδες σας να προβάλλεται σωστά σε κάθε συσκευή.  Χρησιμοποιώντας responsive design επιτυγχάνουμε οι ιστοσελίδες μας να “προσαρμόζονται” ανάλογα με το είδος της συσκευής μέσα από την οποία προβάλλονται.  Η προσαρμογή αφορά την αλλαγή μεγέθους και την αναδιάταξη των στοιχείων της ιστοσελίδας προκειμένου  να «χωρέσουν» στην οθόνη της συσκευής του χρήστη και επιτυγχάνεται με τη συνδυασμένη χρήση css media queries, fluid grids και flexible images.

Multichannel websites

Με τον όρο multichannel websites αναφερόμαστε στην δημιουργία ιστοσελίδων  διαδικτυακών τόπωνπου προβάλλονται αποτελεσματικά σε πολλαπλά ψηφιακά κανάλια  (PC,laptops,smartphones, tablets, web TV, email, PDF,…).  Πρόκειται για δυνατότητα που παρέχεται σε προηγμένα συστήματα διαχείρισης περιεχομένου (Content Management Systems – CMS) με τα οποία διαχειριζόμαστε ξεχωριστά το περιεχόμενο από τα αρχεία μορφοποίησης (template & structure files). Ο διαχωρισμός των περιεχομένων από τα εικαστικά στοιχεία και τα στοιχεία μορφοποίησης έχει σαν στόχο την ευελιξία και την αποτελεσματικότητα στη διαχείριση τους.  Αντί να δημιουργούμε σελίδες που αναπαράγουν το περιεχόμενο για κάθε ψηφιακό κανάλι που στοχεύουμε (π.χ. desktop – tablet) συντηρούμε μια πηγή περιεχομένων για την οποία δημιουργούμε διαφορετικές δομές και στοιχεία μορφοποίησης (template structures  & layouts)  ανάλογα με το κανάλι προβολής. 

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

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

Χρησιμοποιούμε responsive web design με προοδευτικές βελτιώσεις  (progressive enhancements ) για έργα χαμηλού budget και περιορισμένο χρονοδιάγραμμα για web sites με απλή αρχιτεκτονική και μικρό όγκο σε περιεχόμενα.

Χρησιμοποιούμε multichannel σχεδίαση σε συνδυασμό με responsive design (όταν αυτό κρίνεται απαραίτητο) για μεγαλύτερα και πολυπλοκότερα web sites στα οποία θα πρέπει να έχουμε την ευελιξία να προβάλουμε σε σύντομο χρονικό διάστημα τα περιεχόμενα σε νέα ψηφιακά κανάλια. Ουσιαστικά σχεδιάζουμε το web site για dekstop PCs και στη συνέχεια ανάλογα με τις προτεραιότητες και τις ανάγκες της εταιρείας δημιουργούμε ξεχωριστές δομές μορφοποίησης για πρόσθετες συσκευές όπως mobile, tablet και smart TV.

Περισσότερες λεπτομέρειες και πληροφορίες σχετικά με τα πλεονεκτήματα των δύο μεθόδων θα παρουσιάσουμε σύντομα σε επόμενο άρθρο μας. 

Tags: Responsive web design , Multichannel websites