Responsive Web Design στην πράξη
Το Responsive Web Design είναι η τελευταία εμμονή των web designers στον κόσμο. Ακόμα περισσότερο από εμμονή όμως είναι ένας εξαιρετικός τρόπος να κάνουμε τα sites μας να δείχνουν πιο σωστά και πιο όμορφα σε οποιαδήποτε συσκευή.
Τι κάνει η μέθοδος Responsive Design με δύο λόγια; Αλλάζει την εμφάνιση του site βάσει της ανάλυσης της οθόνης του επισκέπτη. Βλέπω ένα site από την οθόνη του υπολογιστή μου; Έχω μια Χ εμφάνιση. Το βλέπω από iPhone; Έχω μια Υ. Και πάει λέγοντας.
Αυτό βέβαια δεν είναι και τόσο απλό όσο ακούγεται. Γιατί πρακτικά σημαίνει ότι ο designer πρέπει να έχει προβλέψει διαφορετικά CSS αρχεία για τις αναλύσεις που τον ενδιαφέρουν.
Όμως δεν είναι και τόσο δύσκολο όσο ακούγεται από τη στιγμή που το βασικό CSS αρχείο στο οποίο βασίζεται η default εμφάνιση είναι καλοφτιαγμένο. “Καλοφτιαγμένο” σημαίνει ότι από την αρχή ο designer έχει στο μυαλό του το responsiveness που θα ακολουθήσει. Συνεπώς, όταν έρθει η ώρα των επιπλέον αναλύσεων οθόνης, ο σκελετός ήδη θα προϋπάρχει και πάνω σε αυτό θα “πατήσουν” οι επιπλέον ρυθμίσεις.
Αν ξεφύγουμε όμως από το τεχνικό κομμάτι, αυτό που έχει ακόμα περισσότερη σημασία, είναι να γνωρίζουμε τις ανάγκες των επισκεπτών μας από μία συσκευή όπως π.χ. το iPhone. Μιλάμε δηλαδή για ταχύτητες σύνδεσης χαμηλότερες από τις συνηθισμένες, περιορισμένο χώρο, άμεση ανάγκη να βρουν αυτό που τους ενδιαφέρει κλπ. Στο δρόμο αυτό είναι σημαντικό να αποφασίσουμε το πως και το πότε θα “θυσιάσουμε” εικαστικά στοιχεία ή άλλου τύπου λεπτομέρειες που σε μια μεγάλη οθόνη θα ήταν σημαντικές.
Με άλλα λόγια, το Responsive Design είναι ένας άλλος τρόπος να φτάσουμε στο Mobile Design. Όχι ότι είναι το ίδιο πράγμα ακριβώς, όμως οι έννοιες είναι κοντά.
Responsive Web Design στο porcupine colors
Με όλα αυτά στο μυαλό μου αποφάσισα το design του site να είναι responsive.
Ξεκίνησα με το να κάνω το fixed layout, fluid. Δηλαδή το πλάτος της σελίδας να αυξομειώνεται βάσει της ανάλυσης της οθόνης του κάθε επισκέπτη. Όταν για χρόνια σχεδιάζεις για 960px πλάτος είναι λίγο δύσκολο να μάθεις τις ιδιοτροπίες ενός layout που δεν μπορείς να ελέγξεις 100% μεν, είναι πιο ενδιαφέρον δε.
Από τη στιγμή που το fluid layout στεκόταν καλά, ήρθε η ώρα για το Responsive Design. Έφτιαξα λοιπόν 4 επιπλέον CSS αρχεία για διάφορες αναλύσεις: ένα για μεγάλες οθόνες με πάνω από 1280px ανάλυση, ένα για μέχρι 1280px, ένα για iPad κι ένα για iPhone.
Όπως έλεγα και πιο πάνω, αυτά τα επιπλέον CSS δε φτιάχτηκαν εκ του μηδενός, αλλά “πατούσαν” στο βασικό CSS αρχείο της πιο μεγάλης ανάλυσης. Αυτό που απέμενε ήταν να δηλώσω ότι το καθένα από αυτά θα ανταποκρίνεται στις εκάστοτε αναλύσεις. Αυτό έγινε εύκολα με μια απλή εντολή του τύπου:
@media screen and (max-width: 480px) { ... }
Η εντολή αυτή λέει: ”Όταν η ανάλυση της οθόνης είναι μέχρι και 480px, τότε άρχισε να διαβάζεις τους κανόνες που ακολουθούν”.
Για να τα δείτε όλα αυτά μπορείτε να αρχίσετε να κλείνετε σιγά σιγά το μέγεθος του παράθυρου του browser σας και εύκολα θα αντιληφθείτε ότι υπάρχουν αυτά τα 4 “σκαλοπάτια”.
Κλείνοντας, πιστεύω ότι το Responsive Design είναι μια καταπληκτική τεχνική να προσφέρουμε στους πελάτες μας μία ωραία υπηρεσία που θα κάνει το περιεχόμενό τους πιο εύκολα προσβάσιμο για τους επισκέπτες τους. Κι αυτή είναι η ουσία της όλης ιστορίας.
Για όσους θέλουν να μάθουν περισσότερα για το Responsive Design υπάρχει φυσικά η πηγή απ’ όπου ξεκίνησαν όλα: το A List Apart.