(Html-Css Ders 34) Responsive Tasarım Nedir ?

💬 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 çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu.
Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanı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.
Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor.
Bu videoda Responsive tasarımdan ve viewport meta etiketinden bahsettik.Web sitenizde responsive tasarımlar oluşturmak için yapılması gereken tüm adımlara ve media query oluşturmaya da değindik.
🔔 Daha Fazla Türkçe Yazılım Eğitimi Videosu İçin Abone Olabilirsiniz
✅ Tüm Udemy kurslarımın linki: linktr.ee/emirozdemir
✅ Discord Sunucumuza Katılmak İçin Tıklayın : / discord
✅ Github linki : github.com/emirgorkemozdemir/...
✅ Html-Css oynatma listesi : • Html ve Css Dersleri 2022
✅ C# oynatma listesi : • C# Dersleri 1 | Visual...
--------------------------------------------------------------------
emir özdemir html
html ve css site yapımı
css dersleri
css dersleri 1
xhtml ve css dersleri
xhtml (html) ve css dersleri (türkçe)
html ve css ile web sitesi yapımı
html dersleri 7
html ve css dersleri
html ve css ile site yapımı
html ve css ile web sitesi yapımı
html ve css ile kişisel web site yapımı
html ve css ile sıfırdan site kodlama
html ve css ile menü yapımı
html ve css nedir
html ve css ile web site yapımı
html ve css birleştirme
html ve css site yapımı
html ve css den sonra
xhtml (html) ve css ders
html ve css eğitimi
html dersleri css
html ve css ile web sitesi yapma notepad
html ve css ile oyun yapımı
html ve css kodları ile site yapımı
html ve css nasıl öğrenilir
html ve css ne işe yarar
html ve css ne kadar sürede öğrenilir
xhtml ve css dersleri
html ve css öğrenmek
html ve css öğrenme
html ve css öğren
html ve css öğrenmek ne kadar sürer
html ve css test soruları
html ve css tabanlı kişisel web sitesi yapımı
xhtml (html) ve css dersleri (türkçe)
css ve html
html ve css ile yapılmış site örnekleri
html dersleri
html css dersleri
html css
html5
html ile web sitesi yapımı
html5 dersleri
html css site yapımı
html site yapımı
html css javascript
html arka plan resmi yapma
html admin paneli yapımı
html and css
html arama motoru yapma
html arama kutusu yapımı
html and css website design
html ana sayfa yapma
html arka plana müzik ekleme
a html program
html iframe
html başlangıç
html buton ekleme
html basit site yapımı
html butona link verme
html button
html bootstrap
html button link verme
html başlangıç dersleri
html css js
html css javascript dersleri
html css js dersleri

[@selcenyagcoglu7634]

Selamlar .Bu responsive olayı bu kadar basitmi?O zaman neden bootstrap gibi bi kütüphane yapmışlar.Ayrıca bu ux/uı tasarım varmış o nedir?Responsive olayını ve less ve sass olaylarınıda geniş anlatırsanız iyi olur

Responsive tasarım bu kadar basit değil büyük bir proje yaptığınızda oluşturduğunuz her element için ekran küçüldüğünde ne olacağını ayarlamanız gerekiyor. Ben sadece burada bir tane element için media query yaptım.Sayfadaki tüm elementlerin ekran küçüldüğünde ayarlanması gerekiyor .

Bootstrap hazır bir kütüphanedir ve responsive'dir. Genelde sadece php veya asp çalışırken , html ile uğraşmamak için kullanıyorum ben . Örneğin ASP çalışacağım ama elimde kodlayacak site yok , o zaman bootstrap kullanarak hızlıca basit sayfalar oluşturulabiliyor .