Các nhà phát triển web và chủ sở hữu trang web lưu ý: bạn cần đặt biểu tượng dấu trang iOS sẵn sàng cho võng mạc. Các biểu tượng dấu trang được gọi là Biểu tượng Apple Touch và những hình ảnh tùy chỉnh này trở thành biểu tượng được hiển thị trên màn hình chính của người dùng khi họ đánh dấu trang web trên iPad, iPhone hoặc iPod touch trong iOS hoặc bảng dấu trang của Safari dành cho OS X.Nếu không có bộ tệp biểu tượng quả táo tùy chỉnh, người dùng sẽ nhận được hình thu nhỏ nhàm chán và thường xấu xí của chính trang web và nếu không sử dụng biểu tượng sẵn sàng cho võng mạc, biểu tượng dấu trang sẽ trông giống pixel và nhìn chung rất tệ trên màn hình iPad mới.

Đây là những gì bạn cần làm để tạo Biểu tượng Apple Touch hoàn hảo cho võng mạc cho bất kỳ trang web nào trong một vài bước đơn giản.

1) Tạo biểu tượng trang web iOS sẵn sàng cho Retina

Sử dụng mẫu hoặc thiết kế của riêng bạn. Tôi đã sử dụng bộ biểu tượng retina tự làm dễ dàng được đề cập trong bài đăng trước, đó là tệp PSD giúp thiết kế các biểu tượng iOS đẹp mắt chỉ bằng một hoặc hai cú nhấp chuột. Dán vào một trang web hoặc logo của công ty và bạn đã sẵn sàng. Nếu bạn không có thứ gì đó để chỉnh sửa các tệp PSD, Photoshop CS6 beta là tuyệt vời và miễn phí để tải xuống và sử dụng cho đến khi phiên bản cuối cùng ra mắt vào cuối năm.

2) Lưu dưới dạng PNG & Đặt tên cho Biểu tượng Dấu trang Trang web Retina

Biểu tượng phải là PNG và phải được đặt tên theo một trong hai điều. Mỗi tên tệp có giao diện hơi khác nhau của biểu tượng như được hiển thị trên màn hình chính của người dùng:

• “apple-touch-icon.png” sẽ thêm lớp phủ bong bóng nổi bật vào biểu tượng
• “apple-touch-icon-precomposed.png” sẽ hiển thị biểu tượng như được tạo ban đầu, không có lớp phủ nổi bật

Sử dụng tùy chọn -precomposed sau này nếu bạn đã tạo phần nổi bật của riêng mình hoặc nếu bạn muốn biểu tượng xuất hiện phẳng hơn mà không có bong bóng phổ biến xuất hiện trên hầu hết các biểu tượng mặc định của Apple.

3) Tải Biểu tượng Cảm ứng Dấu trang của Trang web lên Thư mục Web Cơ sở

Sử dụng ứng dụng khách SFTP (OS X bao gồm FTP trong Finder và CyberDuck hoặc Filezilla miễn phí) để sao chép tệp apple-touch-icon.png vào thư mục web gốc. Đây thường là cùng một vị trí mà tệp chỉ mục chính của trang web được đặt. Sau khi tải lên, hãy xác nhận rằng nó ở vị trí thích hợp bằng cách mở trình duyệt web và truy cập “http://SITEURL.com/apple-touch-icon.png” và đảm bảo rằng nó tải.

Đây là ví dụ về biểu tượng dấu trang sẵn sàng cho võng mạc 512×512 từ OSXDaily.com:

Lưu ý rằng nếu không có cờ -precomposed, biểu tượng trên sẽ hiển thị bong bóng tô sáng. Bạn có thể thấy sự khác biệt giữa hai biểu tượng này bằng cách so sánh biểu tượng thực tế với biểu tượng được hiển thị trong ảnh chụp màn hình dưới dạng dấu trang.

4) Sử dụng Thiết bị iOS và Đánh dấu Trang web

Đây là phần dễ nhất, lấy thiết bị iOS (tốt nhất là iPad 3 để xác nhận khía cạnh võng mạc) và mở Safari.Làm mới trang web mà bạn đã tải biểu tượng lên, sau đó nhấn vào biểu tượng mũi tên và chọn “Thêm vào Màn hình chính” đặt tên cho dấu trang, sau đó quay lại Màn hình chính để xác nhận dấu trang ở đó.

Mặc dù có kích thước 512 x 512 pixel, nhưng biểu tượng võng mạc sẽ thu nhỏ lại rất tốt trên iPhone cũ hơn và các thiết bị không có võng mạc. Nếu thực sự muốn, bạn có thể sử dụng CSS và HTML để hiển thị các biểu tượng có kích thước khác nhau trên các thiết bị khác nhau, nhưng điều đó thực sự không cần thiết.

Bây giờ nếu ai đó đánh dấu trang web của bạn trên iPad có màn hình retina, trang web sẽ trông đẹp hơn rất nhiều trên màn hình chính của họ. Đó thực sự là tất cả những gì cần làm. Và vâng, trước đây chúng tôi đã viết về biểu tượng cảm ứng của Apple, nhưng bây giờ nó xứng đáng được đề cập đến vì iPad 3 yêu cầu đồ họa và biểu tượng có độ phân giải cao hơn đáng kể.