Günümüzde tablet ve telefon daha fazla kullanıldığı için artık web sitelerininde bu cihazlara uyumlu şekilde tasarlanması önemli bir hale geldi. Ne gibi faydaları var ?  nasıl yapılır ? yaparken nelere dikkat etmeliyiz ? . Size başka bir kaynağa ihtiyaç duymadan web sitesini tüm cihazlara uyumlu hale getirmenin yolunu anlatıcam.

Önce ne gibi faydaları var onlardan bahsedelim.

Şunu söylüyeyim google artık mobil uyumlu olan web sitelerine daha fazla önem gösteriyor.Googlenin amacı kullanıcılarına en iyi hizmeti vermek. mobil uyumlu web siteleri telefondan giriş yapıldığında daha anlaşılır ve kullanışlı hale geliyor. Web siteniz ile ilgili çözünürlük boyut vs gibi hataları görebileceğiniz yer gene google PageSpeed Insights ‘e  girip web sitenizi analiz edebilirsiniz.

Sorgulama Ekranı
Sorgulama Ekranı
Sorgulama tamamlandıktan sonra mobil kısmında en alt kısımdaki kullanıcı deneyimi ile ilgili tamamlanmayan ve tamamlanan düzenlemeleri görüceksiniz.
Sorgulama tamamlandıktan sonra mobil kısmında en alt kısımdaki kullanıcı deneyimi ile ilgili tamamlanmayan ve tamamlanan düzenlemeleri görüceksiniz.

Google aramalarında web sitesinin mobil uyumlu olup olmadığı vurgulanmaktadır. telefondan girdiğinizde sizde görüceksinizdir.

Mobil arama sonuçlarında mobil uyumlu ibaresi

Şimdi gelelim “web site mi nasıl responsive yaparım” kısmına.

Birden fazla yolu var ya oturup kendiniz sıfırdan yazıcaksınız yada bootstrap ekleyip web sitesini bootstrap’a göre düzenliceksiniz. Bootstrap twitter kendi için geliştirdiği css dosyasıdır. Kullanımı tamamen ücretsizdir. Buradan indirebilirsiniz.

Kendiniz yazıcak iseniz önce standart çözünürlükleri bilmeniz gerekir.

Responsive çözünürlükleri

Standart olarak bilinen çözünürlükler 320px,768px,1024px fakat cihaz olarak bakarsak daha bir çok çözünürlük mevcut. Bu sorunu kökten çözmek için benim kullanıldığım bir yol var. Bu yol bir çok tarayıcıda şuan mevcut ama benim kullandığım google chrome.

Sağ tuş İncele diyoruz
Sağ tuş İncele diyoruz
Alt kısıma kod düzenleme ekranı gelicektir. o ekranda ünlem işareti olan mobil cihaz iconuna tıklıyoruz.
Alt kısıma kod düzenleme ekranı gelicektir. o ekranda ünlem işareti olan mobil cihaz iconuna tıklıyoruz.
Çözünürlüğe göre siteyi ölçeklendiren bi cetvel çıkıcaktır.üst kısımdaki device den cihaz seçebilir veya screen dan istediğiniz çözünürlüğü yazabilirsiniz.
Çözünürlüğe göre siteyi ölçeklendiren bi cetvel çıkıcaktır.üst kısımdaki device den cihaz seçebilir veya screen dan istediğiniz çözünürlüğü yazabilirsiniz.
Cihazların listesi bu sekilde. her cihaz seçişinizde sayfayı yenilemeyi unutmayın kendiniz çözünürlük girdiğinizde dahi sayfayı yenileyin.
Cihazların listesi bu sekilde. her cihaz seçişinizde sayfayı yenilemeyi unutmayın kendiniz çözünürlük girdiğinizde dahi sayfayı yenileyin.

Buraya kadar tamamda hala nasıl yapıcam diye merak edenler var tahmin edebiliyorum. İşte şimdi kod kısmına gelelim bir örnek ile direk anlatalım.

media kod satırı

Medya Tipleri

  1. screen             –    Bilgisayarda görüntüleme
  2. tty                     –    Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntüleme
  3. tv                       –    Televizyonda görüntüleme
  4. projection     –     Projeksiyonda görüntüleme
  5. handheld       –    Taşınabilir telefonlar ve PDA’ler
  6. print                 –    Yazıcı çıktılarında görüntüleme
  7. braille              –    Braille dokunsal okuyucularda
  8. all                      –    Tüm araçlarda görüntüleme
  9. embossed      –    Braille yazıcı çıktıları için
  10. aural                 –    Ses sentez birimlerinde kullanılır

Mantıksal Operatörler

and  : Birden fazla medya özelliğini birbirine bağlar.

not   : Sorguya negatif ifade katar. Sonuç eğer doğru ise css dosyası uygulanmaz.

only :  Sadece bu şartlar geçerli olduğunda uygula anlamınadır.

@media only  all and (width:1024px){

.divclas{color:#000;}

}

Direk width kullanarak sabit bi çözünürlük belirte bilirsiniz ama max-  min- kullarak belli çözünürlükler arasında işlem yapmasını isteye bilirsinizde.

@media only  all  (max-width:1024px) and (min-width:768px){

.divclas{color:#000;}

}

web sitenizi sıfırdan yapılandırmak baya zaman alabilir ama. En iyisi web sitesini yapmaya başlamadan önce ilk etapda bootstrap öğrenip onu siteye entegre edip direk bootstrap sayesinde web sitenizi inşa etmek. Tabiki zamandan kazanmak için bu şekilde yapmanız doğru eğerki yeni başladıysanız ve birşeyler öğrenmek istiyorsanız web sitesini tamamen kendi kodlarınız ile inşa etmek size daha fazla şey katıcaktır.

 

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir