Οι προγραμματιστές ιστού και οι ιδιοκτήτες ιστότοπων δίνουν προσοχή: πρέπει να ορίσετε ένα εικονίδιο σελιδοδείκτη iOS έτοιμο για αμφιβληστροειδή. Τα εικονίδια σελιδοδεικτών ονομάζονται Apple Touch Icon και αυτές οι προσαρμοσμένες εικόνες γίνονται το εικονίδιο που εμφανίζεται στην αρχική οθόνη των χρηστών όταν σημειώνουν σελιδοδείκτες σε έναν ιστότοπο σε ένα iPad, iPhone ή iPod touch σε iOS ή το πλαίσιο σελιδοδεικτών του Safari για OS X.Χωρίς ένα προσαρμοσμένο σύνολο αρχείων εικονιδίων apple-touch, οι χρήστες θα λάβουν μια βαρετή και συχνά άσχημη μικρογραφία της ίδιας της ιστοσελίδας και χωρίς τη χρήση ενός εικονιδίου που είναι έτοιμο για αμφιβληστροειδή, το εικονίδιο σελιδοδεικτών θα φαίνεται με pixel και γενικά απαίσια στη νέα οθόνη του iPad.

Εδώ είναι τι πρέπει να κάνετε για να δημιουργήσετε ένα τέλειο εικονίδιο αφής Apple για οποιονδήποτε ιστότοπο με μερικά εύκολα βήματα.

1) Δημιουργήστε το εικονίδιο ιστότοπου για iOS Retina-Ready

Χρησιμοποιήστε ένα πρότυπο ή σχεδιάστε το δικό σας. Χρησιμοποίησα το εύκολο κιτ εικονιδίων DIY retina που αναφέρθηκε σε προηγούμενη ανάρτηση, είναι ένα αρχείο PSD που κάνει τον σχεδιασμό εικονιδίων iOS με όμορφη εμφάνιση τόσο εύκολη όσο ένα ή δύο κλικ. Επικολλήστε έναν ιστότοπο ή ένα λογότυπο εταιρείας και είστε πολύ έτοιμοι. Εάν δεν έχετε κάτι να επεξεργαστείτε αρχεία PSD, το Photoshop CS6 beta είναι εξαιρετικό και δωρεάν για λήψη και χρήση μέχρι να κυκλοφορήσει η τελική έκδοση αργότερα μέσα στο έτος.

2) Αποθήκευση ως PNG & Ονομάστε το εικονίδιο σελιδοδείκτη ιστότοπου Retina

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

• “apple-touch-icon.png” θα προσθέσει την επικάλυψη φούσκας επισήμανσης στο εικονίδιο
• “apple-touch-icon-precomposed.png” θα εμφανίσει το εικονίδιο όπως δημιουργήθηκε αρχικά, χωρίς την επικάλυψη επισήμανσης

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

3) Μεταφορτώστε το εικονίδιο αφής σελιδοδείκτη ιστότοπου στον Βασικό Κατάλογο Ιστού

Χρησιμοποιήστε έναν πελάτη SFTP (το OS X περιλαμβάνει το FTP στο Finder και το CyberDuck ή το Filezilla είναι δωρεάν) για να αντιγράψετε το αρχείο apple-touch-icon.png στον ριζικό κατάλογο ιστού. Αυτή είναι συνήθως η ίδια τοποθεσία που βρίσκεται το κύριο αρχείο ευρετηρίου τοποθεσιών. Μόλις μεταφορτωθεί, επιβεβαιώστε ότι βρίσκεται στη σωστή θέση ανοίγοντας ένα πρόγραμμα περιήγησης ιστού και μεταβαίνοντας στη διεύθυνση "http://SITEURL.com/apple-touch-icon.png" και βεβαιωθείτε ότι φορτώνει.

Ακολουθεί ένα παράδειγμα ενός εικονιδίου σελιδοδείκτη 512×512 που είναι έτοιμο για αμφιβληστροειδή από το OSXDaily.com:

Παρατηρήστε ότι χωρίς τη σημαία -προσύνθεση, το παραπάνω εικονίδιο θα εμφανίσει το συννεφάκι επισήμανσης. Μπορείτε να δείτε τη διαφορά μεταξύ των δύο συγκρίνοντας το πραγματικό εικονίδιο με αυτό που εμφανίζεται στα στιγμιότυπα οθόνης ως σελιδοδείκτη.

4) Χρησιμοποιήστε μια συσκευή iOS και προσθέστε σελιδοδείκτη στον ιστότοπο

Αυτό είναι το πιο εύκολο μέρος, πάρτε μια συσκευή iOS (κατά προτίμηση ένα iPad 3 για να επιβεβαιώσετε την πτυχή του αμφιβληστροειδούς) και ανοίξτε το Safari.Ανανεώστε τον ιστότοπο στον οποίο ανεβάσατε το εικονίδιο και, στη συνέχεια, πατήστε το εικονίδιο με το βέλος και επιλέξτε "Προσθήκη στην αρχική οθόνη" ονομάστε τον σελιδοδείκτη και, στη συνέχεια, επιστρέψτε στην αρχική οθόνη για να επιβεβαιώσετε ότι βρίσκεται εκεί.

Παρόλο που είναι 512 x 512 pixel, το εικονίδιο του αμφιβληστροειδούς θα μειωθεί κανονικά σε παλαιότερα iPhone και συσκευές χωρίς αμφιβληστροειδή. Εάν θέλετε πραγματικά, μπορείτε να χρησιμοποιήσετε CSS και HTML για να εμφανίσετε εικονίδια διαφορετικού μεγέθους σε διαφορετικές συσκευές, αλλά δεν είναι πραγματικά απαραίτητο.

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