Mobil Öncelikli Tasarım Masaüstünde Nerede Bozulur

Mobil öncelikli başlamak doğru bir sıralama, ama masaüstü çoğu projede sıranın sonunda kalıyor ve büyük ekran, küçük ekran düzeninin esnetilmiş hali olarak yayına giriyor. Ortaya çıkan sayfa bozuk görünmez; sadece okuması yorucu, gezinmesi yavaş olur. Bozulan üç şey var ve üçünün de ölçülebilir bir karşılığı: satır uzunluğu, tıklama maliyeti, bilgi yoğunluğu.

İlk bozulan: satır uzunluğu

Tek sütunlu bir mobil düzeni ekran genişliğine göre esnetirseniz büyüyen tek şey satır olur. 16 piksellik bir gövde metninde ortalama karakter genişliği kabaca 8 piksel; 1440 piksellik bir sütunda satır başına 180 karaktere yaklaşırsınız. Rahat okunan aralık 60-75 karakter. Aradaki fark okurun gözünde şuna dönüşür: satır sonundan bir sonraki satırın başına dönerken hedef kaçar, aynı satır iki kez okunur.

Çözüm tek satır: metin sütununa max-width: 70ch verin. ch birimi yazı tipinin kendi karakter genişliğine bağlı olduğundan font değiştiğinde ölçü kendini düzeltir, sabit piksel değeri düzeltmez.

Masaüstünde artan genişliği punto büyüterek doldurmam. 24 piksellik gövde metni ekranı doldurur ama satır sayısını azaltmaz, aynı içeriği daha uzun bir sayfaya yayar ve kaydırma yükünü artırır.

Mobilin etkileşim kalıpları masaüstünde bedel çıkarır

Akordeon, sekme, daha fazla göster: hepsi küçük ekranda yer kazanmak için var. 1440 pikselde kazanılacak yer yok, geriye sadece tıklama kalıyor. Bilgi ekranda duruyorsa kullanıcı tarar; katlanmışsa önce açmaya değer mi diye karar vermek zorunda, o karar taramaktan pahalı.

Uygulamada küçük bir tuzak var: details öğesinin açıklığı bir CSS özelliği değil, HTML özniteliği. Yani media query ile masaüstünde açık gösteremezsiniz. İki yol kalıyor. Aynı bloğu ikinci kez düz metin olarak yazıp birini gizlemek: bakımı zor, ekran okuyucuda içerik iki kez duyulur. Ya da matchMedia ile eşiğin üstünde open özniteliğini eklemek: üç satır kod, tek kaynak, doğru olan bu. Sekmeler için de soru aynı. Sekmenin arkasına sakladığınız içerik masaüstünde yan yana sığıyorsa sekmeye gerek yok.

Boşluk, yoğunluk demek değil

Mobilden gelen dikey ritim büyük ekranda genişliği boş bırakır ve tuhaf bir sonuç doğar: kullanıcı mobilde tek ekranda gördüğü bilgiyi masaüstünde üç kaydırmada toplar. Karşılaştırma gerektiren her şey burada ayrı bir başlık. Fiyat planları, özellik matrisleri, teknik veriler tek görünümde yan yana durmalı, çünkü karşılaştırma hafızada değil gözde yapılır. Kaydırarak karşılaştırmak, kullanıcıdan iki ekranı akılda tutmasını istemektir.

Ekranın tamamını kaplayan kapak görseli de mobilden gelen bir alışkanlık. Küçük ekranda bedeli tek kaydırma. 27 inçte ilk ekranı tamamen tüketir ve sayfanın ne hakkında olduğu ilk bakışta görünmez.

Pratikte ne yapmalı

• Metin sütununu 70ch civarında sabitleyin, artan genişliği ikinci sütuna, içindekiler listesine ya da kenar notlarına verin.
• Eşiğin üstünde akordeonları ve sekmeleri açık başlatın. Kapalı kalması gereken tek içerik, gerçekten nadir başvurulan içeriktir.
• Karşılaştırmalı veriyi tabloda tutun, kartlara bölmeyin.
• Görsel bir şey anlatıyorsa büyüsün; anlatmıyorsa küçülsün ya da çıksın.
• Testi kullanıcının gerçek ekranında yapın. 13 inç dizüstünde açıp masaüstü tamam demek, en sık atlanan adım.

Mobil öncelikli yaklaşımın kendisi sorun değil; tek yönlü uygulanması sorun. Küçük ekranda başlayın, ama büyük ekranı ayrı bir tasarım problemi olarak ele alın. Genişlik bedava alan değil, dağıtılması gereken bir bütçe.