Responsive Web Sitesi

Responsive web sitesi nedir?

Nbsp tasarımı olarak da adlandırılan Responsive web tasarımı, web sitelerinin ve sayfaların, ister masaüstü, dizüstü bilgisayar, tablet, akıllı telefon olsun, ekrana otomatik olarak uyum sağlayarak tüm cihazlarda ve ekran boyutlarında oluşturulmasına (veya görüntülenmesine) izin veren modern bir web tasarım yaklaşımını tanımlar. hatta bir akıllı TV!

Responsive web tasarımı nasıl çalışır?

Responsive web tasarımı, ekran boyutuna, yönüne, çözünürlüğüne, renk özelliğine ve kullanıcının cihazının diğer özelliklerine bağlı olarak farklı stil özelliklerine hizmet etmek için çeşitli ayarlar kullanarak Basamaklı Stil Sayfaları (CSS) aracılığıyla çalışır. Responsive web tasarımıyla ilgili birkaç CSS özelliği örneği, görünüm ve medya sorgularını içerir.

Web sitem Responsive mı?

Bir web sitesinin yanıt verip vermediğini web tarayıcınızda hızlı bir şekilde görebilirsiniz.

• Google Chrome'u açın

• web sitenize gidin

• Chrome DevTools'u açmak için Ctrl + Shift + I tuşlarına basın

• Cihaz araç çubuğunu değiştirmek için Ctrl + Shift + M tuşlarına basın

• Sayfanızı mobil, tablet veya masaüstü perspektifinden görüntüleyin

Web sitenizdeki sayfaların mobil uyumlu olup olmadığını görmek için Google'ın Mobil Uyumluluk Testi gibi ücretsiz bir araç da kullanabilirsiniz . Uyarlanabilir tasarım gibi diğer tasarım yaklaşımlarıyla mobil uyumluluğu elde edebilirsiniz , ancak avantajları nedeniyle Responsive web tasarımı en yaygın olanıdır.

Responsive web tasarımı, web tasarımcıları ve işletme sahipleri için neden önemlidir?

Responsive web tasarımı, web tasarımcılarını, kullanıcı arayüzü tasarımcılarını ve web geliştiricilerini, var olan her farklı cihaz için web siteleri oluşturmak için gece gündüz çalışmaktan kurtarır. Ayrıca işletme sahiplerinin, pazarlamacıların ve reklamcıların hayatlarını kolaylaştırır. İşte birkaç fayda:

• Her cihaz için tek bir site: İster kablosuz bağlantıya sahip 27 inçlik bir iMac'te isterse Android telefonunuzun ekranından görüntüleniyor olsun, web sitesi kullanıcının optimum izleme keyfi için yapılandırılacaktır.

• Cihaz için en uygun tasarım: Responsive web tasarımı yaklaşımıyla, tüm resimler, yazı tipleri ve diğer HTML öğeleri, kullanıcının sahip olduğu ekran boyutunu en üst düzeye çıkararak uygun şekilde ölçeklendirilir.

• Yönlendirmelere gerek yok: Birden çok cihaz için tasarlamaya yönelik  diğer seçenekler  , kullanıcıyı bir web sayfasının uygun sürümüne göndermek için yeniden yönlendirmelerin kullanılmasını gerektirir. Yönlendirmeye ihtiyaç duymadan kullanıcı, bakmak istediği içeriğe en hızlı şekilde erişebilir.

Responsive web tasarımı, fiyat açısından da etkilidir. İki site yerine bir site olduğu için yönetmeniz de daha kolay. İki kez değişiklik yapmanız gerekmez.

Bunun yerine, tek bir web sitesinden çalışabilir ve güncelleyebilirsiniz.

Responsive Tasarım – Teknik Özellikler

Responsive tasarımın üç temel ilkesi vardır:

Akışkan Izgara Sistemi – Elemanlar, ekran ne kadar büyük veya küçük olursa olsun aynı alan yüzdesini kaplar (yani, tasarımları farklı cihazlarda görüntüleyen kullanıcılar). Bu, piksellerin nerede görüneceğini seçeceğiniz ve öğelerin sabit bir şekilde yukarı veya aşağı ölçeklenmesi için bir düzen boyutu tanımladığınız anlamına gelir. Tasarımınızın temeli için bir CSS (Basamaklı Stil Sayfaları) ızgara sistemi ve oluşturucu kullanırsanız daha kolaydır (bazıları ücretsiz olarak mevcuttur ). Bağlama göre hedef boyutu yüzde olarak hesaplamanız gerekir. Bu, tasarım özelliğinizin maksimum genişliğinin, kullanıcıların tarayıcısının maksimum genişliğine bölümüdür. Bu özellik yüzdelerini CSS komut dosyasındaki gerekli özelliklere uyguladığınızda, tek birkullanıcıların ekran boyutuna göre genişleyen veya küçülen tasarım.

Akışkan Görüntü Kullanımı – Metnin aksine, görüntüler doğal olarak akıcı değildir. Bu, bir cihazın ekranından diğerine aynı boyuta ve yapılandırmaya varsayılan oldukları anlamına gelir. Görünür bir risk, görüntüler ayarlanamayacağı ve bu nedenle diğer öğelerle orantısız görünebileceği için tasarımınızın cihazlar arasında tutarsız görünmesidir. Bu nedenle, daha küçük ekranlarda görüntünün küçülmesini sağlamak için bir CSS komutu—: img {max-width: 100%;}— uygulamanız gerekir. Birçok görüntü eklemek için başka bir CSS komutu kullanırsınız .

Medya Sorguları – Bunlar, tarama cihazının boyutlarını algılamak ve tasarımınızın uygun şekilde görünmesini sağlamak için kullandığınız filtrelerdir. Bunlarla, bir kullanıcının tasarımınızı hangi boyutta görüntülediğini belirlemek için araştırma yaparsınız. Bunlar, belirli koşulları karşılamak için site düzenini değiştirecektir. Bunları da CSS aracılığıyla dahil edersiniz ve en sık kullanılanlar min-width, max-width, min-height ve max-height'tır. Böylece, bir ekranın genişliğine, yüksekliğine, yönüne vb. bağlı olarak, tasarımınızın farklı kullanıcıların görmesi için nasıl oluşturulacağını doğru bir şekilde belirleyebilirsiniz.

Bootstrap, H5P, Gomo ve Elucidat gibi çeşitli araçlar arasından seçim yapabilirsiniz . Bu nedenle, her zaman programlama uzmanlığına sahip olmanız gerekmez.

Responsive Tasarım için En İyi Uygulama ve Hususlar

Responsive tasarımla, görseller, metinler ve düzenler olmak üzere her açıdan esneklik için tasarım yaparsınız . Öyleyse, şunları yapmalısınız:

1. "Önce mobil" yaklaşımını benimseyin :

   • Telefon boyutundaki tasarımları daha büyük ekranlara uyacak şekilde büyütün .

   • Mobil kullanıcıların büyük (>40 nokta) düğmelere ihtiyacı olduğunu daima unutmayın. Ayrıca, tasarımınız masaüstü eşdeğerlerine göre iki kat daha sezgisel olmalıdır , çünkü daha küçük ekranlarda iyi boyutlandırılmış öğelere ihtiyaç duyulması sıkışıklığa ve kafa karışıklığına neden olabilir.

2. Akışkan ızgaralar ve görüntüler oluşturun :

   • Görüntüleri kendi yerel boyutlarında oluşturun. Yeterli alanınız yoksa, etkiyi en üst düzeye çıkarmak için onları kırpın.

3. Yalnızca Ölçeklenebilir Vektör Grafikleri (SVG'ler) kullanın . Bunlar, etkileşimi ve animasyonları destekleyen 2D grafikler için XML tabanlı bir dosya formatıdır.

4. Üç veya daha fazla kesme noktası ekleyin (yani 3+ cihaz için tasarım).

5. İçeriği, kullanıcıların bağlamlarına uyacak şekilde önceliklendirin ve gizleyin . Görsel hiyerarşinizi kontrol edin ve kullanıcılara ihtiyaç duydukları öğeleri önce vermek için aşamalı açıklama ve gezinme çekmecelerini kullanın . Gerekli olmayan öğeleri (sahip olunması güzel şeyler) ikinci planda tutun.

6. Minimalizmi hedefleyin .

7. Tasarım kalıplarını uygulayın – Kullanıcılar için bağlamlarında kullanım kolaylığını en üst düzeye çıkarmak ve aşinalıklarını hızlandırmak için: örneğin, sütun bırakma kalıbı içeriği birçok ekran türüne sığdırır.

8. Yazı tipi boyutları/stilleri ile erişilebilirliği hedefleyin . Kontrast ve arka planı etkili bir şekilde kullanın. Başlıkları gövde metninden en az 1,6 kat daha büyük yapın. Bu oranlarda görünmesi için tüm metni Responsive hale getirin. Bazı kullanıcılar ekran okuyuculara güvendiğinden, resimlerin içindeki metinler yerine tüm metninizi "gerçek" yapın.

Genel olarak, Responsive tasarım güçlü ve ekonomik bir yaklaşımdır, ancak "kolay" doğası aldatıcıdır. Dikkatsiz kullanırsanız yine de zorluklarla karşılaşabilirsiniz