Responsive Web Design (Uyumlu Web Tasarım)

Codeliva Blog > Responsive Web Design (Uyumlu Web Tasarım)
12 Şubat 2021

“Duyarlı web tasarımı nedir, nasıl yapılır?” gibi sorular web tasarım öğrenmek isteyenlerin özellikle mobil uygulamalardaki yeni ilgi odağı haline gelmeye başladı. Uyumlu web tasarım ilk defa 2010 yılında tanıtılarak günümüzde popüler bir şekilde kullanılmaya başlanmıştır.

Responsive tasarım, uyumluluk kelimesiyle bağlantılı olarak web sitesinin masaüstü versiyonunun, mobil veya tabletteki görünümüne uyarlanabilmesi için tüm detayların ölçeklenmesine verilen addır. Masaüstü web sitesi içerisindeki resim, içerik ve diğer birçok faktör ekran boyutlarına göre küçülüp, yeniden boyutlandırılırken, taşınabilir cihazlar için kullanışlı olmasını sağlar. Kullanıcı bu sayede siteyi görüntülerken okumak istedikleri alanı zoom yapmadan, görüntülemede sınırlamalar yaşamadan ve kullanım zorluğu çekmeden gezinebilirler.

Mobil cihazlar, kolay kullanımı ve taşınabilir özelliği ile günümüzde masaüstü cihazlara oranla daha çok tercih edilmektedir. Responsive tasarım, web sitesinin boyutlarını mobil uyumlu hale getirirken, kullanım rahatlığı sağlar. Mobil versiyona uyarlanırken, önemli elementler ön plana çıkarılıp ilgili kısımlar en sade halde kullanıcıyla buluşur. Kullanıcı dostu bir web sitesi ortaya çıkarken sürdürülebilirlik sağlanır. Aradıklarını bulmakta zorlanmayan kullanıcılar iyi bir deneyim yaşar. Böylece web sitesinin trafiği artarken sadık kullanıcılar kazanılır.

Responsive Web Tasarım Nasıl Yapılır?
Mobil cihazlardan web sitesini ziyaret eden kullanıcılar görüntülüme ve gezinme konusunda sorunlarla karşılaşırlar. Okunacak içerikleri yakınlaştırmak ve görüntüleyebilmek için responsive tasarımlı web siteleri kullanımda zorluk çıkarmaz. Masaüstünde web siteleri yukarıdan aşağıya doğru bir tasarımla kullanıcıya görünür. Mobil versiyonda masaüstü görünümünde sayfada taşmalar olur. Sağ sol ya da yakınlaştırıp uzaklaştırma gibi eylemler yapılır. Responsive tasarımla site için verilecek değerler ile kayma ve taşma sorunu yaşanmaz. Responsive tasarım ile web siteleri görüntülenirken, kullanımı kolaylaştırmak için menüleri üst kısımda, fontlar ve imajlar alt alta gelecek uyumlu olarak yeniden ölçeklendirilir.

Web siteleri kullanıcının tercih ettiği cihaza göre otomatik olarak yeniden tasarlamalıdır. Bilgisayardan açılan web sitesi, cep telefonuna geçildiğinde aynı görünebilecek teknolojide olmalıdır. Bu görüntüleme HTML ve CSS yazılım dilleri sayesinde olur. Ayrıca hazır framework yapıdaki Bootstrap, Materialize gibi kütüphaneler aracılığıyla kolayca mobil duyarlı kodlamalar yapılır. Akıllıca kullanılan bu karışımlar cihaza göre tepki vererek erişim olanağı sağlar.

Duyarlı web tasarımı, programlama diliyle yazıldığı için hazır bir program veya JavaScript değildir. JavaScript aşaması ile yalnızca mobil uyumlu çözünürlük için class ekleme ya da silme yapılabilir.

Responsive Tasarımların Faydaları
Teknolojinin gelişimi birçok teknolojik aletin gelişimine katkı sağlarken yeni tasarım ihtiyaçları ortaya çıkarmıştır. Cihazlar boyut değiştirirken içerik ve tasarımların da boyut değiştirmesi gerekli görülmüştür. Responsive tasarım bu gelişmeler karşısında ortaya çıkan önemli bir atılımdır.

İyi hazırlanmış web siteleri, ziyaretçi sayısını yani site trafiğini artırmaya yarar. Gelişmiş web sitelerine tanımlanan birçok özellik; Google, Yandex gibi arama motorlarında siteyi üst sıralara taşıyabilecek kullanıcılara yapılan yatırım gibi düşünülmelidir. Codeliva Yazılım olarak responsive web tasarımın avantajlarını fayda sağlamak amacıyla siz değerli okuyucularımıza birkaç madde ile açıklayalım:

Kullanılabilir Kolay: Ziyaretçilerin en çok gerek duyduğu beğendiği özelliktir. Responsive tasarlanan site ile kullanıcılar aradıklarını hemen bulabilir ve iyi bir deneyim yaşatmak kaçınılmaz olur.

Tasarruf: Responsive tabanlı tasarlanan web siteleri birçok farklı platforma otomatik olarak uyum sağlar. Böylece mobil için ayrı tablet için ayrı olacak şekilde yeni tasarımlar yapmak durumunda kalınmaz.

SEO Avantajı: Responsive altyapısında tasarlanan siteler, günümüzde kullanımı artan mobil platformda hız sağlar. Bu açıdan web sitesi, trend arama motorları arasında yer alan Google için değerlidir. Site hızı ile kullanıcı sitenizi beğenerek sürekli ziyaret eder. Google ziyaret sıklığını denetler bu da SEO’ya katkı sağlar.

Tekrar Optimizasyon Gerektirmez: Responsive tasarımlı web sitesine verilen piksel değerleri gelecekteki birçok teknoloji ile uyumludur. Yeniden uyumlu yapmayı gerektirmez.

5 Ana İlke ile Duyarlı Web Tasarım Yapabilmek
Web sayfaları kullanıcı odaklı tasarımlar ortaya çıkarır. Kullanıcılar ise gelişen teknoloji ile birçok donanım ve cihazlardan faydalanır. Teknolojinin başında ortaya çıkarılan web tasarım ürünleri yalnızca bilgisayarın ara yüzlerine uygun olarak tasarlanıyordu. Ancak mobil ve tablet gibi kullanımı kolay ve taşınabilen cihazlar tasarımda restorasyona neden olmuştur. Web sayfaları, cihazlara uygun boyutlarda görünecek şekilde tasarlanarak konforu bir adım öteye götürmüştür.

Tasarım konusuna yeni başlayan ve kendini ileri seviyeye götürmek isteyen kullanıcılar için Konya yazılım firmamızın dikkatle ele aldığı dört ana ilke;

  1. Fluid Grids (Grid Yapı- Akışkan Izgaralar)

    Sabit piksel değerleri dışındaki diğer elementlerin yüzde oranlı düzene göre kodlanmasına akışkan ızgaralar adı verilir. Yüzde oranlı kodlamalarda akışkan bileşenler ve cihazlara uyumlu ızgaralar ortaya çıkar.

    Sabit genişlikteki ızgaralar yardımıyla yapılan konumlandırmalar masaüstü siteler için geleneksel düzende kullanılır. Boyut ve şekilleri değişen cihazlarda ise bu geleneksel düzen kötü görünüm ortaya çıkarır. Piksel sabitliğinde tasarımlar yüzde değerler eklenir bu sayede kullanım kolaylığı sağlar.

    Yüzde oranlı sıvı ızgaralardan yararlanırken, yükseklik ve genişlik ögelerinde yüzde oranlar ya da yaklaşık değerde kodlamalar yapılır. Bu yaklaşım ile bir web sitesi cihazın boyutlarına göre şekil değiştirerek göreceli hale getirilir. Örneğin; 960 piksel genişliğinde sarmal yapıya sahip olan ve ekranı, 1920 piksel genişlikteki tarayıcıdan açılan bir web sitesi olduğunu varsayalım. Sitenin tam görünümü yakalayabilmesi için tarayıcı penceresinin boyutları hedeftir. Bağlam ve sarmal hedefin verilen değerlerde yüzde değerini çıkarmak için matematiksel bir hesaplama yaparak yüzdeliği çıkarabiliriz. Bu durumda içerik/hedef=yüzde oranını verir. 960/1920=0,5 gibi bir orantı ile değerin %50 olduğunu anlarız. Bu matematiksel kural web sitesinde sütun oluşturmak ve CSS içinde kullanılır.


  2. Sıvı Görüntüler

    Görüntülerin akışkan ızgarada küçültülmesi ifadesi basitçe sıvı görüntüleri tanımlar. Duyarlı web tasarım görüntülerinde, max ifadesiyle genişlik seviyesi tanımlamak için CSS kullanılırken, minimum değerler belirtilmez. Örneğin; .slide {max-width: 100%; } CSS ile verilecek değerler maksimum boy oranını korur ve görüntü kalitesini düşürmeden herhangi bir değer atanmasını önler.


  3. CSS Medya Sorgulamaları

    Media aramalarında CSS stil kurallarına bağlı olarak web sitesini görüntüleyen tarayıcılar cihazın boyutlarına göre ayarlanır. Web sitesinin görünümü hakkında bilgi alarak değiştirmeler yapılır. Görünüm başta olmak üzere ekran genişliği, çözünürlüğü gibi alanları kapsayan medya sorgulamaları birçok cihazın düzen ve boyut kurallarını değiştirmeye yardımcı olur.


  4. JavaScript ile Media Sorgulaması Yapmak

    Mobil uyumlu site ve uygulamalarda JavaScript en çok başvurulan yazılım dilleri arasındadır. Dolayısıyla Responsive tasarımlarda JavaScript ile medya sorgulaması yapmak mobil uyumlu sitelerin hayata geçirilmesinde yardımcı olacaktır. Çözünürlük geçişlerinde olası problemlerle karşılaşmamak için class isimleri ekleme-silme işlemleri gerçekleştirilir.


  5. HTML Meta Viewport

    Web sayfalarının görüş alanı ile ilgili olan bu kavram, kullanıcının karşısına çıkacak boyutların ayarlanmasını sağlar. Web sayfalarının kaplayacağı alan cihaza göre uyumlu hale getirilir. Kullanıcı, ekran boyutu büyüdükçe ya da küçüldükçe bozuk olmayan bir web sitesiyle sörf yapar. Viewport özelliği kodlanırken, head etiketi arasına yazılan meta etiketi kullanılır. Device-width=1.0 değer piksel cinsinden görünüm genişliği için, initial-scale= 0 ile 10.0 arası değer görüntüyü yakınlaştırmak için verilir. Responsive Tasarımda ihtiyaç duyulan, yakınlaştırma oranları, piksel cinsinden alanın genişlik görüntüsü gibi kriterlere değer verebilmek için Viewport oranlarını bilmek gerekir.


RESPONSİVE TASARIM İÇİN BOOTSTRAP NEDİR?
Bootstrap, Mark Otto ve Jacob Thornton tarafından 2011 yılında geliştirilip açık kaynak kodlu olarak ortaya çıkmıştır. Zamanla gelişen Bootstrapt birçok versiyon ortaya çıkarmıştır. 2017 yılında Bootstrapt 4 versiyonu kullanıma sunulmuştur. 16 Haziran 2020 de ise Bootstrap 5 alpha kullanıcıların karşısına çıkmıştır.

Responsive web sitelerini geliştirmek için birçok farklı yöntem mevcuttur. Bootstrap, web sitelerini geliştirmek için kullanılan birçok alternatif yöntemlerden en kolay olanıdır. Web siteleri görüntülemelerinde, cihaz ekranına göre otomatik olarak uyum sağlaması kolay kullanımının yanında diğer önemli avantajdır.

Bootstrap temelde uygulanması kolay ve bedava olan hazır bir kütüphanedir. Bu kütüphanenin içerisinde HTML, CSS ve JavaScript dosyaları bulunur.

Bootstrapt kütüphanesindeki kodlara erişmek için her dil dosya içinde dosya olarak kategorize edilmiştir. Örneğin, kütüphane içerisinde CSS sınıflarının içinden bir CSS dosyası seçilir. Hazır kodlarla açılan bu sayfa için yalnızca stil ve şablonların metotlarını uygulamak yeterli olur. Böylece en baştan bir CSS kodu yazmak zahmetinden kurtarır. Size sadece web siteniz için özelleştirilmiş css kodlarını yazmak kalır.

BOOTSTRAP DOSYALARI
Bootstarp kütüphanesindeki hazır bulunan dosyaları Codeliva Yazılım olarak sizler için derledik.

Bootstrap.css
Web sitesini düzenleyen ve yöneten framework’lere bootstrap.css dosyaları denir. HTML ile yapı ve içerikler yönetilirken CSS ile bunlar içerisinde bir düzen oluşturulur. Tablolar, görseller, içerikler gibi tüm fonksiyonların düzenlerini oluştururken aynı zamanda biçimlendirme yapılabilir. HTML ve CSS birbirlerine etkileri dolayısıyla bir arada kullanılmaları gereklidir. CSS dosyaları web sayfalarıyla ilişkilendirildikten sonra yapılacak tüm değişiklikler yine CSS dosyasının içinde yapılabilir.

Bootstrap.js
Bootstrap’ın ana dosyasını oluşturan JavaScript interaktif site yapısından sorumludur. JavaScript ile açık kaynak kodlu platform olan JQueriy Kütüphanesi kullanılabilir. Böylece JQueriy yardımıyla defalarca JavaScript söz dizimlerini yazmaya gerek kalmadan zamandan tasarruf edilir. JavaScript ile mobil uyumlu uyumlu tasarımlar ortaya çıkarmak için CSS ve HTML özellikleri yeterli görülmediği için JQueriy elementinden faydalanmak gereklidir.

JQuery kullanılarak JavaScrip içinde yapılabilecek fonksiyonlar;

  1. Ajax komutlarını karşılar.
  2. JavaScript eklentilerinin bulunduğu koleksiyonlarla bileşenler oluşturabilir.
  3. CSS ile animasyonlar oluşturulur ve dinamik olarak web içerikleri eklenebilir.

Glyphicons
Web sitelerinin ikon görünümleri için CSS üzerinden değişiklikler yapılabilir. Ancak elimizde varsayılan özelliklere sahip canlı ikonların olması siteyi çekici kılar. Bootstrap tarafından ücretsiz kullanılan Glyphicon Halfling ile standart temel fonksiyonlara sahip hazır ikonlar web siteleriyle ilişkilendirilebilir. Kullanıcı ara yüz tasarımlarında eylemleri gerçekleştirmek için Glyphicon temalara özel şık ikonlar tercih edilebilir.

BOOTSTRAP NASIL KULLANILIR?
Hazır şablonların bulunduğu kütüphaneleri indirerek içerisindeki üç belgeyi web sitelerine bağlamak Bootstrap kullanırken uygulanması gereken adımlardandır. Dosyaların son sürümlerini getbootstrap.com üzerinden indirdikten sonra kullanıma hazır hale getirilir. Diğer bir yöntem ise CDN bağlantısı kurmaktır.

CDN bağlantısı: Bootstrap geliştirilmiş versiyonları için kullanılır. Bootstrap 3 versiyonu için kullanıldığında ziyaret edilen tarayıcıların ön bellek kısmında dosyalar hazır konumda bulunur. Böylece dosyaları tekrar indirmeye gerek kalmadan sitenin yüklenme hızı artar.

Booststrap 4 versiyonu için CDN bağlantısı kullanılırken; CSS bağlantısını head olan bölüme, JavaScript ise body sonuna eklenmelidir. JavaScript eklentilerinde modal türünde sınıflandırmalar yapmak istenirse JQuery bağlantısı kullanılır. Sınıflandırma yapılmak istenmezse CSS sınıflandırı kullanılabilir.

Booststrap 5 versiyonu yeni güncellemelerle piyasaya sürüldü. Bu versiyonda JQuery bağlantılarına ihtiyaç duyulmadan yalnızca JavaScript ile çalışmak yeterli olur. JQuery içerisinde ki 11 eklenti kaldırılarak yalnızca urtil, alert, button, carosel gibi eklentiler yer alıyor. İnternet Explorer ile uyumlu olmayan yeni sürüm istendiğinde JQuery ile kullanabilir. JQuery tarayıcı hızını düşürdüğü ve trafiği azalttığı için çok tercih edilmemektedir.

Bootstrap 5 sorgulama özellikleri geliştirilmiştir. Buna göre Dom yerine querySelectorAll sorgulaması, Ajax yerine ise fetch ve tarayıcı desteklemeleri için XHR kullanılmıştır. Ayrıca Event işlemleri yapılırken proxy ve daha fazla öge kullanma imkanı sağlamak için geliştirilmiştir. Gelecekte ise JQuery kullanmaya gerek kalmadan sorgulamaları HTML5 ile yapmak yeterli olacak gibi görünüyor.

Bootstrap Grid Izgaralar: 12 ızgara sistemini temel alan Bootstrap, sayfanın row class kısmında uygulanan div etiketlerinin içerisindeki genişliği 1 birim olarak ele alır. Genişlik belirleme görecelidir çünkü önemli olan sütunun 12 birimden oluşmasıdır. Örneğin, 4+4+4, 2+6+4, 6+6 gibi çoğaltılarak toplamının 12 yi vermesi gerekir. Bootstarp, xs, sm, md, lg, xl, xxl olarak 6 farklı media sınıfına sahiptir.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3


    
    <div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>




Bootstrap, CSS sınıflandırmaları ile birlikte kullanılmak istendiğinde 4 sınıftan yararlanır.

  1. Container Class: Birçok ana işlemi yapmayı sağlayan katmandır. Tüm sayfaya ve ya bir kısım etiketlerin arasında kullanılarak sınır belirlemeye yardımcı olur. Container bazı boşlukları bırakmaya yararken, Container fluid kullanılarak ekranın tamamını kaplama işlemi gerçekleştirilir.

  2. 
    
    <div class="container">
      <!-- Content here -->
    </div>
    
    
    <div class="container-fluid">
      ...
    </div>
    
    
    <div class="container-sm">100% wide until small breakpoint</div>
    <div class="container-md">100% wide until medium breakpoint</div>
    <div class="container-lg">100% wide until large breakpoint</div>
    <div class="container-xl">100% wide until extra large breakpoint</div>
    <div class="container-xxl">100% wide until extra extra large breakpoint</div>
    
    
    

  3. Navbar Class: Sayfanın açılır butonlarını, menülerini ve diğer elementlerini bölmeye yarayan bir navigasyon görevindedir. Dar ve geniş açılı menü şekillerine dönüştürülmek istendiğinde Collapse tanımlanır.

  4. 
    
    <nav class="navbar navbar-light bg-light">
    
    <div class="container-fluid">
        
    <a class="navbar-brand" href="#">Navbar</a>
    
    </div>
    </nav>
    
    
    
    

  5. XS, SM, MD, LG, XL, XXL media sıralamaları: Ekranların nerelerde gizlenip nerelerde görünmesi gerektiğine karar vermemize yarar.

  6. 
    
    // Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap
    
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    
    
    
    


  7. Carousel Sınıfı: İmage gibi nesnelerin geçişini sağlarken istenildiğinde dokunmatik ekranlarda sürükleme yapılabilir.

Responsive tasarımlarda sayfa sütunlarının birçok tip ekrandaki genişliklerini ölçeklemede kullanılabilir. Responsive site tasarımları için Bootstrap’ın bu özelliği avantaj sağlar.

Bootstrap Ekran Çözünürlük Değerleri
Gelişen teknoloji ile günümüzde birçok farklı cihaz ve onlarca farklı ekran çözünürlüğü ortaya çıkmıştır. Dolayısıyla bu gelişime ayak uyduracak yazılımlar da geliştirilmiştir. Geliştiriciler için zaman tasarrufu yapmak adına Bootstrap önemli atılımlarda bulunmuştur.

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
X-Large
≥1200px
XX-Large
≥1400px

Web sitelerinin ara yüzleri için bazı piksel değerleri belirleyerek işlerin kolaylaştırılmasında katkıda bulunmuştur. Genişlik aralıkları gibi sadeleştirmeler yaparak hazır şablonlarla işleri kolaylaştırmıştır. Bootstrap, varsayılan ekran çözünürlüklerini yukarıdaki tabloda belirlemiştir.