Divi ile duyarlı bir web sitesine 6 adım
Divi 100 maratonumuzun 36. gününe hoş geldiniz. Bu serinin son gününde Divi 3.0’ın muhteşem sürümünü geri saydığımızda Divi’nin olağanüstü kaynaklarının 100 gününü takip etmeye devam edin!
Divi’nin “Kutunun Dışında” güzel bir duyarlı WordPress teması olduğu doğru olsa da, kendiniz veya müşteri için benzersiz bir web sitesi oluşturmak için divi kullanırken, oldukça fazla test, ayarlama ve ayarlama gerçekten olacağı doğrudur. Gerekli çünkü özel tasarım onu canlandırdığınız. Eğer, yani, nihai sonucun her cihazda mükemmel görünen mükemmel bir duyarlı web sitesi olmasını istiyorsanız.
Bu yolu birçok müşteri için birçok kez geçtikten sonra, tasarım sürecimi ve şimdiye kadar öğrendiğim dersleri paylaşırsam Divi topluluğu için yararlı olacağını düşünüyorum. Aşağıdaki makalede, duyarlı tasarım iş akışlarını iyileştirmek için Divi kullanan herkes tarafından benimsenebilen veya uyarlanabilen altı adımlı bir süreç yaptım. Başlayalım! 1. İş hedeflerini benim için içeride ve dışarıda bilin, burası ardışık bir web tasarımının gerçek sırrı. Önümüzdeki beş yıl içinde işlerini nereden getirmeyi umdukları hakkında derin bir konuşmanın temeli haline gelen bir proje öncesi anketle başladım. Bunlar sorduğumuz birkaç soru.
Mevcut iş karışımı nedir? Bunun değişmesini bekliyorlar mı? Genişleme planları nelerdir? Yeni ürünler veya içerikler (örneğin çevrimiçi satış, podcast başlatma, dizinler oluşturma) hemen mı yoksa yakın gelecekte mi sunmayı mı planlıyorlar? Müvekkilim hakkında düşünmek istediğim en önemli şeylerden biri, ziyaretçilerinin web sitelerinden nasıl geçmelerini ve ziyaretçilerin devam etmeden önce ana sayfalarında hangi önemli noktaları iletmek istedikleri. Nasıl cevap verdikleri, bir ana sayfa nasıl yaptığımızı belirleyecekler. Ana sayfada iletilmesi gereken ana mesajların tanımlanması, mesajları ilgi alanlarına yerleştirin ve müşterileri önceliklendiren bir web deneyimi oluşturmaya hazırsınız. 2. Google Analytics’e bağımlı olduğum istatistiklere bakın çünkü müşterinizin iş profilini birçok yönden tamamlamaya yardımcı olur. Düşük kiralama oranı? Ana sayfa sayfası içeriği açıkça çalışıyor, bu nedenle neleri korumak için ve neyin yapılması gerektiğini öğrenin. Birkaç ziyaretçi geri mi? İnsanlar ikisini görmek için geri dönmezler, bu yüzden ürün oldukça iyi sergilenmez. Düşük kalmak? Belki kopya kafa karıştırıcı veya yeterince ilginç değil.
En önemlisi, analitik, çoğu ziyaretçi tarafından siteyi ziyaret etmek için hangi cihazın kullanıldığını söyleyebilir. Müşterilerimin çoğu fotoğrafçılar, büyük masaüstü Mac’ler üzerinde çalışan, bu yüzden tasarımımın bu boyutta mükemmel olması gerektiğini biliyorum. Ancak müşterilerinin çoğu tablette ilk kez ziyaret etti ve daha sonra ikinci kez bir dizüstü bilgisayar 15 ile geri döndü. Versa 3. Bu sahnede bir taslak yapın, sitenin temel yapısını ve sayfanın bir sayfadan bir sonraki sayfaya nasıl akabileceğini anlamaya yardımcı olmak için bir tel çerçeve kullanmayı düşünebilirsiniz. Başlangıç noktam her zaman güvenilir bir kalemdir ve boş kağıt. Bu, belirli bir tasarımın yönünü çok fazla zorlamadan bir dizi kaba çizim yapmama izin veriyor. En iyi ana sayfanın düzenini kabul edene kadar bunu genellikle müşteri ile yapıyorum. Bundan sonra, bir sonraki adımım Üretimin ne kadar karmaşık olduğuna bağlı. Kolaysa ve tüm kopyalarım ve varlıkların yanı sıra ayrıntılı bir site haritası varsa, belki de doğrudan Divi’ye daldım. Tasarım UX ASL ayrıntılarını içeriyorsa Ben, içeriğin tablet veya cep telefonunda önemli ölçüde değiştirilebileceği animasyon ve duyarlı düzeni test etmek için şimdi Adobe CC deneyimimi (http://www.adobe.com/uk/products/experience-sign.html) kullanıyorum. Bu, müşterinize tüm cihazlarda en üst paroda (ekranın alt kısmı) nelerin görüneceğini görme seçeneği verir.
Çoğu zaman, bir proje karmaşık bir grafik öğesi gerektirdiğinde, ayrıntılı bir katmanlı dosya geliştirmek için Photoshop’ta çalışıyorum. Ben Photoshop hayranıyım çünkü bu, hazır sitede kullanacağınız varlıkları geliştirirken iddiayı ortadan kaldırıyor. Buna ek olarak, katman grubunu, iş akışınızı büyük ölçekte hızlandıran PNG ve JPEG dosyaları olarak hızlı bir şekilde dışa aktarabilirsiniz. Altın ayarım, hedef kitleniz tarafından en yaygın olarak kullanılan çözünürlük için bir tuval yapmaktır. Benim durumumda, bir Retina 15 “tipik 2880px genişlik ile başladım ve orta noktamı ve standart aşamamı rehber kurallarıyla işaretlediğimden emin oldum. Kayıt için, standart Divi bölgesinin genişliği 1080px’dir. Katmanlarınızı her bölüm için klasörde gruplandırın, böylece parçanın yüksekliğini kolayca ayarlayabilir ve tasarım özelliklerini çoğaltabilirsiniz. 4. En kullanışlı Divi özelliklerinden biri gittiğinizde, parçaları ve düzenleri depolama ve yeniden kullanma yeteneğidir, bu da benzer yapılara sahip bir sayfa çok hızlı bir şekilde oluşturmayı kolaylaştırır. Herhangi bir şekilde kaçınmak istediğiniz şey, hala bazı duyarlı ayarlamalar gerektiren düzeni çoğaltmaktır. Aynı sorunu tekrar tekrar düzelttikten sonra bir düzine sayfadan geçmek zorunda kalmadan daha kötü bir şey yoktur.
Duyarlı iş akışınızı hızlandırmak için, her bölümü geliştirir ve ücretsiz çevrimiçi araçlar, ekranfly (http://quirktools.com/screenfly) kullanarak yürürken test ederim. Sayfanın sonuna ulaştığımda, Android, iPhone 5, iPhone 6 ve iPad ve Monitor 27 “ve Dizüstü Bilgisayar 13” gibi gerçek cihazlarda test ettim. Tarayıcınızı tahmini bir çalışma biçimine açık bir şekilde sürükleyin, ancak kimse gerçek cihazları test etmeyi atmaz. Ana sayfanızı mükemmelleştirin ve diğer sayfalarınızın omurgasını oluşturmak için bu kısmı kullanabileceğinizi ve yeniden kullanabileceğinizi göreceksiniz. İçeriğinizi cihazla ayarladığım daha duyarlı web siteleriyle ayarlayın, özellikle hücresel söz konusu olduğunda, belirli içeriği gizlemeyi o kadar çok kucaklarım. Siteyi ilk kez mobil cihazlarda ziyaret eden kişiler, genel bir bakış açma eğilimindedir. Tabii ki, bu genelleme, ancak bu, müşterinizin iş hedeflerine gerçekten odaklanmanız ve ana alana tek bir tıklamayla hızlı ve kolay bir şekilde ulaşabilmeniz gerektiği anlamına gelir. Divi kullanırken, parçanın sadece birkaç kutuyu kontrol ederek tablet ve hücresel üzerinde kolayca gizlenebileceğini unutmayın.
6. Detaylara dikkat edin, çok ağır işler yapan Divi ile inşa ederseniz, duyarlı tasarımı anlamaya hazırsınız ve tüm cihazlarda daha yumuşak ayrıntıları kontrol etmeniz gerektiğinde, Divi’nin girdiği yerdir. Tabletler ve hücresel için yazı tipi boyutunu, dolgu ve kenar boşluğunu değiştirmenin ne kadar kolay olduğunu gerçekten seviyorum. Eskiden düzinelerce medya sorusu yazıyordum, şimdi hiçbir şey yazmıyorum. Kısacası, önce iş önceliklerini tanımlayan ve tarayıcıdaki sahneye ulaşmadan önce potansiyel sorunları ele alan sağlam bir planlama süreci geliştirmek, duyarlı siteler güvenle ve hızlı bir şekilde geliştirmenize yardımcı olacaktır. Tasarım işleminin her adımını test etmeye devam edin ve her cihazda istediğiniz sonuçları almak için Divi’nin varsayılan gelişmiş tasarım ayarlarını kullanın. Okuduğunuz için teşekkür ederiz ve benim için sorularınızı sormaktan çekinmeyin veya aşağıdaki yorumlar bölümünde öğrendiğiniz dersleri paylaşın. Ayrıca, zarif bir temaya ve YouTube kanalına abone olduğunuzdan emin olun, böylece büyük duyuruları, yararlı ipuçlarını veya freebie divi! maraton. Arka arkaya 100 gün boyunca ücretsiz bir divi kaynağı yayınladığımızda takip etmeye devam edin! REACT kullanarak aşağıdan yukarıya inşa edilmiş yeni görsel düzenleyicimiz de dahil olmak üzere Divi 3.0 oyununu değiştiren bir sürümle sona erecek. Divi 3.0 sonsuza dek Divi Builder ile bir web sitesi oluşturma şeklinizi değiştirecek! Geri sayım başlasın. Divi 3.0 hakkında daha fazla bilgi edinin