Duyarlı Tasarım: Neden Yanlış Yapıyorsunuz

Duyarlı tasarım, serin bir CSS tekniği nedeniyle ortaya çıkan bir heves değil, bir sorunun cevabı. Bunu her zaman hatırlayın ve kendinize bu sorunu gerçekten ele alıp almadığınızı sürekli sorun. Medya sorgusu kesme noktalarını eklemek için kopyala ve yapıştır özelliğini kullanıyorsanız, çözümünüz kusurlu olabilir.

Medya sorgularının neden var olduğunu ve her yerde bulunan webin sorununu gerçekten çözmek için bunları nasıl kullanabileceğimizi tartışalım. İçeriğinizin varsayımsal ekran boyutlarını değil, bir mizanpajın sınır noktalarını belirlemesine izin vermenizden bahsedelim.

Bu makale, Heart Internet VPS ile ortaklaşa size sunulan “masaüstü tasarımının ötesine bakmak” dizimizin bir parçasıdır.

Medya Sorgularının Arkasındaki Fikir

Bu tartışmaya doğru bir şekilde başlamak için, medya sorgularının neden aniden bu kadar popüler hale geldiğini tartışmak gerekir. Yanıt elbette, Ethan Marcotte tarafından yazılan bir terim olan "Duyarlı Tasarım" ın web tasarımcıları için sürekli büyüyen bir sorunu ele almanın harika bir yoludur.

Herkes “mobil ağın” geleneksel olanı nasıl aşacağına dair sıralamalar sürerken, gerçekleşen devrim çok daha sertti: web her yerde yaygınlaştı.

Bu “sorun” bir bütün olarak dünya için harika, ama bizim için gerçek bir baş ağrısı. Son on yılda, dünya çapında web yeni bir şeye dönüştü. Artık daha önce kurduğumuz duvarlara bağlı değil. Bunu daha önce de söyledim ama tekrar etmeye değer. Herkes “mobil ağın” geleneksel olanı nasıl aşacağına dair sıralamalar sürerken, gerçekleşen devrim çok daha sertti: web her yerde yaygınlaştı.

Bu noktada, web'e tek bir noktadan erişmiyoruz. “Uzmanların” tahmin ettiği gibi dizüstü bilgisayarlarımızı akıllı telefonlar lehine bırakmadık. Bunun yerine, web bulunduğumuz her yerde. Sadece telefonlarımızda ve bilgisayarlarımızda değil, tabletlerimizde, iPod'larımızda, oyun sistemlerimizde, televizyonlarımızda ve hatta arabalarımızda.

Bu eğilim ancak zaman geçtikçe devam edecek. Duyarlı tasarım, ayrı bir mobil site oluşturma sezonunu geçmiş ve üzerinde görüntülenen cihaza evrilen ve ona uyum sağlayan bir site geliştirdiğimiz bir döneme getiriyor. Medya sorgularını kullanarak, belirli sayıda farklı görüntü alanı boyutuna özel CSS sunabilir ve herkesin mümkün olan en iyi deneyime sahip olduğundan emin olabiliriz.

Duyarlı Tasarımla İlgili Sorun

Yukarıdaki bölüm, alanı doldurmak için kullanılan yarı tarihsel bir rant değil, duyarlı tasarımın ulaşmak istediği hedeflere önemli bir bakış. O zaman soru, bu hedeflere ulaşıyor mu? Duyarlı tasarım, yaygınlık sorununu yeterince ele alıyor mu?

Cevap karmaşık, en iyi ihtimalle “nasıl yaptığınıza bağlı” diyebilirim. Bu kafa karıştırıcı bir ifade değil mi? Duyarlı tasarım basittir: Farklı görünüm alanı boyutlarına özel CSS sunmak için medya sorgularını kullanın. Herkes buna doğru yaklaşıyor mu? Peki nasıl doğru ve yanlış bir yol olabilir?

Karmaşıklık, bu tekniğin önemli bir bölümünü tartışmaya başladığımızda ortaya çıkar: hangi medya sorgularını kullanmalıyım? Veya farklı bir yöntemle, özel CSS için hangi “kesme noktalarını” hedeflemeliyim? Mevcut popüler cevap tahmin edilebilir şekilde en iyi "mobil" cihazlarla başlar: iPhone ve iPad (öfkeli Android kullanıcı yorumları işaret). Bu arketiplerden “jenerik” akıllı telefon ve tablet boyutları oluşturuyoruz. Sonra dizüstü bilgisayarları, küçük masaüstlerini ve son olarak büyük ekranları hareket ettiriyoruz. CSS-Tricks'teki gibi standart bir medya sorgusu kümesi genellikle dokuz veya on önceden belirlenmiş kesme noktasına sahiptir.

Varsayımsal bir cihaz kullanım durumu yerine belirli bir tasarımın ihtiyaçlarına odaklanırsak ne olur? Ya her yerde çalışan mizanpajlar yaparsak?

Adil olmak gerekirse, bu sistem belirli bir dereceye kadar çalışır. Hepimiz Coyier'in benzeri bir küme kullanılarak inşa edilmiş çok sayıda harika duyarlı site gördük. Ancak bunun birkaç yıl önce “mobil siteler” tasarlayarak yaptığımız aynı hatayı tekrarladığını düşünmekten başka bir şey yapamıyorum. Buradaki tüm odak, siteyi görüntüleyen cihazda. Siteyi inşa etmeden önce, bu kesme noktalarını göz önünde bulunduruyoruz.

Ancak cihazlar değişir. Web'in bir güç anahtarı ile hemen hemen her şeye bağlı olduğunu zaten belirledik, o zaman neden şu anda yaygın olan ekran boyutlarına bir kez daha bu kadar önem veriyoruz? Daha iyi bir alternatif var mı? Varsayımsal bir cihaz kullanım durumu yerine belirli bir tasarımın ihtiyaçlarına odaklanırsak ne olur? Ya her yerde çalışan mizanpajlar yaparsak?

İçerik Odaklı Duyarlı Tasarım

Önceden belirlenmiş medya sorgularıyla ilgili yukarıda belirtilen sorunlar, sadece kazı yaptığım ve gerçekten kendi kendime duyarlı işler üretmeye başladığımda ortaya çıktı. Teorik olarak, standart öneriler mükemmeldir, ancak bunları karmaşık bir tasarıma uyguladığınızda, bu kesme noktalarının her zaman onu kapsamadığını keşfedeceksiniz. Boston Globe tasarımcılarının site yayına girdikten hemen sonra çabucak öğrendikleri gibi sorun, sorunların “arada” ortaya çıkmasıdır (kayıt için, bu proje harika ve tüm yerleşim sorunları büyük ölçüde ele alınmıştır). Tasarım, hesaba katılmadığınız bir boyuttaysa ve dağınık hale gelip deliklerden yama yapmanız gerekir.

Bunu hevesli bir Apple fanboyu olarak söylüyorum: iPhone için web siteleri tasarlamayı bırak.

Sorum şu, neden oradan başlamıyoruz? Bir dizi cihaz ve dolayısıyla medya sorguları içeren bir projeye girmek yerine, tasarımın neden karar vermesine izin vermiyoruz? Her web sayfası düzeninin tarayıcı boyutunun bütünlüğünü azalttığı bir noktası vardır. Tasarımcılar olarak işimiz, her yerde bulunma sorunu ışığında, bu boyutu ve hesabı bulmak, daha sonra köpürmek, durulamak ve tüm zayıf noktalar açıklanana kadar tekrarlamak olmalıdır.

Bunu hevesli bir Apple fanboyu olarak söylüyorum: iPhone için web siteleri tasarlamayı bırak. Bunun yerine, görünüm boyutu herhangi bir uygulanabilir duruma düşürüldüğünden bütünlüğünü koruyan bir web sitesi tasarlayın. Belirli cihazları tasarımınız için bir rehber olarak aklınızda bulundurun (örneğin: daha küçük cihazlar dokunmatik tabanlı olma eğilimindedir, bu nedenle bağlantıları büyük yapın), ancak kör bahislerinizi yerleştirmeyin ve daha büyük resme bakmayın: tasarımınız herhangi bir ekranda iyi görünmelidir.

Yeni Bir İş Akışı

Peki, içeriğe odaklanmış duyarlı bir tasarım iş akışı neye benziyor? Düşündüğünüzden daha basit. Açıkçası, bir tür başlangıç ​​noktasına ihtiyacınız var. Mobil başlatmak ve yukarı çıkmak istiyorsanız, harika. Büyük başlamak ve aşağı inmek istiyorsanız, aynı zamanda harika. Kişisel olarak bir tasarıma gerçekten girmeyi ve mobil seviyede başlıyorsam doğru yapmayı çok zor buluyorum, ancak bunu bu şekilde yapmak için birçok sağlam argüman var.

Bu iş akışını takip ettiğinizde sihirsel bir şey olur.

Varsayımsal olarak, geniş, 1020 piksel genişliğinde bir siteyle başladığınızı varsayalım. En büyük ekranda kontrol edin ve ellerinizin harika görünmesini sağlayın. Şimdi pencereyi sürükleyin ve tasarım çirkinleşene kadar küçültün. İşte ilk kırılma noktanız. Bu nokta için bir medya sorgusu ayarlayın ve ele almanız gereken her şeyi düzeltin. İşiniz bittiğinde, bu pencereyi alın ve çirkinliğin bir sonraki noktasını bulun. Hesapladığınız aralıktan memnun olana kadar bu adımları tekrarlayın.

Peki ya iPad? Kindle Fire veya Samsung'un en son ilgili olma girişimine ne dersiniz? Bu iş akışını takip ettiğinizde sihirsel bir şey olur. Sadece yerleşimin hemen hemen her boyutta iyi görünmesini sağladınız. Doğru yaptıysanız, telefonunuzda veya tabletinizde çektiğinizde harika görünecek.

Yalnızca Düzen
Bu tartışmanın yalnızca mizanpaj oranlarıyla ilgili olduğunu unutmayın. Farklı tarayıcılarda ve cihazlarda test işlevinden kesinlikle çıkamazsınız. Duyarlı tasarım, farklı tarayıcı motorlarının HTML, CSS ve JavaScript'i farklı şekilde yorumladığı gerçeğini açıklamak için hiçbir şey yapmaz.

Sonuç

Özetle, medya sorguları ve duyarlı tasarım, web sitelerinin her türlü ekran ve görünüm alanı boyutunda görüntülendiğini hesaba katmak için inanılmaz derecede güçlü bir araç sağlar. Ancak, tasarımlarımızı birkaç cihaza sabitlemeye başladığımızda, başladığımız yere geri dönüyoruz. Bunun yerine amacınız, atılan neredeyse tüm görüntü alanı boyutlarını işleyebilecek kadar çok yönlü bir düzen oluşturmak olmalıdır.

Teoride bu güzel, ama örnek nerede? Bu tartışmanın çıkış noktası, yakın zamanda duyarlı bir resim galerisi oluşturma girişimimden geldi. İçerik odaklı duyarlı tasarım iş akışının vahşi ortamda nasıl görünebileceğine bakmak için bu makaleye göz atın.