Websitem Her Platformda (PC, Tablet, Akıllı Telefon) Görüntülensin.

 

PC, Laptop, tabletler, akıllı telefonlar derken web platformunun yayın yapabileceği ortamların sayısı çok farklı. Web Developer olarak web sitenizin geliştirme aşamasında bu platformların tümüne uygun esneklikte bir arayüz tasarlamanız heryerde dört dörtlük görüntülenebiliyor olmanız açısından önemli. CSS Media Queries bu alanda kullanabileceğimiz web teknolojilerinden bir tanesi. Css media queries aynı html ve css kodlarında ufak ekran değişiklikleri yaparak farklı ekran boyutlarında görüntülenebilmeyi sağlıyor. Bir diğer yöntemde web sitenizin standart PC arayüzünden bağımsız bir şekilde tamamen farklı html ve css kodlarıyla hazırlanmış ve m. veya mobile. adıyla başlayan bir sub-domainde çalışmanız. Bu hem kod külfeti hem de ileride yapacağınız güncellemelerdeki uyumluluk açısından çok ta tavsiye etmediğim bir yöntem. Css Media Queries aynı html ve css kodları üzerinde minimum değişiklikle en iyi ekran uyumluluğunu yapabilmenizi sağlıyor. Bir diğer yöntem ise özellikle mobil ve tablet web ortamları için geliştirilmiş özel kütüphaneleri kullanarak yapacağınız bir yol. Jquery kütüphanesinin üzerine kurulan JqueryMobile benim de kullandığım ve cache mekanizması dahil browser’daki javascript motoru’nun kaynaklarını en güzel şekilde kullanan bir kütüphane. http://jquerymobile.com adresinde kendisi, kullanımı ve dökümanları mevcut.

Eğer yeni bir web projesine başlıyorsanız, görüntülenmek isteyeceğiniz kaynakları kesin olarak belirleyebilir ve yukarıda anlattığımız yöntemlerden herhangi birini kullanarak her yerde o ortama özel yazılmış bir görünümde yayın sunabilirsiniz.  Bu noktada sitenize erişen web tarayıcısının özelliklerini çok iyi belirlemiş olmanız gerekiyor. Yani size kullanabileceğiniz bir js kütüphanesi sunulmalı ve ziyaretçinizin websitenizi görüntülediği web tarayıcının özelliklerini size sunabilmeli. Faruk Ateş’in de aralarında bulunduğu bir ekibin hazırladığı modernizr bu işi layıkıyla yerine getiriyor. http://modernizr.com/ adresinden indirebileceğiniz  modernizr web tarayıcı ve özelliklerini saptamada kullanabileceğiniz bir kütüphane.

 

Tüm bu anlatımdan sonra şöyle bişey tavsiye ederim : yeni bir web sitesi yazıyorum. mevcut platformlar ;

1) Android

2) Iphone

3) Ipad

4) Blackberry

5) Pc

6) Wide Screen Devices (LCD vb.)

tüm bu platformlar modern web tarayıcılarının içerisinde bulunan javascript motorlarında tanımlı olduklarından projenizin taa en başında navigator.userAgent.match(), /PlatformIsmi/.i.test(navigator.userAgent) gibi küçük kod parçacıklarıyla kullanıcınızı saptayabilir ve bu saptamaya göre sub-domaine yönlendirme, farklı html görüntüleme, farklı css kodu çalıştırma gibi yöntemlere gidebilirsiniz. Bu metodun da şöyle bir sıkıntısı olabilir. Bazı kullanıcılar browserın davranış biçimini beğenmediklerinden useragent kısmını değiştirebiliyorlar. Bu da başarılı bir cihaz saptaması yapamamanız anlamına geliyor. Am sorun yok 🙂 Bu noktada da yazımızın başına dönüp Css Media Queries öneririm.