Duyarlı Web Tasarım İlkeleri

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 makalede, 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, aşağıdakileri kullanmayı içerir: maksimum genişlik bir öğeye sabit bir genişlik vermek yerine özellik. Ayrıca, yüzde (%), görüntü alanı yüksekliği (vh) veya görüntü alanı genişliği (vw) piksellerle mümkün olmayan uyarlanabilirliği geliştirmeye yardımcı olur (piksel). 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, genellikle aşağıdakilerin kullanıldığını göreceksiniz. geri ve em uzunluk birimleri yerine piksel birimler. Bunun nedeni, geri birim, tüm düzeni ölçeklendirmeyi çok kolaylaştırır. Varsayılan olarak 1rem 16 piksele eşittir çünkü öğenin yazı tipi boyutu, genellikle 16 piksel. 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. Yani, kullanmalısın % ile birlikte resimlerinizin boyutları için maksimum genişlik Emlak.

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. yeni keşfedebilirsiniz Duyarlı bir web sitesi yapmak için CSS özellikleri daha az zamanda.

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, sonraki yazı tipine geri döner. yazı tipi ailesi yığını. 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, bir bitmap biçimi kullanmak genellikle 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 bir kahraman bölümü içerir. duyarlı gezinme çubuğu, tanıtım metni ve medya ve bir CTA. 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. Chrome DevTools'u kullanabilirsiniz (deniz feneri) web sayfası kalitesini test etmek için.

İç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 şekilde konumlandırmak oldukça fazla çaba gerektirir. Birbirine bağımlı birçok unsuru yönetmekte de zorluk yaşamış olabilirsiniz. Bu nedenle, ilgili öğeleri bir kap veya kap 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, önce masaüstüne gitmelisiniz. günün sonunda olduğu gibi yaklaşın, konteyneri mobil cihazlarda üst üste istiflemeniz gerekecek cihazlar. Tamamen kişisel bir karar olmasına rağmen, mobil ilk yaklaşım, aşağıdakileri yapılandırmanıza yardımcı olur. HTML'yi daha iyi bir şekilde kullanırken, masaüstü öncelikli yaklaşım düzen ve boşluk konusunda size yardımcı olacaktır teknikler.

UX Tasarımını Öğrenmek İçin En İyi 6 Kurs

UX tasarımı öğrenmek veya becerilerinizi geliştirmek istiyorsanız, alabileceğiniz en iyi altı çevrimiçi kurs burada.

Sonrakini Oku

Yazar hakkında