Hücresel web tasarımı optimizasyonu için 10 ipucu
Hücresel trafik veri tüketimi sadece 2015 yılında% 74 arttı ve aynı dönemde bir milyardan fazla cihaz satıldı ve bu eğilim yavaşlama niyetini göstermedi. Bu, tasarımınızı hücresel için optimize etmenin öneminin altını çizmek için yeterlidir. Bazı WordPress temaları, duyarlı tasarımları ve çözünürlükleri diğerlerinden daha fazla işlemek için optimize edilmiştir, ancak bu, sitenizin hücresel misafirperverliğini artırmak istiyorsanız atlamanız gerektiği anlamına gelmez. Aslında, mobil cihazlar için tasarımınızı optimize etme konusunda büyük kar elde etmenizi sağlayan uygulanması kolay bir dizi iyileştirme vardır.
Bu makale sırasında, belirli hücresel işletim sistemleri için ipuçlarından görüntü optimizasyonu, düzen tasarımına ve diğer birçok konuya kadar her şeyi tartışacağız. Başlayalım! İpucu 1: iOS simgesini ve sıçrama ekranını ekleyin
Android tarafından yapılan birçok atılım olsa da, iOS cihazları çok popüler olmaya devam ediyor ve aktif geliştirici topluluğunun desteğinin tadını çıkarıyor. Mesele şu ki, izleyicilerinizin çoğu sitenizi iPhone ve iPad konforundan ziyaret etme eğilimindedir ve içeriğinizin tadını çıkarmak için yeterlise, web sitenizi ana ekranlarında bile saklayabilirler.
Bu olasılığa hazırlanmak için, WordPress web sitenize nasıl özel iOS simgeleri ekleyebileceğinizi tartışalım. Her şeyden önce, Header.php başlık dosyasını bulmalısınız, çünkü işlevini sağlamak için etiketi arasında bir kod eklememiz gerekir. Zaten orada mısın? Büyük! İşte eklemek istediğiniz kod:
Gördüğünüz gibi, kod iPhone, iPad ve Retina cihazları için özel bir simgeden bahsediyor , hepsi Apple-Touch-Icon Demiryolu özellikleri ile başlamalıdır.
Header.php dosyasını hala düzenlediğiniz sürece, web siteniz için yeni bir sıçrama iOS ekranı tasarlayabilir ve aşağıdaki kod satırlarını ekleyerek oraya girebilirsiniz: Kiat 2: Medya sorgularıyla birlikte birkaç görüntü kullanın
Resim Artem Kovalenco / Shutterstock.com Tabii ki, medya sorgularına alışıyorsunuz. Belirli senaryolar devreye girerse, CSS’nize gömülü özel bir tasarım kuralı olarak düşünün. Hücresel tasarım durumunda, bu senaryo bir çözünürlük, cihaz yönlendirmesi ve farklı tarayıcı boyutlarıdır. Mevcut medya sorgularıyla ilgili sorun, birçok tasarımcının ve geliştiricinin, ideal olarak olsa da, mobil saniyelik yaklaşımı göz önünde bulundurarak bir web sitesi oluşturmasıdır.
Bu mobil saniye yaklaşımı, popüler cihazların (yani 320px, 480px, 768px) boyutlarına baktığınızda medya sorgularında görülebilir.Teoride bu makul bir yaklaşım gibi görünse de, gereksiz soruları tanıtmak yerine etkili olduğunuz için, gerçek dünyada, yeni cihazlar (yeni ekran boyutu ve çözünürlükle) her zaman ortaya çıkıyor.Bir dahaki sefere bir tasarım üzerinde çalıştığınızda, mobil ilk perspektiften yaklaşmaya çalışın: Sorgularınızı küçük bir görünüm alanından yukarıda tasarlayın.
Break noktanızı bildirmek için piksel kullanmaktan kaçının.Bunun yerine, tasarımınızın zoom seviyesine bağlı olarak ayarlanabilmesi için EMS ile çalışmayı ve yüzdeyi mümkün olduğunca sık çalışmayı deneyin.
Medya sorgularınızı retina cihazlarına uyum sağlamak için ayarlamayı unutmayın (yani minimum çözünürlük: 192DPI).
İpucu 3: Görüntünüzü optimize edin
Ganibal / Shutterstock.com tarafından resim
Fantastik ve tamamen duyarlı bir tasarımınız olsa bile, potansiyel izleyiciler çok uzun sürerse sitenizden çıkmaktan korkabilir ve görüntüler bu açıdan büyük bir faktör oynar. Kullanıcılar mükemmel bir piksel grafiği bekler ve çok hızlı yüklenmesini beklerler, bu nedenle kalite yüksek kalırken dosya boyutunu düşük tutmanın yollarını bulmanız gerekir. Bu bir bulmaca gibi görünse de, bu sonucu elde etmenize yardımcı olabilecek birçok araç var. Eklentinin önünde, yüklendikten sonra, geçmişte yüklenen görüntüleri optimize etmek için WordPress sitenize yüklenen her görüntüye ve hatta medya kataloğunuz aracılığıyla otomatik olarak kayıpsız sıkıştırma tekniklerini uygulayacak bir EWWW görüntü optimizer ve WP Smush’ımız var. Web sitenize başka eklentiler eklememeyi tercih ederseniz, her zaman TinyJPG ve TinypnG gibi, temelde görüntünüzdeki renk sayısını seçici olarak azaltarak EWWW’nin optimal görüntüsüyle aynı hedeflere ulaşan bağımsız araçlar vardır. ihtiyaç duyulmayan meta verilerin. Bu, çok daha küçük bir dosya boyutuyla sonuçlanırken, yalnızca neredeyse görünmez olan değişiklikleri teşvik eder, bu da çoğu grafik için ideal bir uzlaşmadır. İpucu 4: SVG kullanmayı düşünün Resim Gingringrann / Shutterstock.com
Ölçeklenebilir Vektör Grafikleri (SVG), kişisel hile listenize eklemek için iyi bir araçtır. Adından ima edilenlerin yanı sıra, doğrudan görüntü biçimi yerine XML dil biçimini kullanırlar ve logolar, simgeler, infographics ve diğer benzer uygulamalar gibi basit grafikler için çok kullanışlıdırlar.
“SVG neden bu kadar kullanışlı?” Diye sorabilirsiniz. Yeni başlayanlar için ölçeklenebilir (bu isim nedeniyle), bu da farklı görünüm sporlarına uyarlama konusunda endişelenmenize gerek yoktur. Buna ek olarak, daha önce SVG ve CSS ile animasyonlu bir logonun nasıl oluşturulacağı hakkında ayrıntılı olarak tartıştığımız bir süreç olan CSS kullanılarak kolayca canlandırılabilirler. Hepsi bu format için destek içeren Adobe Illustrator, Inkscape ve Sketch gibi araçlara kullanılmalısınız, bu yüzden deneyin! İpucu 5: Neuevector / Shutterstock.com tarafından doğru yazı tipi çizimini seçin Tüm hücresel tasarımlar görüntülerle ilgili değildir. Hangi yazı tipinin kullanılacağını seçmek, tasarımınızda ve grafikler üzerinde bir etkiye sahip olabilir (daha büyük değilse), çünkü çoğu site metni bilgileri aktarmak için ana yöntem olarak kullanır. Bir tasarımcının bakış açısından, bu iş için doğru yazı tipini seçmek anlamına gelir ve bu şunları gerektirir:
İnce veya karmaşık harflerden kaçınmak. Kullanıcılar cep telefonu ekranını yüzlerine yakın yerleştirmelidir; İçinde ne yazıldığını öğrenmek için her satırda daha fazla genişlemelerini istemezsiniz.
Daha iyi okunabilirlik için harfler arasında çok az boşluk olan yazı tiplerinden kaçının. Metniniz için bir medya sorgusu kullanıyorsanız, piksel değil boyut için EMS kullanın.
SANS Serif yazı tipini kullanmayı düşünün, çünkü çoğu çözünürlükte daha iyi bir ölçeğe sahip olma eğilimindedirler.
İpucu 6: Metni kullanıcı arayüzünün bir parçası olarak ele alın
Resim Alexandr Bryliaev / Shutterstock.com
Metin konusunu tartışırken, hangi yazı tiplerini kullandığınız okunabilirlik açısından tek endişe değildir. Çeşitli görünüm alanlarıyla çalışacağımız için, hücresel tasarımınızın okunabilirliği en üst düzeye çıkarmak için en başından beri genel kullanıcı arayüzü deneyiminin bir parçası olarak metni düşünmesini istersiniz. Bu: yönetilebilecek satır başına karakter sınırlarını korumak için medya sorgularını kullanmak (piksel değil, onları kullanmayı unutmayın!). Üzerinde anlaşmaya varılan miktar genellikle 45-75 karakter arasındaki bir yerde düzenlenir.
Belirli bir görünümde kaplama boyutunuza göre yazı tipinin boyutunu korumak için CSS3 VW, VH ve VHMIN değerlerini (bunların tümü görünüm yüzdesinin uzunluğu ile ilgilidir) kullanmayı düşünün.
İpucu 7: Karınız için kontrast renkler kullanın Resim Malustudio / Shutterstock.com
Tasarımın temellerine aşina olan herkes size aynı şey kontrastlı oynamayı web tasarımında önemli bir rol oynayacaktır. Tipografi hakkında konuşmayı yeni bitirdiğimiz için, metni vurgulamak için kontrast kullanan web sitesi tasarımlarının örneklerine bakalım:
Burada renk kontrastı sayesinde gözler metne doğru çekilir. Bu teknik, düzeninizin diğer kısımlarına da uygulanabilir ve siyahın üzerinde basit beyaza sabitlenmenize gerek yoktur – çatışmanın belirli bir tasarım bağlamında da iyi görünebileceği renkler.
İyi tasarım yönergelerine (veya World Wide Web Konsorsiyumundan) göre seçtiğiniz rengin olup olmadığından emin değilseniz, bu basit çevrimiçi aracı doğru yolda olup olmadığınızı söylemek için kullanabilirsiniz. Tek yapmanız gereken iki renk girmek ve kontrastın tasarım açısından yeterli olup olmadığını size söyleyecektir. İpucu 8: GameGFX / Shutterstock.com tarafından Hücresel Menü Görüntüsü Tasarlama
WordPress temanız beklenmedik nedenlerle hücresel bir menü içermiyorsa, bu sorunun üstesinden gelmek için kullanabileceğiniz birçok araç vardır. Örneğin, eklentinin önünde birkaç güçlü rakibimiz var: Süper sinekler SuperFly, temanızın varsayılan menüsünü değiştirmek veya tamamlamak için kullanılabilecek çeşitli ek menüler oluşturmanıza olanak tanır. Örneğin, Superfly menüsünü yalnızca hücresel çözünürlükte görüntülenecek ve seçilen sayfada görüntülenmeyecek şekilde kolayca ayarlayabilirsiniz. Superfly, her türlü sıradan hücresel menüleri görüntülemenin yanı sıra, simge tabanlı bir dikey menü oluşturmak için seçenekler de sunar. Kahraman Menüsü
Kahraman Menüsü, bir sürükle ve bırak düzenleyicisi ve tamamen duyarlı bir özellik ile üretim sürecini basitleştirir. Bu eklenti, her benzersiz menüyü yapmak için özel olarak yapılan bir düzine varsayılan menü düzeni, renk kombinasyonları ve simgelerle birlikte gelir. Bir eklenti kullanılarak oluşturulan menü, hücresel arayüzdeyken daha hafif bir sürüm kullanılarak otomatik olarak görüntülenir. İpucu 9: Görüntüler yerine CSS3 kullanın (mümkünse)
Resim 10 yüz / shutterstock.com Bu oldukça kolay. Web sitenizin her yönünü yapmak için grafik tasarım araçlarını kullanma cazibesi güçlü olsa da, küçük bir CSS3 numarasının ek resimler kullanmaktan yeterli olduğu birçok fırsat vardır. Örneğin bu değirmen düğmesini alın. Karmaşık bir grafik numarası olarak tahmin ederseniz, yanılıyorsunuz. Hepsi CSS3 kullanılarak elde edilir ve biraz hayal gücü (veya doğru öğretici) ile daha karmaşık grafikler (ve daha ağır) gerektirmezse birçok karmaşık efekt elde edebilirsiniz. CSS3 kullanılarak oluşturulan bazı harika düğmeler örneklerini görmek için, tasarımcılar için CSS3 düğmesi için 40 öğreticiye bakın. İpucu 10: Tasarımınızı mobil cihazlar için test etmek için bu aracı kullanın Imacy Bestriary / Shutterstock.comHücresel tasarımla ilgili en büyük sorunlardan biri, hesaplamanız gereken birçok farklı görüş ve karardan ortaya çıktı. Her ne kadar geniş popülerlikten yararlanan bazı kararlar olmasına rağmen, pazar bu yönü açısından tekdüze değildir ve her ay yayınlanan yeni cihazlar vardır. Bu nedenle, çeşitli fiziksel cihazlara erişiminiz yoksa, hücresel tasarımınızı test etmek için alternatif yöntemler bulmanız gerekir. Neyse ki, web bu açık amaç için yapılan uygulamalarla doludur, örneğin: Browserstack Browserstack, çeşitli Android ve iOS ve iOS tabletleri de dahil olmak üzere gerçek fiziksel cihazlar için uzun mesafeli test laboratuvarını içeren eksiksiz bir sigorta çözümüdür. Buna ek olarak, en popüler tarayıcıların tüm versiyonlarına da erişebilirsiniz (ve bazıları Edge ve Yandex gibi popüler değildir). Test ortamının kombinasyonu, tasarımınızın sadece tasarım perspektifinden değil, geliştiriciler için gerçek ve kullanışlı bir yaşam senaryosunda nasıl görüneceğini kontrol etmek için çok uygundur. En iyi yanı, tasarımınızı her cihazda manuel olarak test etmeniz bile gerekmemesidir, çünkü bu hizmet, sitenizi otomatik olarak 700’den fazla cihaz, tarayıcı ve çözünürlük kombinasyonu ile test edecek hızlı ekran görüntüleri özelliğini içerir, böylece Belirli ortamdaki hataları hızlı bir şekilde belirleyin. StudyOpressStududiopress, Browserstack tarafından yapılan özelliklerin yarısını paketlemez. Aslında, bu yalnızca siteyi doğrudan belirli bir genişlik (manuel olarak yapılandırabileceğiniz) veya önceden belirlenmiş bir cihaz boyutu kullanmanızı sağlar. Ancak, bu tamamen ücretsizdir ve kullanmak için kayıt olmanıza gerek yoktur. Yukarıdaki araçlara ek olarak, Firefox için Chrome geliştiricisine veya eklenti Firebug’a geçmek isteyebilirsiniz, bu da sitenizin bir tarayıcı bırakmadan çeşitli çözünürlüklerde nasıl görüntüleneceğini test etmenizi sağlar. Divi çoklu düktürü ve mod ayarları Son olarak, bir Divi kullanıcısıysanız, her ekran boyutuna en uygun modülleri ve düzenleri yapmak için varsayılan duyarlı tasarım kontrolünü kullanabilirsiniz. Bu değişikliğin önizlemesini Divi Builder’ı terk etmek zorunda kalmadan da görebilirsiniz. Sonuçlar Bu ipuçlarının web siteniz üzerinde kesinlikle olumlu bir etkisi olmasına rağmen, hücresel optimizasyonun sürekli ziyaret etmeniz gereken bir şey olduğunu hatırlamanız gerekir, çünkü hücresel kullanıcıların biraz var Dikkatsiz tasarım pratiği için sabır. Her zaman çıkan yeni cihazlar, tasarım trendlerindeki değişiklikler, işletim sistemi güncellemeleri ve tasarımınızla ilgili sorunlara neden olabilecek diğer faktörler vardır. Bunu hatırlayarak, bu makalede tartıştıklarımızı gözden geçirelim: Bir iOS simgesi ve bir açılış ekranı oluşturun.
Medya sorguları için yönergelerimizi izleyin ve uygun görüntüleri optimize edin. Mümkünse görüntüleri SVG veya CSS ile değiştirmeyi düşünün. Doğru yazı tipini seçin ve tipografiyi UX’in bir parçası olarak tedavi edin.
Özel bir hücresel menü tasarlayın. Tasarımınızı test etmeyi unutmayın! Hücresel platformlar için web tasarımı hakkında paylaşmak istediğiniz ipuçlarınız var mı? Aşağıdaki yorum bölümünde bize bildirin! Shai_halud / shutterstock.com tarafından Makale Küçük Resim Makalesi
