Küçük ekranda görüntülenen bir tasarım, büyük ekran düzeninin küçültülmüş sürümü gibi görünmemelidir. Benzer şekilde, büyük ekranda görüntülenen bir tasarım, küçük ekran düzeninin abartılı bir versiyonu gibi görünmemelidir. Bunun yerine, tasarımın tüm ekran boyutlarına uyum sağlayacak kadar esnek olması gerekir. Başarılı bir duyarlı tasarım her form faktöründen en iyi şekilde yararlanır.
Bu nedenle, bazı arayüz öğeleri, görüntülendikleri bağlama bağlı olarak oldukça farklı görünebilir. Farklı ekran boyutlarından en iyi şekilde yararlanmak için aynı HTML kod tabanına çok farklı CSS uygulamanız gerekebilir. Tasarım açısından zorlu bir iş olabilir.
Karşılaşabileceğiniz bazı yaygın zorluklar aşağıda açıklanmıştır.
Gezinme
Gezinme bağlantılarının bir listesini görüntülemek, büyük ekranda oldukça kolaydır. Bu bağlantıları yerleştirmek için geniş bir alan vardır.
Küçük ekranlarda alan daha önceliklidir. Bu duruma göre tasarım yaparken, gezinmeyi bir düğmenin arkasına gizlemek cazip gelebilir. Bu çözümdeki sorun, kullanıcıların herhangi bir yere varmak için iki adım atmaları gerekmesidir: Menüyü açıp bir seçenek belirleme. Menü açılana kadar kullanıcı "nereye gidebilirim?" diye düşünmeye devam eder.
Gezinme menüsünü gizlemekten kaçınacak bir strateji bulmaya çalışın. Nispeten az sayıda öğeniz varsa gezinmeyi küçük ekranlarda iyi görünecek şekilde biçimlendirebilirsiniz.
Gezinmenizde çok fazla bağlantı varsa bu kalıp ölçeklenmez. Bağlantılar küçük bir ekranda iki veya üç satıra kayıyorsa gezinme karmaşık görünür.
Olası çözümlerden biri, bağlantıları tek satırda tutarken ekranın kenarındaki listeyi kısaltmaktır. Kullanıcılar, hemen görünmeyen bağlantıları görmek için sayfayı yatay olarak kaydırabilir. Bu, taşma kalıbıdır.
Bu tekniğin avantajı, her cihaz genişliğine ve tüm bağlantı sayılarına göre ölçeklendirilmesidir. Bunun dezavantajı, kullanıcıların başlangıçta görünmeyen bağlantıları gözden kaçırmasıdır. Ana gezinmeniz için bu tekniği kullanıyorsanız, ilk birkaç bağlantının en önemli bağlantılar olduğundan ve listede daha fazla öğe olduğunu görsel olarak belirttiğinizden emin olun. Önceki örnekte, bu gösterge için bir gradyan kullanılmaktadır.
Son çare olarak, gezinme menüsünün varsayılan olarak gizlenmesini tercih edebilir ve kullanıcıların içeriği gösterip gizlemesi için bir açma/kapatma mekanizması sunabilirsiniz. Buna progresif açıklama denir.
Gezinme görünümünü açıp kapatan düğmenin etiketli olduğundan emin olun. Anlaşılması için simgelere güvenmeyin.
Etiketsiz bir simge, gezinme menüsünün "gizemli et" olduğunu gösterir. Kullanıcılar o yemeği ısırana kadar ne olduğunu bilemez. Kullanıcılara düğmede ne gösterileceğini bildiren bir metin etiketi sağlayın.
Bantlar
Gezinmeyle ilgili olanlar diğer içerikler için de geçerlidir: Yine de hiçbir şeyi gizlememeye çalışın. Rulo, içerikleri gizlemek için yaygın olarak kullanılan bir yöntemdir. Çok güzel görünebilir, ancak kullanıcılarınızın gizli içeriği hiçbir zaman keşfetmeme olasılıkları da yüksektir. Rulolar, kuruluşla ilgili sorunların (ana sayfada hangi içeriğin öne çıkarılması gerektiği gibi) çözümünde kullanıcılara sunum yapmaya kıyasla daha iyidir.
Bununla birlikte, alan değerli olduğunda bantlar bir sayfanın çok uzun ve karmaşı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österin.
Dar ekranlarda, flexbox'ı kullanarak öğeleri bir satırda görüntüleyin. Öğe satırı, ekranın kenarını aşacak şekilde genişler. Yatay kaydırmaya izin vermek için overflow-x: auto uygulamasını 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 akıcı bir şekilde kaydırılabilmesini sağlar. scroll-snap-type: inline mandatory sayesinde öğeler yerine oturuyor.
Ekran yeterince büyük (bu örnekte 50em değerinden daha büyük) olduğunda, ızgaraya geçin ve öğeleri hiçbir şey 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));
}
}
Atlı karınca görünümündeki bir öğe tüm genişliği kaplamaz. Kullanılsaydı görüntü alanının kenarından daha fazla içerik bulunduğuna dair bir gösterge olmazdı.
Rulolar, uygulanan taşma kalıbına başka bir örnektir. Kullanıcıların göz atabileceği birçok öğeniz varsa televizyonlar dahil büyük ekranlarda bile taşma kalıbını kullanmaya devam edebilirsiniz. Bu medya kaydırma çubuğu, önemli miktarda seçeneği yönetmek için birden fazla bant kullanır.
scroll-snap özellikleri de etkileşimin sorunsuz olmasını sağlar. Ayrıca, banttaki resimlere loading="lazy" uygulanmış olduğuna dikkat edin. Bu durumda, resimler ekranın alt kısmında değildir ve kenarın dışındadır, ancak aynı prensip geçerlidir: Kullanıcı, sayfayı hiçbir zaman öğenin bulunduğu yere kadar kaydırmazsa, resim indirilmez ve bant genişliğinden tasarruf edilir.
JavaScript'in eklenmesiyle, bir banta etkileşimli denetimler ekleyebilirsiniz. Hatta öğeler arasında otomatik olarak geçiş yapılmasını bile sağlayabilirsiniz. Ancak bunu yapmadan önce uzun düşünün. Bant sayfadaki tek içerikse otomatik oynatma işe yarayabilir ancak otomatik oynatılan bant, birisi başka bir içerikle etkileşime geçmeye (örneğin, metin okuma gibi) çalışıyorsa inanılmaz derecede rahatsız edicidir. Bantla ilgili diğer en iyi uygulamaları okuyabilirsiniz.
Veri tabloları
table öğesi, tablo verilerini yapılandırmak için idealdir. İlgili bilgilerin satır ve sütunlarından oluşur. Ancak tablo çok büyük olursa küçük ekran düzeniniz bozulabilir.
Taşma kalıbını tablolara uygulayabilirsiniz. Bu örnekte tablo, table-container sınıfıyla bir div içine yerleştirilmiştir.
.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 uzlaşma sağlar, ancak ekran dışındaki içeriğin erişilebilir olduğunun net olduğundan emin olun. İçeriğin kesildiği kenara gölge veya gradyan yerleştirmeyi deneyin.
Progresif açıklama, alandan tasarruf etmek için faydalı bir yöntemdir ancak çok önemli içeriklerde kullanmaya dikkat edin. İkincil işlemler için daha uygundur. Açıklamayı tetikleyen arayüz öğesinin açıkça etiketlendiğinden emin olun. Tek başına ikona güvenmeyin.
Daha küçük ekranlar için tasarım yapın. Küçük ekran tasarımlarını büyük ekranlara uyarlamak, büyük ekranlara kıyasla daha kolaydır. İlk olarak büyük bir ekran için tasarım yaparsanız küçük ekran tasarımınızın sonradan akla gelen bir şey gibi görünmesi 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 oldukça kullanışlıdır. Ancak min-width ve min-height gibi medya özellikleri yalnızca başlangıç. Ardından, çok sayıda diğer medya özelliğini keşfedeceksiniz.