css3.gr

Designing the iPhone app, August 2008 - by last.fm

Πρόσφατα, μου δόθηκε η ευκαιρία μέσω της δουλειάς μου να δουλέψω λίγο με CSS3 και όλα αυτά τα γυαλιστερά νέα πραγματάκια που προσφέρει το Webkit για να σχεδιάσω ειδικές εκδόσεις κάποιων από τις υπηρεσίες μας για το iPhone.

Ήταν μια αξέχαστη εμπειρία. Σας μιλάω με κάθε ειλικρίνεια. Μια από τις δυο-τρεις εμπειρίες που είχα στην καριέρα μου μέχρι τώρα όπου σταμάτησα, κοίταξα την οθόνη και είπα whoah.

Με έβαλε σε σκέψεις η όλη εμπειρία - τελικά, πώς θα ήταν ο (μικρο)κόσμος του web design αν ασχολούμασταν μόνο με ανάπτυξη websites για πλοήγηση σε iPhone;

To design θα ήταν πιο απλό

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

Αυτό βέβαια δεν σημαίνει ότι δεν μπορείς να μεταφέρεις το κομφούζιο μιας επιβαρυμένης ιστοσελίδας στο Mobile Safari, μπορείς μια χαρά. Αλλά πολύ σύντομα θα δεις ότι δεν αξίζει να το κάνεις αυτό. Flash menus; Άχρηστα, το iPhone δεν τα εμφανίζει καν. Κινούμενα banners με ήχο on hover; Ξέχνα τα.

Καθαρό content με απλή διάταξη για να διευκολύνει την πλοήγηση με το ένα χέρι μέσα σε γεμάτο βαγόνι του μετρό; Αυτό! Κράτα το.

Και πολύ πιο εύκολο

Για την ακρίβεια, δαιμονισμένα πιο εύκολο. Φανταστείτε: gradients και μάσκες χωρίς Photoshop. Ευέλικτα κουμπιά που δεν σπάνε με τίποτα με μια εικόνα μεγέθους 1kb. Υποστήριξη για διάφανα .png και περίπλοκα CSS selectors παντού.

Και όλα αυτά χωρίς την αγωνία του “θα παίζει στο διπλανό browser άραγε”. Αν παίζει στο iPhone σου (άντε, στο iPhone simulator σου), θα παίζει παντού. Το μόνο που έχεις να κάνεις είναι να κάνεις το design σου να φαίνεται όμορφο και στους δύο προσανατολισμούς, οριζόντια και κάθετα.

Και πιστέψτε με, αν έχετε φάει ολόκληρα απογεύματα να ψάχνετε Javascript bugs στον Internet Explorer 6 χωρίς κονσόλα και με errors του τύπου “null is null or not an object”, αυτό θα σας φανεί παιχνιδάκι.

Αποδεδειγμένα, θα ήταν πιο όμορφο

Η δυνατότητα που σου δίνει το CSS3 και η σχετική υποστήριξη του Webkit για τη δημιουργία ευέλικτων και όμορφων design elements με δυο-τρεις γραμμές κώδικα είναι απαράμιλλη. Δεν χρειάζεσαι και πολλά για να κάνεις το site σου όμορφο: απλά ακολούθησε τις βασικές αρχές του design της ίδιας της Apple για τη συσκευή. Helvetica, μερικά standard CSS gradients, κανένα shiny κουμπάκι όπου χρειάζεται, και η ιστοσελίδα σου φαίνεται μια χαρά.

Το σημαντικότερο είναι ότι δεν χρειάζεται να ξαναεφεύρεις τον τροχό: το έχουν κάνει άλλοι ήδη πριν από εσένα. Ήδη έχουν αρχίσει να εμφανίζονται CSS galleries με sites όπως αυτά εμφανίζονται στο iPhone. Όταν αμφιβάλλεις για ένα στοιχείο του design σου, ρίξε μια ματιά εκεί.

Και σίγουρα πιο γρήγορο

Προσθέστε όλα τα παραπάνω μαζί κι έχετε ένα “πακέτο” μιας αρκετά γρήγορης και εξαιρετικά ικανοποιητικής εμπειρίας σχεδίασης. Σε πολλές περιπτώσεις, τα σχέδια στο χαρτί θα πάρουν περισσότερη ώρα απ’ότι η υλοποίησή τους στο iPhone. Μην φοβάστε - δεν χρειάζονται ιδιαίτερες τεχνικές γνώσεις.

Λίγος χρόνος και όρεξη για πειραματισμό χρειάζεται. Έχετε το λόγο μου, δεν θα το μετανιώσετε.

Ζαχαρένια Ατζιτζικάκη

Μοιρασμένη ανάμεσα στο design και το development, η Ζαχαρένια εργάζεται στην Phaistos Networks ενώ παράλληλα γράφει στο blog της και στο PC Magazine, πάντα για το Web.

Θέλεις το επόμενο κείμενο να είναι το δικό σου;

ΜΑΘΕ ΠΕΡΙΣΣΟΤΕΡΑ