Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 2]

Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 2]

Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 2]
СОДЕРЖАНИЕ
02 июня 2020

Ако превъртите надолу, за да видите какво се съхранява тук, може би се чудите какво се е случило с точки 1-5.


А, нали, за да намерите какъв е отговорът, трябва да разгледате първата част от тази мини-серия.

Накратко, това, което следваме тук, ви дава насока как да изградим високоефективна мобилна тема за WordPress. В началото може да не изглежда така, но предизвикателството всъщност е по-голямо, отколкото повечето хора си мислят.

В крайна сметка общото убеждение е, че трябва само да направите темата отзивчива и, voilà, тя е оптимизирана за мобилни устройства, нали? Е, не съвсем. Така че без допълнително обожание да се върнем по темата.

За част 1 вижте тук: Как да съставим първо мобилна, ориентирана към производителността тема на WordPress [част 1]

6. Дизайн за всички мобилни браузъри

Наистина е изненадващо колко различно може да се държи даден HTML код въз основа на уеб браузъра, на който се изпълнява. И това важи както за мобилните, така и за настолните компютри. Вероятно повече за мобилни устройства, тъй като имаме стотици различни устройства и параметри на екрана, с които да се справим.

Ето защо, когато работите върху вашата тема, не забравяйте да помните за следното:

  • тествайте работата си във всички основни браузъри, докато продължите – ако направите това по-рано, ще улесните отстраняването на неизправности, за разлика от стартирането на тестовете на браузъра си, когато вече имате цялата тема,
  • вземете ръцете си на колкото се може повече устройства и вижте как се държи темата върху тях (опитайте различни размери, разделителни способности и съотношения на екрана, ако е възможно).

7. UX има значение

На мобилни устройства хората си взаимодействат с уебсайтове много по-различно, отколкото на работния плот.

Това звучи основно, но нека да ви дам един прост пример. Когато някой търси място за пица на работния си плот, вероятно се интересува от редица подробности за ресторанта, който проверява. Например неща като менюто, галерията, данни за контакт и т.н..

Ако обаче посетят един и същ уебсайт по мобилен телефон, вероятно ги интересува само едно – как да стигнат до мястото и на кой номер да се обадят, за да направят резервация.

Всичко се свежда до това, че когато създавате тема за мобилни устройства, дизайнът трябва да даде възможност на собственика на сайта да постави допълнителен фокус върху специфични елементи, които могат да бъдат от решаващо значение за посетителите на мобилни устройства.

Най-лесният начин да го направите е чрез добре проектирани области на джунджурии, които се появяват на началната страница и остават в горната част на видимата област на екрана (известна като запазването им над сгъвката).

Докато са на мобилни устройства, хората имат много малко време да търсят нужната информация. Ето защо добрият мобилен дизайн трябва да бъде ефективен, за да направи тази информация достъпна.

8. По-малкото е повече

По-малкото е повече концепцията може лесно да се приложи към повечето сценарии в разработването на теми, а когато става въпрос за мобилни теми, това означава разликата между страхотна тема и толкова нова тема.

Ето какво можете да направите, за да постигнете повече с по-малко:

  • Оставете по-малко място за маркови елементи. Важно е малко място за логото на сайта, което е очевидно. Въпреки това, тя все още не е толкова важна, колкото действителното съдържание, така че не забравяйте логото да заема по-голямата част от пространството над сгъвката..
  • Въведете достъпни менюта. Менютата винаги са били проблем при мобилните устройства. От една страна, уебсайтовете се нуждаят от менюта. Но от друга страна, дори краткото меню (съдържащо само четири елемента) може лесно да използва два реда текст на повечето мобилни устройства, което изтласква съдържанието надолу по страницата. Ето какво можете да направите, за да решите това: (1) показвайте менюто нормално, ако се побира в един ред текст, (2) направете го падащо, ако не.
  • Отървете се от маловажни менюта. Бих рискувал да кажа, че през повечето време менюто на футера не носи никаква стойност за мобилния посетител. На работния плот той служи като своеобразно меню, където посетителите могат да намерят връзки към всички останали страници, но на мобилни устройства, едва ли има причина някой да го използва. Помислете да се отървете от него напълно, когато темата ви се гледа на мобилни устройства.
  • Внимавайте с допълнителни функции на уебсайта. Има безброй възможности, когато става въпрос за въвеждане на персонализирани функции в нова тема на WordPress. Можете да внедрите неща като плъзгачи на изображения, интеграция на социални медии, персонализирани галерии и много други. Но трябва ли? Въпреки че всички идеи за функции са страхотни, те могат да създадат някои проблеми на мобилните потребители. Ако искате да сте сигурни, че вашата тема работи правилно на повечето платформи, използвайте родния wp_is_mobile () функция. Той ще ви позволи да разграничите посетителите на мобилни и настолни компютри, така че можете да опростите интерфейса за първите, за да избегнете проблеми.

9. Заредете само необходимите файлове

Тези дни хората могат да имат достъп до мрежата от голям набор от мобилни устройства, така че неизбежно някои от тези устройства ще бъдат много остарели и няма да могат да поддържат съвременни уеб функции. Поради това винаги трябва да проверявате коя библиотека или модул е ​​необходима за изпълнение на дадена функционалност.

Един от най-добрите начини за това е чрез решение като Modernizr. Накратко, това е библиотека на JavaScript, която открива HTML5 и CSS3 функции в браузъра на потребителя. Тя ви позволява да пишете условен код въз основа на това дали дадена функция е включена в браузъра по подразбиране или не. След това, ако има нужда от това, необходимите библиотеки могат да бъдат импортирани.

Modernizr

Но Modernizr няма да бъде решение за всичко. Ето някои други насоки, които си струва да имате предвид:

  • Като общо правило, не забравяйте да не импортирате библиотеки, ако те не са абсолютно важни за функционалността на темата. Колкото повече библиотеки и външни скриптове има, толкова повече време ще отнеме крайният сайт за зареждане (особено на мобилни устройства).
  • Винаги се опитвайте да зареждате JavaScript файлове в края на HTML структурата, а не в началото.
  • Опитвам се да минимизирайте броя на DOM елементите използва вашата HTML структура.
  • Заредете CSS файлове и JavaScript за всяка страница поотделно. Например, ако имате CSS файл, който се изисква само на една конкретна страница, използвайте функцията is_page () вътре в условно изречение и въведете стила само на тази страница.

10. Извършвайте тестове за скорост на тестов сървър

Наличието на локален тестов сървър ще бъде достатъчно добро в началните етапи на развитие, но бързо ще трябва да въведете по-разширена настройка за тестване.

Факт е, че никога няма да знаете със сигурност колко е оптимизирана темата ви, докато не я инсталирате на шепа тестови среди и не видите как се представя в реалния живот.

Въпреки че все още поддържате ниските разходи, можете да направите това, като инсталирате темата си на няколко евтини споделени хостинг акаунта (тъй като повечето крайни потребители вероятно ще ги използват). След това можете да стартирате различни тестове, като използвате следните инструменти:

  • PageSpeed ​​Insights. Инструмент, създаден от Google. Той ще ви даде добри данни както за вашето мобилно, така и за настолно изпълнение, както и някои съвети как да подобрите нещата.
  • Тест за скорост на уебсайта Pingdom. Този инструмент ще ви даде пълна разбивка за това колко време отнема да се зареди всеки отделен скрипт / файл, които вашият сайт изисква.
  • Ghostlab. Много удобен инструмент за тестване на синхронизиран браузър за уеб и мобилни устройства едновременно.
  • Мобилно тестване на производителността от Mobitest. Позволява ви да тествате сайта си на действителни мобилни устройства, а не само на обща, емулирана мобилна среда.
  • BrowserStack. Предоставя незабавен достъп до всяка версия на всеки популярен браузър за мобилни устройства и настолни компютри. С този инструмент не е нужно да се чудите как ще изглежда вашата тема в остарял браузър, можете да генерирате екранна снимка само с няколко кликвания.

Скорост на страниците

Това обобщава нашето 10 стъпково ръководство за изграждане на първа мобилна тема, ориентирана към производителността на WordPress. Надявам се, че ще получите няколко готини идеи от това и че ще ви помогне да превърнете следващата си тема в истинско чудовище за изпълнение!

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