Günümüzde Google’ın da sıralamalarda öncelik vermesiyle olmazsa olmaz hale gelen responsive tasarım için ipuçları konusunda dikkat edilmesi gereken noktaları sizler için bir araya getirdik.
2010 yılında hayatımıza giren responsive tasarım, web sitesinin tablet ve mobil cihazlarda ekran boyutuna uygun olacak şekilde tasarlanmasıyla oluşuyor. Günümüzde mobil kullanım oranlarının masaüstü kullanımı açık ara farkla geçmesiyle de mobil uyumlu responsive tasarımlar en fazla önem verilmesi gereken detaylardan biri haline geldi. Kullanıcılar sitenize mobil cihaz üzerinden girdiğinde eğer siteniz responsive tasarıma sahip değil ise, sitede gezinmekte, yazıları okumakta ve aradıklarını bulmakta oldukça güçlük çeker veya hiç bulamayabilirler. Bu da kullanıcıların sitenizden hem kısa sürede hem de memnuniyetsiz şekilde ayrılmalarına sebep olacaktır. Kullanıcı deneyimine her zaman önem arama motorları responsive tasarımları da ciddi seviyelerde destekliyor.
Tasarımcılar için SEO İpuçları
Yazı İçeriği
Responsive Tasarım İçin İpuçları
4 Farklı Tasarım
Tüm cihazlar ile mükemmel uyum için masaüstü, dizüstü, tablet ve mobil olmak üzere 4 farklı boyut ve genişlik için responsive tasarım çalışması yapılması websitenizin responsive konusunda tam not almasına yardımcı olacak ilk etkenlerden biri.
Metinler
Yazı yerleşimleri ve boyutları, kullanıcının zoom yapmasına gerek olmadan ve sağa sola sürüklemeden okuyabileceği şekilde optimize edilmelidir.
Ekran Yönü
Kullanıcıların özellikle mobil ve tablette ekran yönünü farklı kullanabileceği de unutulmamalıdır. Bazı tarayıcılar yatay moda dönerken sayfanın genişliğini sabit tutar ve ekranı doldurmak için sayfa içeriğini mevcut boyutlara göre düzenlemek yerine zoom yapar. Bunun önüne geçmek için initial-scale=1 özelliği kullanılabilir.
CSS Medya Soruları
Küçük ve büyük ekranlara farklı tasarımlar hazırlamak için CSS medya sorguları size yardımcı olacaktır. Ekran boyutları ve CSS piksellerindeki genişlik, cihazlar arasında ve hatta farklı model telefonlar arasında bile değiştiğinden, içeriğin oluşturulması için belirli bir görüntü alanı temel alınmamalıdır. Bu nedenle CSS özellikleri için örneğin width: 100% değerini kullanmak daha olumlu sonuçlar verecektir.
Öncelik Sıralaması
Responsive tasarımlara başlamak için en uygun sıralama önce en küçük boyutlu cihaz için tasarım yapmaktır. Daha sonra bu tasarım üzerinden ekran boyutu büyüdükçe tasarımın özellikleri de arttırarak geliştirilebilir.
İçerik
Ekrana sığdırmak için var olan içerikler, gösterilmekten vazgeçilmemelidir. Tüm içeriğin mevcut cihazda görüntülenebileceği şekilde olacak tasarımlar tercih edilmelidir.
