Divi ile Sorunsuz Yanıt Veren Bir Web Sitesine 6 Adım

Divi 100 Maratonumuzun 36. Gününe hoş geldiniz. Serinin son gününde muhteşem Divi 3.0 sürümüne geri sayarken, 100 gün boyunca muhteşem Divi kaynaklarını izlemeye devam edin!

---

Divi'nin "kutudan çıktığı gibi" güzel duyarlı bir WordPress teması olduğu doğru olsa da, Divi'yi kendiniz veya bir müşteri için benzersiz bir web sitesi oluşturmak için kullanırken adil miktarda test, ince ayar ve ince ayarın kesinlikle olacağı da doğrudur. oluşturduğunuz özel tasarım hayata geçtiği için gereklidir. Yani, nihai sonucun her cihazda mükemmel görünen kusursuz, duyarlı bir web sitesi olmasını istiyorsanız.

Birçok müşteri için bu yolu defalarca kat ettikten sonra, tasarım sürecimi ve bu süreçte öğrendiğim dersleri paylaşmanın Divi Topluluğu için faydalı olacağını düşündüm. Aşağıdaki makalede, Divi kullanan herkesin duyarlı tasarım iş akışını iyileştirmek için benimseyebileceği veya uyarlayabileceği altı adımlı bir süreç oluşturdum.

Başlayalım!

1. İş Amaçlarını Tersine Bilin

Benim için başarılı duyarlı web tasarımının gerçek sırrı burada yatıyor. Önümüzdeki beş yıl içinde işlerini nereye götürmeyi umdukları hakkında derinlemesine bir konuşmanın temelini oluşturan bir proje öncesi anketle başlıyorum. Bunlar sorduğumuz sorulardan sadece birkaçı.

Mevcut iş karması nedir? Bunun değişmesini mi bekliyorlar?
Genişleme planları nelerdir? Yakın zamanda veya yakın gelecekte yeni ürünler veya içerik (yani çevrimiçi satış yapmak, bir podcast başlatmak, bir dizin oluşturmak) sunmayı planlıyorlar mı?

Müşterilerimden düşünmelerini istediğim en önemli şeylerden biri, ziyaretçilerin web sitesinde nasıl hareket etmelerini istedikleri ve ziyaretçiler devam etmeden önce ana sayfalarında hangi önemli noktalara ulaşmak istedikleridir. Nasıl cevap verdikleri, ana sayfayı nasıl oluşturacağımızı belirleyecektir.

Ana sayfada iletilmesi gereken temel mesajları belirleyin, bunları önem sırasına yerleştirin ve müşteri öncelikli bir web deneyimi yaratma yolundasınız.

2. İstatistiklere Bakın

Müşterinizin işletme profilini birçok yönden tamamlamaya yardımcı olduğu için Google Analytics'e bağımlıyım. Düşük hemen çıkma oranı? Ana sayfa içeriği açıkça çalışıyor, bu yüzden neyi tutmaları ve neyin gitmesi gerektiğini belirleyin. Birkaç geri dönen ziyaretçi? İnsanlar ikinci kez bakmak için geri dönmüyor, bu yüzden ürün yeterince iyi sergilenmemiş olabilir. Düşük bekleme süresi? Belki de kopya kafa karıştırıcıdır veya yeterince zorlayıcı değildir.

Hepsinden önemlisi, Analytics size çoğu ziyaretçinin bir siteyi ziyaret etmek için hangi cihazları kullandığını söyleyebilir. Müşterilerimin çoğu, büyük masaüstü Mac'lerde çalışan fotoğrafçılar, bu yüzden tasarımlarımın bu boyutta kusursuz olması gerektiğini biliyorum. Ancak müşterilerinin çoğu önce tablette ziyaret ediyor ve ardından 15" dizüstü bilgisayardan ikinci kez geri dönüyor. Bu tür bir istihbarat paha biçilmezdir ve herhangi bir proje için 'önce mobil' veya başka bir konuda soruyu tamamen yanıtlar.

3. Çizin

Bu aşamada, sitenin temel yapısını ve sayfaların birinden diğerine nasıl aktığını belirlemeye yardımcı olması için bir tel çerçeve kullanmayı düşünebilirsiniz. Başlangıç ​​noktam her zaman güvenilir bir kalem ve boş bir kağıttır. Herhangi bir özel tasarım yönüne çok fazla bağlanmadan bir dizi kaba taslak yapmamı sağlıyor. Bunu genellikle en iyi ana sayfa düzeni üzerinde anlaşana kadar müşteriyle yaparım.

Bundan sonra, bir sonraki adımım, yapının teknik olarak ne kadar karmaşık olduğuna bağlı. Basitse ve ayrıntılı bir site haritasının yanı sıra tüm kopya ve varlıklar bendeyse, doğrudan Divi'ye dalabilirim.

Tasarım, orijinal UX ayrıntılarının oluşturulmasını içeriyorsa, içeriğin yer aldığı animasyonları ve duyarlı mizanpajları test etmek için genellikle şu anki aşkım olan Adobe CC Experience uygulamasını (http://www.adobe.com/uk/products/experience-design.html) kullanırım. tablet veya mobil cihazlarda önemli ölçüde değiştirilebilir. Bu, müşterinize tüm cihazlarda ekranın üst kısmında (ekranın alt kısmında) ne görüneceğini görme seçeneği sunar.

Çoğu zaman, bir proje karmaşık grafik öğeleri gerektirdiğinde, ayrıntılı bir katmanlı dosya geliştirmek için Photoshop'ta çalışırım. Ben bir Photoshop hayranıyım çünkü bitmiş sitede kullanacağınız varlıkları geliştirmek söz konusu olduğunda varsayımları ortadan kaldırıyor. Ayrıca, katman gruplarını kırpılmış png ve jpeg dosyaları olarak hızlı bir şekilde dışa aktarabilir ve iş akışınızı büyük ölçüde hızlandırabilirsiniz.

Altın kuralım, hedef kitleniz tarafından en sık kullanılan çözünürlük için bir tuval oluşturmaktır. Benim durumumda, 2880 piksellik tipik bir 15" retina genişliğiyle başlıyorum ve merkez noktamı ve standart sahnemi kılavuz kurallarla işaretlediğimden emin oluyorum. Kayıt için standart Divi site genişliği 1080 pikseldir.

Bölüm yüksekliklerini kolayca ayarlayabilmeniz ve tasarım özelliklerini çoğaltabilmeniz için katmanlarınızı her bölüm için klasörler halinde gruplayın.

4. Gittiğinizde Test Edin

Divi'nin en kullanışlı özelliklerinden biri, benzer yapılara sahip sayfaların çok hızlı bir şekilde oluşturulmasını kolaylaştıran bölümleri ve düzenleri kaydetme ve yeniden kullanma yeteneğidir. Ne pahasına olursa olsun kaçınmak istediğiniz şey, yine de bazı duyarlı ince ayarlara ihtiyaç duyan düzenleri çoğaltmaktır. Aynı sorunu tekrar tekrar düzeltmek için bir düzine bitmiş sayfadan geçmek zorunda kalmaktan daha kötü bir şey yoktur.

Duyarlı iş akışınızı hızlandırmak için, ücretsiz çevrimiçi araç Screenfly'yi (http://quirktools.com/screenfly) kullanarak her bölümü geliştiriyor ve ilerledikçe test ediyorum. Bir sayfanın sonuna geldiğimde Android, iPhone 5, iPhone 6 ve iPad gibi gerçek cihazlarda, 27” monitör ve 13” dizüstü bilgisayarda test ediyorum. Açıkçası, tarayıcınızı yaklaşık bir şekle sürüklemek yeterince iyi çalışıyor ancak hiçbir şey gerçek cihaz testini geçemez.

Ana sayfanızı mükemmelleştirin ve bu bölümleri diğer sayfalarınızın omurgasını oluşturmak için kullanabileceğinizi ve yeniden kullanabileceğinizi göreceksiniz.

5. İçeriğinizi Cihaza Uyarlayın

Ne kadar duyarlı web siteleri oluşturursam, özellikle mobil söz konusu olduğunda, belirli içerikleri gizlemeyi o kadar çok benimsiyorum. Bir siteyi mobil cihazlarda ilk kez ziyaret eden kişiler, genel bakış arama eğilimindedir. Elbette bu bir genellemedir, ancak bu, müşterinizin iş hedeflerine gerçekten odaklanmanız ve tek bir tıklamayla önemli alanlara hızlı ve kolay bir şekilde ulaşabileceklerinden emin olmanız gerektiği anlamına gelir.

Divi'yi kullanırken, tablet ve mobil cihazlarda sadece birkaç kutu işaretlenerek bölümlerin kolayca gizlenebileceğini unutmayın.

6. Ayrıntılara Dikkat Edin

Ağır kaldırmanın çoğunu yapan Divi ile inşa ediyorsanız, duyarlı tasarımla başa çıkma yolundasınız demektir ve aygıtlar arasında daha ince ayrıntıların kontrol edilmesi söz konusu olduğunda, Divi'nin devreye girdiği yer burasıdır. Kendi.

Özellikle tablet ve mobil cihazlar için yazı tipi boyutlarını ve ayrıca hem dolgu hem de kenar boşluğunu ayarlamanın ne kadar kolay olduğunu seviyorum. Düzinelerce medya sorgusu yazarken, şimdi hiçbirini yazmıyorum.

Özetle

Öncelikli olarak iş önceliklerini belirleyen ve tarayıcı içi aşamaya ulaşmadan potansiyel sorunları ele alan sağlam bir planlama süreci geliştirmek, güven ve hızla yanıt veren siteler geliştirmenize yardımcı olacaktır. Tasarım sürecinin her adımında test etmeye devam edin ve her cihazda istediğiniz sonuçları elde etmek için Divi'nin yerleşik Gelişmiş Tasarım Ayarlarını kullanın.

Okuduğunuz için teşekkür ederiz ve lütfen benim için herhangi bir sorunuzu sormaktan veya aşağıdaki yorumlar bölümünde öğrendiğiniz dersleri paylaşmaktan çekinmeyin.

Ayrıca, büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için Elegant Themes e-posta bültenine ve YouTube kanalına abone olmayı unutmayın!