Web tasarımcıları yıllardır duyarlı tasarımı savunuyorlar, ancak bu nedir ve nasıl üstün web sayfaları üretebilir?
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 bit eşlem 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, web sitesinin en azından 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 ş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 kapsayıcıya veya > 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ü, Önce Mobil mi Kullanmalısınız?
Ö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.
