1. Ana Sayfa
  2. Yazılım

Responsive Tasarım Nedir?

Responsive Tasarım Nedir?
responsive-tasarim
+ - 0

Responsive Tasarım için Başlangıç ​​Kılavuzu (Kod Örnekleri ve Düzen Örnekleri)

Giderek artan bir şekilde mobil cihazlardan erişilen internetle birlikte , yalnızca bilgisayar ekranında iyi görünen statik bir web sitesi tasarımına sahip olmak artık yeterli değil . Tasarım yaparken tabletleri, 2’si 1 arada dizüstü bilgisayarları ve farklı ekran boyutlarına sahip farklı akıllı telefon modellerini de göz önünde bulundurmalısınız.

Responsive Tasarım(Duyarlı Tasarım) ile web sitenizin cep telefonlarında, tabletlerde, dizüstü bilgisayarlarda ve masaüstü ekranlarında en iyi şekilde görünmesini sağlayabilirsiniz ve bu gelişme daha yüksek dönüşümler anlamına gelir.

Responsive Tasarım Nedir?

Responsive Tasarım, web içeriğinizin çeşitli cihazların farklı ekran ve pencere boyutlarına uyarlanmasını sağlayan bir web tasarımı yaklaşımıdır.

Örneğin, içeriğiniz masaüstü ekranlarında farklı sütunlara ayrılabilir, çünkü bunlar bu tasarımı barındıracak kadar geniştir. İçeriğinizi bir mobil cihazda birden çok sütuna ayırırsanız, kullanıcıların okuması ve etkileşim kurması zor olacaktır.

Responsive Tasarım, içeriğinizin ve tasarımınızın ekran boyutuna bağlı olarak farklı cihazlara birden fazla bıyutta tasarlamayı sağlar.

Responsive Tasarım ve Adaptive Tasarım

Responsive tasarım ve Adaptive tasarım arasındaki fark, adaptive tasarımın tek sayfalı bir sürümün oluşturulmasını sağlamasıdır. Buna karşılık, responsive tasarım, aynı sayfanın tamamen farklı birden çok sürümünü sunar.

responsive-nedir

Her ikisi de web  yöneticilerinin sitelerinin farklı ekranlarda nasıl göründüğünü kontrol etmelerine yardımcı olan çok önemli web tasarım trendleridir , ancak yaklaşım farklıdır.

Responsive Tasarım, kullanıcılar cihazdan bağımsız olarak tarayıcıları aracılığıyla aynı temel dosyaya erişirler, ancak CSS kodu düzeni kontrol eder ve ekran boyutuna göre farklı şekilde oluşturur. Adaptive tasarımda, ekran boyutunu kontrol eden ve ardından o cihaz için tasarlanmış şablona erişen bir komut dosyası vardır.

Responsive Tasarım Neden Önemlidir?

Web tasarımında, geliştirmede veya blog yazarlığında yeniyseniz, responsive tasarımın ilk etapta neden önemli olduğunu merak ediyor olabilirsiniz.

Cevap basit. Artık tek bir cihaz için tasarım yapmak yeterli değil. Trafiğin bir çoğu mobil tarafından gelmektedir. Potansiyel ziyaretçilerinizin yarısından fazlası internette gezinmek için bir mobil cihaz kullanıyor ve onlara yalnızca masaüstü için tasarlanmış bir sayfa sunamazsınız. Okuması ve kullanması zor olacak ve kötü kullanıcı deneyimine yol açacaktır.

Responsive Tasarımın Yapı Taşları

Bu bölümde, responsive web sitesi tasarımının altında yatan temeli ve farklı yapı taşlarını ele alacağız.

  1. CSS ve HTML
  2. Media Queries
  3. Fluid Layouts
  4. Flexbox Layout
  5. Responsive Images
  6. Speed

CSS ve HTML

Duyarlı tasarımın temeli, herhangi bir web tarayıcısında bir sayfanın içeriğini ve düzenini kontrol eden iki dil olan HTML ve CSS’nin birleşimidir.

html vs css

HTML esas olarak bir web sayfasının yapısını, öğelerini ve içeriğini kontrol eder. Örneğin, bir web sitesine resim eklemek için aşağıdaki gibi HTML kodunu kullanmanız gerekir:

<img src="image.gif" alt="image" class="full-width-img">

Daha sonra CSS koduyla hedefleyebileceğiniz bir “class” veya “Id” belirleyebilirsiniz . Örneğin, tüm HTML görüntülerinin genişliğini aşağıdaki gibi öğe düzeyinde düzenleyebiliriz:

img {
width: 100%;
}

veya önüne bir nokta ekleyerek belirli bir “tam genişlikli-img” sınıfını hedefleyebiliriz.

.full-width-img {
width: 100%;
}

Media Queries (Media Sorguları)

Bir medya sorgusu ekran boyutu veya çözünürlüğü gibi farklı faktörlere uyumlu içerik oluşturmanızı sağlar. CSS3‘ün temel bir parçasıdır.

media queries

Bazı programlama dillerindeki “if cümlesi”ne benzer şekilde çalışır, uygun kodu çalıştırmadan önce temel olarak bir ekranın görüntüsünün yeterince geniş veya çok geniş olup olmadığını kontrol eder .

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}}

Ekran en az 780 piksel genişliğindeyse, “tam genişlikli img” sınıfındaki görüntüler ekranın %90’ını kaplayacak ve eşit genişlikte kenar boşluklarıyla otomatik olarak ortalanacaktır.

Fluid Layouts

Fluid Layouts, modern duyarlı tasarımın önemli bir parçasıdır. Eski güzel günlerde, her HTML öğesi için 600 piksel gibi statik bir değer belirlerdiniz.

Değişken bir düzen, bunun yerine görünüm alanı genişliğinin yüzdesi gibi dinamik değerlere dayanır.

fluid layout

Bu yaklaşım, ekranın boyutuna bağlı olarak farklı container öğesi boyutlarını dinamik olarak artıracak veya azaltacaktır.

Flexbox Layout

Yüzdeye dayalı bir düzen akıcı olsa da, birçok tasarımcı ve web geliştiricisi bunun yeterince dinamik veya esnek olmadığını düşündü. Flexbox, container içindeki içeriğin boyutu bilinmediğinde bile birden çok öğeyi düzenlemenin daha verimli yolu olarak tasarlanmış bir CSS modülüdür.

Flex Container, öğeleri mevcut boş alanı dolduracak şekilde genişletir veya taşmayı önlemek için küçültür. Bu esnek conatinerlar, normal bir HTML öğesiyle düzenleyemeyeceğiniz bir dizi benzersiz özelliğe sahiptir.

flexbox nedir

Bu karmaşık bir konudur, bu yüzden tasarımınızda kullanmak istiyorsanız Flexbox konusunu detaylıca araştırmanızı öneririm.

Responsive Images

Responsive görüntüler genişliği veya yüksekliği kontrol etmek için dinamik bir birim kullanarak akıcı bir düzen ile aynı konsepti takip eder. Daha önce ele aldığımız örnek CSS kodu bunu zaten başarıyor:

img {
width: 100%;
}

% birimi, görünüm alanının genişliğinin veya yüksekliğinin yüzdesine göre görüntünün ekranla orantılı kalmasını sağlar. Bu yaklaşımla ilgili sorun, her kullanıcının mobilde bile tam boyutlu görüntüyü indirmesi gerektiğidir.

Farklı cihazlar için ölçeklendirilmiş farklı sürümler sunmak için, srcset aralarından seçim yapabileceğiniz birden fazla resim boyutu belirtmek için HTML etiketi olan img’yi kullanmanız gerekiyor.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"/>

WordPress, yazılara veya sayfalara dahil edilen resimler için bu işlevi otomatik olarak kullanır.

Speed (Hız)

Web siteniz için duyarlı bir tasarım oluşturmaya çalıştığınızda, yükleme hızı birinci öncelik olmalıdır .

2 saniyede yüklenen sayfaların ortalama hemen çıkma oranı %9 iken 5 saniye süren sayfaların hemen çıkma oranı %38’dir. Yanıt verme yaklaşımınız, sayfanızın ilk oluşturmasını gereğinden fazla engellememeli veya geciktirmemelidir.

Sayfalarınızı daha hızlı hale getirmenin birkaç yolu vardır. Resimlerinizi optimize etmek , önbelleğe alma , küçültme uygulamak , daha verimli bir CSS düzeni kullanmak vb.

Responsive Ekran Boyutları

  • Mobile: 360 x 640
  • Mobile: 375 x 667
  • Mobile: 360 x 720
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • Tablet: 768 x 1024
  • Laptop: 1366 x 768
  • High-res laptop or desktop: 1920 x 1080

Yazar Hakkında

Bu Yazıyı Yorumla