Πώς να κάνεις το site σου mobile friendly χωρίς κόπο...
Από Λάζαρος Γεωργούλας
Μια εύκολη μέθοδος για να κάνεις την ιστοσελίδα σου mobile friendly με μερικές απλές μετατροπές. "Κατέβασε" εντελώς δωρεάν 3 ηλεκτρονικά βιβλία (PDF ebooks)!
1. Δωρεάν στρατηγική κέρδους
2. Οδηγός για νέες ιστοσελίδες
3. Βγάλε λεφτά με το bitcoin
Απλά βάλε το email σου στη παρακάτω φόρμα και θα λάβεις άμεσα τα 3 ebooks!
Μισώ το SPAM! Η διεύθυνση email σου είναι ασφαλής και δεν θα γνωστοποιηθεί ποτέ σε τρίτους! Αν ενδιαφέρεσαι, Μάθε περισσότερα για τα 3 ebooks...
Η εποχή που οι χρήστες του internet χρησιμοποιούσαν αποκλειστικά επιτραπέζιους Η/Υ για να περιηγούνται στις διάφορες ιστοσελίδες έχει περάσει για τα καλά. Σήμερα, περισσότερο από το 1/3 των χρηστών χρησιμοποιούν τα κινητά τους τηλέφωνα (smart phones, tablets) για περιήγηση. Αυτό σημαίνει ότι οι ιδιοκτήτες ή διαχειριστές ιστοσελίδων (webmasters) πρέπει να προσαρμόζουν τη σχεδίαση των sites ώστε να υποστηρίζουν περιήγηση από τέτοιες mobile συσκευές.
Σε αυτό το άρθρο θα σου παρουσιάσω μια πολύ απλή μέθοδο για να κάνεις το site σου mobile friendly ώστε να προσφέρει μια ιδανική εμπειρία περιήγησης στον χρήστη. Για την υλοποίηση της μεθόδου απαιτούνται γενικές γνώσεις κατασκευής ιστοσελίδων (HTML και CSS). Δες και αυτό το άρθρο για μια μικρή εισαγωγή στη γλώσσα HTML και το άρθρο σύντομη εισαγωγή στα CSS.
Ποιό είναι το πρόβλημα ακριβώς;
Το πρόβλημα ξεκινάει από το μέγεθος της οθόνης. Στους επιτραπέζιους Η/Υ είναι μεγάλη ενώ στα κινητά μικρή. Αν προσπαθήσεις να περιηγηθείς σε μια ιστοσελίδα που δεν είναι mobile friendly θα διαπιστώσεις ότι η περιήγηση είναι ένας μπελάς λόγω της μικρής οθόνης του κινητού. Ωστόσο με μερικές απλές μετατροπές η μαγεία των CSS (Cascading Style Sheets) μπορει να προσαρμόσει το μέγεθος της σελίδας στο μέγεθος της οθόνης του κινητού. Η ιστοσελίδα nextnet.gr είναι mobile friendly και χρησιμοποιεί στη κατασκευή της τη μέθοδο που θα σου παρουσιάσω (δοκίμασε να μπεις από Η/Υ και από κινητό για να δεις τη διαφορά)...
Θα χρησιμοποιήσω απλά λόγια και βήματα χωρίς πολλές λεπτομέρειες που μπορεί να μπερδέψουν τον αρχάριο αναγνώστη του άρθρου.
1ο βήμα: Εισαγωγή της ετικέτας meta viewport
Η ετικέτα meta viewport λέει με λίγα λόγια στους περιηγητές (browsers) να προσαρμόσουν την εμφάνιση μιας ιστοσελίδας ανάλογα με την οθόνη της συσκευής. Η ετικέτα μπαίνει στον τομέα <head> </head> του κώδικα HTML της κάθε σελίδας που θέλουμε να γίνει mobile friendly στο site μας:
...
<meta name="viewport" content="width=device-width; initial-scale=1.0">
...
</head>
2o βήμα: Μετατροπή του αρχείου style.css
Στα αρχεία CSS (με κατάληξη .css) συμπεριλαμβάνονται όλες εκείνες οι παράμετροι που ορίζουν την εμφάνιση μιας ιστοσελίδας στους περιηγητές (browsers). Για την κατανόηση αυτού του βήματος απαιτούνται βασικές γνώσεις CSS (δες και αυτό το άρθρο-εισαγωγή στα CSS για αρχάριους). Με λίγα λόγια αυτό που θα κάνουμε είναι να πούμε στους browsers να χρησιμοποιούν διαφορετικά στυλ (ανάλογα με τη συσκευή που χρησιμοποιείται) για τη προβολή μιας ιστοσελίδας. Έτσι για παράδειγμα αν μια <div> </div> έχει μέγεθος 950 pixels, τότε με τη χρήση CSS θα πούμε στους browsers ότι θα διατηρεί αυτό το μέγεθος αν η συσκευή προβολής είναι επιτραπέζιος Η/Υ ΑΛΛΆ όταν είναι κινητό (π.χ. iPhone) θα μικραίνει στα 320 pixels, ενώ όταν πρόκειται για tablet (π.χ. iPad) θα γίνεται 760 pixels.
Γενικά θα ορίσουμε τρεις περιοχές στο αρχείο .css ώστε να ακολουθείται διαφορετικό στυλ ανάλογα με τη συσκευή προβολής. Μια περιοχή για τους επιτραπέζιους Η/Υ, μια περιοχή για τα tablets και μια περιοχή για τα smart phones. Για να το κάνουμε αυτό επεξεργαζόμαστε (ή αν δεν υπάρχει, δημιουργούμε) το αρχείο .css της ιστοσελίδας μας (απαιτεί βασικές γνώσεις HTML και CSS). Έπειτα μέσα στο αρχείο .css ορίζουμε τις τρεις περιοχές όπως προαναφέρθηκε...:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Σε αυτό το τμήμα μπαίνουν τα στυλ για smart phones */
.mydiv {width:320px;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Σε αυτό το τμήμα μπαίνουν τα στυλ για tablets π.χ. iPads */
.mydiv {width:760px;}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Σε αυτό το τμήμα μπαίνουν τα στυλ για επιτραπέζιους Η/Υ και laptops */
.mydiv {width:950px;}
}
Όπως ειπώθηκε, σε κάθε τμήμα προσαρμόζουμε τα στυλ του site μας ανάλογα με το μέγεθος της οθόνης της συσκευής με την οποία προβάλλεται το site. Στο παράδειγμα μας προσαρμόζουμε το μεγεθος μιας <div class="mydiv"> </div> ανάλογα με τη συσκευή... Υπενθυμίζεται ότι τα κείμενα ανάμεσα στα /* και */ είναι περιγραφικά σχόλια ενώ ο κώδικας CSS μπαίνει ανάμεσα στις αγκύλες σε κάθε περιοχή { και }.
Αυτό ήταν! Με μερικές μόνο μετατροπές στο αρχείο .css μας μπορούμε χωρίς κόπο να μετατρέψουμε μια ιστοσελίδα σε mobile friendly. Τώρα μπορείς να ανεβάσεις το αρχείο .css στον server σου και να ελέγξεις αν όλα γίναν σωστά. Για να το κάνεις αυτό μπορείς να επισκεφτείς το site σου από κινητό ή tablet ή να κάνεις από Η/Υ μια αναζήτηση στο Google για "mobile phone simulator" ή "smartphone simulator" ή "test mobile website" ή κάτι σντίστοιχο. Φυσικά για την υλοποίηση της μεθόδου (όπως ειπώθηκε) απαιτείται ένα υπόβαθρο πάνω στη γλώσσα HTML και στα CSS (Cascading Style Sheets). Ελπίζω να βρήκες αυτό το άρθρο χρήσιμο. Αν δεν γνωρίζεις το παραμικρό από τη γλώσσα κατασκευής ιστοσελίδων HTML διάβασε αυτή τη μίνι εισαγωγή στη γλώσσα HTML. Επίσης δες και την εισαγωγή στα CSS για αρχάριους.
Αν χρειάζεσαι συμβουλές πάνω σε θέματα διαδικτύου ή κάποιον ειδικό να συζητήσεις για την προώθηση του ιστότοπου σου τότε μπορείς να νοικιάσεις όσο από τον χρόνο μου επιθυμείς και θα κάτσω με σοβαρότητα και επαγγελματισμό να μοιραστώ όλα όσα έχω μάθει τα τελευταία 15 χρόνια για το internet, το marketing, το SEO και γενικά το διαδίκτυο. Κλείσε μια συνεδρία μαζί μου μέσω της υπηρεσίας "Διαδικτυακός Σύμβουλος" και θα δώσω τον καλύτερο μου εαυτό για να σε βοηθήσω.-
Αν βρήκες το άρθρο ενδιαφέρον κάνε εγγραφή στις ενημερώσεις από το nextnet.gr - Η εγγραφή είναι εντελώς δωρεάν και θα λάβεις 3 ηλεκτρονικά βιβλία PDF με την ολοκλήρωση της. Απλά βάλε το email σου στη παρακάτω φόρμα (μάθε περισσότερα):
- Μισώ το SPAM!
- Η διεύθυνση email σου είναι ασφαλής.
- Μπορείς ανά πάσα στιγμή να διαγραφείς από τις ενημερώσεις.
Πιο πρόσφατο άρθρο:
ΔΩΡΕΆΝ εγγραφή στις ενημερώσεις NEXTNET
