Όλα αυτά μέχρι σήμερα, που μετά από πολύ τρέξιμο από το γραφείο μου στον server ή σε υπολογιστή συναδέλφου, αποφάσισα να δω μήπως να κάνω στο VirtualMachine μια υποτυπώδης εγκατάσταση XP με ΙΕ6. Για καλή μου τύχη μοιράστηκα την απορία μου με ένα συνάδελφο, ο οποίος μου επισήμανε ότι η “καλή” μας Microsoft δίνει το λειτουργικό με προ-εγκατεστημένο τον IE6 για εγκατάσταση σαν virtual machine. Μετά από ψάξιμο στο internet βρήκα αυτή τη σελίδα γράφει ότι όντως υπάρχει αυτή η λύση αλλά μόνο αν τρέξεις το VitrualPC της Microsoft.

Η διαδικασία είναι απλή. Κατεβάζουμε τα αρχεία από την σελίδα της MS (Virtual PC, XP-IE6), κάνουμε εγκατάσταση το VirtualPC, τρέχουμε και το αντίστοιχο αρχείο για να αποσυμπιεστή ο δίσκος, δημιουργούμε ένα εικονικό μηχάνημα στο VirtualPC και φορτώνουμε στον δίσκο του το αντίστοιχο VHD αρχείο μας. Το μόνο κακό είναι ότι το αρχείο VHD είναι για περιορισμένη διάρκεια (το συγκεκριμένο είναι μέχρι 01/10/2010) αλλά από όσο διάβασα και από το άρθρο αλλά και από άλλες σελίδες, η Microsoft βγάζει καινούργια αρχεία κάθε φορά οπότε είσαι καλυμμένος.

Θα πει όμως κάποιος “γιατί να μην κάνω μια εγκατάσταση σε VitrualBox;”. Η απάντηση είναι “εξαρτάται”. Αν θέλεις ένα installation για να τρέχεις και άλλα προγράμματα σε Windows XP και έχεις και την δυνατότητα να έχεις και ένα licence γι αυτά τότε είναι η καλύτερη λύση. Αλλά αν το θέλεις μόνο για να τρέχεις τον IE6 και κάνεις test σε σελίδες τότε είναι η καλύτερη, οικονομικότερη και πιο γρήγορη λύση. Ακόμα και αν χρειάζεται ν’ αλλάζεις αρχείο κάθε 5 μήνες.

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

Βιομηχανία παιχνιδιών και απαιτήσεις συστήματος

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

Web design & νέες τεχνολογίες

Χρησιμοποιώντας το παραπάνω παράδειγμα, μπορούμε να δούμε γιατί εμείς σαν web developers είμαστε υποχρεωμένοι να χρησιμοποιούμε τις τεχνολογίες που προσφέρουν οι τελευταίας τεχνολογίας browser. Πρέπει να αρχίσουμε να σκεφτόμαστε την εμπειρία που δίνουμε στον χρήστη. Να δίνουμε σκιές και στρογγυλεμένες γωνίες με CSS και όχι με 4-5 διαφορετικές εικόνες και 7-8 extra στοιχεία στην σελίδα. Να χρησιμοποιούμε το font embedding αυξάνοντας την εργαλειοθήκη μας με καινούργιες γραμματοσειρές. Να δημιουργούμε gradients χωρίς να πρέπει να κόψουμε διαφορετικές εικόνες για κάθε ξεχωριστό κομμάτι. Και προπαντός να κάνουμε την δουλειά μας και την δουλειά των συναδέλφων μας ευκολότερη αφού θα έχουμε βάλει το λιθαράκι ώστε να εξαπλωθούν οι νέες τεχνολογίες.

Browser support

Και φυσικά κάποιος θα σκεφτεί: “Τι ωραία μας τα λες ρε Δημήτρη. Και πως θα υποστηρίξουμε του παλιότερους browsers;”

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

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

Βάζοντας στην άκρη την χαρά μου, μπορώ να πω ότι συμφωνώ απολύτως με το άρθρο της Ζαχαρένιας. Είναι τρομερά εύκολο να δουλεύεις για iPhone. Το minimal design στην καλύτερή του μιας και η οθόνη που σχεδιάζεις είναι μικρή (320*480) και σε υποχρεώνει να βάλεις μόνο τα ουσιαστικά και χρήσιμα και να μειώσεις τον θόρυβο με άχρηστα στοιχεία. Η υποστήριξη του Flash ανύπαρκτη οπότε οτιδήποτε πάνω σε αυτό πάει στον κάλαθο των αχρήστων. Gradients, σκιές & rounded corners γίνονται εύκολα με 2-3 γραμμές CSS κώδικα, βάζοντας στην άκρη παλιές τεχνικές με Photoshop, εικόνες στο background & άχρηστα στοιχεία.

Το καλύτερο όλων είναι ότι σχεδιάζεις για ένα και μόνο browser, που είναι μοντέρνος και ξέρεις ότι αυτά που θα κάνεις θα εμφανιστούν όπως θέλεις χωρίς να χρειάζεται να ανησυχείς μήπως σε κάποιον άλλο χρήστη θα σπάσει. Και αυτό το κομμάτι, για εμάς, είναι το μεγαλύτερο πρόβλημα της εργασίας μας. Και κυρίως για τις άπειρες ώρες που έχουμε χαραμίσει προσπαθώντας να κάνουμε κάτι να παίξει στον Internet Explorer.

Το μόνο που με ενοχλεί είναι ότι το Project τελείωσε πολύ γρήγορα και ανυπομονώ μέχρι να έρθει το επόμενο. Μήπως να προσπαθήσω να δημιουργήσω ένα iPhone CSS για την παρούσα σελίδα περιμένοντας;

Fixed font size

Σε αυτό τον τρόπο ο web designer ορίζει κάθε κομμάτι να έχει το δικό του συγκεκριμένο μέγεθος σε pixels, ανάλογα με αυτά που έχει προσθέσει στο πρόγραμμα που έχει σχεδιάσει το template. Οι πιο συνηθισμένες τιμές ξεκινάνε από 10px σαν βάση για το κυρίως κείμενο και το body και ανεβαίνουν ανά 2px ανάλογα με το στοιχείο (h6: 12px, h5: 14px κλπ).

Relative percentage font size

Σε αυτό το τρόπο ο web designer ορίζει το κάθε κομμάτι να έχει το δικό του μέγεθος σε επί τοις εκατό (%). Έχοντας σαν βάση ότι το ορισμένο από τον browser μέγεθος των γραμματοσειρών είναι 16px, η πιο συνηθισμένη τιμή για το κυρίως κείμενο και το body κυμαίνεται από 62.5% και υπολογίζεται από τον τύπο:
(10px * 100%) / 16px = 62.5%
Έχοντας σαν βάση ότι το 100% πλέον είναι ίσο με 10px μπορείς να υπολογίσεις αναλογικά και τα υπόλοιπα στοιχεία.
h6: 110% = 11px, h5: 120% = 12px, h6: 130% = 13px κλπ.

Συνδυασμός percentage & em

Η μέθοδος αυτή είναι μια παραλλαγή της προηγούμενης μόνο που αντί να ορίζεις τα υπόλοιπα στοιχεία σε percentage (%) τα ορίζεις σε em. Με τον ίδιο τύπο ορίζεις το βασικό μέγεθος της γραμματοσειράς και μετά έχοντας σαν βάση ότι το 10px είναι ίσο με 1em μπορείς να υπολογίσεις και τα υπόλοιπα στοιχεία της σελίδας παρόμοια με την προηγούμενη μέθοδο.
h6: 1.1em = 11px, h5: 1.2em = 12px, h6: 1.3em = 13px κλπ.
Όποιος έχει την διάθεση θα δει ότι αυτή η σελίδα είναι φτιαγμένη με αυτό τον τρόπο, με βάση όμως το 72% περίπου ίσο με 11.5px.

Πια μέθοδος είναι η καλύτερη

Αυτό είναι ένα ερώτημα που έχει πολλές απόψεις και πολλές γνώμες. Η πρώτη μέθοδος ήταν πολύ διαδεδομένη με τον IE 6 και τους σχεδιαστές που λειτουργούσαν περισσότερο με την λογική του έντυπου. Όταν όριζες ένα μέγεθος σε pixels ο IE 6 εφάρμοζε την λογική κατά γράμμα, αφαιρώντας την δυνατότητα στον χρήστη να αλλάξει το μέγεθος της γραμματοσειράς, δίνοντας έτσι την δύναμη στον σχεδιαστή να ορίσει ότι ήθελε όπως ήθελε.

Με την πρώτη έκδοση του Mozilla Firefox που έδινε την δυνατότητα στον χρήστη να μεγαλώσει το μέγεθος της γραμματοσειράς (και βάζω τον Mozilla Firefox γιατί με αυτόν έγινε η μεγάλη “επανάσταση” στον χώρο των browser), που άρχισε να γίνεται πιο γνωστή και η ανάγκη να δώσουμε την δύναμη στον χρήστη να μπορεί να αλλάξει το πως εμφανίζεται η σελίδα, όλες οι μέθοδοι λειτουργούν παρόμοια (εξαιρώντας τον IE 6) με μόνη ουσιαστική διαφορά τον υπολογισμό ή όχι του μεγέθους που παραμένει στην κρίση του σχεδιαστή.

Πλέον υπάρχουν και πολλά CSS Frameworks (960 Grid System, Blueprint, YAML) που μπορούν να βοηθήσουν ώστε να σχεδιάσει κάποιος μια σελίδα.

Τελικά, όλα είναι θέμα της διάθεσης και της κρίσης του σχεδιαστή αφού σκεφτεί πρώτα από όλα τον χρήστη.