Web Tasarım Modelleri Nedir?

Web tasarım modelleri; Responsive, Adaptive ve Liquid tasarım olmak üzere 3 farklı biçimde değişebilen web sitenin uyarlanmış halidir.

Responsive Web Tasarım, Adaptive Web Tasarım ve Liquid Web Tasarım kullanımıyla şekillendirilmiş tasarıma uygun kodlama yapısı her tür tarayıcı ve mobil cihazda sorunsuzca görüntülenmesini sağlar.

Web Tasarım Modeli Avantajları

Web teknolojileri alanında ki yeniliklerden biri CSS3 ile beraberinde kullanıcı deneyimine yönelik tasarım modelleri getirdi. Tasarım Modelleri: (Adaptive) Adaptasyon Tasarım, (LIQUID) Likit Tasarım ve (Responsive) Duyarlı Tasarım.

(Responsive) Duyarlı Web Tasarımı; kurgusunda hazırlanarak yayına alınan web sitesi, masaüstü bilgisayarlarda, yüksek çözünürlüklü dizüstü bilgisayarda görüntülendiği ve okunaklı olduğu gibi tablet bilgisayarlar, mobil cihazlarda bile okunaklı biçimde görüntülenir. Duyarlı web tasarım ile sayfaların tüm ekran çözünürlüklerinde orantılı olarak gösterilmesi sağlanmış olur.

(Adaptive) Adaptasyon Web Tasarımı; Tüm ekran çözünürliklerine, tablet ve mobil cihazlara uygun hale getirmek için, ekran genişliğine göre orantılı biçimde uyarlanır. Adaptasyon web tasarımın diğer tasarım modellerine göre daha iyi bir o kadar da zahmetli avantajı vardır; isteğe göre tüm sayfa tasarımı, rengi, görünümü ve yapısı komple değiştirilebilir. Örnek olarak 1920px de web sitesi siyah beyaz renkleri kullanıyor ise, 1600px de mavi ve truncu renklerine ayarlanır tamamı ile kurguya kalmış bir durumdur.

(Liquid) Likit Web Tasarım;grid yapısında en uygun kullanım biçimidir. Alt alta ürün listelemesi, fiyat listelemelerinde ya da Excel biçimi olarakta kullanılır; başka bir deyişle tablo yapısının aynıdır. Html5 ile geri planda kalan tablo yapısına alternatif olarak kullanılır.

Tasarım modelleri arasında ki farkı görmek için, video yu izleyiniz.


Adaptive Web Tasarım Modeli

Web sitesinde önceden belirlenmiş çözünürlük değerine ulaşana kadar yapısını bozmadan küçülür ancak belirlenen çözünürlüğe ulaştığında aşamalı biçimde diğer çözünürlüklere adapte olarak değişken görünüme sahip olur. Mobil ve Tablet tasarımlarda 100% çözünürlük avantajı sağlamaktadır. LIQUID ve Responsive tasarım ekran çözünürlüklerine odaklı çalışırken, Adaptive tasarım da avantaj daha fazladır; komple tasarım görünümü, renkler, fontlar, yazı boyutları değişebilir, ekstra alanlarda oluşturulabilir.


Örnek adaptasyon yapısı:

<style type="text/css">
<!-- Adaptasyon yapısı -->
.adaptive{
    display:table;
    position:relative
}
.adaptive > div{
    width:800px;
}
@media only screen and (min-width:600px) and (max-width:800px){
   .adaptive > div{
     width:600px;
  }
}
@media only screen and (min-width:400px) and (max-width:600px){
   .adaptive > div{
     width:400px;
  }
}
</style>

LIQUID Web Tasarım Modeli

Web site tasarımı standart çözünürlükten büyük çözünürlüklere kadar sayfa yapısı bozulmadan büyüme sağlar, minimum sayfa çözünürlüğe kadar yapı bozulmadan küçültme gerçekleştirilebilir. LIQUID; Tasarım modelleri arasında, performans ve kullanım açısından çok başarılıdır.


Örnek CSS likit yapısı:

<style type="text/css">
<!-- Likit yapısı -->
.liquid{
    display:table;
    position:relative
}
.liquid > div{
    display:table-cell
}
</style>

Responsive Web Tasarım Modeli

Ekran çözünürlüğü ne olursa olsun en düşükten en yükseğe tüm çözünürlükler ile uyumlu görünüme sahip olur.


Örnek CSS duyarlı yapı:

<style type="text/css">
<!-- duyarlı yapı-->
.responsive{
    display:table;
    position:relative
}
.responsive > div{
    width:100%
}
</style>

Statik Tasarım

Statik tasarımda belirlenmiş çözünürlükte tasarım yapılır ve düşük çözünürlükte ki ekranlarda SCROLL aracılığı ile web sitesi incelenir.


Web Site


Yorum Yaz

Makale hakkında ki soru ve görüşlerinizi bizimle paylaşın.



Lütfen! Yorumlarınızı imla kurallarına uygun olarak yazınız!


Web Site kategorisine ait diğer makaleler


Google PageSpeed

Google PageSpeed
Web site performansının önemi arama motorlarında hızlıca yükselmenin en önemli faktörüdür; web sitenizi 1 saniye altında açılabilir hale getirmenin yöntemleri
Editör : Maksiweb / Tarih : 17.01.2017 10:25

Http Durum Kodları

Http Durum Kodları
Http Durum Kodları; Http status kod, status code ne demek? Sunucu taraflı servisler ile iletişim sağlayan isteklerin kontrolleri yanıtlar ve durum kodları
Editör : Maksiweb / Tarih : 01.12.2017 07:28

Web Sitesi Nedir

Web Sitesi Nedir
Web Sitesi Nedir; web sitesi hakkında bilgiler web sitesi nedir ne işe yarar, web sitesi nedir nasıl yapılır, web açılımı nedir tüm ayrıntıları
Editör : Maksiweb / Tarih : 14.12.2017 09:01

Popüler Yazılar


Google PageSpeed
17, Ocak 2017 Salı

Arama Motoru Optimizasyonu
21, Şubat 2017 Salı

100% Başarılı SEO Kuralı
19, Ocak 2017 Perşembe

Popüler Sosyal Medya Siteleri
22, Şubat 2017 Çarşamba

E-bülten

Güncel makaleler'den ilk siz haberdar olmak istiyorsanız, e-bültene kayıt olun!