Ana içeriğe atla

Bir Taşta 3 Tasarım: RESPONSIVE WEB TASARIMI


Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıkmıştır.


Temel olarak responsive tasarım; Tasarımın farklı ekran çözünürlüklerine göre uyum sağlamasıdır. Responsive olarak yapılmış bir web sitesinin tasarımı masaüstü bir bilgisayarda farklı görünürken ekran boyutu daha küçük olan mobil bir cihazda farklı görünecektir.


Responsive tasarım sayesinde masaüstü, tablet ve akıllı telefonlarda platform bağımsız bir şekilde uygun tasarımlar yapılabilir. Siteye mobilden girildiğinde tasarım farklılaşır, menüler telefonlara uyum sağlayacak şekilde küçülerek üzerine dokunulduğunda açılacak hale gelir, fontlar ekranı büyütmeden okunacak hale gelirken, resimler de ekran çözünürlüğüne göre esneyerek uygun şekilde görüntülenir. Frame ve diğer elementlerin de çözünürlüğe göre değişmesi sağlanır. Gerekirse gerçek tasarımda bulunan bazı modüller gizlenir. Burada farklı cihazların ekran çözünürlüklerini bilinmesi önem taşır. Genellikle; 


Masaüstü, Notebook için 1024px ve üzeri
Tabletler için
768px – 1023px
Akıllı telefonların yatay tasarımları ve bazı tabletler için.
480px – 767px
Akıllı telefonlar için:
479px ve altı


Bu çözünürlüklere göre css dosyasında örneğin 480px ve daha düşük ekranlar için;
@media screen and (max-width: 480px)

Kodu yazılarak css dosyası bu çözünürlük için düzenlenir.

Ayrıca Sayfanın responsive olması için
<meta name="viewport" content="width=device-width; initial-scale=1.0">

kodunun mutlaka head tagları arasında olması gereklidir.


Responsive tasarım sayesinde ayrı bir subdomain ya da sanal dizinde mobil site yapmaya gerek kalmaz. Herhangi bir yönlendirmeye gerek kalmaz. Ayrı bir url’ye gerek kalmaması arama motoru performansı açısından avantaj sağlar. Url yapısı ve sitenin indexlenmesi mobil site yapmaya göre daha da kolaylaşır.

Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.
Responsive sitelere mobil cihazlardan girildiğinde menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi gösterilir.
Arama motorlarında responsive siteleri ciddi şekilde destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna dikkat etmeksizin sonuçları sıralıyor.

Reponsive tasarımda farklı platformlar için farklı web siteleri yapamaya gerek kalmaz. Maliyeti daha düşük, yapılması daha kolaydır. Bakım, güncelleme ve geliştirme bakımından daha az vakit harcanır. Bu yüzden responsive web tasarımı son yıllarda popülerliğini sürdürmektedir.

Yorumlar

Bu blogdaki popüler yayınlar

İNSAN SİNİR SİSTEMİNİN TAKLİDİ: YAPAY SİNİR AĞLARI

Yapay sinir ağları; beynin bir işlevi yerine getirme yönteminin matematiksel olarak modellenmesi ile tasarlanan sistemlerdir. Yapay sinir ağları, paralel dağıtılmış ağlar, bağlantılı ağlar, nuromorfik ağlar gibi adlarla da tanımlanmaktadır. Yapay sinir ağlarının ortaya çıkışından kısaca bahsetmem gerekirse; ilk yapay sinir ağı modeli 1943 yılında bir sinir hekimi olan Warren McCulloch ve bir matematikçi olan Walter Pitts tarafından “ Sinir Aktivitesinde Düşüncelere Ait Bir Mantıksal Hesap ( A Logical Calculus of Ideas Immanent in Nervous Activity )” başlıklı makale ile ortaya çıkarılmıştır. Öncelikle insanlarda bulunan sinir hücresinin yapısını ele alalım. Dentrites (Dendritler): Dendritler dışarıdan uyartıları alan ve hücre gövdesine ileten yapılardır. Dendritlerin çok sayıda olması, hücrelerin pek çok nörondan sinyal alma kapasitesini arttırır. Nucleus (Çekirdek): Akson boyunca işaretlerin periyodik olarak yeniden üretilmesini sağlayan yapılardır. Axon (Akson): Ak...

Mobil Uygulama Geliştirme: FLUTTER

Son zamanlarda merak sardığım konulardan biri de mobil uygulama geliştirme oldu. Küçücük bir uygulamanın bile verdiği çıktı ile mutlu olduğumu görünce mobil uygulama geliştirmekten zevk aldığımı hissettim. Araştırıp öğrenmeye başladım ve kısa sürede uygulama geliştirip ve bu uygulamayı kullanmak gerçekten güzel bir duyguydu. Şimdi sizlere geliştirdiğim basit bir Todo uygulamasından bahsedeyim. Flutter SDK ve Dart programlama dilini kullanarak çapraz platform çalışan yapılacaklar listesi uygulamasıdır. Bu uygulamada, verileri devamlılığını sağlamak için SQLite3 kullandım. Uygulama hem iOS hem de Android işletim sisteminde çalışmaktadır. Neden Flutter’ı Seçtim? ·  Flutter ile uygulamanızda yaptığınız bir değişikliği hot reload özelliği ile hızlı bir şekilde görebilirsiniz. Yani compile etmek(derlemek) için artık uzun süreler beklemeye gerek yok. Örnek vermek gerekirse Flutter ile varsayılan olarak gelen increment uygulamasını android sdk ile çalıştırmak ortalama 3 dak...

TARIM 4.0

  Tarım 4.0 nedir, nasıl ortaya çıkmıştır? Yüzyıllar boyunca, ülkeleri ve genel olarak dünyayı şekillendiren birçok sanayi devrimi olmuştur. Endüstri 4.0, çalışma biçimlerini değiştiren en son sanayi devrimidir. Otomasyon, yapay zeka (AI) ve robotiğin yükselişinin yanı sıra İnternet ve giderek daha iyi teknoloji ile bağlantılı diğer ilerlemeleri ifade eder. Tarım endüstrisi de teknoloji ve çalışma alanındaki bu önemli değişimi yaşadı ve deneyimlemeye devam ediyor. ‘Tarım 4.0’ olarak anılıyor ve çiftçiliği yenilikçi ve kendine güvenen hale getirmeyi vaat ediyor. İşte son teknolojik gelişmelerin tarımı değiştirmesinin beklendiği üç temel yol şunlardır: Yapay zeka Yapay zeka, süreçleri çok daha verimli hale getirmek için tarım endüstrisi tarafından kullanıldı. AI, çeşitli makinelere ve ekipman parçalarına uygulanarak, sprinkler ve gübre gibi farklı cihazların işlerini daha etkin bir şekilde gerçekleştirmelerine olanak tanır. Bunun iyi bir örneği, karada büyük nesneleri taşımak, çekmek...