bi de 960 grid system vs.. responsive ile ayni sey mi? bi de bootstrap'i da aciklarsaniz sevinirim.bunlarla lakasi var mi en azindan onu ogrensem yeter.
responsive telefon, tablet, bilgisayar için sitenin düzgün gözükmesidir. pencereyi küçülttüğünde site değişir, aynı kalmaz. yani evet.
960 grid sistem daha başka bir şey. o tasarımı kolaylaştırmak için ekranı 960 parçaya bölmek gibi bir şey.
bootstrap ise özel bir tema biçimi. responsive özelliğini barındıran bir sistem. kolaylıkla tasarım yapmak için kullanılır.
bootstrap - foundation - html kickstart - boilerplate gibi alternatifleri de var.
aslinda en yaygin yontem sayfayi resize edip bakmak ama kodunu yazarken sadece cihazin genisligine gore responsive yapanlar var. mesela apple.com'a bilgisayardan girdiginde en fazla 780px genislige kadar mi ne kuculuyor. ama telefondan girdiginde de saglikli gorunuyor gayet. yani kimisi cihazin (telefon, tablet, bilgisayar) genisligine gore, kimisi de ekranin (browser ekrani) genisligine gore responsive yapiyor. arada pek fark yok, css'te ekstra 1 kelime yaziyorsun sadece.
evet grid sistemlerinin responsive'le alakasi var. responsive cozumleri kolaylastirmak icin idealler. sayfayi esit parcalara boluyorlar, mesela bootstrap 12 parcaya boluyor. sen html elementlerini ona gore koyuyorsun, atiyorum bi div var sayfanin yarisini kapliyor 6 kolonlu, yanina da iki tane div 3'er kolon. ama mobilden girince o 6 kolon olan sayfanin tamamini kaplasin digerleri de asagi insin diyosan kolaylikla onun kodunu yazabiliyosun, yani "buyuk ekranda 6 kolon, kucukteyse 12 kolon bu div" demek cok kolaylasiyor.
evet diyebiliriz.
bootstrap beleş bir responsive arayüz dökümantasyonu ve widget button türlü türlü ekipman şeysi. çok yaygın.
960 grid sistemi en çok kullanılan standarttır. en popüler siteler bakacak olursan 960 980 arasında gezinir. ölçüden çok responsive site yaparken grid sistemi kullanıldığı için uygulamakta kolay olur felan. ama ekranlar büyüdükçe popüler olan ölçü artık 1170 grid e doğru kaymakta.
örnek olarak,
300px bir widget koydunuz sağ köşeye bu grid yapısı içersinde sayfa genişliği daraldıkça bu 300 px alanın kayabileceği boşluklar olur. etrafında bir padding alanı vardır 10px veya 15px böylelikle sayfanın sağından soluna çeksenizde sayfa aritmetiği bozulmaz. anneye anlatır gibi anlatırsak "lego" gibidir.
negatif örnek olarak eksiduyuruyu verebiliriz. sağ kolon anlamsız hiç bir ölçüye standart uymayan genişliktedir. sayfayı responsive yapsak neremize sokacağımızı bilemeyiz. dikine uzuuun bir kolon. haliyle sayfanın en altına atmaktan başka çare kalmaz. responsive doğru düzgün çalışsaydı sayfanın genişliğine göre gruplanan içerikler benim ekranım senin ekranın onun ekranına göre kendini daraltıp genişleterek 27 ekranda daracık bir kolon izlemezdik.
güzel bir responsive örnek
www.newyorker.com
responsive de içerik küçülmez hep ölçüsünü korur. mobil tarayıcılar için en önemli getirisi budur diyebiliriz. zoom yapmanıza gerek kalmaz.
sitenin css dosyasi acik ise media query "@media" kullanilmis mi diye bakabilirsin. elbette cok karmasik bir arayüz degilse media query kullanilmadan da yapilabilir, "relative width/height" ile, ama genelde @media kullanilmistir responsive web sitelerinde.