css3.gr

Όσο περνάει ο καιρός οι επισκέπτες που θα μπαίνουν στις ιστοσελίδες μας από κινητές συσκευές θα αυξάνονται. Δραματικά. Η Ζαχαρένια έκανε την αρχή γράφοντας πως θα ήταν τα πράγματα αν το design γινόταν σε iPhone. Να το δούμε λίγο καλύτερα αυτό;

Το Mobify είναι μια υπηρεσία που αναλαμβάνει να μετατρέψει ένα site σε mobile site. Ένα mobile website δεν είναι το ίδιο με ένα “κανονικό” - υπάρχουν πολλές διαφορές που πρέπει να ληφθούν υπόψη. Το Mobify κάνει τη ζωή μας πιο εύκολη στο θέμα.

Σκέψεις πριν τη μετατροπή

Όταν ο επισκέπτης αλλάζει πλατφόρμα πρόσβασης σε ένα website, αλλάζουν μαζί και οι ανάγκες ή/και οι δυνατότητές του. Για παράδειγμα η πρόσβαση μιας ιστοσελίδας από ένα κινητό τηλέφωνο συνήθως σημαίνει μικρότερες ταχύτητες και σίγουρα μικρότερη οθόνη. Αυτά, που φυσικά δεν είναι τα μόνα, πρέπει να ληφθούν υπόψη. Γιατί εκτός από τα τεχνικά, υπάρχουν θέματα άλλου τύπου π.χ. ποιος συνήθως μπαίνει σε mobile sites, σε ποιο φυσικό χώρο βρίσκεται, κάτω από ποιες συνθήκες κλπ.

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

Αυτές οι αρκετά πρόχειρες σκέψεις είναι ο μπούσουλας πίσω από την κατασκευή κάθε mobile site.

Το Mobify

Το Mobify είναι μια υπηρεσία που κάνει το πέρασμα στο mobile browsing πιο εύκολο. Δεν είναι ο μοναδικός τρόπος, είναι όμως αξιόλογος. Για να το χρησιμοποιήσει κάποιος ασφαλώς και χρειάζονται γνώσεις σε HTML και CSS, οπότε δεν είναι μια υπηρεσία για τον καθένα.

Το Mobify έρχεται σε διάφορα πακέτα, το πρώτο από τα οποία είναι δωρεάν και παρέχει όλα τα βασικά.

Το σκεπτικό του είναι το εξής: Επέλεξε τι ακριβώς θέλεις από το site σου να εμφανίζεται στο αντίστοιχο mobile κι εγώ θα σε διευκολύνω να το κάνεις.

Το παράδειγμα που ακολουθεί δείχνει πως μετέτρεψα το “κανονικό” site μου High Quality Bookmarks σε mobile site. Ας δούμε πως.

Βήμα 1ο - Επιλογή του τι θα εμφανιστεί στο mobile site

Κατά τη γνώμη μου είναι το πιο σημαντικό βήμα. Στην αρχή όλοι θα μπούμε στον πειρασμό να κάνουμε μια κόπια του “κανονικού” site, όμως αυτό είναι λάθος. Χρειάζεται σκέψη και διάθεση για οικονομία.

Το Mobify, όπως φαίνεται στην εικόνα, ξεκινάει με ολόκληρο το website και με το ποντίκι επιλέγεις ποιες περιοχές θα εμφανιστούν στο mobile. Η επιλογή μου ήταν να εμφανίζεται μόνο η περιοχή των posts. Γιατί;

• Το λογότυπο δεν ήθελα να το εμφανίσω για να μη χρειάζεται κάθε φορά να κατέβει η εικόνα και καθυστερεί το site.
• Τα Feeds δεν τα θέλω γιατί δεν πιστεύω ότι θα εγγραφεί κάποιος από το κινητό μου σε αυτά.
• Το Search για τους ίδιους λόγους. Αφήνω πάντως ένα ενδεχόμενο να το προσθέσω στο μέλλον.
• Όλο το sidebar δεν το χρειάζομαι στην ουσία. Χρειάζομαι μόνο το μενού. Αυτό όμως θα προστεθεί αργότερα. Το ίδιο ισχύει για το footer.

Βήμα 2ο - Ο CSS κώδικας

Σε αυτό το βήμα πρέπει να γράψεις το CSS για το mobile site. Μια και ήδη λείπουν αρκετά πράγματα, το CSS έχει ήδη απλουστέψει σημαντικά.

Για την HTML δε χρειάζεται να κάνεις κάτι μια και η περιοχή που έχεις επιλέξει στο προηγούμενο βήμα, έχει μεταφερθεί σχεδόν αυτούσια.

Αυτό το οποίο έκανα ήταν να επικολλήσω στο βασικό πεδίο το CSS του site και στη συνέχεια να το τροποποιήσω ελαφρά ώστε να προσαρμοστεί σε μια κινητή συσκευή π.χ. χρειάζεται αλλαγή σε όλα τα witdh, τα οποία πρέπει να εμφανίζονται μικρότερα. Έτσι, αν είχα για ένα div, width: 480px, το άλλαξα σε 100%. Τα 480px είναι πάρα πολλά για μια κινητή συσκευή. Αντίθετα, το 100% θα προσαρμοστεί στο πλάτος της κάθε συσκευής από μόνο του.

Στην πραγματικότητα, στο βήμα αυτό παίζεις και μαθαίνεις από το πως συμπεριφέρεται ένα mobile site. Στα δεξιά της οθόνης υπάρχει η προσομοίωση σε 4 τύπους κινητών συσκευών (iPhone, Nokia, RAZR και BlackBerry), οπότε στην ουσία δουλεύεις για όλες.

Βήμα 3ο - Σταθερές περιοχές

Στο 1ο Βήμα, άφησα έξω από το παιχνίδι το logo, την πλοήγηση και το footer. Ήρθε η ώρα τους.

Αυτά τα στοιχεία του design έχουν 2 χαρακτηριστικά:

1. Δεν υπάρχει η HTML από το Mobify, όπως γίνεται με τα posts
2. Επαναλαμβάνονται σε κάθε σελίδα

Για τα στοιχεία αυτά λοιπόν, θα πρέπει να γράψω HTML. Στο 2ο πεδίο στ’ αριστερά της οθόνης του προηγούμενου βήματος, κάτω από το CSS υπάρχει ο χώρος για το HTML. Εκεί γράφω τον κώδικά μου. Παρατηρήστε ότι στην προσομοίωση δεξιά υπάρχει ένα κόκκινο πλαίσιο. Αυτό δείχνει σε ποιο HTML element βρίσκομαι.

Η ίδια διαδικασία επαναλαμβάνεται για την πλοήγηση και το footer.

Δείτε επίσης ότι κάτω από το πεδίο για την HTML, υπάρχει ένα checkbox με τον τίτλο “Sticky”. Το τσεκάρω για όσα HTMl elements θέλω να φαίνονται σε κάθε σελίδα.

Βήμα 4ο - Άλλες σελίδες

Μετά από το προηγούμενο βήμα βρίσκομαι στη σελίδα όπου προσθέτω όλες τις επιπλέον σελίδες για το site μου.

Σελίδες όπως οι “Σχετικά”, “Επικοινωνία”, “Αρχείο” πρέπει να φτιαχτούν με τη λογική που είδαμε πριν. Όμως είναι πολύ πιο απλές πια, γιατί στην ουσία το CSS που γράφτηκε για την αρχική σελίδα, καλύπτει και αυτές.

Σελίδες που επαναλαμβάνονται π.χ. η σελίδα του post είναι ίδιες για το Mobify. Άρα, όταν φτιάξω μία τις έχω όλες. Αντίστοιχα για το Αρχείο ανά μήνα.

Τα δύσκολα πέρασαν δηλαδή.

Βήμα 5ο - Το site online

Λίγα πράγματα έμειναν για να βγει το site online. Η παρακάτω εικόνα δείχνει ποια.

• Ένα ενδεικτικό όνομα για το site π.χ. hqbk.
• Δημιουργία custom domain.
  Αν κάποιος παραλείψει αυτό το βήμα το mobile site θα παίζει κανονικά στο hqbk.mobify.com. Όμως αφού φτάσαμε μέχρι εδώ είναι κρίμα να μη δώσουμε στο mobile site μας το URL που του αξίζει. Το Mobify μπορεί να το κάνει με τη δημιουργία ενός DNS CNAME. Η διαδικασία είναι απλή για όσους διαχειρίζονται τον server τους.
• Επικόλληση κώδικα για ανακατεύθυνση.
  Θέλουμε οι επισκέπτες που θα μπαίνουν από mobile συσκευή να ανακατευθύνονται αυτόματα στο mobile site. Αυτό γίνεται είτε με την επικόλληση ενός JavaScript κώδικα είτε με την εγκατάσταση ενός plugin για κάποιες δημοφιλείς πλατφόρμες. (Επιλέγω πάντα την 1η λύση όποτε έχω τη δυνατότητα, μη συμπαθώντας τα plugins.)

Επίλογος

Η σελίδα πριν και η σελίδα μετά.

Μπορεί να φαίνεται ιδιαίτερα λιτό το site μετά τις αλλαγές. Όμως όλη η ουσία του είναι εκεί. Κάπως έτσι νομίζω ότι θα έπρεπε να αντιμετωπίζουμε τα mobile sites γενικότερα.

Η όλη διαδικασία μού πήρε περίπου 6 ώρες. Είχα το μειονέκτημα ότι δεν την είχα ξαναχρησιμοποιήσει, αλλά και το πλεονέκτημα ότι είχα να κάνω με ένα απλό αρχικό design και CSS. Πάντως, δεν μπορώ να υπολογίσω πόσο θα πάρει στο επόμενο site που θα μετατρέψω σε mobile.

Συνοπιτικά, το Mobify ασφαλώς και δεν είναι ο μοναδικός τρόπος να μετατρέψουμε τα sites μας σε mobile. Όμως είναι εύκολος και ιδιαίτερα βολικός.

Εντέλει, νομίζω ότι μια τέτοια υπηρεσία είναι απλώς η κορυφή του παγόβουνου που κρύβεται πίσω από την αξία και τη μελλοντική χρήση των mobile sites. Ας προετοιμαστούμε λοιπόν στην ώρα μας.