Duyarlı web tasarımı, web sitenizin düşük çözünürlüklerde çalışmasını sağlamak için tümüyle bir terim haline gelmiştir.
Akıllı telefonlar mobil ağı değiştirdi ve tabletler artan popülerliği ile dişlilere başka bir anahtar atıyor. Her şey düşünüldüğünde, bugün bir web sitesi düşük çözünürlüklü bir akıllı telefon, orta çözünürlüklü bir tablet veya yüksek çözünürlüklü bir masaüstü veya dizüstü bilgisayar üzerinde deneyimlenebilir. Retina ekranlarını karışıma atarken, potansiyel ekran boyutlarının sayısı baş döndürücüdür. İdeal olarak, web siteniz, yukarıdakilerin hepsinde, her çözünürlükte incelikle ve işlev görür.
Duyarlı web tasarımının kendisi, çok küçük ekranlar, çok geniş ekranlar ve aradaki herhangi bir çözünürlükte bir web sitesi çalışması yapma sürecidir.
Son birkaç yıldır sektör, ortak en iyi uygulamaların kısa bir listesini toplu olarak geliştirdi. Bu uygulamaların çoğu, daha düşük boyutlara kadar yüksek çözünürlük için tasarlanan web sitelerinin güçlendirilmesine odaklanmaktadır. Diğerleri mobil olarak başlar ve gerektiğinde optimize ederek daha büyük görüntü alanlarına kadar çalışır. Tüm bu uygulamalar genellikle ya duyarlı ya da uyarlanabilir düzenler olarak kategorize edilebilir.
Duyarlı paftalar genellikle uyumsal düzenlerden daha iyi performans gösterir, ancak bazı durumlarda (örneğin karmaşık webaps), uyarlanabilir bir yaklaşım, kullanıcılara daha iyi hizmet verebilir. Her iki durumda da, web sitenizi her zaman en iyi şekilde istediğiniz çözünürlükte yapmaktır.
Çoğu insan bunu yapmak için medya sorgularını kullanmayı seçer onlar kaya katı IE8 veya altında destek istemediğiniz sürece. Hala IE6 - 8 olsa da bir izleyici kitlesi olanlar için, Scott Jehl bir JavaScript polyfill Respond.js olarak adlandırıldı Bu işleri işler hale getirecek.
Daha önce, birçok web tasarımcısı, aktarma işlemine kadar geliştiricilerle en az iletişime sahipti. Her ne kadar, tasarımcılar ve geliştiriciler, her şeyin sorunsuz ilerlemesi için hem tasarım hem de geliştirme süreci boyunca birlikte çalışmak zorunda. Kullanıcı analizlerinden görüntü alanlarını değiştirirken nelerin düzenlenebileceğine veya değiştirilememesine kadar, tasarımcılar ve geliştiriciler aynı kişi değilse, her zamankinden daha yakındır. Duyarlı veya uyarlanabilir düzenlerin neye benzediğine dair ilham arıyorsanız, Medya sorguları bir web sitesinin dört bakış açısını görüntüleyen popüler bir web galerisi galerisi.
Duyarlı web tasarım fikri ilk kez yer almaya başladığı zaman, uyarlanabilir teknikler bir süre egemendi. Sorumlu katılımcılardan daha fazla çalışmaya ihtiyaç duysalar da, bu düzenler için tasarım ve geliştirmeye geçiş yapmak daha kolaydır. Bu, aynı zamanda, mevcut bir web sitesinin mobil uyumlu hale getirilmesi için pek çok kişinin mobil cihazlara uygun hale getirdiği rotadır. Uyarlamalı düzenlerin doğası gereği, web sitesinin tasarımı üzerinde çok daha fazla kontrol sağlarlar. Yalnızca belirli görüntü alanları için tasarım yapmanız gerekir ve tarayıcılar yalnızca genişliğine sığacak en yüksek olanı gösterir. Bu düzenler, tarayıcınızın penceresini yeniden boyutlandırırken ayar yaparken “yapışır”. Aslında, pencerenizi 1024 pikselden daha küçük olacak şekilde yeniden boyutlandırırsanız, bu ani değişimin, web sitesinin düzeninin orta çözünürlüklü bir görüntüye odaklanmak üzere ayarlandığından bahsediyorum.
Uyarlanabilir bir gelişim yaklaşımını tasarlarken, iş oldukça kolaydır. Duyarlı web tasarımı bir şey haline gelmeden önce, sadece bir düzen tasarladıktan sonra geliştirdiniz. Şimdi, birden fazla görüntü için tasarlayacak ve geliştireceksiniz. Genel olarak, düşük çözünürlüklü görüntü alanlarında başlamak daha kolaydır ve yolunuzu çalışır. Yüksek çözünürlüklü görüntü portlarıyla başlar ve aşağı giderseniz, işler biraz ... kompakt olabilir. Ve mobil cihazlara ulaştığınızda, darmadağın.
Sizin için tasarladığınız görüntü alanı sayısı tamamen size ve geliştiriciye bağlıdır, kullanıcılarınıza dayalı bir savaş planı hazırlayın. Mevcut site analizleri, kullanıcıları çoğunlukla düşük ve orta çözünürlüklü görüntü alanları kullanarak gösteriyorsa, bunları planlayın. En az üç tane: düşük çözünürlüklü (örneğin akıllı telefonlar), orta çözünürlüklü görüntülü reklam (tablet) ve yüksek çözünürlüklü görüntü alanları (masaüstü ve dizüstü bilgisayarlar) için. İdeal olarak, altı için planlama, yukarıda listelenen üç görünüm portunun her biri için yüksek ve düşük çözünürlüklü bir yerleşime sahip standarttır. Bununla birlikte, bundan çok daha fazlasına sahip olmak, geliştirme ve bakım işlemlerini çok fazla yapacaktır, bu yüzden dikkatli olun.
Uyarlanabilir bir düzen geliştirmek aslında oldukça basittir. Tasarımcının (ya da tasarımcının) işe alımda çalıştığını varsaymak tıpkı geleneksel bir web sitesi geliştirmek gibidir. Siteyi mobil düşük çözünürlüklü bir görünümde geliştirerek başlayacaksınız. Bunu tamamladıktan sonra, daha yüksek çözünürlüklü görüntü alanları için yerleşimi genişletmek için medya sorgularını kullanırız. Aşağıda, düşük, orta ve yüksek çözünürlüklü görüntüleme medyası sorguları vardır:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Adaptif yaklaşımda “snap” kelimesinin geldiği yer burasıdır. Birden çok ortak görüntüleme çözünürlüğünü hedeflediğimizden, pencereyi yeniden boyutlandırırken birinden diğerine geçmek, düzenin atlamasına neden olabilir. Daha önce de belirttiğim gibi, uyarlamalı tasarım ve geliştirme, yalnızca güçlendirme veya karmaşık webapps için oldukça kullanışlıdır. Bağımsız bakış açıları için bu çok sayıda düzen için tasarlanması ve geliştirilmesi, ihtiyaç duyulmadığı takdirde, daha da zor bir iştir.
Bugün itibariyle, duyarlı tasarım ve geliştirme kullanmak için fiili yaklaşımdır. Düzenleme yaklaşımıyla karşılaştırıldığında yerleşim düzeni üzerinde daha az kontrol sağlarken, teknik olarak yalnızca tek bir düzeniniz olduğunda uygulamak ve sürdürmek çok daha az çaba gerektirir. Ayrıca web sitesi için daha da özelleştirilmiş ve bu anahtar satış noktası. Tasarımınızın ne zaman kırıldığını veya tasarlandığı gibi görünmediğine bağlı olarak kendi sınır değerlerinizi yaratabileceksiniz.
Duyarlı düzenler ayrıca sıvı düzenleri içerir. Yanıt veren web tasarımından önce, akışkan sistemler popülerdi - genişlik yüzdelerini kullanan düzenler. Çoğu durumda kesinlikle iyi çalışırlarken, akıllı telefonlarımız ve tabletlerimiz vardı. Şimdi, çoğu akış düzeni, medya sorguları tarafından çok düşük ve çok yüksek çözünürlüklerde artırılıyor. Aksi takdirde, son derece kompakt veya son derece büyük düzenlerle sonuçlanabilir.
Uyarlanabilir tasarıma uymak için çok basit bir rehberiniz olsa da, duyarlı tasarım çok net bir kesim değildir. Tarayıcıda tasarım yapmak için en iyi yol olan, aynı zamanda tasarım ve geliştirme yapan, tartışmalı bir tartışma var. Tasarım yaparken tüm vitrinleri dikkate alacak olursanız, tasarım tarafında daha fazla iş vardır. İdeal olarak, bakış açılarını akılda tutmak isteriz, ancak belirli bir tasarım için değil. Mümkünse, orta bir yerde buluşmaya çalışın; Orta çözünürlükte görüntü alanlarına odaklanın, düzenin daha sonra daha düşük ve daha yüksek çözünürlükler için ayarlanması gerektiğini unutmayın.
Varsa, mevcut kullanıcı analizlerini kullanmak son derece önemlidir. Sitenizde zaten kitlenizin düşük çözünürlüklü görüntülü reklamlardan okuduğunu gösteren analizler varsa, bunlara odaklanın. Kitlenizi hedefleyin, bu, orada en iyi uygulamaların bazılarını göz ardı etmek anlamına gelse bile. Sonunda, web siteniz bu 'en iyi' uygulamaları toplayan insanlara değil, onlara hizmet edecek.
Tasarım aşaması tamamlandığında, gelişme gerçek eğlencenin başladığı yerdir. Daha önce de belirtildiği gibi, tipik kitlenizin analitik verileri varsa, oradan başlayın. Düzeninizi geliştirdikten sonra, duyarlı hale getirmek için medya sorgularını kullanırsınız. Ayarlanmış görünüm portlarını tanımlamak yerine, düzen kırılıncaya kadar tarayıcınızı manuel olarak yeniden boyutlandırırsınız. Bu olduğunda, bu sizin kırılma genişliğinizdir - tasarımdaki arayı düzeltmek ve yeniden boyutlandırmaya devam etmek için bir medya sorgusu ekleyin. İdeal olarak, bunu yüksek çözünürlüklü bir cihazdan yapacaksınız, böylece tüm görüntü alanlarını görebilirsiniz. Düşük ve yüksek çözünürlüklü görünümler için destek aldığınızdan emin olduktan sonra, teste devam edin.
Nadiren, özel bir çözüm kullanan bir web sitesiyle karşılaşabilirsiniz. {$lang_domain} . Genel olarak konuşursak, web'in çoğunluğu yukarıda belirtildiği gibi ya duyarlı ya da uyarlanabilir gruplara girer, ama bazen insanlar yaratıcı olurlar ve kendi çözümlerini yaparlar. {$lang_domain} standart düşük, orta ve yüksek kesme noktaları ile başlayarak, daha sonra düzeni kırıldığında gerektiğinde tamamlayarak bunu yapar. Bunun üzerine, düzen ayrıca ayarlanmış bir maksimum çözünürlüğe kadar doğada da sıvıdır. Bu düşünceyle, yaratıcı olun ve normu bozan bir şey inşa edin!
Ne yazık ki, bu düzenleri henüz test eden tarayıcılar için gerçekten iyi bir çözüm yok. Test etmenin en iyi yolu elle yapmaktır: sayfayı telefonunuza, tabletinize, dizüstü bilgisayarınıza ve etrafınızdaki başka bir yere yüklemek. Böyle bir uzantıyı destekliyorsa tarayıcınızda bir viewport spoofer da kullanabilirsiniz. Dalgalanma Emülatörü bazı düşük çözünürlüklü görüntü testlerini test etmek için kromda kullandığım bir uzantıdır. Cihazları manuel olarak test etmek kesinlikle güç olsa da, sitenizin sahip olduğu işlevsellik hakkında daha doğru bir izlenim verir. Bir emülatöre iyi bakan kullanıcı arayüzü, gerçek bir cihaz üzerinde oldukça zayıf bir performans sergileyebilir.
Bu makale kadar kapsamlı olarak, bu sadece düzen türleri konusunda bir astardır. Bu makalede yer almayan yanıt veren web tasarım yöntemleri hakkında birçok bilgi vardır; UI öğeleri ve tipografi, duyarlı görüntüler ve medya, cihaz piksel oranları ve daha pek çok şey burada optimize edilmez. Bununla birlikte, daha fazla bilgi yoğun formlarda bu tür bilgi için bol miktarda kaynak vardır. Duyarlı web tasarımı fikri ortaya çıktığından, konuyla ilgili son derece zengin bilgi birikimine katkıda bulunduk. Buradaki düzen türleri arasındaki farkı açıklayarak, duyarlı bir web fikri üzerine daha iyi bir fikir sahibi olacağınızı ümit ediyorum… tavşan deliğini kaybetmeden.
Topluluk sürekli yeni teknikler yaratıyor ve karşılaştığımız sorunlara yaratıcı çözümler üretiyor. Bu yüzden, orada duyarlı web tasarımı hakkında geniş bir bilgi hazinesi mevcut olsa da, henüz emekleme aşamasında olan bir kavram. En iyi uygulamalar ve ortak kullanım durumlarına uymak kolay olsa da, yaratıcı olmak ve kendi çözümünüzü oluşturmak her zaman teşvik edilir. Sadece içeri giren veya yanıt veren web tasarımı ve geliştirme konusundaki bilgimizi genişletenlere ilişkin herhangi bir ipucu veya öneriniz varsa, aşağıda bir tartışma yapın!
Öne çıkan görsel / küçük resim, kullanımlar duyarlı görüntü Shutterstock üzerinden.