WordPress için duyarlı tasarım hakkında bilgi sahibi olmanız gerekir
Duyarlı tasarım son yıllarda giderek daha önemli hale geldi. Şu anda, tamamen duyarlı olmak, WordPress eklentisi ve teması için bir zorunluluktur. Ancak, bir web tasarımcısı değilseniz, bunun gibi duyarlı tasarımlar yapan şey hala sizin için bir Pandora kutusu olabilir. Bunun önemli olduğunun kesinlikle farkındasınız ama hepsi bu. Çalışma şekli ya da nasıl uygulanacağı hala ulaşılabilmenizin ötesindedir. Ya da belki siteniz hala statik bir tema çalıştırıyor ve zorlukla denediğiniz görünümü kaybetmeden güncellemek istiyorsunuz.
Her ikisi de WordPress için duyarlı tasarım konusunda kendinizi eğitmek için mükemmel bir nedendir ve iki bölümlü makalemizde, bu önemli konu hakkında bilinmesi gereken her şeyi öğreneceksiniz. Bu yazıda, duyarlı tasarımın ne olduğunu ve onu nasıl kullanabileceğinizi tartışacağız. Gönderinizi nasıl duyarlı hale getireceğinizi tam olarak öğrenmek için ikinci gönderiyi açın. Kulağa hoş geliyor mu? O zaman başlayalım. Duyarlı tasarım nedir ve neden umursamalısınız? Hücresel cihazlar -Bu fark edebileceğiniz gibi tüm hatalarıdır, cep telefonları ve tabletlerin kullanımı son yıllarda büyük ölçekte artmıştır. Benim gibi bir telefonla büyüyen insanlar için hala kafa karıştırıcı.
Bununla birlikte, bu gelişmenin sadece iletişim kurma şeklimizde değil, aynı zamanda çevrimiçi kullanımımızda da dramatik sonuçları vardır. Neredeyse herkesin bugün bir akıllı telefonu var, temelde internete her yerde, istediğimiz zaman erişebiliriz. Yalnızca ABD’de, akıllı telefonlarda dijital medyayı kullanmak için harcanan zaman 2010-2014 arasında yüzde 394 arttı. Aynı zamanda tablet büyümesi yüzde 1.721’e ulaştı! . Bir yıl sonra, 2015’in başlarında Google, şimdi cep telefonlarında masaüstü bilgisayarlardan daha fazla arama kaydettiklerini açıkladı. Kısa bir süre sonra arama devi, hücresel misafirperverlik güncellemesini başlattı ve bu da web sitesini hücresel için optimize edilmiş bir varlık olmadan etkili bir şekilde cezalandırdı (aynı zamanda mobilegeddon lakaplı bir adım).
Ancak, duyarlı tasarım tam olarak nedir? Terim kendisi 2010 yılında Ethan Marcotte tarafından oluşturulmuştur. Bu, içerik yapmayı amaçlayan bir web tasarım yaklaşımını göstermektedir. Bu, site öğesinin boyutunun ve konumunun görünüm alanının boyutuna göre değişebileceği şekilde ayarlanabilir. (Bilmeyenler için ViewPort, web sitesinin görünür olduğu alanı ve ekranın boyutuna ve tarayıcı penceresinin boyutuna bağlı olarak açıklar.) Bu yaklaşımın avantajı, diğer yöntemlere kıyasla duyarlı tasarımın avantajıdır. sadece bir site oluşturmanız ve güncellemeniz gerektiğidir. Hem masaüstü bilgisayarlar, cep telefonları, tabletler hem de phabletler (bana sorarsanız çok çirkin kelimelerdir), herkes içeriğinize erişmek için aynı alanı kullanabilir. Ayrıca, onu çalıştıran teknoloji yaygın olarak uyarlanmış ve bu nedenle uyumludur. Çoğu insan cihazı ve tarayıcı. Bu web tasarım yaklaşımı fiili bir standardı haline geldiğinden, 2013 duyarlı tasarım yılını aradıklarında Mashable yanlış değildir. Ancak, tam olarak nasıl çalışır? Duyarlı Tasarım Temelleri Mutlak yerine Orantılı Boyut Kullanarak Duyarlı Tasarım Ana prensip, web sitesinin görüntülendikleri ekrana uyum sağlamasını sağlar. Izgara, web sitesinin başlıklar, altbilgiler, içerik, yan ve içindeki her şey gibi ana yapısını açıklar.
Neden bahsettiğimi bilmiyorsanız, herhangi bir duyarlı web sitesini (bunun gibi) açın ve tarayıcı pencerenizin bir tarafını diğer tarafa sürükleyin. Ekran büzüldüğünde tasarımın değiştiğini göreceksiniz. Bu, mutlak değil, sayfa öğesinin genişliği ve yüksekliği için orantılı ölçümler kullanılarak elde edilir. Ne demek istediğimi açıklığa kavuşturmak için, geçmişte tüm web sitelerinin statik olduğunu bilmeniz gerekir, çünkü tüm ölçümler piksel veya diğer mutlak boyutlarda ifade edilir. Bu siteleri görmek için hangi ekran boyutunu kullanırsanız kullanın, tasarım her zaman aynı kalacaktır. Ekran siteden daha küçük hale gelirse, kullanıcı geri kalanını görmek için kaydırmalı ve büyütmelidir. Duyarlı tasarım mutlak ölçümleri önler ve bunun yerine orantılı kullanır. Bu, öğenin boyutunun artık piksel veya benzerlerinde değil, yüzde ve diğer duyarlı ölçümlerde bildirildiği anlamına gelir.
Bu şekilde, öğeler görüntülenen ekranlarına uyum sağlayabilir ve Web’e duyarlı tasarım çalışmaları yapmak için en önemli şey budur. Izgara için geçerli olan esnek görüntü boyutu, görüntüler için de geçerlidir. Ayrıca ekran ortamına uyum sağlamaları ve ekrana uyum sağlamaları gerekir. İkinci bölümde göreceğiniz gibi, bunu CSS aracılığıyla elde etmek aslında oldukça basittir. Ancak, görüntüler en önemli boyutta başka hususlarla birlikte gelir.
Görsel genellikle sayfanın ağırlığının en büyük kısmıdır ve birçok mobil cihaz, özellikle cep telefonu, daha yavaş indirme hızlarıyla uğraşmalıdır. Bu nedenle, duyarlı tasarım sadece görüntülerin ekran boyutuna uyum sağlamakla kalmaz, aynı zamanda sayfanın hala daha yavaş bir bağlantıda kullanılabileceğinden emin olmanız gerekir. WordPress kısa süre önce bu bölümde değişiklikler yaptı. En son sürümü çalıştırırsanız, platform bunların çoğunu otomatik olarak işler. Bununla birlikte, bu, sayfada SEO ve WordPress’i hızlandırmak için bir adım olarak hatırlanması gereken bir konudur. Sıvı kafes ve esnek görüntülerin diğer vicdanları duyarlı tasarımın temelini oluşturur, ancak bundan daha fazlası vardır. Genel olarak, tasarım yaklaşımı, web siteleriyle farklı şekillerde etkileşime giren hücresel kullanıcıların ihtiyaçlarına masaüstü bilgisayarlardaki kullanıcılardan yanıt vermekle ilgilidir. Örneğin, bu cihazların neredeyse tamamı Touch ile çalıştırılır. Yani, kullanıcılar imleci öğelere yönlendiremez ve düğmelerin, formların ve en önemlisi menülerin formu, boyutu ve işlevselliği açısından farklı ihtiyaçlara sahiptir. İkinci makalede web sitesi sahibinin nasıl yanıt verebileceğini göreceğiz. Şimdilik, duyarlı tasarım işlevi yapan teknolojiye geçelim.
Uyarlanabilir tasarımın arkasındaki teknoloji, giriş ve çıkışlara gitme zamanıdır. WordPress web sitesi genellikle HTML, CSS ve ara sıra JavaScript’in bir karışımı olmasına rağmen, duyarlı tasarımın omurgası CSS medya kuyruğudur. Terime aşina mısınız? Endişelenme, şimdi her şeyi öğreneceksin. Medya kuyruğu nedir? İlk olarak 2009 yılında tanıtılan medya sorguları, tasarımcıların ve geliştiricilerin farklı koşullara bağlı olarak CSS stilini değiştirmelerine izin veren CSS operatörleridir. Bu, ekran çözünürlüğü, yönlendirme (peyzaj modu veya portre) ve en önemlisi, siteyi gören cihazın görünüm alanının boyutunu içerir. Temel olarak bu, görülen tarayıcı penceresinin boyutuna bağlı olarak web sitenizin tasarımını değiştirebileceğiniz anlamına gelir. Modern WordPress temasından Style File.css’i daha önce gördüyseniz, bir medya sorgusu görmüş olabilirsiniz: @media sadece ekran ve (maksimum genişlik: 500px) {/ * css özellikle burada */
} Kendiniz toplayamıyorsanız, yukarıdaki kod tarayıcıya belirli bir boyutta bir ekran için özel bir CSS kullanmasını söyler (bu durumda 500 piksel). Buna dinlenme noktası denir. Dinlenme noktası tam olarak nedir? Sormana sevindim. Break Noktası Kueri Media Tanıtımı Site tasarımının değiştiği veya “durduğu” görünüm alanının boyutundaki kavşak noktasını belirleyin
. Örneğin, görünüm portu genişliği 600 piksel altındaysa, kenar çubuğu ana içeriğin altında hareket edecektir (bu çok yaygın bir manevra). Bu gibi kırılma noktaları kullanarak, temalar çeşitli ekran boyutlarını içerebilir ve tasarım için ne kadar alan mevcut olduğuna göre değişiklikler uygulayabilir. Bu şekilde, siteyi ziyaret etmek için kullanılan cihazdan bağımsız olarak tasarıma göre değişiklik yapabilirler. Bununla birlikte, her biri ekran boyutu, çözünürlük ve portre ve peyzaj modlarında kullanılabilecek yeni mobil cihazlar her gün çıkıyor. Genel olarak, bu, özel cihaz tasarımları için tasarımcılar tarafından dikkate alınması gereken yüzlerce farklı boyuta boşalır. Her çözüm için asla özel bir çözüm yapamadığımız için, bağımsız bir kavşak noktasını belirlemek çok daha iyi bir fikirdir ve medya kuyruğu bunu yapmanıza izin verir. Buna ek olarak, ekran boyutunun yanı sıra diğer koşulları da kontrol edebilirler, ancak bu bizim amacımız için yeterlidir. Daha fazla bilgi edinmek istiyorsanız, bu kaynağa bakın. Hepsi duyarlı tasarıma yakalandı mı?
