To responsive web design έχει αλλάξει πολύ τα τελευταία χρόνια. Με αποκορύφωμα το έτος 2015. Το responsive web design είναι μια τεχνική που προσαρμόζουμε στις ιστοσελίδες για να εμφανίζονται σωστά και λειτουργικά σε κινητές συσκευές, tablet και οθόνες υπολογιστών γραφείου.
Πριν λίγα χρόνια όλοι οι δικτυακοί τόποι που θέλανε να απευθύνονται σε όλους τους χρήστες του διαδικτύου αναγκαζόντουσαν να δημιουργήσουν μία ιστοσελίδα για Laptop & Desktop και άλλη ιστοσελίδα για κινητές συσκευές, με αποκορύφωμα ποια και τους πιο τολμηρούς που δημιουργούσαν ακόμα μία ειδικά για τα tablet που κυκλοφόρησαν! Φυσικά και οι τρείς σελίδες ήτανε συνδεδεμένες με ένα database και είχανε κοινά δεδομένα. Μάλιστα μέχρι τώρα με κάποια ειδικά script αναγνώριζαν και την συσκευή του χρήστη και του άνοιγαν την ιστοσελίδα που έχει γραφεί συγκεκριμένα για την συσκευή του. Πχ κινητό τηλέφωνο κ.τ.λ.
Φυσικά όμως όλα αυτά γινόντουσαν πριν. Σήμερα το responsive web design έχει προχωρήσει τόσο πολύ που όλες αυτές οι σελίδες που όλοι μας έχουμε φτιάξει πρέπει να σχεδιαστούν εκ νέου!
Το responsive web design όλο και εξελίσσεται και μας δίνει την δυνατότητα να φτιάχνουμε ιστοσελίδες χωρίς να μας νοιάζει από πια συσκευή θα ανοίξει την ιστοσελίδα μας ο κάθε χρήστης.
Τι είναι το Responsive Web Design;
Για να το καταλάβετε θα ήθελα να κάνετε ένα παράδειγμα. Όπως διαβάζεται αυτό το άρθρο από έναν σταθερό υπολογιστή ή laptop θα ήθελα να σμικρύνετε και να μεγαλώσετε αντίστοιχα το παράθυρο του browser που χρησιμοποιείτε. Θα διαπιστώσετε ότι το goldensites.gr έχει φτιαχτεί με τέτοιο τρόπο ώστε όσο μεγάλη αλλά και όσο μικρή να είναι μια οθόνη να μπορεί ο χρήστης να μπορεί να διαβάσει σωστά & καθαρά ένα άρθρο ή να βρει μία πληροφορία. Ακόμα και να μπορεί από το κινητό του μέσω της touch οθόνης του να πλοηγηθεί πολύ πιο σωστά και εύκολα σε ολόκληρη την ιστοσελίδα. (Αυτό είναι και το μυστικό αλλά και η μαγεία σε όλα τα responsive templates που κατασκευάζουμε!
Όπως είπαμε πιο πάνω ανάμεσα σε άπειρες συσκευές το responsive template είναι ο πιο αξιόπιστος τρόπος να είμαστε εξασφαλισμένη ότι ο χρήστης / πελάτης μας θα διαβάσει σωστά και καθαρά αυτά που θέλουμε να του πούμε ή να του δείξουμε.
Παραδοσιακά, οι ιστοσελίδες έχουν οριστεί σε όρους pixels. Αυτή είναι μια ιδέα που είχε μεταφερθεί από τη βιομηχανία εκτύπωσης, όπου ένα περιοδικό ή μια εφημερίδα είχε πάντα θα είναι το ίδιο σταθερό μέγεθος. Μια ιστοσελίδα όμως μπορεί να εμφανιστεί σε μια μεγάλη οθόνη όπως πχ η τηλεόραση αλλά πολύ συχνά μπορεί να εμφανίζεται σε ένα tablet ή ακόμα πιο συχνά πλέον σε κινητά τηλέφωνα smartphone για να μην μιλήσουμε ακόμα για τα smartwatch!
Γι αυτό το λόγο η ιστοσελίδα μας θα πρέπει να φτιαχτεί με ποσοστά και όχι με σταθερές μονάδες pixels.
Πολλοί προγραμματιστές μετά από τόσα χρόνια έχουν συνηθίσει να σχεδιάζουν σε pixels. Ίσως ο παρακάτω απλή φόρμουλα στα μαθηματικά να σας βοηθήσει για την μετάβαση σε χρήση ποσοστών. Στο περίπου ο τύπος μοιάζει με τον παρακάτω.
στόχος / πλαίσιο = αποτέλεσμα
Για να σας το εξηγήσω, ας πούμε ότι έχετε μια ιστοσελίδα με μέγιστο πλάτος template 960 pixels, και ψάχνετε σε αυτό το site σε ένα μεγιστοποιημένο παράθυρο προγράμματος περιήγησης σε μια οθόνη που είναι 1920 pixels πλάτος. Σε αυτήν την περίπτωση, το πλάτος του παραθύρου του browser είναι το πλαίσιο και το μέγιστο πλάτος του template είναι ο στόχος.
Τι πρέπει να κάνουμε για να υπολογίσουμε με τι ποσοστό να το αντικαταστήσουμε και να έχουμε το ίδιο αποτέλεσμα ? Την απάντηση την παίρνουμε με το παρακάτω τύπο.
Διαστάσεις 960 / 1920px = 50%
Φυσικά το ίδιο θα γίνει και αν έχετε και sidebar! Απλά καθώς θα λιγοστεύει το ποσοστό θα πρέπει να αποφασίσετε πιο στοιχεία θα πάει πάνω και πιο από κάτω.
Τώρα, τι γίνεται με τα στοιχεία του παιδιού που είναι ένθετα στο εσωτερικό του στοιχείου περιτύλιγμα; Ο ίδιος κανόνας ισχύει σε όλη τη διαδρομή προς τα κάτω. Ως ένα άλλο παράδειγμα, ας υποθέσουμε ότι έχετε μια διάταξη δύο στηλών στο εσωτερικό του διαστάσεις 960 πλάτος site σας. Η αριστερή στήλη είναι μια πλαϊνή μπάρα που είναι 300px πλάτος και η δεξιά στήλη είναι η κύρια περιοχή περιεχομένου σε 640px πλάτος. Μπορείτε επίσης να θέλετε 20px των περιθωρίων μεταξύ των δύο στηλών. Εδώ είναι μια εικόνα που απεικονίζει τι μπορεί να μοιάζει με:
Χρησιμοποιώντας τον ίδιο τύπο υπολογίζουμε το κάθε τμήμα του site μας :
- Sidebar : 300px / διαστάσεις 960 = 31,25%
- Κύριο Περιεχόμενο :640px / διαστάσεις 960 = 66,66667%
- Περιθώριο : 20px / διαστάσεις 960 = 2,08334%
Αν αυτές τις τιμές τις χρησιμοποιήσετε στο css ή στον κώδικα html τότε θα μπορέσετε να δείτε πως μπορείτε να γεμίσετε όλη την σελίδα ανάλογα το πλάτος που θα επιλέξετε.
Χρησιμοποιήστε την ίδια τεχνική και στις εικόνες αλλά και στους πίνακες που ίσως υπάρχουν στην ιστοσελίδα σας και ξεχωρίστε από τους ανταγωνιστές σας καθώς εσείς θα εμφανίζεστε σε όλες τις συσκευές απεικόνισης!
Δείτε κάποια παραδείγματα που χρησιμοποιούμε μέσω css στα responsive templates!
Πλάτος Φωτογραφίας
img { max-width: 100%; }
Πλάτος οθόνης μικρότερης από 600 pixel
@media screen and (min-width: 600px) { /* …desktop styles here… */ }
Πλάτος οθόνης μικρότερης από 900 pixel
@media screen and (min-width: 900px) { /* …desktop styles here… */ }
Επιπλέον Tips που σας προτείνουμε..
- Σε κινητές συσκευές θα πρέπει να κουμπιά σας να μεγαλώνουν για να είναι εύχρηστη η πλοήγηση στους πελάτες σας.
- Σε κινητές συσκευές ότι πεδίο είναι περιττό καλό είναι να το αφαιρείτε καθώς μέσω 3G είναι πιο αργό το άνοιγμα της σελίδας σας, κρίμα είναι να αργή και χωρίς λόγο.
- Στα tablet να υπολογίζεται το οριζόντιο πλάτος αλλά και το κάθετο. Πολλοί χρήστες κάνουν περιήγηση στο διαδίκτυο και με τους δύο τρόπους.
- Σε περίπτωση που η ιστοσελίδα σας είναι επαγγελματική και δεν έχετε γνώσεις προγραμματισμού απευθυνθείτε σε κάποιον που ασχολείται με μετατροπή ιστοσελίδας σε responsive.
