Birinci Bir Mobil Birləşdirmək üçün necə, Performans yönümlü WordPress Tema [Hissə 2]

Birinci Bir Mobil Birləşdirmək üçün necə, Performans yönümlü WordPress Tema [Hissə 2]

Birinci Bir Mobil Birləşdirmək üçün necə, Performans yönümlü WordPress Tema [Hissə 2]
СОДЕРЖАНИЕ
02 июня 2020

Buradakı şeyləri görmək üçün diyirlədinizsə, 1-5 nöqtələri ilə nə baş verdiyini maraqlandıra bilərsiniz.


Hə, cavabın nə olduğunu tapmaq üçün bu mini seriyanın ilk hissəsinə nəzər salmalısınız.

Bir sözlə, buradan sonra gələnlər sizə bir bələdçi verir WordPress üçün yüksək səviyyəli bir mobil mövzu necə qurulacaq. Başlanğıcda görünməsə də, problem əslində əksər insanların düşündüklərindən daha böyükdür.

Bütün bunlardan sonra, ümumi inanc budur ki, mövzunu yalnız cavablandırmalısınız, məsələn, mobil optimallaşdırılmışsınız? Yaxşı deyil. Beləliklə, daha çox danışmadan mövzuya yenidən qayıtaq.

1-ci hissə üçün buraya baxın: Biri əvvəlcə mobil bir yerə necə qoyacağınız, Performansa yönəlmiş WordPress Tema [Hissə 1]

6. Bütün mobil brauzerlər üçün dizayn

HTML kodunun bir hissəsinin işlədildiyi veb brauzer əsasında necə fərqli davranması həqiqətən təəccüblüdür. Bu həm mobil, həm də masaüstü kompüterlər üçün gedir. Yəqin ki, mobil telefonlar üçün daha çox şey olsa da, yüzlərlə fərqli cihaz və ekran xüsusiyyətlərinə sahib olduğumuz üçün.

Buna görə də, mövzu üzərində işləyərkən aşağıdakıları unutmadığınızdan əmin olun.

  • işinizi bütün əsas brauzerlərdə sınaqdan keçirin – əvvəlcədən bunu etmək, bütün mövzunu hazırladığınız zaman brauzer testlərinizi başlatmağınızın əksinə problemlərin həllini asanlaşdıracaq.,
  • Bacardığınız qədər cihazı əlinizə götürün və mövzunun onlara necə davrandığına baxın (mümkünsə fərqli ekran ölçüləri, qətnamələr və nisbətləri sınayın).

7. UX məsələləri

Cibdə insanlar veb-saytlarla masaüstündəki vəziyyətdən fərqli olaraq qarşılıqlı əlaqə qururlar.

Bu əsas səslənir, amma icazə verin sizə sadə bir misal göstərim. Kimsə masaüstünde bir pizza yeri axtararkən, çox güman ki, yoxladıqları restoran haqqında bir sıra detallarla maraqlanırlar. Məsələn, menyu, qalereya, əlaqə məlumatları və s.

Bununla birlikdə, mobil veb saytlarda eyni veb saytı ziyarət etsələr, yəqin ki, yalnız bir şeyə əhəmiyyət verərlər – yerə necə getməli və sifariş vermək üçün hansı nömrəyə zəng vuracaqlar..

Bütün bunlardan qaynaqlanan məqam budur ki, mobil bir mövzu qurarkən dizayn sayt saytının sahibinə mobil qonaqlar üçün vacib ola biləcək xüsusi elementlərə əlavə diqqət ayırmağa imkan verməlidir..

Bunun ən asan yolu, ana səhifədə görünən və ekranın görünən sahəsinin yuxarı hissəsində qalmış yaxşı hazırlanmış bir widget ərazilərindən keçir (aka onları qatın üstündə saxlayır).

Cibdə olarkən insanların ehtiyac duyduğu məlumatları axtarmaq üçün çox az vaxtları olur. Buna görə yaxşı bir mobil dizayn bu məlumatların əldə edilməsində təsirli olmalıdır.

8. Az daha çoxdur

Daha az konsepsiya mövzu inkişafında əksər ssenarilərə asanlıqla tətbiq oluna bilər və mobil mövzulara gəldikdə, bu, böyük bir mövzu ilə belə bir mövzu arasındakı fərq deməkdir.

Daha az ilə daha çox şey əldə etmək üçün nələr edə bilərsiniz:

  • Marka elementləri üçün daha az yer buraxın. Saytın loqotipi üçün müəyyən bir yer vacibdir, bu açıqdır. Bununla birlikdə, bu, hələ də əsl məzmun qədər vacib deyil, buna görə loqotipin qatın üstündəki yerin çox olmasına icazə verməyin.
  • Əlçatan menyularla tanış olun. Menyular mobil telefonda həmişə problem olub. Bir tərəfdən veb saytlara menyular lazımdır. Digər tərəfdən, hətta qısa bir menyu (cəmi dörd maddənə sahib olmaqla), əksər mobil cihazlarda iki sətirdən asanlıqla istifadə edə bilər ki, bu da məzmunu səhifənin altına basdırır. Bunu həll etmək üçün nə edə bilərsiniz: (1) bir mətnin bir sətirinə uyğun olarsa, menyunu normal şəkildə göstərin; (2) əgər açılmırsa, onu açılır..
  • Əhəmiyyətsiz menyulardan qurtulun. Çox vaxt altbilgi menyusu mobil ziyarətçiyə heç bir əhəmiyyət vermədiyini söyləməkdən qorxuram. Masaüstünde, ziyarətçilərin bütün digər səhifələrə bağlantılar tapa biləcəyi bir növ bir menyu kimi xidmət edir, ancaq mobil olaraq, hər kəsin istifadə etməsinin bir səbəbi yoxdur. Mövzunuz mobil görünən zaman tamamilə qurtulmağı düşünün.
  • Əlavə veb xüsusiyyətləri ilə diqqətli olun. Xüsusi xüsusiyyətləri yeni bir WordPress mövzusunda təqdim etməyə gəldikdə saysız imkanlar var. Şəkil sürgüləri, sosial media inteqrasiyası, xüsusi qalereyalar və digərləri kimi şeyləri həyata keçirə bilərsiniz. Amma etməlisən? Bu xüsusiyyət fikirləri böyük olsa da, mobil istifadəçilər üçün bəzi problemlər yarada bilər. Mövzunuzun əksər platformalarda düzgün işlədiyinə əmin olmaq istəyirsinizsə, doğma istifadə edin wp_is_mobile () funksiyası. Bu, mobil və masaüstü ziyarətçiləri bir-birindən fərqləndirməyə imkan verəcəkdir, buna görə əvvəlcədən heç bir problem yaşamamaq üçün interfeysi asanlaşdıra bilərsiniz.

9. Yalnız lazımi sənədləri yükləyin

Bu günlərdə insanlar internetə çox sayda mobil cihazdan daxil ola bilirlər, buna görə də bu cihazların bəziləri çox köhnəlmiş olacaq və müasir veb xüsusiyyətlərini dəstəkləyə bilməyəcəkdir. Buna görə, hər hansı bir funksiyanı yerinə yetirmək üçün hər hansı kitabxananın və ya modulun lazım olduğunu yoxlamaq lazımdır.

Bunun ən yaxşı yollarından biri də buna bənzər bir həll yolu keçməkdir Modernizr. Bir sözlə, istifadəçinin brauzerində HTML5 və CSS3 xüsusiyyətlərini aşkar edən JavaScript kitabxanasıdır. Verilmiş bir xüsusiyyətin brauzerə daxil olub-olmamasından asılı olaraq şərti kodu yazmağa imkan verir. Bundan sonra ehtiyac olarsa, lazımi kitabxanalar gətirilə bilər.

modernizr

Lakin Modernizr hər şeyin həlli olmayacaq. Yadda saxlamağa ehtiyac duyan bir sıra digər göstərişlər:

  • Bir qayda olaraq, mövzuların işləməsi üçün tamamilə vacib deyilsə, kitabxanaları idxal etməməyi unutmayın. Kitabxanalar və xarici skriptlər nə qədər çox olsa, son saytı yükləmək üçün (xüsusən mobil) nə qədər vaxt lazımdır.
  • Həmişə JavaScript sənədlərini əvvəlcə deyil HTML quruluşunun sonunda yükləməyə çalışın.
  • Çalışmaq DOM elementlərinin sayını minimuma endirmək HTML quruluşunuzdan istifadə edir.
  • Hər səhifə üçün CSS sənədlərini və JavaScript-ni ayrıca yükləyin. Məsələn, yalnız bir xüsusi səhifədə tələb olunan bir CSS faylınız varsa, şərti bir bəyanat içərisində is_page () funksiyasından istifadə edin və üslubu yalnız o səhifədəki enqueue.

10. Bir test serverində sürət testlərini həyata keçirin

Yerli bir test serverinə sahib olmaq inkişafın başlanğıc mərhələlərində kifayət qədər yaxşı olacaq, ancaq tez bir zamanda daha inkişaf etmiş bir sınaq quraşdırma tətbiq etməlisiniz.

Fakt budur ki, bir ovuc test mühitinə quraşdırmadan və gerçək həyatda necə icra etdiyini görməyincə mövzunuzun nə qədər optimallaşdırıldığını heç vaxt bilməyəcəksiniz..

Xərcləri az saxlayarkən, mövzunu bir neçə ucuz paylaşılan hosting hesabına yükləyərək edə bilərsiniz (çünki son istifadəçilərin əksəriyyəti yəqin ki, bunlardan istifadə edəcəklər). Sonra aşağıdakı vasitələrdən istifadə edərək müxtəlif testlər edə bilərsiniz:

  • PageSpeed ​​anlayışları. Google tərəfindən qurulmuş bir vasitə. Hər ikinizə, həm mobil, həm də masaüstündəki performans haqqında yaxşı məlumat verəcəkdir.
  • Pingdom Veb Sürət Testi. Bu vasitə, saytınızın tələb etdiyi hər bir fərdi ssenarini / faylı yükləmək üçün nə qədər vaxt lazım olacağına dair tam bir məlumat verəcəkdir.
  • Ghostlab. Eyni anda veb və mobil üçün sinxron brauzer sınağı üçün çox lazımlı bir vasitədir.
  • Mobitest tərəfindən mobil performans testi. Saytınızı yalnız ümumi, yayılmış bir mobil mühitdə deyil, həm də aktual mobil cihazlarda sınamağa imkan verir.
  • BrowserStack. Hər populyar mobil və masaüstü brauzerinizin hər versiyasına anında giriş imkanı verir. Bu vasitə ilə mövzumuzun köhnəlmiş bir brauzerdə nəyə oxşayacağını düşünmək lazım deyil, bir neçə kliklə bir ekran görüntüsü yarada bilərsiniz.

pagespeed

Bu ilk mobil, performansa istiqamətlənmiş WordPress mövzusunu yaratmaq üçün 10 addım təlimatımızı yekunlaşdırır. Ümid edirəm ki, bundan bəzi maraqlı fikirlər çıxacaq və növbəti mövzunu əsl performans canavarına çevirməyə kömək edəcək!

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