Τι είναι Responsive Site;

Η αγορά των smartphones έχει ξεπεράσει κατά πολύ αυτή των desktop-pc όπως και των laptops, αλλά και η ανερχόμενη αγορά των tables «απειλεί» να πάρει μεγάλο μερίδιο αγοράς από τα «παραδοσιακά» Laptops ενώ έχει είδη εκτοπίσει τα netbooks. Από αυτά τα στοιχεία είναι φανερό ότι η πλοήγηση στο διαδίκτυο από κινητά τηλέφωνα και tablets μεγαλώνει και τείνει να καταλάβει την πρώτη θέση ανάμεσα τρόπους προβολής ιστοσελίδων. Έτσι δημιουργήθηκε η ανάγκη για ιστοσελίδες σχεδιασμένες με τέτοιο τρόπο ώστε όταν αλλάζει το μέγεθος του μέσου προβολής (pc, tablet, mobile) να αλλάζει το μέγεθος, η δομή και η εμφάνιση των στοιχείων, για να είναι σωστή η εμφάνιση της ιστοσελίδας. Μια κατ’ αυτό τον τρόπο δομημένη ιστοσελίδα ονομάζεται responsive.

Για να ικανοποιηθεί εύκολα η ανάγκη δημιουργίας responsive ιστοσελίδων, δημιουργήθηκαν framework που εκμεταλλεύονται πλήρως τις δυνατότητες της css γλώσσας. Μας παρέχουν την δυνατότητα, προσθέτοντας απλά κάποιες συγκεκριμένες κλάσεις στην ιστοσελίδα μας, να «εναρμονίσουμε» το περιεχόμενο της εύκολα και γρήγορα. Τέτοια frameworks είναι τα: Pure, Kube, Yaml, Gumby, Less Framework αλλά και τα πιο διαδεδομένα Foundation και Bootstrap. Εμείς επιλέξαμε την τελευταία έκδοση του twitter bootstrap.

 

Εισαγωγή στο bootstrap 3.

To bootstrap είναι ένα framework το οποίο συνδυάζει css και javascript (την βιβλιοθήκη jQuery) για να μας παρέχει έναν πιο δομημένο και εύκολο τρόπο σχεδιασμού και ανάπτυξης ιστοσελίδων. Το bootstrap 3, το οποίο και χρησιμοποιούμε, έχει εισάγει την λογική «mobile first» και δίνει βαρύτητα στην εμφάνιση σε κινητά τηλέφωνα. Σε σχέση με την προκάτοχη έκδοση 2.3 έχει σταματήσει να εισάγει 2 αρχεία css, ένα για responsive και ένα για μη responsive, αλλά μόνο ένα αρχείο στο οποίο όλα είναι για responsive ανάπτυξη. Γι αυτό και κρίνεται απαραίτητη η εισαγωγή του tag στο head της html σελίδας μας. Προσθέτοντας στο παραπάνω tag τις εντολές: maximum-scale=1.0, user-scalable=no αποτρέπετε τον χρήστη από το να κάνει zoom στην σελίδα, δίνοντας την αίσθηση ενός application και όχι αυτή ενός site, αλλά δεν συστήνεται για όλα τα sites.

 

Bootstrap και Hermes

Εντάσσοντας το bootstrap στα Hermes web applications περνάμε στην εποχή responsive και για τα hermes-templates. Για να μπορέσετε να αλλάξετε με ευκολία την εμφάνιση σε ένα template θα χρειαστεί αρχικά να έχετε κατεβάσει το αρχείο zip με τα less αρχεία του template και να ακολουθήσετε τις οδηγίες χειρισμού less αρχείων από την μελέτη Pegasus Hermes και less dynamic stylesheet language. Στην συνέχεια ακολουθεί μια ανάλυση των βασικών στοιχείων και δομών που χρησιμοποιούνται.

 

Containers και η λογική Grid

Για την ορθή λειτουργία του bootstrap και της responsive λογικής χρειάζεται να αναπτύσσουμε την ιστοσελίδα μας σε html 5 tag ( ). Όπως χρησιμοποιούμε το body σε μια ιστοσελίδα έτσι πρέπει να χρησιμοποιούμε και ένα div με κλάση container το οποίο θα περιέχει όλα τα άλλα div της σελίδας μας.

Το grid system τώρα είναι αυτό που θα αναλάβει να μας εμφανίζει σωστά τα περιεχόμενα. Έχει την λογική ενός πίνακα (γραμμές, στήλες) και παρακάτω εμφανίζεται το πώς είναι η δομή του.

Όπως βλέπουμε στο παραπάνω σχήμα έχουμε 4 γραμμές (δεν υπάρχει περιορισμός) που χωρίζονται εξ ορισμού σε 12 στήλες. Ανάλογα με το πόσες στήλες θέλουμε να χρησιμοποιήσουμε σε κάθε μας γραμμή βάζουμε και την αντίστοιχη κλάση όπως μπορείτε να δείτε γενικά για το bootstrap στην παρακάτω διεύθυνση: http://getbootstrap.com/css/#grid. Το bootstrap μας δίνει την δυνατότητα να φτιάξουμε της δικές μας κλάσεις και να τους δώσουμε χαρακτηριστικά από το βασικό grid. Δηλαδή έστω ότι έχουμε ένα div με κλάση mydiv_row και θέλουμε μέσα σε αυτό να στοιχίσουμε κάποια στοιχεία. Μπορούμε μέσα από το αρχείο less όπου παράγουμε το css για το site μας, να έρθουμε και να γράψουμε: .mydiv_row { .make-row();}. Αυτό θα μας παράγει την γραμμή μας. Στην συνέχεια έστω ότι έχουμε ένα div με κλάση my_left_column μέσα στο div με κλάση mydiv_row, και θέλουμε να πιάνει το 25% της οθόνης στα αριστερά και να έχει γκρι background. Θα επιστρέψουμε στο less αρχείο μας και θα προσθέσουμε: .my_left_column{.make-column(3); background-color: gray;}. Όπως βλέπουμε μπορούμε να εισάγουμε και απλό css ταυτόχρονα. Έστω τώρα ότι έχουμε και ένα δεύτερο div μέσα στο mydiv_row, με κλάση my_right_column και θέλουμε να πιάνει το 50% της οθόνης, όμως να αφήνει ένα κενό 25% με το αριστερά. Με τον ίδιο τρόπο θα έρθουμε και θα γράψουμε: .my_right_column{.make-column(6); .make-column-offset(3);}. Με αυτό τον τρόπο μπορούμε να έρθουμε και να καθορίσουμε την δομή ολόκληρου το site.

• .make-row(); -> μας φτιάχνει μία γραμμή μέσα στην οποία θα υπάρχουν οι στήλες
• .make-column(x); -> μας φτιάχνει τις στήλες που θα καταλαμβάνει ένα div με όπου x οι επιθυμητές στήλες (μέχρι 12)
• .make-column-offset(x); -> δίνουμε τις στήλες απόσταση που θα έχει ένα div από ένα άλλο με όπου x τις επιθυμητές στήλες.

Πρέπει να προσέξουμε το άθροισμα του offset και των στηλών που βρίσκονται σε μία γραμμή να μην ξεπερνά τις 12 στήλες.

Σε κάθε div που καταλαμβάνει κάποιες στήλες μπορούμε να δημιουργήσουμε πολλαπλές εμφωλευμένες γραμμές και στήλες. Αρκεί να αντιμετωπίσουμε κάθε div που καταλαμβάνει κάποια columns ως ένα νέο container. Π.χ. το div με κλάση .my_right_column από το παράδειγμά μας, μπορεί να έχει κάποια άλλα περιεχόμενα divs:

 

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

 

Όλα τα columns που φτιάχνουμε αλλάζουν σε mobile και γίνονται γραμμές. Οπότε όλα τα στοιχεία που θα έχουμε περάσει θα βρεθούν το ένα κάτω από το άλλο προς διευκόλυνση μας.

Responsive images

Οι εικόνες μπορούν πλέον να μεγαλώσουν και να μικρύνουν ανάλογα το στοιχείο που ανήκουν. Για να γίνει αυτό αρκεί να ορίσουμε την κλάση pg_img_res ή την img-responsive στην εικόνα μας. Η διαφορά της πρώτης κλάσης με την δεύτερη είναι ότι στην πρώτη αν το πλάτος του στοιχείου που βρίσκεται η εικόνα είναι μεγαλύτερο από την εικόνα, αυτή θα μεγαλώσει μέχρι το συγκεκριμένο πλάτος ενώ με την δεύτερη κλάση θα παραμείνει ίδια. Σε αντίθετη περίπτωση (το πλάτος του στοιχείου να είναι μικρότερο) και οι δύο κλάσεις θα μικρύνουν την φωτογραφία μας. Μπορείτε να έχετε το ίδιο αποτέλεσμα και μέσα από το less αρχείο: .my_img{ .pg_img_res();} ή .my_img{ . img-responsive ();} όπου το my_img η κλάση της εικόνας μας.

 

Αλλαγή κλάσεων ανάλογα την ανάλυση

Μπορούμε αλλάξουμε χαρακτηριστικά ανάλογα με την οπτική-ανάλυση της οθόνης. Το βασικό χαρακτηριστικό για την επίτευξη των responsive χαρακτηριστικών είναι οι εντολές που βρίσκονται κάτω από την εντολή @media . Χρησιμοποιώντας τις κατάλληλες συνθήκες σύγκρισης μέσα στο αρχείο less που επεξεργαζόμαστε, μπορούμε να περιορίσουμε τα χαρακτηριστικά ορισμένων κλάσεων να γίνονται ορατά ή να αλλάζουν, ανάλογα την ανάλυση της οθόνης, δηλαδή αν η οπτική μας είναι από mobile table ή desktop-pc. Ας δούμε ένα παράδειγμα:

@media (max-width: @screen-tablet) {

.pr_code {

display: none;

}

.pg_arrows {

background-color: red;

}

}

Στο παραπάνω παράδειγμα θα εξαφανιστεί η κλάση pr_code και θα αλλάξει φόντο η pg_arrows για mobile. Άρα ελέγχοντας το max-width και το min-width σε σχέση με τις μεταβλητές που έχουμε από το bootstrap για τις αναλύσεις των συσκευών μπορούμε να ορίσουμε ιδιότητες για τις κλάσεις μας. Αναλυτικά μπορείτε να ελέγχετε:

• @media (max-width: @screen-tablet) για mobile
• @media (min-width: @screen-tablet) για tablet και desktop-pc
• @media (min-width: @screen-desktop) για desktop
• @media (min-width: @screen-tablet)and(max-width: @screen-desktop) για tablet
• @media (max-width: @screen-desktop)  για mobile και tablet

 

Εκτός από αυτή την λύση που παρουσιάσαμε και αν θέλουμε κάποια γρήγορα αποτελέσματα στο να κρύψουμε ή να εμφανίζουμε μια κλάση μπορούμε να συμβουλευτούμε τον παρακάτω πίνακα που μας παρέχεται από το bootstrap και να εισάγουμε την κλάση αντίστοιχη κλάση (αριστερή στήλη του πίνακα) στο στοιχείο που θέλουμε, ανάλογα το που θέλουμε να γίνεται ορατό και που όχι. Αυτή η λύση βέβαια δεν μας παρέχει την δυνατότητα να προσθέτουμε ή να αφαιρούμε χαρακτηριστικά από κάποια κλάση και επίσης θα χρειαστεί να επέμβουμε μέσα στην html, κάτι που μπορεί να μην είναι επιθυμητό.