MENÜ

Projeleriniz İçin Teklif Alın

Hayata geçirmek istediğiniz pojeleriniz için teklif alabilirsiniz. En kısa sürede dönüş yapılacaktır.

Responsive Web Tasarım | Nc Bilişim Web Tasarım E-ticaret Hosting Çözümleri

Responsive Web Tasarım

Responsive Web Tasarım

Responsive web design veya Türkçe karşılığı duyarlı web tasarımı tasarlanan sayfanın tüm ekranlarda iyi görünmesi sağlayan tekniktir.

Responsive Tasarım Nasıl Olur?

Responsive design’ın amacı, farklı boyutlarda cihazlarda görüntülendiğinde farklı tepki veren farklı unsurlara sahip olan bir siteye sahip olmaktır.


Geleneksel bir “sabit” web sitesini ele alalım. Örneğin bir masaüstü bilgisayarda görüntülendiğinde, web sitesi üç sütun gösterebilir. Ancak, aynı düzenini daha küçük bir tablette görüntülediğinizde sizi yatay olarak kaydırmaya zorlayabilir; bu da kullanıcıların hoşlanmadığı bir şeydir. Ya da tablette öğeler görünmeden gizlenebilir veya bozuk görünebilir. Çoğu tabletin dikey yönde izlenebileceği veya yatay görünümde yatay olarak döndürülebileceği gerçeği de etkisini azaltmaktadır.


Küçük bir akıllı telefon ekranında, web sitelerini görmek daha da zor olabilir. Büyük resimler düzgün görünmeyebilir. Web sitelerinde bulunan grafikler büyük boyutlu ise akıllı telefonlara yüklenmesi yavaş olabilir.


Bununla birlikte, bir site responsive design kullanıyorsa, tablet sürümü otomatik olarak yalnızca iki sütunu görüntüleyecek şekilde ayarlanabilir. Bu şekilde içerik okunabilir ve kolaylıkla site içinde dolaşılabilir. Akıllı telefonda, içerik belki dikey olarak tasarlanmış tek bir sütun halinde görünebilir. Ya da kullanıcı diğer sütunları görmek için hızlıca kaydırma özelliğine sahip olur. Responsive design sayesinde eksik görüntülenen veya kayan görüntüler yerine görüntüler yeniden boyutlandırılacaktır.


Özetle, resposive web design, görüntüleyen kişinin kullandığı cihaza göre web sitesini otomatik olarak ayarlar.


Responsive Tasarım Nasıl Çalışır?

Responsive web sitelerinde, değişken ızgaralar kullanılır. Tüm sayfa öğeleri, piksel yerine orantıya göre boyutlandırılır. Dolayısıyla, üç sütununuz varsa, bunların her birinin ne kadar geniş olması gerektiğini değil diğer sütunlarla ilişkili olarak ne kadar geniş olması gerektiğini ayarlarsınız. Sütun 1 sayfayı yarısı kadar, sütun 2 yüzden 30, sütun 3 yüzde 20’lik artışlar ile ayarlanmalıdır. Görüntüler gibi ortamlar da nispeten yeniden boyutlandırılır. Bu şekilde bir görsel, görsel sütununda veya göreceli tasarım öğesinde kalabilir.


Responsive Web Design ile İlgili Konular

Mouse ve Touchpad: Mobil aygıtlar için tasarım yapmak mouse yerine touchpad sorununu da beraberinde getiriyor. Masaüstü bilgisayarlarda kullanıcı normalde gezinmek ve öğeleri seçmek için bir mouse kullanır. Akıllı telefon veya tablette, kullanıcı çoğunlukla parmaklarını kullanıyor ve ekrana dokunuyor. Bir fare ile kolayca seçebileceğiniz şey, ekrandaki küçük bir nokta olduğu için parmakla seçmek zor olabilir. Web tasarımcısı olarak bu noktada “dokunmatik” düşünmelisiniz.


Grafikler ve İndirme Hızları: Ayrıca, grafikler ve reklamların indirme hızı sorunu da var. Mobil cihazlarda, bir sitenin bir akıllı telefona yüklenmesinin sonsuza dek sürmemesi için, masaüstü görünümlerden daha az grafik görüntülemek akıllıca olabilir. Daha küçük reklamlar için daha büyük reklam boyutlarının değiştirilmesi gerekebilir.


Uygulamalar ve Mobil Versiyonları: Geçmişte, web siteniz için bir uygulama oluşturmayı düşünmüş olabilirsiniz. Bu bir iPad uygulaması veya bir Android uygulaması olabilir. Ya da BlackBerry için özel bir mobil sürümün tasarlamış olabilirsiniz.


Ancak bugün pek çok farklı cihazla, her cihaz ve işletim platformu için uygulamalar ve sürümler oluşturmak daha da zorlaşıyor. Birden fazla cihazda izlenebilecek kadar esnek olan bir responsive design çok daha mantıklı olacaktır.


Telefon
WhatsApp