Σε αυτό το άρθρο θα καλύψουμε τις βασικότερες κατευθυντήριες οδηγίες για την κατασκευή μιας responsive ιστοσελίδας. Θα κατασκευάσουμε ένα δείγμα responsive ιστοσελίδας η οποία θα περιέχει ένα τίτλο, εισαγωγικό κείμενο και 3 στήλες που η καθεμία θα περιέχει από μια φωτογραφία, τον τίτλο της και την περιγραφή της. Με αυτή τη δομή θα έχουμε καλύψει ορισμένες βασικές ανάγκες για την μεθοδολογία που χρησιμοποιούν οι responsive ιστοσελίδες.
Δημιουργία του HTML αρχείου και του τομέα <head>
Ας ξεκινήσουμε με τον κώδικα που πρέπει να περιέχει το html αρχείο μας. Στην αρχή της σελίδας θα πρέπει να δηλώσουμε το doctype έτσι ώστε τα προγράμματα περιήγησης (chrome, firefox, internet explorer, safari κτλ) να διαβάσουν ότι πρόκειται για ένα αρχείο με HTML5 κωδικοποίηση:
<!DOCTYPE HTML>
Στην συνέχεια θα πρέπει να δηλώσουμε την κωδικοποίηση της γλώσσας που θα χρησιμοποιείται στο περιεχόμενο της ιστοσελίδας μας, συγκεκριμένα για την ελληνική γλώσσα στον τομέα <head> προσθέτουμε:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="el" />
Επειδή κατασκευάζουμε μια responsive ιστοσελίδα και θέλουμε οι διαστάσεις και το ζουμ που θα ορίσουμε να είναι 1 προς 1 σε όλες τις συσκευές, θα πρέπει να δηλώσουμε το viewport meta tag και αυτό στον τομέα <head>. Συγκεκριμένα το width θα πρέπει να είναι ίσο με το device-width, το initial-scale θα πρέπει να είναι ίσο με το 1.0 και αν δεν θέλουμε ο χρήστης να κάνει ζουμ στην σελίδα δηλώνουμε no στο user-scalable:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Δεδομένου ότι όλοι οι χρήστες δεν χρησιμοποιούν τις πιο πρόσφατες εκδόσεις των προγραμμάτων περιήγησης, θα χρειαστεί να προσθέσουμε ένα jquery script για να κάνουμε την ιστοσελίδα μας συμβατή με όλα τα προγράμματα περιήγησης. Αυτό το script είναι το Respond.js το οποίο επιτρέπει σε παλιότερες εκδόσεις προγραμμάτων περιήγησης να είναι συμβατά με το CSS3 αρχείο το οποίο θα περιέχει τα media queries που θα κάνουν την σελίδα μας να προσαρμόζεται σε όλες τις αναλύσεις οθόνης σε οποιαδήποτε συσκευή (φορητή ή επιτραπέζιο υπολογιστή) μπορείτε να το κατεβάσετε από εδώ. Αφού το αποσυμπιέσετε, ανοίγετε τον φάκελο src και αντιγράφετε το αρχείο respond.js στην ίδια τοποθεσία με αυτή του html αρχείου που δημιουργούμε. Στην συνέχεια προσθέτουμε στον τομέα <head> την παρακάτω γραμμή κώδικα:
<script type="text/javascript" src="respond.js"></script>
Τέλος θα πρέπει να δηλώσουμε το CSS3 αρχείο (οδηγίες για την δημιουργία του ακολουθούν παρακάτω):
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Συνοψίζοντας το html αρχείο μας θα πρέπει να έχει την παρακάτω δομή:
<!DOCTYPE HTML>
<html>
<head>
<title>Responsive ιστοσελίδα</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="el" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="respond.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
Δημιουργία του αρχείου CSS3
Βασικό στοιχείο για διαμόρφωση της responsive σελίδας μας είναι το CSS. Το CSS περιέχει όλες τις πληροφορίες σχετικά με το στυλ και τα χαρακτηριστικά όλων σχεδόν το στοιχείων που θα περιέχει η ιστοσελίδα. Προκειμένου να απενεργοποιήσουμε τις προεπιλεγμένες τιμές που θέτουν τα προγράμματα περιήγησης θα πρέπει να συμπεριλάβουμε στο css αρχείο μας τα περιεχόμενα του αρχείου Eric Meyer’s “Reset CSS” 2.0 τα οποία (μπορείτε να το βρείτε εδώ) τα αντιγράφουμε στο αρχείο css που δημιουργήσαμε. Αφού δημιουργήσουμε το css αρχείο, το ονομάζουμε ως style.css και το αποθηκεύουμε στον ίδιο φάκελο με το html αρχείο μας (root folder).
Δημιουργία του τομέα <body>
Ήρθε η ώρα να συνεχίσουμε την επεξεργασία στο html αρχείο μας και να συνεχίσουμε με τον τομέα <body>. Ξεκινάμε με το markup του body tag, το div tag που θα περιλαμβάνει τα περιεχόμενα της σελίδας μας, την επικεφαλίδα και το εισαγωγικό κείμενο μας:
<body>
<div class="content">
<h1>Επικεφαλίδα responsive ιστοσελίδας</h1>
<p>Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου. Όχι μόνο επιβίωσε πέντε αιώνες, αλλά κυριάρχησε στην ηλεκτρονική στοιχειοθεσία, παραμένοντας με κάθε τρόπο αναλλοίωτο. Έγινε δημοφιλές τη δεκαετία του '60 με την έκδοση των δειγμάτων της Letraset όπου περιελάμβαναν αποσπάσματα του Lorem Ipsum, και πιο πρόσφατα με το λογισμικό ηλεκτρονικής σελιδοποίησης όπως το Aldus PageMaker που περιείχαν εκδοχές του Lorem Ipsum.</p>
</div>
Στο div tag έχουμε ορίσει μια class μεταβλητή για να μπορέσουμε να το τροποποιήσουμε στην συνέχεια στο css αρχείο μας. Συνεχίζοντας τον κώδικα μας στο html αρχείο, μέσα στο ίδιο div και αμέσως μετά το κλείσιμο της περιγραφής (</p>) θα ορίσουμε τις 3 στήλες με τις φωτογραφίες, τους τίτλους τις και τις περιγραφές τις:
<div class="column">
<img src="images/image01.jpg" width="330" height="220" alt="1η φωτογραφία"/>
<h2>Τίτλος 1ης φωτογραφίας</h2>
<p>Σύντομη περιγραφή για την πρώτη φωτογραφία</p>
</div>
<div class="column">
<img src="images/image02.jpg" width="330" height="220" alt="2η φωτογραφία"/>
<h2>Τίτλος 2ης φωτογραφίας</h2>
<p>Σύντομη περιγραφή για την δεύτερη φωτογραφία</p>
</div>
<div class="column">
<img src="images/image03.jpg" width="330" height="220" alt="3η φωτογραφία"/>
<h2>Τίτλος 3ης φωτογραφίας</h2>
<p>Σύντομη περιγραφή για την τρίτη φωτογραφία</p>
</div>
Τέλος κλείνουμε το body tag και το html tag για να ολοκληρώσουμε την επεξεργασία του html αρχείου μας, συνοψίζοντας το html αρχείο μας θα πρέπει να έχει την παρακάτω δομή:
<!DOCTYPE HTML>
<html>
<head>
<title>Responsive ιστοσελίδα</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="el" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="respond.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div class="content">
<h1>Επικεφαλίδα responsive ιστοσελίδας</h1>
<p>Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου. Όχι μόνο επιβίωσε πέντε αιώνες, αλλά κυριάρχησε στην ηλεκτρονική στοιχειοθεσία, παραμένοντας με κάθε τρόπο αναλλοίωτο. Έγινε δημοφιλές τη δεκαετία του '60 με την έκδοση των δειγμάτων της Letraset όπου περιελάμβαναν αποσπάσματα του Lorem Ipsum, και πιο πρόσφατα με το λογισμικό ηλεκτρονικής σελιδοποίησης όπως το Aldus PageMaker που περιείχαν εκδοχές του Lorem Ipsum.</p>
<div class="column">
<img src="images/image01.jpg" width="330" height="220" alt="1η φωτογραφία"/>
<h2>Τίτλος 1ης φωτογραφίας</h2>
<p>Σύντομη περιγραφή για την πρώτη φωτογραφία</p>
</div>
<div class="column">
<img src="images/image02.jpg" width="330" height="220" alt="2η φωτογραφία"/>
<h2>Τίτλος 2ης φωτογραφίας</h2>
<p>Σύντομη περιγραφή για την δεύτερη φωτογραφία</p>
</div>
<div class="column">
<img src="images/image03.jpg" width="330" height="220" alt="3η φωτογραφία"/>
<h2>Τίτλος 3ης φωτογραφίας</h2>
<p>Σύντομη περιγραφή για την τρίτη φωτογραφία</p>
</div>
</div>
</body>
</html>
Τελική επεξεργασία του αρχείου CSS3
Αφού ολοκληρώσαμε με την ανάπτυξη του html αρχείου μας, θα πρέπει να επεξεργαστούμε το css αρχείο για να δώσουμε στην σελίδα μας την τελική μορφή. Στην αρχή θα ορίσουμε τις τιμές για την εμφάνιση της σελίδας μας σε οθόνες με μεγάλη ανάλυση (επιτραπέζιους υπολογιστές) και στην συνέχεια για μικρότερες αναλύσεις (φορητές συσκευές). Θα ξεκινήσουμε με το body tag και με το div tag που περιλαμβάνει όλο το περιεχόμενο της σελίδας, συγκεκριμένα στην τελευταία γραμμή του css αρχείου προσθέτουμε τις παρακάτω μεταβλητές:
body {
text-align: center;
background-color: #e7e7e7;
font-family: Verdana, sans-serif;
}
.content {
width: 100%;
max-width: 970px;
margin: 0 auto;
background-color: #fff;
display: inline-block;
}
Στο body tag έχουμε ορίσει το text-align να είναι center για να ισορροπήσουμε την σελίδα στο κέντρο της οθόνης, το background-color να έχει ένα χρωματισμό και ορίσαμε σαν γραμματοσειρά την Verdana για όλα τα κείμενα της σελίδας. Στο content class ορίσαμε το πλάτος του να είναι ίσο με 100% αλλά να μην ξεπερνάει τα 970px, με το τέχνασμα margin: 0 auto ισορροπούμε το div κι αυτό στο μέσο της σελίδας και τέλος ορίζουμε στο div να εμφανίζεται ως inline-block.
Προχωρώντας με τα υπόλοιπα στοιχεία της σελίδας, ορίζουμε στο τίτλο της σελίδας και την περιγραφή της τις παρακάτω τιμές:
h1 {
font-size: 20px;
font-weight: bold;
padding: 20px;
}
p {
font-size: 14px;
line-height: 20px;
padding: 0 20px;
}
Συνεχίζοντας με τα column div’s, ορίζουμε στο css μας να έχουν float:left για να μπορούν να είναι το ένα δίπλα στο άλλο, width: 33.3% για να χωρέσουν και τα 3 σε μια σειρά, τους δίνουμε padding: 20px για να έχουν απόσταση από όλες τις μεριές 20px και τέλος το box-sizing να είναι border-box για να μην επηρεάζεται το πλάτος τους από το padding που τους δώσαμε:
.column {
float: left;
width: 33.3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
}
Συνεχίζοντας με τις φωτογραφίες θα πρέπει να ορίσουμε το πλάτος τους να είναι ίσο με 100% για να προσαρμόζονται στα διαφορετικά πλάτη που θα έχουν οι στήλες και height:auto για να μην χαλάει η αναλογία τους:
img {
width:100%;
height:auto;
}
Τέλος ορίζουμε το styling για τις h2 επικεφαλίδες:
h2 {
font-size: 15px;
font-weight: bold;
padding: 10px 0;
}
CSS media queries
Ο ορισμός @media χρησιμοποιείται για να θέσουμε διαφορετικές css τιμές σε οθόνες με διαφορετική ανάλυση και υπερισχύουν από τις css τιμές που έχουν οριστεί χωρίς το @media, π.χ.:
@media screen and (max-width: 480px) {
}
Σε αυτό το παράδειγμα ότι τιμές θέσουμε ανάμεσα από τις αγκύλες θα υπερισχύσουν όταν η ανάλυση του πλάτους της οθόνης είναι μικρότερη των 480px. Στην δική μας περίπτωση θέλουμε το πλάτος των στηλών μας να είναι ίσο με 100% για να πάνε οι στήλες η μια κάτω από την άλλη για να είναι πιο ευανάγνωστο το περιεχόμενο τους (φωτογραφία, τίτλος & περιγραφή). Οπότε χρησιμοποιούμε:
@media screen and (max-width: 480px) {
.column {
width: 100%;
}
}
Η σελίδα μας είναι έτοιμη και όπως μπορείτε να δείτε στην παρακάτω προεπισκόπηση, η σελίδα μας προσαρμόζεται καθώς μικραίνουμε το πλάτος της οθόνης.
Αφήστε μια απάντηση