Αν και οι περισσότερες πλέον εταιρείες σχεδιασμού ιστοσελίδων έχουν υιοθετήσει το Responsive Design ακόμα και μερικές που προσφέρουν υπηρεσίες αυτόματης υλοποίησης, όμως για τους bloggers  αποτελεί ακόμα πρόβλημα.

Τι είναι το Responsive Design

Ουσιαστικά το προδίδει η ίδια η λέξη Responsive δηλαδή "Αποκριτικός". Μια σελίδα όταν έχει υλοποιηθεί με Responsive Design μπορεί να προσαρμοστεί εύκολα σε οποιαδήποτε μέγεθος οθόνης και να εμφανίζεται το ίδιο καλά τόσο σε ένα pc όσο και σε tabglet ή κινητό.

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


Το πως οι στήλες θα συμπτυχθούν σε μια μικρότερη οθόνη από αυτή του υπολογιστή μας, το αναλαμβάνει η Javascrip και το CSS. Αν μια αυτές τις δύο λέξεις σας τρομάζουν, δεν υπάρχει κανένας λόγος για αυτό. Η τεχνοτροπία σχεδιασμού Bootstrap έχει την λύση. Εισάγοντας στην αρχή της  σελίδα σας τα  αντίστοιχα αρχεία  τότε είστε έτοιμοι να δημιουργήσετε. 

Η σχεδίαση Responsive

Όπως είδη αναφέραμε βασίζεται στην δημιουργία στηλών και γραμμών. Κάθε μια γραμμή μπορεί να περιλαμβάνει μέχρι 12 στήλες πλάτους. Δηλαδή όσο και το πλάτος της  σελίδας σας. Η διαφοροποίηση του πλάτους των στηλών μπορεί να γίνει εύκολα αν ορίσουμε σε πια "κλάση" πλάτους θα ανήκει η στήλη μας. Στην παρακάτω εικόνα εμφανίζονται οι διαθέσιμες τιμές  αυτών καθώς και η τοποθέτηση τους στον χώρο.


Πως κάνουμε μια ιστοσελίδα Responsive ;
Θα δώσουμε ένα μικρό παράδειγμα μιας και ο στόχος αυτό του άρθρου δεν είναι να σας μάθει HTML προγραμματισμό. Καταρχήν μέσα στο σώμα (body) της σελίδας δημιουργούμε ένα  "container". Το container μια θέση που καταλαμβάνει εξ' ορισμού όλο το πλάτος μιας σελίδας. Μέσα σε αυτό θα δημιουργήσουμε στην συνέχεια τόσο τις γραμμές όσο και τις στήλες. Για το τι θα επιλέξουμε να δημιουργήσουμε για συνέχεια εξαρτάτε από τι θέλουμε να φτιάξουμε ή πως θα είναι η σχεδίαση που έχουμε εμπνευστεί.


Αν πρόκειται να σχεδιάσουμε μια γραμμή τότε απλά την δημιουργούμε ορίζοντας ένα αντικείμενο (div) με κλάση row. Βέβαια η γραμμή καλύπτει όπως και το container όλο το πλάτος της σελίδας. Τώρα λοιπόν είμαστε έτοιμοι να φτιάξουμε τις στήλες. Ανάλογα με το σχέδιο μας διαλέγουμε το επιθυμητό πλάτος για κάθε μια από αυτές ορίζοντας ένα div με κλάση αυτή για την οποία προορίζετε η σελίδα. Αυτό ήταν. Πλέον είμαστε έτοιμοι να τοποθετήσουμε αντικείμενα όπως εικόνες κείμενο, κουμπιά κτλ, ανάλογα την σχεδίαση.

Για τους μυημένους του σχεδιασμού γνωρίζουν ότι η σχεδίαση δεν τελειώνει εδώ, αλλά δεν μπορούμε να παραβλέψουμε ότι  έχετε είδη φτιάξει ένα Responsive template για την σελίδα σας.
Αν θέλετε να μάθετε περισσότερα για το Responsive Design δεν έχετε παρά να επισκεφτείτε την βιβλιοθήκη του site. και να διαλέξετε το σχετικό βιβλίο.