Ο σχεδιασμός ιστοσελίδων στη νέα εποχή
O σχεδιασμός ιστοσελίδων έχει εξελιχθεί, ώστε να ανταποκρίνεται στην ποικιλία συσκευών και οθονών, που χρησιμοποιούν οι χρήστες του διαδικτύου καθημερινά. Η προσέγγιση του mobile first design έχει ως στόχο τη βελτίωση της εμπειρίας χρήσης στις κινητές συσκευές και γι΄αυτό ο σχεδιασμός αυτός και η κατασκευή ιστοσελίδων ξεκινούν από τη mobile version κι έπειτα προσαρμόζονται στις πιο μεγάλες οθόνες.
Από την άλλη πλευρά, το adaptive design περιλαμβάνει τον σχεδιασμό πολλαπλών layouts, που επιλέγονται από τον browser αυτόματα και ανάλογα από το μέγεθος της οθόνης, επιτρέποντας την ομαλή πλοήγηση σε κάθε συσκευή.
Τέλος, το responsive design είναι μια μέθοδος που περιλαμβάνει τον σχεδιασμό της ιστοσελίδας για desktop, η οποία προγραμματίζεται με CSS και HTML ώστε να προσαρμόζεται αυτόματα σε όλες τις οθόνες, εξασφαλίζοντας μια ομαλή εμπειρία χρήσης.
Τι είναι το mobile first design;
Η φιλοσοφία του mobile first design έχει ως στόχο τη δημιουργία καλύτερων εμπειριών για τους χρήστες, ξεκινώντας τη διαδικασία σχεδιασμού από την πιο μικρή οθόνη, δηλαδή αυτή του κινητού τηλεφώνου. Αυτό σημαίνει πως, σχεδιάζοντας τις ιστοσελίδες απευθείας για κινητές συσκευές, εξασφαλίζουμε ότι η πλοήγηση είναι άψογη σε αυτές, καθώς κάθε element έχει σχεδιαστεί ειδικά για mobile χρήση.
Αυτό είναι εξαιρετικά σημαντικό, καθώς οι χρήστες έχουν πολύ περισσότερο engagement στις κινητές συσκευές και το conversion rate είναι σημαντικά υψηλότερο. Ειδικά αν το κοινό σας περιλαμβάνει τη νέα γενιά καταναλωτών, τους Gen Z customers, τότε ένα website που λειτουργεί άψογα σε κινητό και έχεις γρήγορες ταχύτητες γίνεται προτεραιότητα.
Τι κάνει ένας web designer όταν κατασκευάζει μια ιστοσελίδα mobile first; Ξεκινά με μικρότερο «καμβά» και προσπαθεί να χωρέσει τα πιο σημαντικά στοιχεία της επιχείρησής σας με τον πιο user-friendly, αποτελεσματικό και κατανοητό τρόπο. Δηλαδή, δεν ξεκινά με το desktop website και τη μετέπειτα προσαρμογή σε mobile friendly, responsive ή adaptive design.
Όλη η αρχιτεκτονική πληροφορίας σχεδιάζεται from scratch για να εξυπηρετεί mobile χρήστες.
D3 Solutions insight: Το mobile first design είναι και αυτό responsive: Προσαρμόζεται ανάλογα με το μέγεθος της οθόνης της εκάστοτε κινητής συσκευής.
Χαρακτηριστικά του mobile first design
Tα χαρακτηριστικά που πρέπει να έχει ένα mobile first design είναι:
- Να μοιάζει το UI του με εφαρμογή (app)
- Να έχει λιγότερο κείμενο (για να αποφύγετε το ατέλειωτο scroll-down)
- Να έχει μεγάλη γραμματοσειρά (>16)
- Να έχει υψηλή ταχύτητα φόρτωσης
- Να περιλαμβάνει video και audio για περισσότερο engagement
- Να έχει ένα CTA (Call To Action) σε κάθε σελίδα (landing page)
- Οι landing pages να μην είναι πολύ εκτενείς κ.ά.
D3 Solutions insight: Ο ρόλος του mobile first design δεν είναι να αντικαταστήσει τις εφαρμογές (mobile apps). Το κάθε ένα έχει διαφορετική χρήση και λειτουργικότητα και εξυπηρετούν διαφορετικό κοινό και στόχους.
Τι είναι το responsive design;
Το responsive design είναι μια σχεδιαστική προσέγγιση που επιτρέπει την αυτόματη προσαρμογή του περιεχομένου ανάλογα με το αν ο χρήστης βλέπει την ιστοσελίδα σε tablet, κινητό τηλέφωνο, τηλεόραση ή ακόμα και ρολόι.
Οι developers χρησιμοποιούμε CSS και HTML για να διασφαλίσουμε πως κάθε σελίδα ενός ιστότοπου μεταμορφώνεται βάσει του μεγέθους της οθόνης του χρήστη. Χρησιμοποιούμε κάτι που ονομάζεται «breakpoints» για να ειδοποιείται ο ιστότοπος πότε πρέπει να προσαρμόσει την εμφάνισή του στα διάφορα μεγέθη οθονών.
Το αποτέλεσμα; Το ίδιο design αποκτά αυτόματα διάταξη με τέσσερις στήλες σε μεγάλη οθόνη desktop, τρεις στήλες σε μικρότερη οθόνη φορητού υπολογιστή, δύο στήλες σε οθόνη tablet και μία στήλη σε κινητό τηλέφωνο. Τόσο απλά!
Πλεονεκτήματα και μειονεκτήματα του responsive design
Το μεγαλύτερο πλεονέκτημα του responsive design είναι ότι απαιτεί λιγότερη σχεδιαστική εργασία από το adaptive design, τόσο για τον αρχικό σχεδιασμό όσο και για τη συντήρησή του.
Επιπλέον, οι responsive ιστοσελίδες προσαρμόζονται σε όλες τις οθόνες, πράγμα που είναι πολύ σημαντικό, καθώς δημιουργούνται συνεχώς νέες συσκευές στην αγορά. Τέλος, έχουν καλύτερη κατάταξη στις μηχανές αναζήτησης, μιας και θεωρούνται φιλικές προς τις κινητές συσκευές.
Ωστόσο, οι responsive σελίδες έχουν μεγαλύτερες απαιτήσεις από άποψη προγραμματισμού και απαιτούν επαγγελματίες developers για να δουλεύουν σωστά. Αν και σε ένα μεγάλο βαθμό το responsive design λειτουργεί καλά, υπάρχουν περιπτώσεις που ορισμένα στοιχεία δεν αποδίδονται όπως πρέπει, έχοντας αντίκτυπο στην εμπειρία του χρήστη σε κινητές συσκευές.
Adaptive vs responsive design: Έχουν διαφορά;
Το adaptive design είναι μια στρατηγική σχεδιασμού ιστοσελίδων στη βάση της οποίας βρίσκουμε την ίδια λογική με το responsive design: Την προσαρμογή ενός ιστότοπου σε διαφορετικά μεγέθη οθονών. Ωστόσο, υπάρχει μία τεράστια διαφορά ανάμεσα στα δύο.
Το responsive κάνει την προσαρμογή αυτόματα, ενώ το adaptive περιλαμβάνει τη δημιουργία προκαθορισμένων layouts, από τα οποία ο browser που χρησιμοποιεί ο χρήστης επιλέγει αυτόματα το κατάλληλο, ανάλογα με το μέγεθος της οθόνης.
Για παράδειγμα, μπορούν να δημιουργηθούν διαφορετικά layout για έξι κοινά μεγέθη οθονών, από πολύ μικρές έως πολύ μεγάλες:
- 320px
- 480px
- 760px
- 960px
- 1200px
- 1600px
Ωστόσο, αν από τα analytics προκύπτει πως οι περισσότεροι χρήστες που στοχεύετε χρησιμοποιούν μόνο 3 από τα 6 κοινά μεγέθη οθονών που υπάρχουν, επενδύστε στη δημιουργία ξεχωριστών εμπειριών για αυτά τα τρία, γλιτώνοντας σπατάλη χρόνου και πόρων.
Πλεονεκτήματα και μειονεκτήματα του adaptive design
Όπως ήδη αναφέραμε, επιλέγοντας adaptive design, σημαίνει ότι η ιστοσελίδα εμφανίζεται διαφορετικά σε κάθε συσκευή, επειδή χρησιμοποιεί προσχεδιασμένα layouts κατάλληλα για κάθε διάσταση οθόνης. Αυτό κάνει την ιστοσελίδα να φαίνεται καλύτερη και πιο εύχρηστη σε κάθε συσκευή, επιτρέποντας στους χρήστες να απολαμβάνουν τη βέλτιστη εμπειρία χρήσης.
Όταν κάθε μέγεθος είναι σχεδιασμένο ξεχωριστά και λαμβάνονται υπόψη τα επιμέρους UX και UI χαρακτηριστικά, τότε ο χρήστης μπορεί να έχει μια πραγματικά μοναδική εμπειρία σε κάθε συσκευή. Το στοίχημα εδώ είναι το κάθε design να είναι συνεκτικό με τα brand guidelines και όλο μαζί τα layouts να δημιουργούν μία ιστορία.
Τέλος, στα μειονεκτήματα του adaptive design είναι ότι απαιτείται πολύς χρόνος και πολλοί πόροι για τον σχεδιασμό, την ανάπτυξη και την υλοποίηση ενός adaptive ιστότοπου και γι΄αυτό δε χρησιμοποιείται ευρέως.
D3 Solutions tip: Όταν σχεδιάζετε mobile first ή adaptive ιστοσελίδες, μην ξεχάσετε να τις κάνετε φιλικές προς αριστερόχειρες και responsive σε οριζόντιο προσανατολισμό! Είναι ένα από τα πιο συχνά λάθη που παρατηρούνται και μειώνουν πολύ την εμπειρία χρήσης για άτομα που χρησιμοποιούν τις συσκευές τους με το αριστερό χέρι ή τείνουν να γυρνάνε την οθόνη οριζόντια.
Mobile first vs Responsive design: Ποιο να επιλέξετε;
Όταν ξεκινάτε έναν νέο ιστότοπο είναι σημαντικό να αποφασίσετε αν θα επιλέξετε mobile first design ή responsive. Είναι καλό να έχει προηγηθεί έρευνα αγοράς από μέρους σας, ώστε να ξέρετε αν οι χρήστες σας χρησιμοποιούν περισσότερο desktop ή mobile συσκευές.
Για παράδειγμα, αν είστε ένα νεανικό e-commerce είναι σημαντικό να επενδύσετε στη mobile έκδοση του ιστότοπού σας. Ενώ, αν είστε ένα B2B eshop βαριάς βιομηχανίας είναι πιθανότερο να προχωρήσετε σε μια top-notch desktop έκδοση της ιστοσελίδας σας και να χρησιμοποιήσετε τα πλεονεκτήματα του responsive design, για να έχετε μια αξιοπρεπή παρουσία και στις κινητές συσκευές.
Πλέον, το mobile first design μετατρέπεται σε επιτακτική ανάγκη για πολλές επιχειρήσεις, με το responsive design να θεωρείται πλέον αυτονόητο για όλες. Αν η ιστοσελίδα σας δεν είναι σχεδιασμένη mobile first, αλλά δε διαθέτει ούτε responsive design, ήρθε η ώρα να κάνετε το επόμενο βήμα και να επενδύσετε σε ανακατασκευή ιστοσελίδας ή να δημιουργήσετε μια νέα (την οποία θα μπορούσατε να συνοδεύσετε και με γενικότερες κινήσεις rebranding).
Μην ξεχνάτε, πως η Google, με το mobile-first indexing έχει καταστήσει σαφές πως, αν θέλετε να δείτε τον ιστότοπό σας να rankάρει, πρέπει να φροντίσετε για την υγεία της mobile εκδοχής του.
Στην D3 Solutions αναλαμβάνουμε την κατασκευή, ανακατασκευή και βελτιστοποίηση ταχύτητας της ιστοσελίδας σας, βοηθώντας σας να ενισχύσετε την ψηφιακή σας παρουσία και να γίνετε ανταγωνιστικότεροι στην αγορά.
