Kirli Kirpi Blog

Bize, sektöre ve hayata dair söylemek istediklerimiz var. Peki siz bunları dinlemek ve okumak ister misiniz?

Web Tasarımına Responsive Yaklaşımlar
responsive-tasarim-cover

Web tasarımında adından son zamanlarda çok sık bahsedilen bir kavram bulunmakta. Web sitesi tasarımınız responsive olmalı. Tamam, olsun ama nedir bu responsive tasarım? Bunu özetleyecek bir kelime var mı derseniz bence tek kelime ile ifade edilebilir:

Responsive tasarım, ekranın kendine yakışanı göstermesidir.

Yani tek kelime olunca çok anlaşılır olmamıştır ama biraz daha incelersek ne dediğim daha iyi anlaşılacaktır.

Web tasarımında tasarlayanı da, kodlayanı da bağlayan çok fazla kural vardır aslında. Web tasarım temelde kutular şeklinde tasarlanmış parçaların birleşerek büyük bir kutu şekli oluşturması ile hazırlanır. Yani ben çok iyi grafik tasarım yaparım diyen herkes çok iyi web tasarım yaparım deme lüksüne sahip değildir. Çünkü web tasarımın teknik yapısı ve zorunlulukları farklı grafik disiplini gerektirmektedir.

Kullanıcılar için teknolojini gelişmesi ne kadar iyi ise web tasarımı yapan kişi için o kadar korkutucudur. Yani paranız var ve ne yapacağınızı şaşırmışsınız gidip 30” bir monitör alabilirsiniz. Bu sizin en doğal hakkınızdır ama parası yetmeyen kişi gidip pekâlâ 19” bir monitör alabilir. 30” ile bakan bir kişi web dünyasını 2560×1600 çözünürlükte izlerken 19” ile bakan bir kişi 1280×1024 çözünürlük ile bakabilir. Bu durumda küçük ekran ile bakan kişi, büyük ekran ile bakan kişinin gördüğünün yarısı kadar bir alan görüntüleyebilir. Bunu sadece iki farklı monitör ile değerlendirdik ama bu çeşitlendirme çok daha fazla olabilir. Örneğin 20”, 22” monitörler masaüstü bilgisayarlarda yaygın iken laptoplar üzerinde 15” ve 15.6” monitörler yaygındır. Ayrıca ayağın olmayan ama kullanılan monitör çeşitleri de mevcuttur. Ama internete bağlanmak için sadece monitörler kullanılmamaktadır. Bu gün itibari ile internete girişlerin %60’ı mobil cihazlar üzerinden yapılmaktadır. Bu durumda gelsin cep telefonları gitsin padler şeklinde çılgın bir ekran çözünürlüğü listesine ulaşmaya başlarsınız. Peki ama her çözünürlük için ayrı web sitesi mi tasarlamalıyız? Yani hayal etseniz her çözünürlük için bir web sitesi hazırlamak ortalama 6 ay gibi bir süre alacaktır. Bu sürenin içine tasarım ve arkaplan kodlama dahil olmayacak sadece görselleştirme için yazılacak HTML olacaktır.

İşte bu durumda HTML5 ve CSS3 ile hayatımıza giren Responsive kodlama hayat kurtarıcı olarak meydanlarda kendini göstermeye başlamıştır. Türkçe kelime anlamı olarak “Sorumlu Tasarım” şeklinde çevrilebilecek olan responsive tasarım adı gibi bir iddiada yaklaşım sergilemektedir. Bir web sitesi tüm kullanıcılar için sorumlu davranarak her çözünürlükte mümkün olan en iyi görüntüyü göstermelidir. Yani monitörden bağımsız olarak olabilecek en iyi çözünürlük aralıklarında tasarım değişerek kullanıcıya daha iyi bir kullanım deneyimi sunmalıdır.

Bu yazının amacı teknik anlatım olmadığından sizlere css kodlarını verecek değilim ama bazı başarılı örnekler ile responsive tasarım nedir konusunu tam anlatmaya çalışayım. Öncelikle sistemin responsive olup olmadığını anlamak adına yapılması gereken şudur. İnternet tarayıcınız (iyi internet deneyimi için iyi tarayıcı kullanın: chrome, firefox, yandex) ile bir web sitesine girdiğinizde tam ekran modundan çıkarak tarayıcının sağ kısmından tarayıcıyı küçültün. Eğer benim gibi çift monitör kullanıyorsanız büyütme yolu ile varsa farklı sonuçları da inceleyebilirsiniz.

chrome-responsive-goruntuleme

chrome-responsive-goruntuleme

  1. http://hellohikimori.com/

    hellohikimori.com - main

    hellohikimori.com – main

  2. http://www.bluestepstudio.it/

    Bluestepstudio---Digital-creative-studio

    Bluestepstudio—Digital-creative-studio

  3. http://www.thepowerinside.com/

    The-Power-Inside

    The-Power-Inside

  4. https://snipcart.com/
    Snipcart---Effortless

    Snipcart—Effortless-Shopping-Cart-for-new-or-existing-websites-using-any-CMS

  5. http://www.lucasnikitczuk.com.ar/

    Lucas-'NK'-Nikitczuk

    Lucas-‘NK’-Nikitczuk

Umarım keyifli bir yazı olmuştur. Yeni yazılarda görüşmek üzere.

Paylaşmak istediklerinizi bize gönderin