ev borcu WordPress sitesi
Mobil Web Tasarım Optimizasyonu için 10 İpucu
Mobil trafik veri tüketimi, aynı dönemde satılan bir milyardan fazla cihazla yalnızca 2015 yılında %74 arttı ve bu eğilim yavaşlama niyeti göstermiyor. Tasarımlarınızı mobil cihazlar için optimize etmenin öneminin altını çizmek için tek başına bu yeterli olacaktır.
Bazı WordPress temaları, duyarlı tasarımlar ve çözünürlükleri işlemek için diğerlerinden daha iyi optimize edilmiştir, ancak bu, sitenizin mobil uyumluluğunu geliştirmek istiyorsanız, gemiye atlamanız gerektiği anlamına gelmez. Aslında, tasarımlarınızı mobil cihazlar için optimize etme konusunda büyük kazançlar elde etmenizi sağlayacak, uygulanması kolay bir dizi düzeltme var.
Bu makale boyunca, belirli mobil işletim sistemleri için ipuçlarından görüntü optimizasyonuna, yerleşim tasarımına ve diğer birçok konuya kadar her şeyi ele alacağız. Başlayalım!
İpucu 1: iOS Simgeleri ve Açılış Ekranları Ekleyin
Görsel lenjoyeverytime / Shutterstock.com
Android tarafından yapılan birçok ilerlemeye rağmen, iOS cihazları oldukça popüler olmaya devam ediyor ve aktif bir geliştirici topluluğunun desteğinin tadını çıkarıyor. Mesele şu ki, birçok izleyiciniz sitenizi iPhone ve iPad'lerinin rahatlığında ziyaret edecek ve içeriğinizden yeterince hoşlanıyorlarsa, web sitenizi ana ekranlarına bile kaydedebilirler.
Bu olasılığa hazırlanmak için, WordPress web sitenize bazı özel iOS simgelerini nasıl ekleyebileceğinizi gözden geçirelim.
Her şeyden önce, temanızın header.php dosyasını bulmanız gerekecek, çünkü bunun çalışması için <head> etiketleri arasına bir kod eklememiz gerekecek.
Orda mısın? Harika! İşte eklemek isteyeceğiniz kod:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
Gördüğünüz gibi, kod, iPhone'lar, iPad'ler ve Retina cihazları için, hepsinin önünde apple-touch-icon rel özniteliği olması gereken belirli simgelerden bahseder.
Bu header.php dosyasını düzenlemeye devam ettiğiniz sürece, web siteniz için yepyeni bir iOS açılış ekranı tasarlayabilir ve aşağıdaki kod satırını ekleyerek oraya atabilirsiniz:
<link rel="apple-touch-startup-image" href="splash-screen.png" />
İpucu 2: Medya Sorgularıyla Birlikte Birden Çok Görüntü Boyutu Kullanın
Resim Artem Kovalenco / Shutterstock.com
Elbette, medya sorgularına zaten aşinasınız. Belirli bir senaryonun devreye girmesi durumunda, bunları CSS'nize gömülü belirli tasarım kuralları olarak düşünün. Mobil tasarım söz konusu olduğunda bu senaryolar farklı çözünürlükler, cihaz yönelimleri ve tarayıcı boyutlarıdır. Günümüzde medya sorgularıyla ilgili sorun, pek çok tasarımcı ve geliştiricinin web sitelerini mobil ikinci yaklaşımı göz önünde bulundurarak oluşturmasıdır, oysa ideal olarak bunun tersi olmalıdır.
Bu mobil saniye yaklaşımı, popüler cihaz boyutlarının (yani 320 piksel, 480 piksel, 768 piksel) kılavuz olarak kullanıldığını gördüğünüzde medya sorgularında fark edilebilir. Teoride bu mantıklı bir yaklaşım gibi görünse de, gerçek dünyada gereksiz sorgulamalar yapmak yerine verimli olduğunuz için her zaman yeni cihazlar (yeni ekran boyutları ve çözünürlükleri ile) çıkıyor.
Bu nedenle, bir dahaki sefere bir tasarım üzerinde çalışırken, ona mobil öncelikli bir bakış açısıyla yaklaşmayı deneyin:
- Küçük görünüm pencerelerinden yukarı doğru giden sorgularınızı tasarlayın.
- Kesme noktalarınızı bildirmek için piksel kullanmaktan kaçının. Bunun yerine, tasarımlarınızın yakınlaştırma düzeyine göre kendilerini ayarlaması için ems ve yüzdelerle mümkün olduğunca sık çalışmayı deneyin.
- Medya sorgularınızı retina cihazlarına uyum sağlayacak şekilde ayarlamayı unutmayın (yani min-çözünürlük: 192dpi ).
3. İpucu: Resimlerinizi Optimize Edin
Resim Ganibal / Shutterstock.com
Fantastik ve tamamen duyarlı bir tasarımınız olsa bile, yüklenmesi çok uzun sürerse potansiyel izleyiciler sitenizden korkabilir ve görseller bu açıdan büyük bir faktördür. Kullanıcılar mükemmel piksel grafikleri ve ışık hızında yüklenmelerini beklerler, bu nedenle kalite yüksek kalırken dosya boyutlarını küçük tutmanın bir yolunu bulmanız gerekir.
Bu bir bilmece gibi görünse de, bu sonuçları elde etmenize yardımcı olabilecek birçok araç var. Eklenti cephesinde, kurulduktan sonra WordPress web sitenize yüklenen her görüntüye kayıpsız sıkıştırma tekniklerini otomatik olarak uygulayacak ve hatta geçmişte yüklenen görüntüleri optimize etmek için medya kataloğunuzdan geçebilecek olan EWWW Image Optimizer ve WP Smush gibi özelliklere sahibiz. .
Web sitenize başka bir eklenti eklememeyi tercih ederseniz, her zaman TinyJPG ve TinyPNG gibi bağımsız araçlar vardır ve bunlar esasen EWWW Image Optimizer ile aynı hedefi, resimlerinizdeki renklerin sayısını seçici olarak azaltarak ve aynı zamanda sıyırarak gerçekleştirir. gereksiz meta veriler. Bu, çok daha küçük dosya boyutlarıyla sonuçlanırken, yalnızca çoğu grafik için ideal bir uzlaşma olan neredeyse görünmez değişikliklere neden olur.
4. İpucu: SVG'leri Kullanmayı Düşünün
Resim Giingerann / Shutterstock.com
Ölçeklenebilir Vektör Grafikleri (SVG), kişisel numaralar listenize eklemek için şık bir araçtır. Adının ima etmesine rağmen, düz görüntü formatı yerine bir XML biçimlendirme dili kullanırlar ve özellikle logolar, simgeler, infografikler ve diğer bu tür uygulamalar gibi basit grafikler için kullanışlıdırlar.
"SVG'ler neden bu kadar faydalı?" diye soruyor olabilirsiniz. Yeni başlayanlar için, ölçeklenebilirler (dolayısıyla adı), yani onları farklı görünümlere uyarlama konusunda endişelenmenize gerek kalmayacak. Bunun da ötesinde, daha önce SVG ve CSS ile Animasyonlu Logo Nasıl Oluşturulur konusunda ayrıntılı olarak ele aldığımız bir süreç olan CSS kullanılarak kolayca canlandırılabilirler.
Adobe Illustrator, Inkscape ve Sketch gibi, tümü bu formatı destekleyen araçlara zaten aşina olmalısınız, bu yüzden deneyin!
5. İpucu: Doğru Yazı Tiplerini Seçin
Neuevector / Shutterstock.com'un fotoğrafı
Mobil tasarım tamamen görsellerden ibaret değildir. Hangi yazı tiplerinin kullanılacağını seçmek, tasarımlarınız üzerinde grafikler kadar (daha fazla olmasa da) bir etkiye sahip olabilir, çünkü çoğu site bilgiyi iletmek için birincil yöntem olarak metin kullanır.
Bir tasarımcının bakış açısından bu, iş için doğru yazı tiplerini seçmek anlamına gelir ve bu da şunları içerir:
- İnce veya karmaşık harf biçimlerinden çekinme. Kullanıcılar zaten mobil ekranı yüzlerine yakın yerleştirmek zorunda; ne yazdığını anlamak için her satırı daha da yakınlaştırmak zorunda kalmalarını istemezsiniz.
- Daha iyi okunabilirlik için harfler arasında çok az boşluk olan yazı tiplerinden kaçının.
- Metniniz için medya sorguları kullanıyorsanız, boyutlar için piksel yerine ems kullanın.
- Çoğu çözünürlükte daha iyi ölçeklenme eğiliminde oldukları için sans serif yazı tiplerini kullanmayı düşünün.
6. İpucu: Metne Kullanıcı Arayüzünün Bir Parçası Olarak Bakın
Resim Aleksandr Bryliaev / Shutterstock.com
Metin konusu üzerindeyken, okunabilirlik söz konusu olduğunda tek endişe kullandığınız yazı tipi değildir. Çok çeşitli görünümlerle çalışacağımızdan, okunabilirliği en üst düzeye çıkarmak için mobil tasarımlarınızın, tüm kullanıcı arayüzü deneyiminin bir parçası olarak metni en başından itibaren dikkate almasını istiyorsunuz. Bu şu anlama gelir:
- Satır başına yönetilebilir bir karakter sınırını korumak için medya sorgularını kullanma (piksel yerine ems kullanmayı unutmayın!). Genel olarak kabul edilen miktar, 45-75 karakter arasında bir yere ayarlanır.
- Yazı tipi boyutunu herhangi bir görünüm alanında kapsayıcınızın boyutuna göre tutmak için vw , vh ve vhmin (bunların tümü görünüm alanı yüzde uzunluklarıyla ilgilidir) CSS3 değerlerini kullanmayı düşünün.
7. İpucu: Zıt Renkleri Avantajınız İçin Kullanın
Resim MaluStudio / Shutterstock.com
Tasarımın temellerine uzaktan bile aşina olan herkes size aynı şeyi söyleyecektir – kontrast, web tasarımında önemli bir rol oynar. Tipografi hakkında konuşmayı yeni bitirdiğimize göre, metni vurgulamak için kontrast kullanan harika bir web sitesi tasarımı örneğine bakalım:
Burada renklerdeki kontrast sayesinde göz metne doğru çekilir. Bu teknik, mizanpajınızın diğer bölümlerine de uygulanabilir ve siyah üzerine basit beyaza bağlı kalmanıza gerek yoktur – çakışan renkler de belirli tasarım bağlamlarında harika görünebilir.
Seçtiğiniz renklerin iyi tasarım yönergeleriyle (veya World Wide Web Konsorsiyumu'nunkilerle) uyumlu olup olmadığından tam olarak emin değilseniz, doğru yolda olup olmadığınızı söylemek için bu basit çevrimiçi aracı kullanabilirsiniz. Tek yapmanız gereken iki renk girmek ve bu size tasarım açısından kontrastlarının yeterli olup olmadığını söyleyecektir.
8. İpucu: Mobil Menüler Tasarlayın
Görsel Gamegfx / Shutterstock.com
WordPress temanız anlaşılmaz bir nedenle mobil menüler içermiyorsa, bu sorunu hemen çözmek için kullanabileceğiniz birçok araç vardır. Örneğin, eklenti cephesinde birkaç güçlü rakibimiz var:
süper sinek
Superfly, temanızın varsayılan menülerini değiştirmek veya bunları tamamlamak için kullanılabilecek çok çeşitli ek menüler oluşturmanıza olanak tanır. Örneğin, Superfly menülerinizi yalnızca mobil çözünürlüklerde görüntülenecek ve seçilen sayfalarda görüntülenmeyecek şekilde kolayca özelleştirebilirsiniz.
Superfly, her türlü normal mobil menü oluşturmanın yanı sıra, size simge tabanlı dikey menüler oluşturma seçeneği de sunar.
Kahraman Menüsü
Hero Menu, sürükle ve bırak düzenleyici ve tamamen duyarlı özelliklerle oluşturma sürecini basitleştirir. Eklenti, her menüyü benzersiz kılmak için düzinelerce önceden oluşturulmuş menü düzeni, renk kombinasyonu ve özel yapım simgelerle birlikte gelir. Eklenti kullanılarak oluşturulan menüler, mobil arayüzdeyken otomatik olarak daha hafif bir sürüm kullanılarak görüntülenecektir.
9. İpucu: Görseller Yerine CSS3 Kullanın (Mümkünse)
10 FACE / Shutterstock.com'dan görüntü
Bu oldukça basit. Web sitenizin her yönünü oluşturmak için grafik tasarım araçlarını kullanma cazibesi güçlü olsa da, ek resimler kullanmak yerine küçük bir CSS3 hilesinin yeterli olacağı birçok durum vardır.
Örneğin, bu değirmen düğmesini çalıştırın.
Bunun karmaşık bir grafik hilesi olduğunu tahmin ettiyseniz, yanılıyorsunuz. Her şey CSS3 kullanılarak gerçekleştirildi ve biraz hayal gücüyle (veya doğru öğreticiyle), aksi takdirde daha karmaşık (ve daha ağır) grafikler gerektiren birçok karmaşık efekt elde edebilirsiniz.
CSS3 kullanılarak el yapımı bazı harika düğme örneklerine göz atmak için Tasarımcılar için 40 CSS3 Düğme Öğreticisine göz atın .
İpucu 10: Tasarımlarınızı Mobil Cihazlar İçin Test Etmek İçin Bu Araçları Kullanın
Iconic Bestiary / Shutterstock.com'un fotoğrafı
Mobil tasarımla ilgili en büyük sorunlardan biri, hesaba katmanız gereken çok sayıda farklı görüntü alanı ve çözünürlükten kaynaklanmaktadır. Yaygın popülariteye sahip birkaç çözüm olsa da, bu konuda pazar hiçbir şekilde tek tip değildir ve her ay yeni cihazlar piyasaya sürülmektedir.
Bu nedenle, çok çeşitli fiziksel cihazlara bir şekilde erişiminiz olmadıkça, mobil tasarımlarınızı test etmek için alternatif yöntemler aramanız gerekir. Neyse ki web, bu açık amaçlar için oluşturulmuş uygulamalarla dolu, örneğin:
Tarayıcı Yığını
BrowserStack, çok çeşitli Android ve iOS telefonları ve tabletleri dahil olmak üzere gerçek fiziksel cihazlar için uzaktan test laboratuvarı içeren tam özellikli bir çözümdür. Üstelik, en popüler tarayıcıların (ve Edge ve Yandex gibi bazıları kadar popüler olmayan) birden çok sürümüne de erişebilirsiniz. Bu test ortamları kombinasyonu, tasarımlarınızın gerçek yaşam senaryolarında nasıl performans göstereceğini kontrol etmek için mükemmeldir ve yalnızca tasarım açısından değil, geliştiriciler için de yararlıdır.
En iyi yanı, hizmetin sitenizi 700'den fazla cihaz, tarayıcı ve çözünürlük kombinasyonuyla otomatik olarak test edecek bir Hızlı Ekran Görüntüleri özelliği içerdiğinden, tasarımlarınızı her cihazda manuel olarak test etmenize bile gerek kalmamasıdır. belirli ortamlardaki herhangi bir hata.
StüdyoBasın
StudioPress, BrowserStack'in sunduğu özelliklerin yarısını içermez. Aslında, yalnızca canlı siteleri belirli genişlikler için (manuel olarak yapılandırabileceğiniz) veya önceden ayarlanmış cihaz boyutlarını kullanarak test etmenize olanak tanır. Ancak, tamamen ücretsizdir ve kullanmak için kaydolmanız gerekmez.
Yukarıdaki araçların yanı sıra, tarayıcınızdan hiç çıkmadan sitenizin birden çok çözünürlükte nasıl görüntüleneceğini test etmenizi sağlayan Chrome Geliştirici Araçları'na veya Firefox için Firebug eklentisine de dönmek isteyebilirsiniz.
Divi'nin Çoklu Cihaz Ayarları ve Önizleme Modları
Son olarak, bir Divi kullanıcısıysanız, her ekran boyutuna en uygun modüller ve düzenler oluşturmak için yerleşik duyarlı tasarım kontrollerini kullanabilirsiniz. Bu değişiklikleri Divi Builder'dan hiç çıkmadan da önizleyebilirsiniz.
Çözüm
Bu ipuçlarının web siteniz üzerinde kesinlikle olumlu bir etkisi olacak olsa da, mobil kullanıcıların özensiz tasarım uygulamaları için çok az sabrı olduğundan, mobil optimizasyonun sürekli olarak tekrar gözden geçirmeniz gereken bir şey olduğunu hatırlamanız gerekir.
Her zaman çıkan yeni cihazlar, tasarım trendlerindeki değişiklikler, işletim sistemi güncellemeleri ve tasarımlarınızda sorunlara neden olabilecek diğer faktörler vardır. Bunu akılda tutarak, bu makalede ele aldıklarımızı gözden geçirelim:
- iOS simgeleri ve bir açılış ekranı oluşturun.
- Medya sorguları için yönergelerimizi izleyin ve görüntüleri buna göre optimize edin.
- Mümkün olduğunda görüntüleri SVG'ler veya CSS ile değiştirmeyi düşünün.
- Doğru yazı tiplerini seçin ve tipografiyi UX'in bir parçası olarak değerlendirin.
- Özel mobil menüler tasarlayın.
- Tasarımlarınızı test etmeyi unutmayın!
Mobil platformlar için web tasarımı ile ilgili paylaşmak istediğiniz ipuçlarınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin!
Shai_Halud / Shutterstock.com tarafından hazırlanan makale küçük resmi