Responsive Web Tasarım Nedir?

Duyarlı web tasarımı, mobil cihazlarda, tabletlerde ve masaüstü ekranlarında çalışan web siteleri oluşturmak için kullanılan bir tekniktir. Uzun zaman önce, web siteleri tipik olarak dizüstü bilgisayar ve masaüstü ekran çözünürlükleri için özel olarak tasarlanmıştır. Bu web uyumlu akıllı telefonlar ve tabletler gelişine kadar iyi çalıştı. Web tasarımcıları yeni zorluklara sayısız çözümle yaklaştılar, ancak net kazanan Ethan Marcotte'nin 2010 yılının Mayıs ayında Responsive Web Design ile ilgili ilk makalesi oldu.

Duyarlı web tasarımı o zamandan beri çok değişti ve hatta son iki yılda bile gelişti. Web tasarımında tamamen yeni olsanız da veya yeni olanı öğrenmeniz gerekiyorsa, bu makale mevcut olanı öğrenmenize yardımcı olacaktır.

Duyarlı web tasarımı, web sayfanızın tüm cihazlarda iyi görünmesini sağlar.

Duyarlı web tasarımı sadece HTML ve CSS kullanır.

Duyarlı web tasarımı bir program veya JavaScript ürünü değildir.

css responsive tasarım

Neden responsive web tasarım yapmalıyız?


Web sayfaları farklı ekran boyutlarında bilgisayar, tabletler ve telefonlar gibi cihazlarla görüntülenir.

Tasarladığınız Web sayfanız her ekran boyutunda iyi görünmeli ve kullanımı kolay olmalıdır.

Web sayfaları sadece bilgisayar kullanıcıları için tasarlanmamalı, web sayfası her ekran boyutunda iyi görünecek şekilde yapılmalıdır.

Responsive tasarım : Herhangi bir cihazda harika görünmesini sağlamak için içeriği taşımak, büyütmek, küçültmek, gizlemek, yeniden boyutlandırmak için HTML ve CSS kullandığınızda, buna yanıt veren web tasarımı denir.

Bruce lee bir web geliştiricisi değildi bir röportajında dövüş teknikleri hakkında konuştuğu sözleri de duyarlı tasarımın özünü açıklıyor.

Zihnini boşalt, su gibi şekilsiz, Gölgesiz ol . Bir bardağa su koyarsanız, fincan olur. Bir şişeye su koyarsın ve şişe olur. Onu bir çaydanlık içine koydun, çaydanlık olur. Şimdi, su akabilir veya çökebilir. Su ol dostum. – Bruce Lee



responsive water

Responsive tasarımı, yapabilmek için dört ana ilkeyi bilmek gerekir :

Fluid Grids (AKIŞKAN IZGARALARI)

“Akışkan Izgarası” terimi, sabit piksel değerlerini kullanmak yerine hepsini diğer öğelerin yüzde oranlarında kodladığınız bir düzeni açıklar. Sonuç olarak, bileşenler su gibi akışkan ve cihaza uyar.

Geleneksel düzenlerde, öğeleri sabit genişlikli ızgaralar kullanarak konumlandırırsınız. Bununla birlikte, şu anda çok çeşitli ekran boyutları ile uğraşıyoruz. Böyle bir yaklaşım, web sitelerin görüntüsü, kötü bir şekilde ortaya çıkmasına yol açacaktır. Geleneksel CSS düzeni yaklaşımının bir örneğine bir bakalım:

responsive layaout

Sıvı Izgara yaklaşımı "yüzde oranlar" dan yararlanır, yani, her bir öğenin yüksekliğini ve genişliğini yüzde veya göreceli olarak kodlarsınız. Aşağıdaki örnekte, bileşenler "yüzde" yaklaşımı kullanılarak boyutlandırılmıştır:

responsive layaout

Bir web sitesi lcd ekranda olduğu gibi geniş bir formatta veya akıllı telefon gibi çok küçük bir ekranda görünebilir. Bu nedenle, duyarlı web siteleri piksel gibi sabit birimler yerine yüzde gibi göreceli birimlerle oluşturulur.

Piksel olarak tasarlamak için kullanılırsanız, yüzdeleri kullanmaya geçiş yapmanıza yardımcı olabilecek basit bir matematik formülü vardır:

hedef / bağlam = sonuç

Açıklama amacıyla, siteyi 960 piksellik bir genişliğe sahip bir sarmalayıcıya sahip bir web siteniz olduğunu ve bu siteye 1920 piksel genişliğinde bir ekranda maksimum bir tarayıcı penceresinde baktığınızı varsayalım. Bu durumda, tarayıcı penceresinin genişliği bağlamdır ve sarmalayıcı hedeftir . Sitenin tam olarak aynı görünmesi için, hedefi yüzde olarak almak için içeriği hedefe bölebilirsiniz.

960px / 1920px = % 50

Şimdi, sarıcı elemanın içine yerleştirilmiş çocuk elemanları? Aynı kural tüm website sütun oluştumada geçerlidir. Başka bir örnek olarak, 960 piksel genişliğindeki sitenizin içinde iki sütun düzeninizin olduğunu varsayalım. Sol sütun, 300 piksel genişliğinde bir kenar çubuğu ve sağ sütun, 640 piksel genişliğinde ana içerik alanıdır. Ayrıca iki sütun arasında 20 piksellik bir kenar boşluğu olmasını da istiyorsunuz. İşte neye benzeyebileceğini gösteren bir resim:

css responsive

Aynı formülü kullanarak, sitenin her bir bölümü aşağıdaki yüzde değerlere sahip olur:

Bu yüzde değerleri daha sonra bunların genişlik, kenar boşluğu ve dolgu özelliklerine uygulayarak CSS'de kullanılabilir.

Sıvı Görüntüler


Duyarlı bir web tasarımı yaklaşımında, Görüntülerin bir akışkan ızgarasının sınırları içinde küçülebilmesidir. Tüm görüntüler için maksimum genişlik tanımlamak için CSS kullanmanız gerekir, ancak minimum genişlik belirtilmemeli.

img { max-width: 100%; }

Maksimum genişlik belirterek, görüntünün görünüm kalitesini etkileyecek bir değerin ötesinde geçmesini engeleyebiliriz. Minimum genişlik tanımlamaksızın, CSS'nin boyutu herhangi bir değere küçültmesine izin vermiş olursunuz (içeriğe uymak için gereklidir).

CSS, en boy oranını korur ve bu nedenle görüntünüz gerilmeyecektir.

Medya sorguları (@media)


Medya sorguları, sitenin görüntülendiği cihazın özelliklerine, genellikle tarayıcının genişliğine göre farklı CSS stili kurallarını kullanmasına izin verir.

Medya sorguları, belirli durumlar için CSS yazmak için kullanılır; Bu, cihaz çözünürlüğüyle ilgili bilgilere dayanarak stilleri uygulamanıza olanak tanır. Genişlik, yükseklik, ekran yönü, görünüm oranı ve çözünürlük gibi özellikleri tespit etmek için ayarlanabilir. Ayrıca, çeşitli cihazlara göre düzen boyutlarını ve kurallarını değiştirmek için kullanılır.

CSS'de bazı kırılma noktaları belirtmek zorundayız.

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 320px) {}

javascript ile çözünürlüğe göre class eklemek veya silmek


Sitelerinizi mobil uyumlu hale getirmek için medya sorgularını javascript ile yapılabilir. medya sorguları için neden javascript kullanmalıyım diye soracak olursanız cevabı kısaca bazı çözünürlüğe geçerken bize sorun olacak bazı class isimlerini silmek veya eklemek gerekebilecektir.

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9096

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.