Altın Konu Duyarlı Web Tasarım İlkeleri

Replicant · 10 Eki 2021

Günümüzde, tarayıcıya veya cihaza bağlı olarak kullanıcı arayüzünü ayarlayan bir web sitesi veya uygulama oluşturmak yaygın bir uygulamadır. Bu hedefe ulaşmak için iki yaklaşım vardır. Birincisi, farklı cihazlar için web sitenizin veya uygulamanızın farklı sürümlerini oluşturmayı içerir. Ancak verimsizdir ve öngörülemeyen hatalara yol açabilir.

Güvenilir, geleceğe dönük bir yaklaşım arayışında, duyarlı veya uyarlanabilir tasarım icat edildi. Farklı tarayıcılara veya cihazlara otomatik olarak uyum sağlayan mizanpajınızın tek bir sürümünü oluşturmaya odaklanır.

Bu yazıda, duyarlı web tasarımı ve harika bir web sitesi yapmanıza yardımcı olacak temel ilkeleri öğreneceğiz.

Duyarlı Web Tasarım Malzemeler

Duyarlı web tasarımı göründüğü kadar karmaşık değildir. Bu, sıfırdan öğrenmeniz gereken ayrı bir teknoloji değil, CSS yazarken kullanabileceğiniz bir dizi uygulamadır. Farkında olmadan bu ilkelerin birçoğunu zaten takip ediyor olabilirsiniz. Duyarlı web tasarımını dört bileşenini keşfederek anlayabilirsiniz: akıcı düzenler, duyarlı birimler, esnek görüntüler ve medya sorguları.

Akışkan Düzenleri

Akışkan bir düzen ile, mevcut görüntü alanı genişliğine ve yüksekliğine uyum sağlayan web sayfaları oluşturabilirsiniz. Yaygın uygulama, bir öğeye sabit bir genişlik vermek yerine maksimum genişlik özelliğinin kullanılmasını içerir. Ayrıca, yüzde ( % ), görüntü alanı yüksekliği ( vh ) veya görüntü alanı genişliği ( vw ) kullanmak, piksellerle ( px ) mümkün olmayan uyarlanabilirliği geliştirmeye yardımcı olur . Bu nedenle, bir dahaki sefere bir düzen oluştururken, bu küçük değişiklikleri uyguladığınızdan ve duyarlı tasarım tekniklerinden yararlanmaya başladığınızdan emin olun.

Duyarlı Birimler

Daha gelişmiş CSS'ye geçtiğinizde, uzunluk için genellikle px birimleri yerine rem ve em birimlerinin kullanıldığını göreceksiniz . Bunun nedeni, rem ünitesinin tüm düzeni ölçeklendirmeyi çok kolaylaştırmasıdır. Varsayılan olarak 1rem, 16 piksele eşittir çünkü <html> öğesinin yazı tipi boyutuyla orantılıdır , genellikle 16 pikseldir. Ancak, daha kolay hesaplamalar için üst düzey yazı tipi boyutunu ayarlayarak 1rem'i 10 piksele (veya başka bir değere) ayarlayabilirsiniz.

Esnek Görüntüler

Görüntüler, en temel düzeni tasarlarken bile en önemli husustur. Tasarıma uymaları için her zaman uygun şekilde boyutlandırmaya özen göstermelisiniz. Ayrıca, varsayılan olarak, görünüm alanındaki değişikliklerle ölçeklenmezler. Bu nedenle, resimlerinizin boyutları için max-width özelliğiyle birlikte % kullanmalısınız .

Medya sorguları

Medya sorgularını kullanarak duyarlı sitelere hayat verebilirsiniz. Akışkan ızgaralar başlamak için iyidir, ancak düzenin bozulmaya başladığı birkaç nokta olduğunu göreceksiniz. Bu görüntü alanı genişlikleri için kesme noktaları eklemek, düzeni farklı cihazlar için ayarlar. Medya sorguları, medya özelliği testlerinin sonuçlarına göre seçici olarak CSS uygulamanıza yardımcı olur. Daha kısa sürede duyarlı bir web sitesi yapmak için yeni CSS özelliklerini keşfedebilirsiniz.

Duyarlı Web Tasarım İlkeleri

Duyarlı web tasarımı, çoklu ekran sorunları söz konusu olduğunda bir kurtarıcı olsa da, başvurmanız gereken sabit bir fiziksel kısıtlamanız olmayabilir. Bu nedenle, duyarlı bir düzen tasarlarken başlamak için altı temel duyarlı web tasarım ilkesi vardır.

İçerik Tabanlı Kesme Noktaları Kullanın

Temel tasarım ilkelerinden biri, web sitesi tasarımınızın içeriği desteklemesi gerektiğini, bunun tersini değil. Videolar, fotoğraflar gibi medya içeriği ve uzun ve kısa web kopyası gibi metin içeriği tüm ekranlarda en iyi şekilde oluşturulmalıdır. Duyarlı web tasarımının anahtarı, cihaz tabanlı olanlar yerine içerik tabanlı kesme noktaları kullanmaktır.

Web Yazı Tiplerini ve Sistem Yazı Tiplerini Akıllıca Seçin

Web yazı tipleri çarpıcı görünüyor! Tasarımınızı havalı görünümlü web yazı tipleriyle değiştirmek için sayısız seçeneğiniz var. Ancak tarayıcıların her bir web yazı tipini indirmesi gerekeceğini bilmelisiniz. Daha fazla web yazı tipi, daha fazla indirme süresi. Buna karşılık, sistem yazı tipleri ışık hızındadır. Kullanıcının yerel aygıtında adlandırılmış bir sistem yazı tipi yoksa , yazı tipi ailesi yığınındaki bir sonraki yazı tipine geri döner . Bu nedenle, yazı tiplerini seçerken yükleme süresini ve tasarım talebini dikkate aldığınızdan emin olun.

Bitmap Görüntülerini ve Vektörlerini Optimize Edin

Web sitenizde içeriği destekleyen farklı simgeler var mı? Simgeleriniz çok fazla ayrıntı içeriyorsa, genellikle bir bitmap biçimi kullanmak iyi bir uygulamadır. Öte yandan, vektör biçimleri, güzel bir şekilde yukarı ve aşağı ölçeklenen simgeler için gitmenin yoludur. Vektörler genellikle küçüktür, ancak dezavantajı, bazı eski tarayıcıların onları desteklememesidir. Ayrıca, görüntünün çok ayrıntılı olduğu gibi vektörlerin bitmaplerden daha ağır olduğu durumlar da vardır. Bu nedenle, bitmap görüntülerinizi ve vektörlerinizi çevrimiçi olmadan önce daima optimize ettiğinizden emin olun.

Duyarlı İlk Katlama Testlerini Gerçekleştirin

Bir web sitesinin ilk katı, ziyaretçilerin herhangi bir kaydırmadan önce, ilk yüklendiğinde gördükleri görünümdür. Genellikle duyarlı gezinme çubuğu , tanıtım metni ve medyası ve bir CTA içeren bir kahraman bölümü içerir . Duyarlılık yalnızca mobil cihazlarla sınırlı değildir. Tabletleri, oyun konsollarını ve diğer ekranları da göz önünde bulundurmalısınız. Bu nedenle, anahtar, en azından web sitesinin ilk kat görünümü için sık sık testler yapmaktır. Web sayfası kalitesini test etmek için Chrome DevTools'u ( Lighthouse ) kullanabilirsiniz.

İçeriği Daha Küçük Ekranlarda Gizlemeyin

Çoğu kişi, mobil kullanıcıların her zaman acelesi olduğunu, küçük boyutlu bilgi aradığını, masaüstü kullanıcıları ise daha uzun biçimli içerikle ilgilendiğini varsayıyordu. Bugünün dünyasında bunun doğru olmadığını artık biliyoruz. İnsanlar her yerde mobil cihazlar kullanıyor, eksiksiz içerik ve tüm hizmetlere tam erişim arıyor. İçeriği gizlemek yerine, düzeni ve kesme noktalarını mümkün olduğunca kolay ve zahmetsizce sunmak için yönettiğinizden emin olmalısınız.

İç İçe Nesneleri Kullanarak Düzeni Yönetin

Bir site düzeni oluşturmak ve öğeleri doğru bir şekilde konumlandırmak iyi bir çaba gerektirir. Birbirine bağımlı birçok unsuru yönetmekte de zorluk yaşamış olabilirsiniz. Bu nedenle, ilgili öğeleri bir kapsayıcıya veya <section> içine sarmayı düşünmelisiniz . Bu, birkaç öğeyi yerleştirme görevini, yalnızca tek bir öğeyi yerleştirdiğiniz bir öğeye indirmenize yardımcı olur.

Duyarlı Tasarım: Önce Masaüstü mü, Mobil mi Önce Gitmelisiniz?

Önce masaüstü yaklaşımı, büyük ekranlar için CSS yazacağınız ve ardından daha küçük ekranlar için tasarımı küçültmek için medya sorguları uygulayacağınız anlamına gelir. Buna karşılık, önce mobil yaklaşım, daha küçük ekranlı mobil cihazlar için CSS yazmayı ve ardından tasarımı daha büyük ekranlar için genişletmek üzere medya sorguları uygulamayı içerir. Ana odak, web sitesini ve uygulamaları mutlak temellere indirgemektir.

Duyarlı web geliştirme ile yeni başlıyorsanız, günün sonunda olduğu gibi masaüstü öncelikli yaklaşıma gitmelisiniz, konteyneri mobil cihazlarda birbiri üzerine istiflemeniz gerekecektir. Tamamen kişisel bir karar olmasına rağmen, mobil öncelikli yaklaşım HTML'yi daha iyi bir şekilde yapılandırmanıza yardımcı olurken, masaüstü öncelikli yaklaşım düzen ve boşluk tekniklerinde size yardımcı olacaktır.

DumanInc · 10 Eki 2021

Paylaşımın İçin Teşekkürler

Replicant · 10 Eki 2021

tuzlareyna' Alıntı:
Paylaşımın İçin Teşekkürler

Rica ederim.

dvrzener · 22 Mar 2022

Paylaşım için teşekkürler. Çeşitli uygulamalar kullanarak

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

alanında bir altyapı oluşturdum şimdiye kadar fakat artık bu işin piri olmak istiyorum ve araştırma yapıyorum. Hangi uygulamaları hangi dilleri öğrenip kullanmak daha yararlı olur? Kullanıcıların yönelimleri ve revaşta olan programlama dilleri hangisi vs. Bilgilendirirseniz sevinirim.

ByMoDuS · 24 Mar 2022

Paylaşım için teşekkürler.

Altın Konu Duyarlı Web Tasarım İlkeleri

Replicant

Ehlî olmuşum elemlerin