Çok Cihazlı Web Tasarımına İki Farklı Yaklaşımın Karşılaştırılması
Duyarlı ve uyarlamalı web tasarımı, çeşitli ekran boyutlarında iyi çalışan çok cihaz dostu web siteleri oluşturmak için her iki yöntemdir. Duyarlı web tasarımı Google tarafından önerilmekle birlikte ve iki yaklaşımın daha popüler olmasına rağmen, çok cihazlı web tasarımı için bu yöntemlerin her ikisi de güçlü ve zayıf yönlerine sahiptir.
Yanıt veren ve uyarlanabilir web tasarımı arasındaki farklılıkları ele alalım, özellikle bu temel alanlara odaklanalım:
- Gelişme kolaylığı
- Tasarım üzerinde sahip olduğunuz kontrol seviyesi
- Cihazın genişliği / ekran desteği
- Gelecek için ne kadar kolay çözüm
- Genel indirme hızı ve site performansı
Bazı tanımlar
Duyarlı ve uyarlamalı web tasarımının yan yana karşılaştırılmasına girmeden önce, bu iki yaklaşımın üst düzey bir tanımına bakmak için biraz zaman alalım.
Duyarlı web siteleri, kullanılan ekran boyutundan bağımsız olarak değişen ve uyarlanan bir akış düzenine sahiptir. Medya sorguları , tarayıcı yeniden boyutlandırılırsa duyarlı sitelerin "anında" değişmesine izin verir.
Uyarlamalı tasarım, sayfa ilk yüklendiğinde algılanan ekran boyutu için en uygun mizanpaj sürümünü sunmak için önceden belirlenmiş kesme noktalarına göre sabit boyutlar kullanır.
Bu geniş tanımlarla, temel odak alanlarımıza dönelim.
Geliştirme kolaylığı
Duyarlı ve uyarlamalı web tasarımı arasındaki en önemli fark, bu çözümlerin bir web sitesine uygulanmasıdır. Duyarlı tasarım tamamen akışkan bir düzen oluşturduğundan, en iyisi , siteyi zeminden yeniden tasarladığınız projelerde kullanılır. Var olan bir web sitesinin kodunu daha duyarlı hale getirmeye çalışmak genellikle çok yorucu bir meseledir, çünkü bu kodu, bu kodu en baştan oluşturmaya çalışırken, bu kodu en baştan hazırladığınızı ve duyarlı tasarıma sahip olmanız halinde sahip olduğunuz kontrol seviyesine sahip olmamanız yeterlidir. . Bu, bir siteyi yanıt verecek şekilde uyarladığınızda, varolan kod tabanı içinde kalmak için uzlaşmaya zorlandığınız anlamına gelir.
Mevcut bir sabit genişlikli web sitesiyle çalışıyorsanız, uyarlanabilir bir yaklaşım, sitenin bozulmadan tasarlandığı boyutta bırakabileceğiniz ve gerektiğinde ek uyarlamalı kesme noktaları ekleyebileceğiniz anlamına gelir. Bazı durumlarda, bir projenin bütçesi küçükse ve yalnızca az miktarda geliştirme çalışması gerçekleştirecekse, yalnızca daha küçük ekran / mobil merkezli boyutlar için yeni uyarlanabilir kesme noktaları eklemeyi seçebilirsiniz. Bu, daha büyük ekranların hepsinin aynı düzeni kullanmasına izin vereceğiniz anlamına gelir. Bu, muhtemelen sitenin büyük olasılıkla orijinal olarak tasarlandığı 960 ayrık versiyonudur.
Uyarlanabilir bir yaklaşımın tersi, mevcut bir sitenin kodunu daha iyi kullanabilmenizdir, ancak olumsuzluklardan biri, desteklemeyi seçtiğiniz her kesme noktası için farklı düzen şablonları oluşturuyor olmanızdır. Bu, bu çözümü uzun vadede geliştirmek ve sürdürmek için gereken iş yükü üzerinde bir etkiye sahip olacaktır.
Tasarım kontrolü
Duyarlı web sitelerinin güçlü yönlerinden biri, akışkanlıklarının, yalnızca uyarlamalı bir yaklaşımda belirlenen önceden belirlenmiş kesme noktalarının aksine tüm ekran boyutlarını uyarlamalarına ve desteklemelerine izin vermesidir. Gerçek şu ki, duyarlı sitelerin belirli anahtar ekran boyutlarında (tipik olarak piyasada bulunan popüler cihazlara karşılık gelen boyutlarda) mükemmel görünebileceğidir, ancak görsel tasarım genellikle bu popüler kararlar arasında bozulur.
Örneğin, bir site 1400 piksel geniş ekran düzeninde, 960 piksel orta ekran boyutunda ve küçük ekranın 480 piksel boyutunda harika görünebilir, ancak bu boyutların arasındaki durumlara ne dersiniz? Bir tasarımcı olarak, aradaki bu boyutlar üzerinde çok az kontrolünüz yoktur ve bu boyutlardaki görsel görünüm, genellikle ideal olandan daha azdır.
Uyarlanabilir bir web sitesi ile, kullanılan kesme noktalarınıza göre sabit boyutlar oldukları için kullanılan çeşitli düzenler üzerinde çok daha fazla tasarım kontrolünüz vardır. Aradaki garip durumlar artık sorun değil çünkü ziyaretçilere ulaştırılacak her “bakış” ı (her bir sınır noktasının görüntüsünü) dikkatlice tasarladınız.
Bu tasarım kontrol seviyesinin çekiciliğine gelince, bunun bir bedeli olduğunu bilmelisiniz. Evet, her kırılma noktasının görünümü üzerinde tam kontrole sahipsiniz, ancak bu, bu benzersiz yerleşimlerin her biri için tasarım için gerekli tasarım süresini yatırmanız gerektiği anlamına gelir. Tasarlamak için seçtiğiniz daha fazla kesme noktası, bu sürece harcayacağınız daha fazla zaman.
Desteğin Genişliği
Hem duyarlı hem de uyarlamalı web tasarımı, özellikle modern tarayıcılarda oldukça sağlam desteğin tadını çıkarır.
Uyarlamalı web siteleri, ekran boyutu tespiti için sunucu tarafı bileşenlerini veya Javascript'i gerektirir. Açıkçası, bir uyarlanabilir site Javascript gerektiriyorsa, bu sitenin düzgün çalışması için bir tarayıcının etkinleştirilmiş olması gerektiği anlamına gelir. Pek çok insanın tarayıcılarında Javascript olacağı, ancak bir sitenin herhangi bir şeye her zaman önemli bir bağımlılığı olduğu zaman bu sizin için büyük bir endişe olmayabilir.
Duyarlı web siteleri ve onlara güç veren medya sorguları tüm modern tarayıcılarda iyi çalışır. Sahip olduğunuz tek sorun Internet Explorer'ın en eski sürümleridir, çünkü sürüm 8 ve altında medya sorguları desteklenmez. Bunun etrafında çalışmak için genellikle bir Javascript polyfill kullanılır , bu da en azından IE'nin eski sürümleri için Javascript'e bağlı bir bağımlılık olduğu anlamına gelir. Yine de, özellikle site analizleriniz bu eski tarayıcı sürümlerini kullanarak pek çok ziyaretçi almadığınızı gösteriyorsa, bu sizin için bir sorun olmayabilir.
Gelecekteki Friendliness
Duyarlı web sitelerinin akışkan doğası, gelecekteki dostluk söz konusu olduğunda onlara adaptif sitelere göre bir avantaj sağlar. Bunun nedeni, yanıt veren sitelerin yalnızca önceden belirlenmiş bir kesme noktaları kümesini barındırmak üzere oluşturulmamasıdır. Bugün piyasada bulunmayanlar da dahil olmak üzere tüm ekranlara uyacak şekilde uyarlanırlar. Bu, yeni bir ekran çözünürlüğünün aniden popüler hale gelmesi durumunda, yanıt veren sitelerin “sabit” olması gerekmeyeceği anlamına gelir.
Cihaz manzarasındaki inanılmaz çeşitliliğe baktığımızda (Ağustos 2015 itibariyle piyasada 24.000'in üzerinde farklı Android cihazı vardı), bu geniş ekran yelpazesini karşılamak için elinden gelenin en iyisini yapan bir siteye sahip olmak, gelecekteki dostluk için kritik öneme sahiptir. Bunun nedeni, bu manzaraların gelecekte daha az çeşitlilik göstermesi olası değildir. Bu, eğer bu gerçekliğe henüz ulaşmamış olsaydık, belirli ekranların veya boyutların tasarlanmasının imkansız hale geleceği anlamına gelir.
Bu karşılaştırma senaryosunun diğer tarafında, eğer bir site uyarlanırsa ve piyasada önemli olabilecek yeni kararlara uymuyorsa, o zaman o kırılma noktasını oluşturduğunuz sitelere eklemeniz gerekebilir. Bu, projelere tasarım ve geliştirme süresini ekler ve bu, siteye eklenecek yeni bir kesme noktasının piyasaya sürülmemesi için bu uyarlama alanlarının sürekli olarak izlenmesi gerektiği anlamına gelir. Yine, cihaz çeşitliliğinin olması, yeni boyutların sürekli olarak kontrol edilmesi ve yeni kırılma noktaları ile bunlara uyum sağlaması zorunluluğudur. Bir siteyi desteklemeniz gereken işleri ve bu bakımın maliyetini etkileyecek çalışmalara bir etkisi olacaktır. Sitenin kime ait olduğu şirket veya kuruluş.
performans
Duyarlı web tasarımı uzun zamandır (çoğu durumda haksız bir şekilde) bir indirme hızı / performans açısından zayıf bir çözüm olmakla suçlanıyor. Bu, büyük ölçüde, bu yaklaşımın ilk günlerinde, birçok web tasarımcısının, küçük ekran medya sorgularını bir sitenin mevcut CSS'sine bağladığı gerçeğinden kaynaklanmaktadır. Bu, daha küçük ekranlar nihai yerleşimlerinde kullanmamış olsa bile, daha büyük ekranlar için tasarlanan görüntüleri ve kaynakları tüm cihazlara iletmeye zorladı. Duyarlı tasarım, o günden bu yana uzun bir yol kat etti ve gerçek şu ki, kalite yanıt veren siteler, performans sorunları yaşamıyor.
Yavaş indirme hızları ve şişirilmiş web siteleri, duyarlı bir web sitesi sorunu değildir - tüm web sitelerinde bulunabilen bir sorundur. Çok ağır olan görüntüler, sosyal medyadan, aşırı komut dosyalarından ve daha fazlasından beslenir ve bir siteyi küçültür, ancak hem hızlı hem de uyumlu web siteleri hızlı yükleme için oluşturulabilir. Elbette , performansa öncelik vermeyecek şekilde de inşa edilebilirler, fakat bu çözümün kendisinin bir özelliği değil, sitenin kendisinin geliştirilmesine dahil olan ekibin bir yansımasıdır.
Düzenin Ötesinde
Uyarlanabilir web tasarımının en zorlayıcı yönlerinden biri, yalnızca set kesme noktaları için sitenin tasarımı üzerinde kontrol sahibi olmanız değil, aynı zamanda bu site sürümleri için sunulan kaynakları da kontrol etmenizdir. Örneğin, retina görüntülerinin sadece retina cihazlarına gönderilebileceği, retina dışı ekranların ise dosya boyutunda daha küçük olan daha uygun görüntüler elde edilebileceği anlamına gelir. Diğer site kaynakları (Javascript dosyaları, CSS stilleri, vb.) Sadece ihtiyaç duyulduğunda ve kullanıldıklarında akıllıca teslim edilebilir.
Adaptif web tasarımının bu kullanımı basit bir denklemin çok ötesine geçmektedir: “Eğer bir web sitesi uyarlıyorsanız, adaptif kullanmak daha kolay bir yaklaşım olabilir.” Tam yeniden tasarımlar dahil olmak üzere tüm siteler daha özel bir deneyime daha akıllı bir yaklaşımdan faydalanabilir.
Bu senaryo, bu “duyarlı ve karşı uyarlanabilir” tartışmanın nüanslı doğasını göstermektedir. Uyarlanabilir bir yaklaşımın, sitenin yeniden donatılmasından sorumlu olandan daha uygun olabileceği doğru olsa da, tam yeniden tasarımlar için mükemmel bir çözüm olabilir. Benzer şekilde, bazı durumlarda, varolan bir sitenin kod tabanına duyarlı bir yaklaşım eklenebilir ve bu siteye tam olarak yanıt veren bir yaklaşımın tüm faydaları sağlanır.
Hangi Yaklaşım Daha İyi?
Duyarlı ve uyarlanabilir web tasarımı söz konusu olduğunda, yanıt veren kesinlikle daha popüler bir yaklaşım olmasına rağmen, net bir “kazanan” yoktur. Gerçekte, “daha iyi” yaklaşım, belirli bir projenin ihtiyaçlarına bağlıdır. Dahası, bunun bir “ya da” durumu olması gerekmez. Uyumlu web tasarımının (akışkan genişlikleri, gelecekteki destek) en iyi şekilde adaptif tasarımın güçlü yönleri (daha iyi tasarım kontrolü, site kaynaklarının akıllı yüklenmesi) ile bir araya gelen siteler inşa eden birçok web uzmanı vardır.
Yaygın olarak RESS (Sunucu Tarafı Bileşenleri ile Duyarlı Web Tasarımı) olarak bilinen bu yaklaşım, gerçekte hiçbir "çözümün tek bir bedene uymadığını" göstermektedir. Her iki yanıt veren web tasarımı ve uyarlanabilirliği, güçlü yönlerine ve zorluklarına sahiptir, dolayısıyla hangisinin hangisi olduğunu belirlemeniz gerekir. Özel projeniz için en iyi şekilde çalışır ya da bir hibrit çözüm size en uygun şekilde uyarsa.