Neden CSS Sprite Yerine İkon Fontları Kullanılmalıdır?

SEO forumları ve web yazılım toplulukları sık sık garip davranışlar sergileyebilir, zıtlaşabilirler. Fakat her iki grubun da hem fikir olduğu birşey varsa o da site performansının önemidir.

SEO’lar tarafından dikkat edilen düzenlemelerin başında gelen ve geçtiğimiz yıllarda önemi daha çok artan, sayfa hızı ölçme aracı Google PageSpeed Insights adını taşır.

Aşağıda bu aracın yaptığı bazı önerileri açıklayacağım;
Minimize Payload

CSS Kodları: Site hızını artırmak amacıyla sosyal medya ikonları, gezinti kısa yolları, beğen butonları ya da oklar gibi küçük imaj ya da ikonları kullanmak için CSS kodlarını sitemize uygulayabiliriz. CSS kodları o ikonların görüntülenmesi gereken yerlerde çıkmasını sağlar. Açıklamak gerekirse kodlar sayesinde var olmayan bir imajı site üzerinde gösteririz ve bu şekilde site hızını artırmış oluruz. Sitemizde açılırken ne kadar az resim yükleniyorsa sitemiz bir o kadar hızlı açılacaktır.

Google tarafından kullanılan CSS sprite örnekleri:
https://ssl.gstatic.com/gb/images/v1_83e17b6b.png
https://www.google.com/images/nav_logo170.png
Google CSS Sprite Google CSS Sprite

Daha İyi Bir Yöntem

Yazılımcı değilim; fakat bunları yapmak, uygulamak ve kontrollerini sağlamak komik videoları tekrar tekrar izlemek kadar eğlenceli. Bir ikonun rengi, boyutu ya da biçimi değişmesi gerektiğinde geliştirici CSS sprite kodunu günceller ve CSS kodundan konumunu mauel olarak tekrardan düzenler. Grunt tasks, Compass ya da SpriteMe gibi yazılımlarla bu kodları düzenlemek kolay gibi görünse de, düzenlemeniz gereken pek çok bölüm var.

CSS sprite kodlarının kullanımın dezavantajları en çok mobil ya da etkileşimli site yöneticileri tarafından tartışılmakta: aynı resim, dar bir ekranda, süper büyük bir ekranda ya da yüksek çözünürlüklü bir retina ekranda nasıl işlenecek?

Web geliştiriciler bu sorunları icon fontları kullanarak çözdüler. Basitçe anlatmak gerekirse, ikon fontları rastgele bir araya getirilmiş vektör grafiklerdir. SVG imajları gibi, ikon fontları ekran çönürlüğüne göre çok rahat ölçeklendirilirler, bu görseller CSS kodu içerisinde birer resim değil de font olarak geçtiği için de biçimlendirmek CSS sprite kodunu güncellemeye nazaran daha kolaydır.

Pictos, Symbolset ve IcoMoon gibi sitelerden onlarca ikon fontu bulabilir ve CSS ile bunları sitenizde bir araya getirebilirsiniz. Profesyonel olmadığını düşünenler için de uzmanlaşmak için en kolay yol olarak gördüğüm Font Awesome adlı siteyi tavsiye ederim. Fontlar Bootstrap CDN üzerinde host edildiği için, kullanmak ve bu fontları çalışır hale getirmek oldukça kolay.

Font Awesome

Peki SEO’lar Neden Buna Dikkat Etmeliler?

Bu site tasarlamanın doğasının değişimine bir örnek olarak gösterilebilir. Eğer müşterilerinizin hala sizinle çalışmasını istiyorsanız; SEO’lar bunu kesinlikle öğrenmeliler.

SEO toplulukları genelde web sitesi tasarlama konusunda biraz yalnız kalırlar. Onların dikkate aldıkları şeyleri webmasterlar genelde görmezden gelir ya da hesaba katmazlar. Fakat gerçekte web geliştiricileri temiz, düzgün kodlanmış, kullanıcı dostu ve performanslı siteler geliştirmekte SEO’lardan biraz geridedirler. Bunun bir nedeni de, Google’dan bile geliyor olsa, bir yapılacaklar listesine körü körüne bağlı olmamamızdır. Google PageSpeed Insights raporundan çıkan bazı sonuçlar site hızına gerçekten zarar verebiliyor, ya da siteyi kontrol eden müşterinin başınızı ağrıtmasına neden olabiliyor. Bu araç bana, örneğin her zaman düzgün bir şekilde boyutlandırılmış resim dosyaları kullanmam gerektiğini öneriyor. Fakat bu öneri resmin ekrana göre boyutlandırılabilirlik özelliğini devre dışı bırakıyor.

SEO’lar farkında olmadan sitelerine zarar vermesine rağmen bunun ne anlama geldiğini gayet iyi anlıyorlar. Performans avantajlarının ötesinde düşünecek olursak beni en çok memnun bırakan şey, bir tasarımcının yardımına ihtiyaç durmadan düzgün ve interaktif ikonları çok kolay bir şekilde kullanabiliyor olmamızdır. CSS ustası olmamama rağmen, mevcut kodlama yeteneğim Adobe Illustrator yeteneğimi epey geride bırakıyor. Böylece kullandığım ikonlar müşteri ya da bir departmana sunmak istediğim şeyi daha görsel bir şekilde oluşturmak için bir blog gönderisine göre daha kolay bir yol gibi. En net örneklerinden biri, mesela jeopolitik bir grafik hazırlarken eğer kullanacak daha yaratıcı bir şeyiniz yoksa StateFace ya da GeoBats kullanmak.

Web Sitesi Yavaşlamıyor!

Günümüzde ‘beynini kullan’ sloganı her sektör için kullanılabilir. İkon fontlarının da birden fazla renge sahip ikon kullanamamak gibi kendilerini engelleyen sınırlamaları vardır. Potansiyel olarak bazı erişim sorunları yaşayabilirsiniz bunlar için de Filament Grup’un sahip olduğu Bulletproof Accessible Icon Fonts kodlamalarını kullanabilirsiniz. Genellikle fontlar direkt olarak tarayıcılar tarafından render edilir. Bu da test edilecek ve dikkat edilmesi gereken bir husustur. Duruma göre CSS sprite kodları da takip etmeniz gereken bir yol olabilir.

Amaç En İyi Deneyimi Yaşatmak!

Web üzerine çalışan herkesin amacı bu yeteneklerini geliştirmek olmalıdır. Font ikonları, font gömme konusundaki gelişmeler, tarayıcı desteği ve yüksek çözünürlüklü ekranlar sayesinde son zamanlarda oldukça popüler oldular. Bunlar bir web sitesinin çok küçük parçaları olabilirler. Fakat genelde SEO’lar ve site sahipleri için içeriklerini bilgin göstermek ve kendilerinin önemini vurgulamak bakımından değer taşımaktadırlar.
Kimsenin web teknolojisinin değiştiğini söylemesine gerek yok. Önemli olan bizim bunu anlayıp, problemlerini çözüp müşterilerimize ve kullanıcılarımıza en iyi deneyimi yaşatmamızdır.

Peki Siz?

İkon fontları kullandıktan sonra sitenizde olumlu sonuçlar aldınız mı? Ya da favori ikon fontunuz nedir? Yorumlarınızda bunları bizlerle paylaşırsanız memnun olurum.
Yazıyı Paylaşarak Destek Olun!

İlginizi Çekebilecek Benzer Yazılar

1 Yorum Var

  1. Notepad İndir

    25 Mayıs 2014 at 11:03

    Hocam bilgi için çok çok teşekkürler beni çok yanlış bir yoldan döndürdünüz çok sağolun.

    Reply

Yorum Yap

Email adresiniz kesinlikle paylaşılmayacaktır. (*) bulunan alanlar, doldurulması zorunlu alanlardır.

Video Köşesi

Sitede Arama Yap!

Google Plus’ta Takip Edin!