“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.
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.
İ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.
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;
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.
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.
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.
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.
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.
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.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;
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.
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.
<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.
<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>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
// 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) { ... }
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.
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.