Tüm cihazlara uyumlu website tasarımı serisinin bu son makalesinde, websitemizde yer alan içerikler için uyumluluk işlemleri yapacağız. Böylece serimizi tamamlayarak tüm cihazlarda düzgün görüntülenen menü, şablon ve içerik için uyumluluk işlemlerini öğrenmiş olacağız. İçeriklerin uyumlu hale getirilmesinde yapacağımız işlemler resimler ve videolar için olacak.

Serimizin ilk bölümüne buraya tıklayarak,

Serimizin ikinci bölümüne buraya tıklayarak ulaşabilirsiniz.

Tasarımımızı test etmek için buraya, bilgisayarınıza indirmek için buraya tıklayabilirsiniz.

Resimler için uyumluluk işlemleri oldukça basittir. Tek yapmamız gereken şey CSS komutları ile resimlerimizi bulundukları katmana göre boyutlandırmaktır.

img{
    width: 100%;
    height: auto;
}

Videolar için ise (youtube videoları) farklı bir yol izlememiz gerekiyor. Öncelikle videoyu kapsayan bir katmana ihtiyacımız var. Bu katmanın boyutlarını ideal video oranı olan 16:9 oranında boyutlandırmamız gerekiyor. Örneğin videomuzu kapsayan katmanımıza "video" ismi vermişsek,

.video{
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}

şeklinde kodlamamız gerekiyor. Böylece her genişlikte 16:9 oranına sahip bir katman oluşturmuş oluyoruz. Katmanımızın içerisine ise iframe özelliğine sahip videomuzu ekliyoruz. Ayrıca iframe için de küçük CSS işlemleri yapmamız gerekiyor.

iframe{
    position: absolute;
    width: 100%;
    height: 100%;
}

Böylece resim ve videolarımızı da uyumlu hale getirmiş oluyoruz. İşlemleri yaptığımız videoyu aşağıdan izleyebilirsiniz.