Duyarlı Web Tasarım

You are currently viewing Duyarlı Web Tasarım
Linear Flat responsive web design layout website hero image vector illustration. App programming technology and software concept. Tablet, laptop, smartphone with wireframe.

Duyarlı Web Tasarım

Duyarlı Web Tasarım Nedir?

Duyarlı Web Tasarım olarak adlandırılan çalışmalar son yıllarda popüler hale gelmiş, web sitelerinde kullanımı olmazsa olmaz diyeceğimiz bir önem kazanmıştır. Bunun sebebiyse günümüzde mobil cihazların, mobil çözünürlüklü cihaz kullanımının artış göstermesi, insanların aramalarını mobil araçların üzerinden fazlaca yapmaya başlamış olmalarıdır. Duyarlı Web Tasarım tüm cihazlarda sayfanın iyi görünmesidir. Duyarlı Web Tasarım sayfayı yeniden boyutlandırırken, küçültürken veya büyültürken tüm cihazlarda sayfanın optimal görünmesini sağlar. Yani Duyarlı Web Tasarım (RWD), sunucunun tüm cihazlara her zaman aynı HTML kodunu gönderdiği ve sayfanın cihazdaki oluşturulma biçimini değiştirmek için CSS’nin (HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dili) kullanıldığı bir kurulumdur. Ekran boyutuna göre CSS ile HTML elemanlarının yeniden boyutlandırılması, gizlenmesi, küçültülüp, büyütülmesi veya başka bir alana taşınmasıdır.

Duyarlı Web Tasarım neden gereklidir?

Web sayfaları farklı ekran boyutlarında, bilgisayar, tablet veya telefon ile ziyaret edilir. Duyarlı Web Tasarım yapılmazsa sitemiz cep telefonundan veya tabletten giren ziyaretçiler tarafından kötü görünecek ve siteden hemen çıkılmasına sebep olacaktır. Tasarlamış olduğunuz web sayfaları her ekran boyutunda iyi görünmeli ve kullanımı kolay olmalıdır. Mobil kullanımının bu denli fazla olduğu bir dünyada web sayfaları sadece bilgisayar kullanıcıları için tasarlanmamalı, web sayfası her ekran boyutunda iyi görünecek şekilde yapılmalıdır.

Duyarlı Web Tasarım
Duyarlı Web Tasarım

Web siteler genel olarak yukarıdan aşağıya doğru bir tasarım ile yapılır. Çünkü kullanıcılar için web sitelerini yukarıdan aşağıya doğru gezmek daha kolaydır. Kullanıcılar tasarlamış olduğumuz sitede gezinmek için yatay kaydırma, sayfayı yakınlaştırma veya uzaklaştırma yapmak zorunda bırakılırsa kullanıcılar için iyi bir site olmayacak ve hemen siteden çıkacaklardır.

 

Sayfa taşmasının önlemek ve Duyarlı Web Tasarım için yapılması gerekenler;

Site bölümleri sabit genişlikte olmamalı veya çok geniş olmamalı

Web sayfamızda kullandığımız herhangi bir resim ekran boyutundan büyük olursa kullanıcı resmi görebilmek için sayfayı yatay olarak sağa sola kaydırmak zorunda kalır. Sitede kullanılan resimlerin veya bölümlerin genişliği ekran boyutu kadar veya ekran boyutundan daha küçük olması gerektiğini unutmayın.

Site genişliğinin herhangi bir cihazda iyi görünmesine aldanmayın

Kullanmış olduğumuz genişlik bilgisayar ve telefonda iyi görünebilir ancak tabletlerde iyi bir görüntü vermeyebilir. Bunun için bir cihazda iyi görünen genişlik değeri ve ölçü birimini kullanmayın.

Farklı ekran boyutları için farklı stil tanımlaması yapın

Android cihazlar birçok şekil ve boyuttadır, bu nedenle uygulamanızın düzeninin esnek olması gerekir. Diğer bir deyişle, düzeninizi belirli bir ekran boyutu ve en boy oranını varsayan katı boyutlarla tanımlamak yerine, düzeniniz farklı ekran boyutlarına ve yönelimlerine zarif bir şekilde yanıt vermelidir. Mümkün olduğunca çok sayıda ekranı destekleyerek, uygulamanız tek bir APK veya AAB kullanarak farklı cihazlara sahip en fazla sayıda kullanıcıya sunulabilir. Ayrıca, uygulamanızı farklı ekran boyutları için esnek hale getirmek, uygulamanızın kullanıcı çoklu pencere özelliğini etkinleştirdiğinde olduğu gibi cihazdaki pencere yapılandırma değişikliklerini işleyebilmesini sağlar. Aynı ilke, uygulamanız çalışırken ekran boyutunun ve en boy oranının değişebileceği katlanabilir bir aygıtta çalışırken de geçerlidir. Ekran boyutuna özel genişlik ve ölçü birimi için CSS medya sorguları kullanabilirsiniz.

Duyarlı Web Tasarım
Duyarlı Web Tasarım

Mutlak genişlik yerine göreceli genişlik değeri kullanın

Ekranı büyük cihazlar için hazırlanan siteyi Duyarlı Web Tasarım haline getirirken veya yeni Duyarlı Web Tasarımlar için “width: 960px” yerine “width: 90%” gibi göreceli genişlik değeri kullanmaya özen gösterin.

Duyarlı Web Tasarım Bütün Ekran Çözünürlüklerine Uyum Sağlar!

Duyarlı Web Tasarım kurgusunda hazırlanarak yayına alınan web sitesi; masaüstü bilgisayarlarda, yüksek çözünürlüklü dizüstü bilgisayarlarda görüntülendiği, okunaklı olduğu gibi; tablet bilgisayarlar, mobil telefonlar ve mobil cihazlarda bile okunaklı biçimde görüntülenecek, web sitesini ziyaret eden kullanıcı açısından kullanım memnuniyetine katkı sağlayarak web sayfanızda uzun süreler geçirmesine sebep olacaktır. Bütün bunların sonucunda web kullanıcısına kendinizi daha iyi tanıtma imkanına vakıf olacaksınız. Duyarlı Web Tasarım sitesini yapılandırırken; doğru tasarımla beraber doğru kodlama yapısıyla bir bütünlük elde ederek web sitenize giriş yapan kullanıcıların sempatisini kazanmakta zorlanmayacaksınız. Sonuçta web sitesi sahibi internet sitesini ziyaret eden kullanıcının ilgili sayfada sörf yaparken okumak istediği yazıları zorlanarak okumak zorunda kalmasını, ilgisini çeken fotoğrafları görmek için çaba sarf etmesini istemez. Güncel web teknolojileri eşliğinde Duyarlı Web Tasarım olarak şekillenebilen bir web sitesine sahip olmanızı gerektirecek oldukça fazla sebep var değil mi?

Taha Gezay
SEO Uzmanı / Writer

Ramazan GÖKSU

IT Constultant & Wordpress Developer & SEO Expert