Καθόλου άσχημες τιμές

Responsive design

Θα ξεκινήσω με τον πιο διάσημο όρο το Responsive design, τo οποίο χρησιμοποιεί απαραίτητα 3 χαρακτηριστικές web τεχνικές. Αυτό είναι το fluid grid (για το layout), media queries (για τον έλεγχο μεγέθους των οθονών) και flexible media (images, video, κτλ.). Αν λοιπόν το layout μας έχει και τα 3 παραπάνω χαρακτηριστικά, τότε είναι responsive, που πολύ απλά σημαίνει πως αν έχει κατασκευαστεί σωστά θα παίζει σε οποιαδήποτε ανάλυση/συσκευή. Δεν θέλω να σταθώ σε λεπτομέρειες και τεχνικές τύπου “mobile first” (όπου για λόγους bandwidth καλό είναι να κατασκευάζουμε το site ξεκινώντας από την μικρότερη ανάλυση που θέλουμε να υποστηρίξουμε, και να συνεχίσουμε με τις μεγαλύτερες) για την ώρα, ίσως το κάνω σε κάποιο άλλο post.

Adaptive design

Λέγοντας Adaptive design εννοούμε πως δεν ικανοποιεί και τα τρία προαναφερθέντα χαρακτηριστικά (συνήθως το fluid grid layout) και απλά προσπαθεί με τα media queries να προσαρμόσει (adapt) το layout όσο καλύτερα γίνεται σε διάφορες αναλύσεις και συσκευές. Η συγκεκριμένη τεχνική χρησιμοποιείται όλο και λιγότερο, μιας και όπως καταλαβαίνεται το responsive design αν και δυσκολότερο στην υλοποίηση, προσφέρει περισσότερα πλεονεκτήματα.

Τέλος θα ήθελα να θυμίσω πως βασικός λόγος δημιουργίας αυτής της σύγχυσης/παρεξήγησης στην ονοματολογία, ήταν πως στην γέννηση των media queries (άρα και των παραπάνω τεχνικών ) δεν υπήρχε standard ορολογία, οπότε ήταν καθαρά στην κρίση του designer το πως  θα ονόμαζε αλλά και τι εννοούσε (σε αυτό το μπέρδεμα συνείσφεραν ακόμα και γνωστά βιβλία) ωστόσο πλέον καλό θα είναι να ξέρουμε να τα διαχωρίζουμε.

PROTECT IP / SOPA Breaks The Internet from Fight for the Future on Vimeo.

Θα ήθελα να ξαναευχαριστήσω τον Κωστή Βασιλειάδη για την γραφιστική (και όχι μόνο) υποστήριξη

Love the Web – A Web Afternoon from Atlanta Web Design Group on Vimeo.

• Terra browser : Καλός ο Safari αλλά του λείπουν κάποια πραγματάκια που θα ήθελα, όπως tabs, bookmarks κτλ. Ο συγκεκριμένος browser είναι και αυτός webkit-based που σημαίνει πως δεν χάνεται τίποτα σε ποιότητα, αλλά ταυτόχρονα κερδίζετε και τα extra καλούδια που παρέχει.
• Mail Client : Και πάλι δεν χρησιμοποιώ το Apple Mail, γιατί και δεν μου αρέσει (σοβαρά μιλάω, το έχουν κάνει κάπως περίεργο) αλλά και επειδή βολεύομαι αρκετά με την πολύ καλή mobile version του Gmail. Αν κάποιος έχει να προτείνει κάτι ας αφήσει comment.
• MobileRSS : Φανταστικός RSS client για το Google Reader. Αν τώρα δεν χρησιμοποιείτε το Google Reader για τα feeds σας δεν έχω να προτείνω κάτι άλλο.
• FlexPlayer : Ακόμα μια εφαρμογή τρίτων που τρώει μια εγγενής εφαρμογή της Apple, και για την ακρίβεια το Apple Videos. Ο συγκεκριμένος player παίζει αυτόματα όλα τα video formats, κάτι που δεν κάνει το Videos (θέλει μετατροπές και άλλα τέτοια). Κατά τα άλλα είναι ένας minimal player που απλά κάνει την δουλειά του. Το μόνο που δεν έχω δοκιμάσει ακόμα είναι αν παίζει υπότιτλους, αλλά δεν καίγομαι κι ολας. (Σημείωση : δεν είναι streaming λύση)
• iBooks : Επιτέλους και μια Apple εφαρμογή που χρησιμοποιώ, κυρίως για την ανάγνωση PDF αρχείων. Όσοι θέλουν μπορούν να δοκιμάσουν και το επίσης πολύ καλό και δωρεάν PerfectReader (το χρησιμοποιούσα μέχρι να ανακαλύψω πως διαβάζεις PDFs από το iBooks).
• Instapapaper ή Read it Later : Προσωπικά χρησιμοποιώ το Instapaper, το οποίο δεν είναι δωρεάν αλλά έχει πολύ καλύτερη υποστήριξη σχεδόν από όλα τα υπόλοιπα iPad apps. Αν τώρα σας χαλάει πάρα πολύ η πληρωμή, το Read it Later είναι η καλύτερη εναλλακτική δωρεάν λύση.
• Twitter : Ο επίσημος client του twitter είναι μια από τις πιο καλοσχεδιασμένες εφαρμογές που έχω δει. Απλά must!
• Friendly for Facebook : To Facebook δεν έχει προς το παρόν κάποιον επίσημο client, ωστόσο το Friendly κάνει μια χαρά την δουλειά του.
• Skype : Ακόμα μια εντυπωσιακή εφαρμογή που αξίζει να έχετε.
• IM+ : Η καλύτερη και πιο ολοκληρωμένη εφαρμογή για chat που βρήκα. Υποστηρίζει σχεδόν όλα τα δίκτυα, οπότε τα έχετε όλα σε 1.
• Dropbox : Το Dropbox σας στο iPad.
• Flipboard : Ακόμα μια πολύ εντυπωσιακή εφαρμογή που σίγουρα αξίζει να της ρίξετε μια ματιά. Το Flipboard θα δημιουργήσει το προσωπικό σας ψηφιακό περιοδικό από τις social media υπηρεσίες που χρησιμοποιείται και θα σας το παρουσιάσει με όμορφα εφέ.
• PlainText : Η καλύτερη δωρεάν λύση που βρήκα για δημιουργία εγγράφων στο cloud. Γράφεις το κείμενο σου στην εφαρμογή και σου κρατάει τα πάντα μέσα σε ένα directory στο dropbox σου. Ιδανικά θα ήθελα έναν καλό Goolge Docs client, αλλά αυτοί που δοκίμασα (ακόμα και μερικοί ακριβοί) κάνουν edit με το web inerface του Google Docs το οποίο δεν με βολεύει. Αν κάποιος έχει να προτείνει κάτι, please share.
• Άλλες εφαρμογές που χρησιμοποιώ αλλά που είναι λίγο πιο “ειδικές” είναι το WordPress, TED (παρουσιάσεις), BBC news και FTP Client.

Markup

Ίσως το πιο εύκολο κομμάτι του puzzle. Μέχρι και πέρσι, συνήθως χρησιμοποιούσα ένα δικό μου template (βασισμένο σε Strict XHTML), ωστόσο μιας και προσπαθώ να το γυρίσω σε HTML5, πιάνω τον εαυτό μου να χρησιμοποιεί όλο και πιο συχνά το HTML5 boilerplate του Paul Irish. Το μόνο κακό που του βρίσκω είναι πως δεν μου φαίνεται και τόσο “boilerplate”, και συνήθως μου παίρνει αρκετή ώρα στο να διαγράφω αρχεία και κώδικα έτσι ώστε να το φέρω στα μέτρα μου. Σιγά-σιγά θέλω να φτιάξω και την δική μου λύση, ωστόσο μέχρι τότε το HTML5 boilerplate κάνει μια χαρά την δουλειά του.

CSS

Το πρώτο πράγμα που χρειάζομαι είναι ένα καλό CSS-reset. Αν η markup μου είναι HTML5, χρησιμοποιώ το HTML5 reset του HTML5 Doctor, αν όχι χρησιμοποιώ το παλιό καλό HTML reset του Eric Meyer . Πολλές φορές αν το project “βιάζεται”, χρησιμοποιώ και σαν βάση την τυπογραφία κάποιου έτοιμου CSS framework, συνήθως του Blueprint ή του HTML5 boilerplate. Τέλος, αν το project βιάζεται απελπιστικά ή θέλω κάποιο γρήγορο prototype εδώ και τώρα, χρησιμοποιώ και το grid system του Blueprint (είναι και το μόνο που έχω μάθει!). Τέλος, συνήθως περνάω και τα media queries του Andy Clarke αλλά και ένα print-only style που περιέχει όλη την βασική τυπογραφία για εκτύπωση, για να υπάρχουν (αργά ή γρήγορα θα χρειαστούν)…

Javascript

Και εφόσον κλείσαμε από markup και CSS το μόνο που μας μένει είναι η Javascript μας. Εάν το project έχει HTML5 markup, το html5shiv είναι το πρώτο “must” script που πρέπει να φορτώσουμε. Από εκεί και πέρα συνήθως περνάω το modernizr και το jQuery γιατί όλο και κάπου θα χρειαστούν. Τώρα τελευταία μου αρέσει πολύ σαν ιδέα και το selectivizr μιας και σε βοηθάει πολύ στο να κρατάς την markup σου ακόμα πιο καθαρή, ωστόσο μπορώ να ζήσω και χωρίς αυτό. Τέλος, υπάρχει πιθανότητα (πάντα ανάλογα το project και εάν ο πελάτης είναι περίεργος/φανατικός χρήστης IE) να χρησιμοποιήσω και το Respond.js, έτσι ώστε τα media queries να παίζουν και σε IE 6-7-8…

Αυτά τα λίγα σχετικά με το front-end κομμάτι των site. Όπως καταλαβαίνεται, ακόμα και μικρά projects μπορεί να θέλουν όλα τα παραπάνω και ακόμα περισσότερα για να στηθούν και να λειτουργήσουν όπως πρέπει. Τέλος αν κάποιος χρησιμοποιεί φανατικά κάποιο εργαλείο/library που δεν αναφέρω παραπάνω, ας αφήσει ένα σχόλιο έτσι ώστε το τεστάρουμε και εμείς…

• Valid HTML5
• Responsive design (για desktop monitor, iPad και iPhone)
• Είναι widget ready με 4 διαφορετικές περιοχές
• Υποστηρίζει custom menus (κεντρικό και βοηθητικό)
• Υποστηρίζει threaded/nested σχόλια
• Υποστηρίζει sticky posts
• Μπορείτε να το μεταφράσετε σε όποια γλώσσα θέλετε (δεν το έχω δυστυχώς μεταφράσει ακόμα στα ελληνικά )
• Είναι accessible και SEO-friendly

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

Θα ακολουθήσει μια σειρά από posts στο Phrappe.com, τα οποία θα περιγράφουν το πως επιτεύχθηκαν κάποια από τα πιο προχωρημένα πραγματάκια του theme, οπότε όσοι ενδιαφέρεστε περάστε μια βόλτα από εκεί (ή απλά εγγραφείτε στο feed).

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

Το πρόβλημα συνήθως ξεκινάει με το πως θα φαίνεται το site μας σε μια τέτοια συσκευή. Για κάποιο περίεργο λόγο, οι περισσότεροι χρήστες/πελάτες είναι αρκετά μπερδεμένοι, μιας και δεν ξέρουν τι λύσεις υπάρχουν (και υπάρχουν λύσεις για όλα τα budgets), ποια είναι τα πλεονεκτήματα και μειονεκτήματα τους, και γενικότερα επικρατεί μια σύγχυση για το θέμα, με αποτέλεσμα να δημιουργούνται προβλήματα και παρεξηγήσεις. Ελπίζω το παρακάτω άρθρο να ξεδιαλύνει κάπως το τοπίο έτσι ώστε να επωφεληθούμε όλοι. Σε αυτό το σημείο θα ήθελα να τονίσω πως δεν είμαι κανένας φοβερός mobile guru/expert, και ίσως κάπου κάνω λάθος, γι’ αυτόν τον λόγο όποιος έχει να συμπληρώσει/προσθέσει κάτι, απλά ας μου αφήσει ένα σχόλιο. Έχουμε και λέμε λοιπόν, το site μας μπορεί να εμφανιστεί στο smartphone/tablet μας με δύο τρόπους.

Web app

Επιλέγοντας αυτήν την λύση, εννοούμε πως θα χρησιμοποιούμε τον browser της συσκευής μας (smartphone/tablet) για να δούμε το site μας. Μια αρκετά απλή λύση μπορεί να είναι η χρήση κάποιων CSS queries (Responsive Web Design) έτσι ώστε το site μας να φαίνεται λίγο πιο μαζεμένο και optimised στις συσκευές (οθόνες) που έχουμε αποφασίσει να υποστηρίξουμε. Αυτό δεν σημαίνει πως μπορούμε να φτάσουμε μέχρι εκεί. Ανάλογα με τις ανάγκες του project, και φυσικά το budget του, το mobile site μπορεί να γίνει όσο πολύπλοκο θέλουμε, χρησιμοποιώντας όσο καλύτερα γίνεται τις δυνατότητες της συσκευής και του browser που μας παρέχει. Για παράδειγμα η Google (λόγω και του Android), αποφεύγει τις native εφαρμογές, προσφέρει όμως σχεδόν σε όλες της τις υπηρεσίες ειδικά διαμορφωμένες web εφαρμογές για κινητά και tablets (μπείτε στο Gmail από τον browser του κινητού σας και θα καταλάβετε τι εννοώ).

Τα πλεονεκτήματα μιας web app είναι αρκετά. Το πρώτο και σημαντικότερο είναι πως δεν χρειάζεστε κάποιο συγκεκριμένο SDK (όπως πχ. το iOS SDK) για να δημιουργήσετε την web εφαρμογή σας. Μπορείτε να χρησιμοποιήσετε web τεχνολογίες όπως HTML (HTML5 καλύτερα), CSS και Javascript! Σε αυτό το σημείο αξίζει να σημειώσω πως οι browsers των κινητών/tablet (των σοβαρών κατασκευαστών τουλάχιστον) είναι φοβερά εξελιγμένοι και με πολλά χαρακτηριστικά, πράγμα που σημαίνει πως ήδη υποστηρίζουν πολλά HTML5 και CSS3 καλούδια. Το δεύτερο πλεονέκτημα μιας web app είναι πως, αν είναι καλοσχεδιασμένη φυσικά (βλέπε Progressive enhancement, Responsive Web Design, κτλ. κτλ.), μπορεί να καλύψει την πλειοψηφία των συσκευών και των browser που υπάρχουν! Αυτό σημαίνει πως με μόλις μία εφαρμογή μπορεί να καλυφθούν όλα τα κινητά και tablets ανεξαρτήτου κατασκευαστή και λειτουργικού συστήματος. Τέλος ακόμα ένα πλεονέκτημα μπορεί να θεωρηθεί και η ανεξάρτητη διανομή, μιας και στην ουσία η εφαρμογή ζει στο web και όχι σε κάποιο store (o χρήστης απλά συνδέεται με την εφαρμογή χρησιμοποιώντας τον browser του). Χαρακτηριστικό παράδειγμα φοβερής web εφαρμογής που ήθελε να παρακάμψει το γνωστό για την εκκεντρικότητα του Apple App Store, είναι η εφαρμογή της Financial Times. Ρίξτε οπωσδήποτε μια ματιά από το κινητό σας και δείτε τι φανταστική δουλειά έχουν κάνει…

Τα μειονεκτήματα τώρα (ναι υπάρχουν και αυτά) έχουν να κάνουν κυρίως στο ότι δεν είναι εγγενής (native) εφαρμογή (τι έγραψα τώρα!). Οι web εφαρμογές λοιπόν, είναι συνήθως λίγο πιο αργές σε ανταπόκριση, μιας και στέλνουν σε έναν server κάποιο request και περιμένουμε απάντηση, ενώ συνήθως δεν έχουν και την “γυαλάδα” του native user interface. Επίσης οι web εφαρμογές μπορούν να κάνουν μόνο ότι μπορεί να καταλάβει ο browser της εκάστοτε συσκευής, δεν έχουν με άλλα λόγια πρόσβαση σε πιο advanced χαρακτηριστικά της συσκευής (όπως πχ. camera, GPS, πυξίδα, γυροσκόπιο, κτλ.).

Native app

Εγγενείς (native) εφαρμογές ονομάζουμε αυτές που τις κατεβάζουμε και της εγκαθιστούμε στην συσκευή μας από κάποιο store (πχ. App Store), είτε δωρεάν, είτε πληρώνοντας κάποιο χρηματικό ποσό. Η κάθε εφαρμογή έχει φτιαχτεί ειδικά για την συγκεκριμένη συσκευή, πράγμα που σημαίνει πως εκμεταλλεύεται πολύ καλά τα χαρακτηριστικά της εκάστοτε συσκευής, αλλά όπως καταλαβαίνεται πρέπει να γράψετε τουλάχιστον 2 διαφορετικές εφαρμογές (και να δουλέψετε με 2 διαφορετικά SDK) έτσι ώστε να δημιουργήσετε εφαρμογές για τα 2 βασικά λειτουργικά των κινητών/tablet (iOS και Android).

Τα πλεονεκτήματα και εδώ είναι αρκετά, με πρώτο και σημαντικότερο πως δεν χρειάζεται να είσαι συνδεδεμένος στο internet για να χρησιμοποιήσεις την εφαρμογή (εκτός φυσικά και αν αυτό είναι requirement της ίδιας της εφαρμογής). Το user interface και η απόκρισή είναι πολύ πιο γρήγορα και συνήθως πιο εντυπωσιακά από τα αντίστοιχα μιας web εφαρμογής, ενώ μπορούμε να χρησιμοποιήσουμε και όλα τα advanced χαρακτηριστικά της εκάστοτε συσκευής όπως camera, GPS, πυξίδα, γυροσκόπιο, κτλ. (εδώ την έχει πατήσει λίγο το Android μιας και οι κατασκευαστές εκτός από ότι είναι πολλοί, προσφέρουν και διαφορετικά χαρακτηριστικά στις συσκευές τους, πράγμα που δημιουργεί αρκετά προβλήματα στους developers).

Το βασικότερο μειονέκτημα τώρα, το ανέφερα και πιο πάνω, δεν είναι άλλο από το γεγονός πως η εφαρμογή είναι platform-dependent, που σημαίνει πως πρέπει να γράψετε την ίδια εφαρμογή για πολλές πλατφόρμες (τουλάχιστον 2), χωρίς να κάνω λόγο για τις υποπεριπτώσεις τους (όπως πχ. τις αλλαγές που μπορεί να υπάρχουν σε hardware χαρακτηριστικά πχ. retina display, ή εντελώς διαφορετικά hardware setup σε android συσκευές). Τέλος ένα μικρό μειονέκτημα μπορεί να θεωρηθεί και το γεγονός πως για να γίνει update η εφαρμογή, πρέπει να ξανά-ανέβει στο εκάστοτε store (αφού εγκριθεί κτλ .κτλ.), να την ξανά-κατεβάσει και να την ξανά-κάνει install ο εκάστοτε χρήστης (στην περίπτωση της web app το update είναι πολύ πιο άμεσο).

Αυτά τα λίγα περί web και native εφαρμογών για κινητά και tablets. Ελπίζω να ξεκαθάρισα λιγάκι το τοπίο, μιας και για κάποιο ανεξήγητο λόγο τα πράγματα είναι αρκετά μπερδεμένα! Αν κάποιος θέλει να συμπληρώσει κάτι, ας αφήσει απλά ένα σχόλιο…