CSS ile Mobil Uyumlu Site Yapımı

- 4 Ocak 2017

Google standartlarına göre bir web sayfası yalnızca masaüstü cihazlarda değil aynı zamanda cep telefonu gibi mobil cihazlarda da çalışmalı. Aksi halde mobil uyumlu olmayan site, mobil cihazlarda Google sıralamasında oldukça aşağılarda yer alacaktır. İşte bu yüzden aslında artık mobil uyumlu diye bir şey yok. Yani yapılan her web sitesi zaten mobile uyumlu olmak zorunda!

Mobil Uyumlu Site CSS Analizi

Öncelikle bir önceki dersimiz olan HTML Web Sayfası Oluşturma dersinin sonunda vermiş olduğum örneği incelemek istiyorum. Bu sayede CSS’de kullanılan özellikleri tanıyabilir ve nerede hangi özelliği neden kullandığımızı daha iyi kavrayabilirsiniz. Örneği henüz indirmediyseniz burayı tıklayarak indirebilirsiniz.

CSS’de Element Seçme ve Özellik Verme

CSS’de bir özellik vermek için a{} şeklinde önce elementi seçmemiz gerekiyor. Daha sonra süslü parantezler içerisine a{text-decoration: none;color: black;} şeklinde yazacağımız kodlar seçtiğimiz elemente özellikler vermemizi sağlayacak. Mesela burada kullandığımız text-decoration: none; özelliği bağlantıların üzerine gelindiğinde çıkan alt çizgiyi kaldırmaya yararken color: black; özelliği metnin rengini siyaha çeviriyor.

CSS Element Seçme ve Özellik Verme Örneği:

a {
    text-decoration: none;
    color: black;
}

Genellikle en başta kullandığımız * seçicisi, bu CSS kodlarının çalıştığı yerdeki tüm HTML elementlerini seçerek her şeye süslü parantezler arasındaki özellikleri tanımlar. Burada sitedeki tüm elementlerin yazı tipini Arial olarak tanımladık ve tarayıcının belirlediği Margin ve Padding boşluklarını sıfırladık. Şimdi dilediğimiz elemente istediğimiz gibi Margin ve Padding verebiliriz.

CSS ile Tarayıcı Tanımlı Özellikleri Kaldırma Örneği:

* {
    font-family: Arial;
    margin: 0;
    padding: 0;
}

CSS’de Padding ve Margin Özellikleri

Margin CSS’de dış boşlukları, Padding ise iç boşlukları tanımlamaktadır. Aşağıdaki görselden de anlaşılacağı gibi bir elemente 10 piksel Padding verildiğinde o element her yönden 10 piksel büyüyecektir. Ancak 10 piksel Margin verildiğindeyse elementin her tarafından 10 piksel boyutunda boşluk oluşacaktır.

İndirdiğiniz sayfanın Footer yani alt kısmında Padding ve Margin kullanımına bir örnek görebilirsiniz. Buradaki CSS kodunda <footer></footer> elementinin içerisinde yer alan .menu sınıfının içindeki li elementindeki bağlantı etiketini seçiyoruz. Daha sonra Padding değerini yani etiketin boyutunu arttıran değeri 6 piksel olarak ayarlıyoruz. Bununla birlikte Margin değerini de 6 piksel yaparak etiketlerin birbirlerinden uzaklaşmasını sağlıyoruz.

footer .menu li a {
    padding: 6px;
    margin: 6px;
}

Yukarıdaki CSS koduyla verdiğimiz Padding ve Margin özellikleriyle aşağıdaki gibi bir görüntüye kavuşuyoruz. Gördüğünüz gibi Anasayfa, Portfolyo ve Hakkımda yazıları arasında 6 piksellik bir boşluk bulunuyor.

Burada .menu sınıfı HTML içerisinde <a class="menu"></a> şeklinde kullanıldığında CSS’de verilen özelliklerin bu sınıfla ilişkili elemente geçmesini sağlıyor.

Bir önceki derste hazırladığımız örneğin birkaç adımını inceleyerek bazı CSS özelliklerinin kullanımını ve sınıfların HTML’de kullanılışını öğrendiğimize göre artık sitemizi oluşturmaya devam edebiliriz.

CSS ve HTML ile Anasayfa Oluşturma

Örneğimiz “index.html” adında tek bir HTML sayfasından oluşuyordu. Şimdiyse birkaç sayfa haline getireceğiz ama önce anasayfayı biraz daha geliştirelim.

<div class="kutu">
    <h1>Sayfa İçindeki Başlık</h1>
    <img src="resim.jpg" class="foto" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing ... eros sed leo sagittis, quis pellentesque dui cursus.</p>
    <p>Cras dignissim tempor neque, eu ullamcorper felis ... Vestibulum vitae convallis tellus.</p>
    <h2>Alt Başlık</h2>
    <p>Sed iaculis justo tortor, nec interdum odio cursus ... quis arcu interdum mollis.</p>
    <p>Duis convallis tellus vel felis molestie, maximus ... rhoncus eu vehicula vel, faucibus quis lacus.</p>
</div>

<main></main> etiketi içerisinde yer alan ve “Kutu” isimli sınıfa sahip yukarıdaki kısmı aşağıdaki kodla değiştireceğiz.

<div class="genis-resim">
    <h1 class="ana-metin">Site Hakkında Bilgiler</h1>
    <img src="anasayfa.jpg" />
</div>
<div class="kutu">
    <div class="ceyrek-sutun">
        <div class="ikon">Portfolyo</div>
        <p>Duis at luctus velit. Morbi vestibulum pellentesque ligula, varius consequat enim sagittis id.</p>
    </div>
    <div class="ceyrek-sutun">
        <div class="ikon">Hizmetler</div>
        <p>Donec tristique dapibus mi, ut vestibulum orci. Nullam purus turpis, interdum ut nisl sed, euismod ullamcorper ex.</p>
    </div>
    <div class="ceyrek-sutun">
        <div class="ikon">Hakkımda</div>
        <p>Ut dignissim efficitur elit, eget fringilla nunc. Maecenas sodales est vitae lacinia iaculis.</p>
    </div>
    <div class="ceyrek-sutun">
        <div class="ikon">İletişim</div>
        <p>Duis vulputate neque a lectus dictum, eu lacinia elit pulvinar. Donec sed enim in quam auctor dapibus at quis nisl. </p>
    </div>
    <hr />
    <h1>Sayfa İçindeki Başlık</h1>
    <p>Cras dignissim tempor neque, eu ullamcorper felis convallis ac. Maecenas nec ultricies felis, sit amet vulputate nibh. Aliquam urna diam, eleifend nec dictum non, vulputate in mi. Vestibulum vitae convallis tellus. Proin accumsan consequat orci vulputate hendrerit. Suspendisse sit amet ante ac nibh placerat faucibus ut a mauris.</p>
</div>

Yukarıdaki kodları “index.html” dosyanıza ekledikten sonra aynı klasörün içerisine 1920 piksel genişliğe sahip “anasayfa.jpg” bir de resim atmalısınız. Ayrıca tüm elementleri yüzde hesabıyla oluşturduğumuzdan Padding değerlerinin elementleri ekstradan büyütmesini engellemek adına “style.css” dosyasındaki * seçicisi içine box-sizing: border-box; özelliğini de eklemeliyiz. Yine “style.css” dosyasındaki main elementine display: inline-block; özelliğini ekleyerek içindeki elementlere göre boyutlanmasını sağlıyor ve Padding değerlerini padding: 0 0 50px 0; şeklinde ayarlıyoruz.

Daha sonra aşağıdaki kodları da “style.css” dosyamızın en sonuna ekliyoruz. Buradaki özellikler, yeni oluşturduğumuz elementlerin özellikleridir. En alttaki @media screen and (max-width: 768px) {} sorgusu, tarayıcı boyutu eğer 768 pikselin altındaysa devreye girecek CSS özelliklerini barındırıyor. Yani mobil cihazlara özel stil vermeye yarıyor. Burada, anasayfadaki yuvarlaklar içindeki yazıların 768 pikselden küçük ekranlarda tam genişliğe sahip olması için kullandık.

Style.css Dosyamızın Sonuna Eklenecek Anasayfa Özellikleri:

.genis-resim {
    background-color: black;
    width: 100%;
    height: 400px;
}
.genis-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.ana-metin {
    position: absolute;
    top: 160px;
    width: 100%;
    font-size: 64px;
    color: white;
    z-index: 1;
}
.ikon {
    width: 150px;
    background-color: #ea9809;
    color: white;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    padding-top: 60px;
    height: 150px;
    border-radius: 150px;
    margin: 0 auto;
}
.ceyrek-sutun {
    width: 25%;
    display: block;
    float: left;
    margin-top: 50px;
}
.ceyrek-sutun p {
    text-align: center;
    padding: 5px 20px;
}
hr {
    margin: 60px 0 40px 0;
    display: inline-block;
    width: 100%;
    border: 0;
    border-top: 1px solid #d8d8d8;
}
@media screen and (max-width: 768px) {
    .ceyrek-sutun {
        width: 100%;
    }
}

Böylece anasayfamızı kısmen de olsa düzenlemiş olduk. Bu işlemlerin ardından anasayfamız artık aşağıdaki gibi görünecek.

Şimdi “hakkımda.html” sayfasını oluşturalım. Yine aynı klasörün içerisine “index.html” dosyasındaki her şey kopyalayarak başlıyoruz. Daha sonra <main></main> etiketindeki içeriği anasayfamızın ilk başta sahip olduğu aşağıdaki kodla değiştireceğiz.

Hakkımda Sayfasının HTML Kodları:

<div class="kutu">
    <h1>Hakkımda Sayfası</h1>
    <img src="resim.jpg" class="foto" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing ... eros sed leo sagittis, quis pellentesque dui cursus.</p>
    <p>Cras dignissim tempor neque, eu ullamcorper felis ... Vestibulum vitae convallis tellus.</p>
    <h2>Alt Başlık</h2>
    <p>Sed iaculis justo tortor, nec interdum odio cursus ... quis arcu interdum mollis.</p>
    <p>Duis convallis tellus vel felis molestie, maximus ... rhoncus eu vehicula vel, faucibus quis lacus.</p>
</div>

Daha sonra her iki sayfanın menüsündeki bağlantılara sayfaların adını <a href="index.html">Anasayfa</a> şeklinde yazdığımızda sayfalar arasında bağlantı oluşacaktır. Henüz yalnızca HTML ve CSS kullandığımız için PHP gibi web yazılım dilleriyle dosyaları birbirlerine bağlamadık. İlerleyen derslerde PHP ile de çalışacağız.

Bir sonraki sayfamız olan “portfolyo.html” dosyamızı da oluşturup içerisine aynı kodları yerleştiriyoruz ve <main></main> etiketi içerisindekileri aşağıdakilerle değiştiriyoruz.

Portfolyo Sayfasının HTML Kodları:

<div class="kutu">
    <h1>Sayfa İçindeki Başlık</h1>
    <p>Sed iaculis justo tortor, nec interdum odio cursus id. Suspendisse ex lacus, egestas et nisl congue, malesuada luctus nisl. Integer sed purus id nisi fermentum facilisis. Sed maximus dapibus magna, quis viverra lacus rutrum ut. Vivamus aliquam quam quis arcu interdum mollis.</p>
    <a href="#" class="portfolyo">
        <img src="resim.jpg" class="foto" />
        <h2>Alt Başlık</h2>
        <p>Vivamus aliquam quam quis arcu interdum mollis.</p>
    </a>
    <a href="#" class="portfolyo">
        <img src="resim.jpg" class="foto" />
        <h2>Alt Başlık</h2>
        <p>Vivamus aliquam quam quis arcu interdum mollis.</p>
    </a>
    <a href="#" class="portfolyo">
        <img src="resim.jpg" class="foto" />
        <h2>Alt Başlık</h2>
        <p>Vivamus aliquam quam quis arcu interdum mollis.</p>
    </a>
    <a href="#" class="portfolyo">
        <img src="resim.jpg" class="foto" />
        <h2>Alt Başlık</h2>
        <p>Vivamus aliquam quam quis arcu interdum mollis.</p>
    </a>
</div>

Portfolyo.html” sayfamızı oluşturduk şimdi @media screen and (max-width: 768px) {} sorgusundan itibaren olan kısımla birlikte “style.css” dosyamızın en altına aşağıdaki stilleri ekliyoruz.

Portfolyo Sayfası Stilleri:

.portfolyo {
    width: 25%;
    display: inline-block;
    text-align: center;
    margin-top: 25px;
    float: left;
}
@media screen and (max-width: 768px) {
    .ceyrek-sutun {
        width: 100%;
    }
    .portfolyo {
        width: 50%;
    }
}
@media screen and (max-width: 414px) {
    .portfolyo {
        width: 100%;
    }
}

Böylece “Portfolyo.html” sayfamız da mobil cihazlara duyarlı bir şekilde oluşmuş olacak ve aşağıdaki gibi bir görünüme kavuşacak.

Sonuç ve Bir Sonraki Ders

Bu derste CSS’teki önemli birkaç özelliği ve genel olarak CSS kullanımını öğrenirken aynı zamanda birkaç sayfalık oldukça basit bir de mobil uyumlu internet sitesi tasarlamış olduk. Bir sonraki dersimizde Bootstrap kullanımını öğreneceğiz ve temel anlamda ihtiyacınız olacak birkaç özelliğini birlikte keşfetmek için basit bir tema yapacağız.

Derste oluşturduğumuz mobil uyumlu site temasının tüm dosyalarını indirmek için burayı tıklamanız yeterlidir.

Temel Web Tasarım Dersleri

  1. HTML Web Sayfası Oluşturma
  2. CSS ile Mobil Uyumlu Site Yapımı

Bir cevap yazın