Küçük ekranda görüntülenen bir tasarım, büyük ekran düzeninin küçültülmüş sürümüne benzememelidir. Benzer şekilde, büyük ekranda görüntülenen bir tasarım, küçük ekran düzeninin şişmiş sürümü gibi görünmemelidir. Bunun yerine, tasarımın tüm ekran boyutlarına uyum sağlayabilecek kadar esnek olması gerekir. Başarılı bir duyarlı tasarım her form faktöründen en iyi şekilde yararlanmanızı sağlar.
Bu da, görüntülendikleri bağlama bağlı olarak bazı arayüz öğelerinin oldukça farklı görünmesi gerektiği anlamına gelir. Farklı ekran boyutlarından en iyi şekilde yararlanmak için aynı HTML kod tabanına çok farklı CSS'ler uygulamanız gerekebilir. Bu oldukça zorlu bir tasarım olabilir.
Aşağıda, karşılaşabileceğiniz bazı yaygın zorluklar verilmiştir.
Gezinme
Gezinme bağlantıları listesini büyük ekranda görüntülemek oldukça kolaydır. Bu bağlantıları yerleştirmek için bolca alan vardır.
Küçük ekranlarda alan çok değerlidir. Bu duruma göre tasarım yaparken, bir düğmenin arkasında gezinmeyi gizlemek daha cazip gelebilir. Bu çözümdeki sorun, kullanıcıların bir yere varmak için iki adımda gerçekleştirmesi gerektiğidir: Menüyü açıp bir seçenek belirleyin. Menü açılana kadar kullanıcı, "Nereye gidebilirim?" sorusunu soruyor.
Gezinmeyi gizlemekten kaçınan bir strateji bulmaya çalışın. Nispeten az sayıda öğeniz varsa, gezinmeyi küçük ekranlarda güzel görünecek şekilde biçimlendirebilirsiniz.
Gezinmenizde çok sayıda bağlantı varsa bu kalıp ölçeklenmez. Bağlantılar küçük bir ekranda iki veya üç satıra kaydığında gezinme karışık görünür.
Olası bir çözüm, bağlantıları tek satırda tutmak, ancak listeyi ekranın kenarından kesmektir. Kullanıcılar, hemen görünmeyen bağlantıları görmek için ekranı yatay olarak kaydırabilir. Bu, taşma kalıbıdır.
Bu tekniğin avantajı, her cihaz genişliğine ve herhangi bir sayıda bağlantıya göre ölçeklenmesidir. Bunun dezavantajı, kullanıcıların başlangıçta görünür olmayan bağlantıları gözden kaçırmasıdır. Bu tekniği ana gezinmeniz için kullanıyorsanız, ilk birkaç bağlantının en önemli bağlantılar olduğundan emin olun ve listede daha fazla öğe olduğunu görsel olarak belirtin. Önceki örnekte, bu gösterge için bir renk geçişi kullanılmaktadır.
Son çare olarak, gezinme menünüzü varsayılan olarak gizlemeyi seçebilir ve kullanıcıların içeriği gösterip gizlemesi için bir geçiş mekanizması sağlayabilirsiniz. Buna aşamalı açıklama denir.
Gezinme görünümünü açıp kapatan düğmenin etiketli olduğundan emin olun. Anlaşılması için simgeye güvenmeyin.
Etiketlenmemiş bir simge, "gizemli et" gezinme simgesidir. Kullanıcılar, videoda ne olduğunu bilmez. Kullanıcılara düğmenin neyi göstereceğini bildiren bir metin etiketi sağlayın.
Bantlar
Gezinme konusunda geçerli olan bu durum, diğer içerikler için de geçerlidir: Hiçbir şeyi gizlememeye çalışın. Bant, içeriği gizlemek için yaygın olarak kullanılan bir yöntemdir. Oldukça kullanışlı görünebilir, ancak kullanıcılarınızın gizli içeriği hiçbir zaman keşfetmeme olasılığı yüksektir. Bantlar, kullanıcılara sunum yapmaktan ziyade kuruluş sorunlarını (ana sayfada hangi içeriğin yer alması gerektiği gibi) çözme konusunda daha başarılıdır.
Bununla birlikte, alan değerli olduğunda bantlar bir sayfanın çok uzun ve dağınık olmasını önleyebilir. Karma bir yaklaşım kullanabilirsiniz: İçeriği küçük ekranlar için bir bantta gösterirken aynı içeriği büyük ekranlar için bir ızgarada görüntüleyebilirsiniz.
Dar ekranlarda flexbox'ı kullanarak öğeleri bir satırda görüntüleyin. Öğe satırı, ekranın kenarını aşacak şekilde uzanır. Yatay hızlıca kaydırmaya izin vermek için overflow-x: auto öğesini kullanın.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
scroll-snap özellikleri, öğelerin yumuşak bir şekilde kaydırılabilmesini sağlar. scroll-snap-type: inline mandatory sayesinde öğeler yerine oturur.
Ekran yeterince büyükse (bu örnekte 50em boyutundan daha geniş) ızgaraya geçin ve öğeleri hiçbir şeyi gizlemeden satır ve sütunlar halinde görüntüleyin.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Daha önemlisi, bant görünümündeki bir öğe tam genişliği kaplamaz. Bu durumda, görüntü alanının kenarının ötesinde daha fazla içeriğin kullanılabilir olduğuna dair hiçbir belirti görülmezdi.
Bantlar, taşma kalıbının işleyişine başka bir örnektir. Kullanıcıların göz atabileceği çok sayıda öğeniz varsa, televizyonlar dahil olmak üzere büyük ekranlarda bile taşma kalıbını kullanmaya devam edebilirsiniz. Bu medya kaydırma aracı, çok sayıda seçeneği yönetmek için birden çok bant kullanır.
Yine scroll-snap özellikleri, etkileşimin pürüzsüz olmasını sağlar. Ayrıca, banttaki resimlere loading="lazy" uygulandığına da dikkat edin. Bu durumda resimler ekranın alt kısmında değil, kenarın ötesindedir, ancak aynı ilke geçerlidir: Kullanıcı, ekranı asla bu öğeye kadar kaydırmazsa resim indirilmez ve bant genişliğinden tasarruf edilir.
JavaScript ekleyerek bir banta etkileşimli kontroller ekleyebilirsiniz. Hatta, öğeler arasında otomatik geçiş yapılmasını da sağlayabilirsiniz. Ancak bunu yapmadan önce uzun uzun düşünün. Sayfadaki tek içerik bant olduğunda otomatik oynatma işe yarayabilir. Ancak otomatik oynatılan bant, bir kullanıcı başka içerikle etkileşim kurmaya (örneğin, metin okumak gibi) çalışırken son derece rahatsız edicidir. Diğer bant en iyi uygulamalarını inceleyebilirsiniz.
Veri tabloları
table öğesi, tablo verilerini, yani ilgili bilgilerin satırlarını ve sütunlarını yapılandırmak için idealdir. Ancak tablo çok büyük olursa küçük ekran düzeninizi bozabilir.
Taşma kalıbını tablolara uygulayabilirsiniz. Bu örnekte tablo table-container sınıfına sahip bir div içine sarmalanmıştır.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Yönergeler
Taşma deseni, küçük ekranlar için iyi bir çözümdür ancak ekran dışındaki içeriğe erişilebildiğinin net bir şekilde belirtildiğinden emin olun. İçeriğin kesildiği kenara gölge veya gradyan yerleştirmeyi deneyin.
Aşamalı açıklama, alandan tasarruf etmenin faydalı bir yoludur ancak çok önemli içeriklerde bunu kullanırken dikkatli olun. İkincil işlemler için daha uygundur. Açıklamayı tetikleyen arayüz öğesinin açıkça etiketlendiğinden emin olun. Yalnızca ikonografiye güvenmeyin.
Öncelikle küçük ekranlara göre tasarım yapın. Küçük ekran tasarımlarını büyük ekranlara uyarlamak, diğerlerine göre daha kolaydır. Öncelikle büyük ekran için tasarlarsanız küçük ekran tasarımınızın sonradan akla gelen gibi hissetme riski vardır.
Daha fazla düzen ve kullanıcı arayüzü öğesi kalıbı için web.dev Kalıplar bölümünü inceleyin.
Arayüz öğelerini farklı ekran boyutlarına uyarlarken, medya sorguları cihazın boyutlarını belirlemek için çok yararlıdır. Ancak min-width ve min-height gibi medya özellikleri daha başlangıç. Şimdi, diğer birçok medya özelliğini keşfedeceksiniz.