Responsive Tasarım Nedir? Nasıl Yapılır? Detaylı açıkladım.

merhaba arkadaşlar responsivenin detaylı açıklamasını yapayım istedim umarım faydalı olur
öncelikle
Responsive nedir? responsiveyi ben bukalemun hayvanına benzetirim. ne yapıyor bulunduğu yerin şeklini alıyor ağaçta bulunursa derisi hemen ağacın rengini alıyor bi şekilde kamuflash oluyor.
Responsive tasarımda sitelerinizde kullandığınız temaların esnekliğini sağlayan bir yapıdır. Sitenizi ziyaret eden kullanıcıların kullandığı ekran boyutuna göre sitenizin tasarımının şekil almasıdır. cepten siteye giriyorlar ee tabletten giriyorlar masaüstünden giriyorlar. siz şimdi tasarımı masaüstüne göre yaparsanız mobilden girenlerin ekranı kaycak bozuk bir görüntü alıcak işte responsive bu kadar önemli. Aynı zamanda Responsive Tema kullanırsanız, Mobil aramalarda siteniz daha üst sıralara çıkacaktır. Aynı zamanda İç SEO için en önemli noktalardan biridir.

Zaten google aramalarında bu site responsive değildir diye google uyarı verir.

Peki Responsive Tasarım Nasıl yapılır?
Responsive Tema tasarlayabilmek için birkaç etkili yöntem mevcut
Boostrapı duymuşunuzdur. yada hiç bilmeyenler için söyleyim Youtube ve Udemy Üzerinden birçok videosu vardır. Beğendiğiniz bir tanesini seçip izleyerek en kolay yoldan sitenizi Responsive bir şekilde tasarlamış olursunuz.

biraz tekniksel bahsedelim

• @media Etiketi –> Temanızı her çözünürlüğe aynı olarak düzenlersiniz. Temalarında “px” ile çalışanlar için tercih etmesi gereken bir yöntemdir.
• % ile Çalışma –> Yüzde ile çalıştığınızda başka hiçbir şey yapma zahmetine girmessiniz. Fakat tek sorun % ile çalışmak “px” ile çalışmaktan biraz daha zordur.

% ile çalışmak önemlidir arkadaşlar bir örnek veriyim size
sitenize reklam bannerı koyacaksınız bannerın genişliğide 600px yükseklik önemli değil. 600px genişliğindeki banner masaüstünde kayma yapmaz rahat sığıyor hatta yanına aynı boyutta bir banner daha koyarsınız. webien'de üst kısımda yanyana reklam görüyorsunuz bu güzel bir örnek.

peki bide siteye mobilden bakın ekranın yana doğru kaydığını göreceksiniz büyük bir boşluk olucak yanda peki nerde hata yaptık?
px olarak hesapladığımız için hata yaptık. mobile bir şey sığdırmak için herzaman %100 genişliğinde yapmamız gerekiyor.

örnek masaüstünde: <img src="manzara.jpg" width="600" height="300"/>
mobilde : <img src="manzara.jpg" width="%100" height="300"/>
yani biz responsive tasarım yapacaksak her zaman % olarak tasarlamalıyız siteyi

Eğer px ile responsive çalışacaksak şu yöntemleri kullanmamız gerekiyor.

• Mobil Tasarımlar için 768 px boyutundan daha küçük ölçülerle çalışma yapmalısınız.
• Tablet Tasarımlar için 768 px boyutundan daha küçük ölçülerle çalışma yapmalısınız.
• Masaüstü Tasarımlar için 992 px boyutundan daha küçük ölçülerle çalışma yapmalısınız.
• Büyük ekranlar için 1200 px boyutundan daha küçük ölçülerle çalışma yapmalısınız.

En önemlisi px ile çalışılacaksa mobil uyumu için @media etiketi zorunludur


@media ile tasarlama bu etiketi css dosyalarında sık sık görmüşünüzdür. bundan bahsedelim.

Html kodumuza eklemiş olduğumuz responsive.css dosyamızı düzenleme yapımıza geçmeden bilmemiz gereken bazı püf noktaları var. Kullanacak olduğumuz @media sorugusu için bazı matıksal operatörlere ihtiyaç duyabiliriz. bunlara aşağıdaki tablodan ulaşabilirsiniz.

@media Mantıksal Operatörleri

and iki veya daha fazla özelliği bir birine bağlar
only Sadece belirtilmiş koşullar sağlandığında uygulama işlemi gerçekleştirilmesi için kullanılır.
not Uygulanacak olan değer aralığında bu yapıyı kullanma anlamını taşır.
Birden fazla sorgu Kullanacak olduğunuz media tiplerinde ortak değerler var ise “,” virgül ile ayırarak aynı işlemi ilgili alanlara ataya bilirsiniz

Şimdi sırasıyla mantıksal operatörlerinin kullanımına bakalım.

– and

Ekran boyutu minumum genişlik 480 pixel ve maksimum genişlik 768 pixel aralğında davranışlarının değişmesini istediğimiz kod blokları için “and” yapısını kullandık.

– only

Ekran genişliği sadece maksimum genişlik 480 piksel olana kadar davranışlarının değişmesini istediğimiz kod blokları için “only” yapısını kullandık.

– not

Ekran genişliği maksimum genişlik 480 piksel dışında kalan alanlarda davranışlarının değişmesini istediğimiz kod blokları için “not” yapısını kullandık.



– Birden fazla sorgu

Yukarıda ki kullanıma baktığımızda ekran genişliği maksimum 480 piksele kadar p tagının rengini yeşil yap aynı zamanda çıktı alınacak olan yazının da p yapısının rengini yeşil yap demiş olduk iki farklı media tipi için ortak kullanım yapılarını “,” virgül ile ayırarak gruplamış olduk.


Sonuç olarak

• Responsive tasarlarken birçok teknik bulunmaktadır. Bu teknikler web geliştirirken size çok yardımcı olacaktır.
• Kolay yoldan responsive çalışmak istiyorsanız Boostrap ile Çalışmalısınız.
• PX ile çalışmak bana daha rahat geliyor derseniz PX ile çalışmalısınız fakat @media ile tasarlamayı öğrenmeniz gerekmektedir.
• Temanızda resim kullanacaksanız vektörel çizilmiş resim olmalıdır. Bu sayede resmi ne kadar büyültüp küçültsenizde resmin kalitesinde sorunlar olmayacaktır.
• Adsense reklamlarınızı mobil uyumlu hale getirin.

şimdi size responsive tasarımı ile ilgili bir video paylaşıyorum. Videoyu paylaşanıda tebrik ediyorum bundan güzel anlatılamazdı.

Cok guzel bir kaynak tesekkurler

yararlı konu ilgili arkadaşlara duyurulur !

Güzel paylaşım teşekkürler hocam

elinize sağlık

Elinize Sağlık

Cok saolun güzel anlatım

teşekkürler