Birincisi Bir Mobil Birləşdirmək, Performans yönümlü WordPress Mövzusu [Hissə 1]

Birincisi Bir Mobil Birləşdirmək, Performans yönümlü WordPress Mövzusu [Hissə 1]

Birincisi Bir Mobil Birləşdirmək, Performans yönümlü WordPress Mövzusu [Hissə 1]
СОДЕРЖАНИЕ
02 июня 2020

Əsasında bir WordPress mövzusunu bir araya gətirmək olduqca sadə bir işdir. WordPress həqiqətən səmimi bir mühit təmin edir və hansı PHP funksiyalarının yol boyu hansı məqsədlə istifadə edəcəyini aydınlaşdırır.


Lakin. Sadə olsa da, asan deyil, və xüsusən də mövzunuzun mobil optimallaşdırılmasını istəyirsinizsə.

Sürətlə yükləyən, proqnozlaşdırıla bilən bir şəkildə işləyən və ən vacib olan) istifadəçi üçün əlverişli və fərqli cihazlardan istifadə edən insanlar üçün əlçatan bir keyfiyyət məhsulu ilə başa çatmaq istəsəniz, aradan qaldırmalı olduğunuz bir sıra nadir məsələlər var. və ekran ölçüləri.

Bu iki hissəli bələdçi, əvvəlcə bir mobil, performansa yönəlmiş WordPress mövzusunu qurarkən diqqət etməli olduğunuz ən vacib şeyləri sadalayaraq 10 addım içində sizi gəzdirəcəkdir..

2-ci hissə üçün buraya baxın: Birincisi Mobil Birləşdirmək üçün necə, Performansa yönəldilmiş WordPress Tema [Hissə 2]

1. Məzmun əvvəlcə gəlir

Çox dizayn detallarını nümayiş etdirmək və ya bunun üçün gözəl görünüşlü elementlərdən istifadə etmək üçün cibdə həqiqətən çox yer yoxdur.

Müasir cihazların qrafikləri 1136 × 640 piksel (iPhone 5s) göstərməyə qadir olmasına baxmayaraq, ekranın cəmi dörd düym olduğunu unutmayaq. Bu işləmək üçün çox sayda əmlak deyil.

Etməyə dəyər şeylər:

  • məzmun təqdimatı üçün vacib olmayan bütün əlavə dizayn elementlərindən qurtulun,
  • əsas məzmun blokunun dizayn kətanlarında mümkün qədər yüksək olduğundan əmin olun (mobil cihazların müxtəlif ekran ölçülərinə görə harada olacağını təxmin edə bilmirik. "qatlanmaq" tam gələcək),
  • mətbəə və məzmunu oxunaqlı hala gətirin (şriftin ölçüsünü artırın, ancaq bir mətnin bir xəttini çox qısa və oxunmayan hala gətirməyinizə diqqət yetirin).,
  • yaxşı bir kontrast təqdim edin – mətn və arxa fon (bu, mobil cihazlar üçün çox vacibdir, xüsusən kimsə günəşli bir yerdə dayanarkən səhifəni oxumağa çalışırsa).

2. Şəkilləri optimallaşdırın

Şəkil optimallaşdırması digər ssenarilərə nisbətən mobil üçün daha vacibdir. Məsələ burasındadır ki, kimsə mobil telefon vasitəsilə bir sayta daxil olmağa çalışanda yəqin ki, yavaş 3G bağlantısındadır. Buna görə mövzunun bu faktdan asılı olmayaraq görüntülərin nisbətən tez yüklənməsinə imkan yaratdığına əmin olmalısınız.

Xüsusi şeylər edə bilərsiniz:

  • Tənbəl yükləmə funksionallığını düşünün. Öz-özlüyündə tənbəl yükləmə böyükdür (şəkillər yalnız ziyarətçi onlara gedəndə). Ancaq problem son istifadəçilərin son saytdakı bəzi tənbəl yükləmə plaginlərini özləri qurmaqla bitməsidir. Bu, mövzuya əvvəlcədən qoşduğunuz şeylərə müdaxilə edə bilər. Risk almaq istəsəniz, jQuery və onun kimi bir həll yolu ilə funksionallığı mümkün etmək yaxşı olardı Tənbəl yükləmə plagini. WordPress plaginləri bu kitabxanadan da istifadə edirlər, buna görə də eyni nəticəni əldə etməyə çalışan iki fərqli skript olduqda işlərin səhv getmə ehtimalını minimuma endirirsiniz. Ayrıca, mövzunun parametrlərində tənbəl yükü deaktiv etməyə imkan verin.
  • Şəkilləri ölçü və keyfiyyətə görə optimallaşdırın. Şəkillər ümumiyyətlə orta sayt üçün bant genişliyi istehlakının çox hissəsini təşkil edir, buna görə mövzu yaradıcısı olaraq, şəkillərinizin mümkün qədər optimallaşdırıldığından əmin olmalısınız. Bunun baş verməsi üçün iki şey edə bilərsiniz: (1) şəkillərin lazım olduqları ölçülərdən daha böyük olmadığına əmin olun (bax №3) – burada əlavə bir piksel var və orada olduqca tez bir şəkildə qoşula bilər, (2) optimallaşdırın kimi şəkillər vasitəsi ilə Optimol və ya TinyPNG mövzunu xalqa çatdırmadan əvvəl.
  • Mümkün olduqda simge şriftlərindən istifadə edin. Hər hansı bir dizaynda nişanlar daxil olan köhnə məktəb yalnız Photoshop-da qurmaq, hər şeyi PNG və ya GIF-ə çevirmək və yaymaq idi. Hal-hazırda, həlli ən optimallaşdırılmış deyil. Kimi vasitələrlə Şrift Zəhmli, dizaynlarımızı yüzlərlə gözəl dizayn edilmiş şriftlərlə zənginləşdirə bilərik, eyni zamanda performansı çox layiqli saxlayırıq.

3. Dizayn Retina hazır olun (yüksək DPI ekranlar üçün optimallaşdırılmışdır)

Demək olar ki, bütün yeni qurğular bu günlərdə yüksək DPI displeyləri ilə gəlir. Bu ekranlar hər şeyi çox kəskin edir, ancaq bu şey yüksək DPI görüntüləmə üçün optimallaşdırılıbsa. Əks təqdirdə, istifadəçi bir çox pikselləşmə görəcək və bu təcrübəni ümumi olaraq cəlbedici edəcəkdir.

Yüksək DPI optimallaşdırmasına apara biləcəyiniz iki əsas qısa var:

  • Şəkil şriftlərindən istifadə edin – yuxarıda göstərilən; şəkil şriftləri avtomatik olaraq miqyaslanır və hər cihazda əla görünür.
  • Bütün digər şəkillərin alternativ versiyasını – iki dəfə böyüklükdə yaradın və məzmunu görmək üçün yüksək DPI cihazı istifadə edildikdə onları CSS ilə dəyişdirin.. Budur bələdçi bunu necə edə biləcəyiniz barədə.

Nəhayət, mövzunuzdakı favikonlara da diqqət yetirməlisiniz (və istifadəçiyə də onları dəyişdirməyə icazə verin, amma bu başqa bir şeydir).

Gün ərzində geri dönməyiniz üçün yalnız 16 × 16 PNG görüntüyə ehtiyacınız var idi, sonra da ICO-ya çevriləcəkdiniz və hamınız qurulmuşdunuz. Hal hazırda daha mürəkkəbdir. Məsələn, yeni Apple cihazları daha böyük nişanlar axtarmağa və sonra əlfəcin kimi istifadə etməyə çalışacaqlar.

IOS tapmağı gözləyən favicon ölçülərindən bəziləri: 76 × 76, 120 × 120, 152 × 152. Budur a Apple.com-da tam siyahı.

Bu əlamətləri əl ilə yarada və ya bənzər bir alətdən istifadə edə bilərsiniz Real Favicon Generator. Yalnız bütün digər versiyaları yaratmaq üçün baza kimi istifadə ediləcək bir başlanğıc şəkli lazımdır. Bunun üzərinə, mövzuya nişanlar taxmaq üçün düzgün HTML kodu da əldə edirsiniz.

4. Tıqqıltı üçün optimallaşdırın

Unutmamalıyıq ki, oradakı mobil cihazların əksəriyyəti toxunma interfeyslərini dəstəkləyir və ya tamamilə sensor ekranlıdır. Bunun mənası, hər bir toxunan elementi kifayət qədər böyük etmək lazımdır ki, istifadəçi rahatlıqla əldə edə bilsin.

Məsələn, mətn bağlantıları çox toxunulmazdır, çünki onları dəqiq vurmaq üçün istifadəçi hissəsində çox konsentrasiya tələb olunur. Mövzunun interfeysi üçün düymələrlə getmək daha yaxşı dizayn seçimidir. Özləri nisbətən böyük olan və geniş bir toxunma sahəsinə sahib olan düymələr.

Yadda saxlamaq lazım olan başqa bir şey, istifadəçilərin əksəriyyəti baş barmaqları ilə vurmalarıdır, buna görə əsasını yerləşdirmək yaxşı bir fikirdir "fəaliyyətə çağırış" asanlıqla əldə edilə bilən baş barmaq zonalarındakı düymələr. Məsələn, burada bu iPhone-da necə oynayır.

5. Mövzunu cavablandırmaq vacib olanların hamısı deyil

Bu təlimatın birinci hissəsini mobil telefonlar üçün mövzular hazırlayarkən insanların ən çox yayılmış səhvləri ilə başa çatdıraq. Səhv cavab dizaynını son son oyun kimi qiymətləndirir.

Təqdim olunan mövzuya cavab vermək, xüsusən qeyri-standart qurğular və ekran ölçüləri ilə əlaqəli işlərə gəldikdə çox böyük bir üstünlükdür, ancaq sehrli güllə həllindən uzaqdır. Dizaynın cavabdeh olması mobil telefonda yaxşı çıxış etmək demək deyil. Məsələn, hər hansı bir şəkil optimallaşdırma məsələsini həll edə bilməz və ya düymələrin dəqiq vurulmasının çətin olması və s..

Beləliklə, bəli, mövzunuzu cavablandırmaq üçün əlinizdən gələni edin, eyni zamanda maksimum mobil dostluq dizaynı üçün bu bələdçi daxilində olduğumuz digər elementlərə diqqət yetirin..

Siyahının qalan hissəsini əldə etmək üçün ikinci hissəni hazırlamağa dəvət edirəm (UX dizaynı, naviqasiya, yükləmə müddətini optimallaşdırmaq üçün JS istifadə edərək, daha az tanınan WordPress funksiyalarından istifadə edərək, və daha çox). Və bu vaxt, mobil üçün dizayn edərkən ən böyük probleminiz budur?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector