Elementor’da duyarlı web sitemizi yapmanın iş akışı
Bu makalede, öğelerle oluştururken her türlü cihaz ve ekran boyutu için nasıl çok duyarlı bir web sitesi oluşturduğumuzu tartışmak istiyoruz. Bu, bireysel ajansımızın iş akışıdır ve son birkaç yıldır faaliyet gösterdik. Bunun işinize ve tasarımınıza yardımcı olabileceğini düşünüyorsanız, benimsemekten çekinmeyin. Yaptığımız web sitelerinin çoğunun oldukça karmaşık olduğunu ve basit bir beş sayfalık şirket yönü olmadığını unutmayın. Bu adımlardan bazıları, karmaşık e-Niaga mağazaları veya içerik web siteleri oluştururken çok yararlıdır, ancak daha basit bir site oluştururken zaman ve paradan tasarruf etmek için göz ardı edilebilir.
Duyarlı web tasarımımız için ilk adım modu taklit etmektir. Adobe XD’yi bir web sitesi maketini oluşturmak için kullanıyoruz ve hücresel öncelik veren bir ideoloji tasarlıyoruz. Yani, sitenin masaüstü sürümünü düşünmeden önce bile devam edeceğiz ve mobil mockup yapacağız. Tüm web sitesi trafiğinin% 60’ı hücresel tarayıcılardan gelir, yani bu masaüstlerini düzeltmekten daha önemlidir.
Hücresel öncelik veren bir zihniyet tasarlayarak, web sitesinin yönlerinin ilk günden beri mükemmel olmasını sağlayabiliriz. Adobe XD’yi kullanarak, ajansımız birbirleriyle kolayca işbirliği yapabilir, geri bildirim için alayları paylaşabilir ve hatta tasarım yaparken kişisel bir cep telefonunda görebilir. Özellikle, web sitesi karmaşık projeler için yanıt verebilirliğin tasarımı söz konusu olduğunda, web sitesini statik olarak alay etmek söz konusu olduğunda çok önemli. Alaycı siteyle ilgili makalemizi buradan okuyabilirsiniz: https://isotropic.co/is-making-a-website-mockup-worth-it/ Mockup tamamlandıktan sonra, kullanıcı giriş grubu, istemci ve tarafından test edildikten sonra Ajans ekibimiz, gerçekten Elementor’da yapma zamanı.
Kaynaklar Her şeyin çeşitli ekran boyutlarında iyi görünmesini sağlamak için, Elementor’a dahil olan varsayılan “gizleme” özelliğini kullanacağız. Maker’ın Devam Ayarları sekmesinde. Bununla birlikte, öğeleri gizlerken dikkatli olmalısınız (bu yalnızca grafik kullanıcı arayüzünde CSS: Yok Ekran kullanmaz), çünkü tüm bu öğeler hala yüklenecektir. Web sayfalarınızın yarısını mobil cihazlarda gizlerseniz, web sitenizin hızı üzerinde ciddi bir etkisi olabilir, bu nedenle dikkatli olmanız ve siteyi mümkün olduğunca bir tarafı yapmanız gerekir. Elementorvers şu anda üç duyarlı kesme noktası ile gönderilir. Bazı durumlarda, bu üç kesme noktası yüksek kaliteli duyarlı tasarımlar üretmek için fazlasıyla yeterlidir. Ancak, diğer araçlarla tasarlanırken, altı adede kadar geçici durdurma noktası kullanıyoruz. Elementor bunu kutunun dışında yapmamıza izin vermedi, bu yüzden CSS medya sorguları kullanılarak tuzağa düştük. Bu notta, Elementor geliştiricisinin orijinal bir özellik olarak ek kesme noktası eklemesi için lütfen seçin:
Bununla birlikte, sadece hücresel kesme noktası eklemek için başka Piotnet lisansları satın almayacağız, CSS medya sorguları bunu yapmanın daha hızlı ve daha ucuz bir yoludur. Duyarlı tasarım açısından kullanabileceğiniz bir başka araç da CShero adı verilen bir şeydir. CSShero, iyi bir grafik kullanıcı arayüzü kullanarak çok sayıda özel CSS üretmenizi sağlar. Bunu geçmişte kullandık ve bu iş akışımız için oldukça yararlı – düşüncelerimiz hakkında buradan okuyabilirsiniz. Belirli içerik öğeleri eklerken, en iyi uygulamaları duyarlı tasarımı izlemeye çalışıyoruz. Örneğin, VH, VW veya yüzdeyi kullanarak belirli öğeleri ölçeceğiz. Mümkünse piksel boyutundan kaçınmaya çalışıyoruz, çünkü bunun web sitelerinin benzersiz bir ekran boyutunda duyarlı yönü üzerinde olumsuz bir etkisi olabilir. Mümkünse, sitedeki temel ikonlarımız ve grafiklerimiz için SVG’yi kullanmaya çalışıyoruz, çünkü bunlar en duyarlı olanlar. Görüntü havaya uçurulduğunda bozulacak ve SVG (çoğu görüntüden çok daha küçük olduklarından bahsetmiyorum, bu da çok daha hızlı bir yükleme süresine yol açacak).
Kaynağımız gerçekten tüm tipolojik unsurlarımız için fren kullanmayı seviyor. Frenler yalnızca temel HTML metin değerini alır ve siteyi genişletir veya azaltır. Örneğin, çoğu tarayıcı için temel yazı tipi boyutu 16px’dir, bu nedenle bir fren 16 piksele eşittir.
Kaynak Tabii ki, bu yazı tipinin boyutu, özellikle masaüstü ve hücresel karşılaştırılırken tarayıcılar arasında farklıdır. Bizim için bu iyidir, çünkü görünür ve çeşitli ekran boyutlarında okunan duyarlı metin boyutları almamızı sağlar. Google’da en iyi uygulamaya duyarlı tasarım hakkında birçok makale var, bu yüzden ilgileniyorsanız, sadece arayın. Mesele, ziyaretçilerinize dikkat etmek, mobil cihazlarda basit şeyleri korumak ve masaüstü ile mobil cihaz arasındaki sürekli öğenin sağlanmasını sağlamaktır. Elemanların yükseltilmesini sağlamak için yüzde ve frenler gibi göreli ölçümleri kullanmaya çalıştığınızdan emin olun. ve ekran boyutu gereksinimlerini karşılamak için doğru şekilde azaldı.
Hücresel hızı optimize etmek Web sitemizin genel bir sürümüne sahip olduktan sonra, hız için optimize etme zamanı. Elementor web sitesinin nasıl daha hızlı yükleneceğine dair birçok makalemiz ve kaynağımız var, ancak hücresel arama yaparken odaklanmanız gereken bazı şeyler var. Hücresel cihazlar daha küçük güce ve daha yavaş internete sahiptir, bu da bu tür bir sitenin genellikle masaüstü web sitelerinden çok daha yavaş yüklendiği anlamına gelir. Bu sadece bilinen bir gerçektir, ancak bu mümkün olduğunca azaltılması gereken bir şeydir veya ziyaretçileriniz web sitenize ulaşamaz. İnsanların sadece 6 saniye aralığına sahiptir ve siteniz 2’ye yüklenecektir.
Bu yöntemle ilgili herhangi bir ana sorunu tanımlarsak, belirli öğelere uygulanan CSS’yi kolayca düzenleyebilir ve hızlı iyileştirmeler yapıp yapamayacağımızı görebiliriz.Browserstacks yığını, şirketin ajansına ve kullanımına daha fazla yöneliktir ve geliştirici sitelerimizi ve gerçek cihazlar ve tarayıcılar arasındaki test etmemizi sağlar.Gerçek cihazlar ve düzinelerce tarayıcıdan geçerek, eski cihazlarda veya tarayıcılarda meydana gelebilecek sorunları belirleyebiliriz.Ayda 29,00 $ ‘a mal oluyor ve ayrıca ücretsiz bir deneme yapıyor.Bunun gibi araçları kullanabileceğini düşündüğünüz belirli projeler üzerinde çalışıyorsanız, denemeyi görmenizi şiddetle tavsiye ederim.
Aynı zamanda daha küçük bir ajans veya serbest çalışan iseniz, 100 dakikalık test için ayda 12,00 $ ‘dan başlayan fiyat indirimlerine erişebilirsiniz. Son olarak, bir element kullanıyorsanız gerçekleşmeyebilecek açık kaynaklı bir projeniz varsa, ücretsiz testlere erişebilirsiniz. Duyarlı bir şekilde bu son test aracı, araç kutumuza en son eklentidir, ancak duyarlı Web Elementor Design iş akışımızın en önemli yönlerinden biridir. Duyarlı, önceden belirlenmiş 30 ekran boyutuna kadar önizlemeleri kolayca görmenizi sağlayan ve geliştirme aracını doğrudan tarayıcıda kullanmanızı sağlayan açık kaynaklı bir projedir. Tüm ekran boyutları, ayarlanmış düzenler ve birçok cihaz arasında ayna etkileşimleri gibi birçok benzersiz ve sofistike özellik vardır. Ayrıca bir Chromium geliştirici konsolu alırsınız, böylece CSS’yi kolayca düzenleyebilirsiniz. Bu, web sitemiz Elementor’un duyarlı sürümüyle ilgili potansiyel sorunları tanımlamak için kullandığımız son araçtır ve bu kesinlikle dikkat etmeniz gereken bir şeydir. Bu araç bir tarayıcı uzantısı ve bağımsız uygulama olarak indirilir. Tarayıcı uzantısına tıklarsınız ve uygulamadaki web sitesini açar. Son sonuç, düzinelerce cihaz, görüntüleme alanları ve tarayıcılar aracılığıyla elementlerle yapılan duyarlı tasarımımızı test ettikten sonra, nihayet doğrudan değişiklikleri uygulayacak kadar emindik. Elementorlar açısından duyarlı tasarım için iş akışımızı tamamlar. İlginç olduğunu düşünüyorsanız, kendi rutininize uygulamaktan çekinmeyin.
Kendi iş akışınız varsa, aşağıdaki yorumlar bölümünde yayınlamaktan çekinmeyin, çünkü element kapısını kullanmaya yardımcı olabilir.
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun.
